Angular モジュールの lazy loading (遅延読み込み)

Angular ではルーティング時に呼び出すモジュールを、アプリケーション起動時ではなく、初回ルーティング時に読み込む仕組み(lazy loading, 遅延読み込み)が提供されています。

今回は lazy loading の設定方法を紹介します。

アプリケーション作成

まずはアプリケーションを作成します。Angular CLI を利用すると、ルーティング機能を追加するか聞かれるので、y(es) とします。

Terminal window
ng new routing-test
? Would you like to add Angular routing? (y/N) y

そうすると、ルーティング機能が追加されたアプリケーションが出来上がります。app-routing.module.ts があること、app.module.ts に AppRoutingModule がインポートされていることを確認することができます。

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


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


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

モジュールとコンポーネントの追加

次に、ルーティング対象のモジュールと、そのモジュール配下にコンポーネントを作成します。

Terminal window
ng g m dashboard --routing
ng g c dashboard/list

dashboard.module.ts に ListComponent が登録されていることを確認します。

ルーティングモジュールの編集

app-routing.module.ts の routes プロパティに、次のルーティング情報を指定します。dashboard という URL (path)が呼ばれたときに、dashboard フォルダ配下の dashboard.module.ts ファイルの DashboardModule クラスを呼び出す、という指定を行っています。loadChildren に DashboardModule の参照を指定することで、lazy loading (遅延読み込み)とすることができます。

app-routing.module.ts

app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: './dashboard/dashboard.module#DashboardModule'
  }
];


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

続いて、Dashboard モジュールの表示コンポーネントの指定をします。「アプリケーションルート/dashboard」が呼び出された時に ListComponent を表示するよう指定を行っています。

dashboard-routing.module.ts

dashboard-routing.module.ts
import { ListComponent } from './list/list.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


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


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

appcomponent.html に、dashboard へのリンクを追加します。dashboard のリンクをクリックすると、 タグに、dashboard モジュールの list コンポーネントが表示されます。

app.component.html
<p>ルーティングテスト</p>
<a routerLink="">top</a>
<br>
<a routerLink="/dashboard">dashboard</a>


<router-outlet></router-outlet>

アプリケーションの実行と、lazy loading の確認

dashboard にアクセスすると、dashboard モジュールが初めて読み込まれることを確認することができます。

以上、Angular の lazy loading (遅延読み込み)の紹介でした。

💬 コメント