即時ロードと遅延ロード


前提


即時ロード


遅延ロード


複数のルーティングモジュール

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

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

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


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 },];

遅延ロードになっていることの確認