Angular: 事前ロードと遅延ロード


前提


ドキュメント


事前ロード


遅延ロード


複数のルーティングモジュール: アプリの規模が大きい場合

  1. AppRoutingModule: AppModuleimportsに追加
  2. フィーチャー・ルーティングモジュール: フィーチャーモジュールのimportsに追加
// フィーチャーモジュールの例
@NgModule({
  declarations: [MyComponent],
  imports: [
    CommonModule,
    MyFeatureRoutingModule, // フィーチャー・ルーティングモジュール
  ]
})
export class MyFeatureModule { }

フィーチャーモジュールのインポート場所

注意: ルーティングモジュールではなく、フィーチャーモジュールをどこでインポートするか。


AppRoutingModule

forRoot()を使う(アプリ全体で1回だけ)

@NgModule({
  imports: [RouterModule.forRoot(routes)], // forRoot()はここだけ
  exports: [RouterModule]
})
export class AppRoutingModule { }

routes配列

const routes: Routes = [
  { path: 'aaa', component: AaaComponent }, // 事前ロード
  {
    // 遅延ロード: https://example.com/lazy/ 以下への初アクセスでロード
    path: 'lazy',
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
    // そして、LazyModuleがAppModule(や子孫)に属さないこと
  },
]

loadChildren()

loadChildren: () => import('パス').then(m => m.モジュール名)

フィーチャー・ルーティングモジュール

forChild()を使う

@NgModule({
  imports: [RouterModule.forChild(routes)], // AppRoutingModule以外はforChild()
  exports: [RouterModule]
})
export class MyFeatureRoutingModule { }

routes配列

loadChildren()経由のパスは親子で結合

// 親のpathで'lazy'としたとき、
// https://example.com/lazy/xxx
const routes: Routes = [{ path: 'xxx', component: LazyXxxComponent }];

事前ロードと遅延ロードを確かめる: 作成例

# アプリ作成、AppRoutingModule付き
project=lazySample
ng generate application $project --defaults --routing

# 遅延ロード: フィーチャールーティングモジュールあり
module=lazy-xxx
ng generate module $module --project=$project --module app --route lazy

# 事前ロード: フィーチャールーティングモジュールなし
module=eager-aaa
ng generate module $module --project=$project --module app
ng generate component $module/aaa --project=$project --module $module --flat

# 事前ロード: フィーチャールーティングモジュールあり
module=eager-bbb
ng generate module $module --project=$project --module app --routing
ng generate component $module/bbb --project=$project --module $module --flat
// AppModule
  imports: [
    BrowserModule,
    AppRoutingModule,
    // LazyXxxModule, // <= ないことを確認。入れると事前ロード
    EagerAaaModule,
    EagerBbbModule
<!-- app.component.html -->
<p>LazySample</p>
<button routerLink="/aaa">EagerAaaModuleのAaaComponent</button><br>
<button routerLink="/bbb">EagerBbbModuleのBbbComponent</button><br>
<button routerLink="/lazy/xxx">LazyXxxModuleのLazyXxxComponent</button><br>
<button routerLink="/">Home</button>
<router-outlet></router-outlet>
// AppRoutingModule
const routes: Routes = [
  { path: 'aaa', component: AaaComponent }, // 事前ロードを追加
  { path: 'lazy', loadChildren: () => import('./lazy-xxx/lazy-xxx.module').then(m => m.LazyXxxModule) }
];
// LazyXxxRoutingModule
const routes: Routes = [{ path: 'xxx', component: LazyXxxComponent }];
// EagerBbbRoutingModule
const routes: Routes = [{ path: 'bbb', component: BbbComponent },];