Jhipster using Angular lazy loading非同期ルーティングの実現

ドキュメントは、次のプロジェクト環境に対して、webpackを使用してangularルーティングの怠惰なロードを実現します.

Jhipster 4.x

Anguar 2~5

Jhipster 5(プロジェクト生成時にadmin moduleが非同期ルーティングを実現した構成)

.

webpack構成

に基づく

開始テキスト:

1.インストール依存

npm install angular-router-loader --save-dev

2.loaderの追加

インストールの依存をloaderに追加

// webpack.common.js 
module: {
            rules: [
                {
                    test: /\.ts$/,
                    loaders: [
                        'angular2-template-loader',
                        'awesome-typescript-loader',
                        'angular-router-loader' // loader
                    ],
                    ...

3.非同期ルーティングモジュールの作成（または改造）

ユーザーがCustomerページにルーティングされるまで、Customerモジュールの作成Customerモジュールはすぐにロードされません.このモジュールには独自のコンポーネントとルーティング構成があり、ロードのエントリはcustomerです.module.ts、コードは以下の通りです.

// customer.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CustomerRoutingModule } from './customer-routing.module';
import { CustomerComponent } from './customer.component';


@NgModule({
  imports: [
    CommonModule,
    CustomerRoutingModule
  ],
  declarations: [CustomerComponent]
})
export class CustomerModule { }

// customer-routing.module.ts
/*
* customer.component.ts   customer.component.html     ng    
*/
import { CustomerComponent } from './customer.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    component: CustomerComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CustomerRoutingModule { }

4.Angularルーティングの構成

設定ルーティングファイルJhipsterプロジェクトはlayout-routingである可能性がある.module.ts(ng生成はapp-routing.module.tsである可能性がある)

ルーティング構成シナリオ1

import { LocalComponent } from './local/local.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'customer',
    loadChildren: '../customer/customer.module#CustomerModule' //         ， :      
  },
  {
    path: 'local', //      
    component: LocalComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

ルーティング構成シナリオ2

私のプロジェクトでは、このような方法で非同期ルーティングの構成を行ったことがあります.データ要求イベントの問題がある可能性があります.プロジェクトで遭遇するシーンは、モジュールの改造が完了した後、正常に非同期でルーティングをロードできるが、業務が複雑であるため、業ページをロードする際に一部のリクエストが繰り返される(すなわち、トップページでAが要求され、非同期ルーティングがロードされた後に再びAが要求される)が、この部分のリクエストは再実行されない.従って、非同期ルーティング構成は、次の別のスキームを用いて行われる.

import { LocalComponent } from './local/local.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
     //         ， :      
    path: 'customer', loadChildren: () => new Promise((resolve) => {
            (require as any).ensure([], (require) => {
                resolve(require('../customer/customer.module').CustomerModule);
            });
        })
  },
  {
    path: 'local', //      
    component: LocalComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

5.moduleの構成

Angular appを構成する.module.ts

import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LocalComponent } from './local/local.component';

@NgModule({
  declarations: [
    AppComponent,
    LocalComponent //        
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    AppRoutingModule //       
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

6.構築および実行

yarn startまたはnpm run start実行後、モジュールファイルがコンパイルされ、非同期ルーティングにジャンプすると、ネットワークリクエストが表示され、ジャンプルーティングが表示されると、対応するjsファイルがロードされます.以下の図