jhipster angular2 lazyload 权限国际化整体总结

首先：要修改web打包的懒加载loader：

\webpack\webpack.common.js

修改内容如下：

 module: {rules: [{ test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' },{test: /\.ts$/,loaders: ['angular2-template-loader','awesome-typescript-loader', 'angular-router-loader'(增加）],exclude: ['node_modules/generator-jhipster']},

如果不配置就会报这样的错误：

Uncaught (in promise): Error: Cannot find module '/xxx/xxx.module' 

创建一个路由文件：

\src\main\webapp\app\lazy.route.ts

使用loadChildren 进行懒加载：

import { Route } from '@angular/router';import { NavbarComponent } from './layouts';export const adminRoute: Route = {path: 'admin',loadChildren:'./admin/admin.module'这里做出说明带#的提取方式和不带#号的方式可以并存，看被引用模块是否有default关键字
};export const entityRoute: Route = {path: 'entity',loadChildren:'./entities/entity.module'
};
export const accountModule: Route = {path: 'account',loadChildren:'./account/account.module'
};
export const homeRoute: Route = {path: 'home',loadChildren:'./home/home.module'
};

 给上文做个例子：

import { Route } from '@angular/router';import { NavbarComponent } from './layouts';export const adminRoute: Route = {path: 'admin',loadChildren:'./admin/admin.module'
};export const entityRoute: Route = {path: 'entity',loadChildren:'./entities/entity.module'
};
export const accountModule: Route = {path: 'account', loadChildren:'./account/account.module#TestGateAccountModule'
};
export const homeRoute: Route = {path: 'home',loadChildren:'./home/home.module'
};

 对应的模块生命中的变化：

src\main\webapp\app\account\account.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';import { TestGateSharedModule } from '../shared';import {Register,Activate,Password,PasswordResetInit,PasswordResetFinish,PasswordStrengthBarComponent,RegisterComponent,ActivateComponent,PasswordComponent,PasswordResetInitComponent,PasswordResetFinishComponent,SettingsComponent,accountState
} from './';
import {customHttpProvider} from "../blocks/interceptor/http.provider";@NgModule({imports: [TestGateSharedModule,RouterModule.forChild(accountState)],declarations: [ActivateComponent,RegisterComponent,PasswordComponent,PasswordStrengthBarComponent,PasswordResetInitComponent,PasswordResetFinishComponent,SettingsComponent],providers: [Register,Activate,Password,PasswordResetInit,customHttpProvider(),PasswordResetFinish],schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class TestGateAccountModule {} // 如果使用 default关键字，就不用‘#’来制定模块名称了 

 但如果你两种方式用混淆的话你就会收到这样的错误：

ERROR Error: Uncaught (in promise): Error: No NgModule metadata found for 'undefined'.(…)

如此这般，懒加载就结束了.

補充：上一版忘記點東西

所有子模塊的
@NgModule({imports: [BrowserModule,LayoutRoutingModule,Ng2Webstorage.forRoot({ prefix: 'jhi', separator: '-'}),RouterModule.forRoot(LAZY_ROUTES, { useHash: true }),RcdisGateSharedModule,RcdisGateHomeModule// ,// RcdisGateAccountModule],
都要改成：
RouterModule.forChild(LAZY_ROUTES),

但懒加载成功了，程序页面也加载了，但是数据不显示，国际化不能加载还得继续：

第一步解决401数据访问权限错误： jwt 拦截器不能拦截懒加载出来的模块

jwt的http拦截模块：

\src\main\webapp\app\blocks\interceptor

经读代码分析，这个模块需要被手动加载，所以：

来到想要做懒加载的模块定义文件：

\src\main\webapp\app\admin\admin.module.ts（本例）

import {customHttpProvider} from "../blocks/interceptor/http.provider";
providers: [……customHttpProvider(),……],

 这样程序就工作了，数据加载出来了。

下一步解决国际化加载的问题：

跟上一个问题起因差不多，如果在默认不懒加载的情况下，他是不需要自己去调用国际化服务的，跟着做顺风车就行了，但是自己出来单干（懒加载）什么事情就都得自己干了（调用）

src\main\webapp\app\admin\audits\audits.component.ts（本例）

    constructor(……private languageHelper: JhiLanguageHelper,private languageService: JhiLanguageService,……) {
……this.languageService.setLocations(['all']);
……}

 现在说国际化的问题：

这样解决似乎是太琐碎了，要去每个component里去加，但整个模块不管哪个component运行过一次，就不需要再运行第二次了，但还得在每个component里都要写……

这个文件的全部代码如下：

import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';
import {ParseLinks, JhiLanguageService} from 'ng-jhipster';import { Audit } from './audit.model';
import { AuditsService } from './audits.service';
import { ITEMS_PER_PAGE } from '../../shared';
import { PaginationConfig } from '../../blocks/config/uib-pagination.config';
import {JhiLanguageHelper} from "../../shared/language/language.helper";@Component({selector: 'jhi-audit',templateUrl: './audits.component.html'
})
export class AuditsComponent implements OnInit {audits: Audit[];fromDate: string;itemsPerPage: any;links: any;page: number;orderProp: string;reverse: boolean;toDate: string;totalItems: number;constructor(private auditsService: AuditsService,private parseLinks: ParseLinks,private paginationConfig: PaginationConfig,private languageHelper: JhiLanguageHelper,private languageService: JhiLanguageService,private datePipe: DatePipe) {this.itemsPerPage = ITEMS_PER_PAGE;this.page = 1;this.reverse = false;this.orderProp = 'timestamp';this.languageService.setLocations(['all']);this.languageService.addLocation('home');this.languageService.changeLanguage("zh-cn");this.languageService.init();this.languageService.reload();alert(JSON.stringify(this.languageService.getCurrent()))}getAudits() {return this.sortAudits(this.audits);}loadPage(page: number) {this.page = page;this.onChangeDate();}ngOnInit() {this.today();this.previousMonth();this.onChangeDate();this.languageHelper.getAll().then((languages) => {alert(languages);});this.languageHelper.updateTitle()}onChangeDate() {this.auditsService.query({page: this.page - 1, size: this.itemsPerPage,fromDate: this.fromDate, toDate: this.toDate}).subscribe((res) => {this.audits = res.json();this.links = this.parseLinks.parse(res.headers.get('link'));this.totalItems = + res.headers.get('X-Total-Count');});}previousMonth() {const dateFormat = 'yyyy-MM-dd';let fromDate: Date = new Date();if (fromDate.getMonth() === 0) {fromDate = new Date(fromDate.getFullYear() - 1, 11, fromDate.getDate());} else {fromDate = new Date(fromDate.getFullYear(), fromDate.getMonth() - 1, fromDate.getDate());}this.fromDate = this.datePipe.transform(fromDate, dateFormat);}today() {const dateFormat = 'yyyy-MM-dd';// Today + 1 day - needed if the current day must be includedconst today: Date = new Date();today.setDate(today.getDate() + 1);const date = new Date(today.getFullYear(), today.getMonth(), today.getDate());this.toDate = this.datePipe.transform(date, dateFormat);}private sortAudits(audits: Audit[]) {audits = audits.slice(0).sort((a, b) => {if (a[this.orderProp] < b[this.orderProp]) {return -1;} else if ([b[this.orderProp] < a[this.orderProp]]) {return 1;} else {return 0;}});return this.reverse ? audits.reverse() : audits;}
}

 源码我简单介绍一下

现在懒加载的国际化入口，我没都做，只做了两个地方：分别是审计和设置，其他模块就自动国际化了，但是你直接进别的模块是不行的。ok处女作

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！