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 included
        const 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处女作

• TestGate.rar (411.8 KB)
• 下载次数: 1