Angular 14の遅延読み込みを試してみた

前回のつづき。Angular 14 で導入された、スタンドアロンコンポーネントの遅延読み込みを試してみました。

Adminコンポーネントを作成する
ルーティングの設定
1. route.ts を作成する
2. main.ts にルーティングを設定する
メニューの設定

Adminコンポーネントを作成する

メニューをクリックして遷移する先のコンポーネントを作成します。

AdminComponent を作成する

src/app/admin/admin.component.ts を作成します。

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

@Component({
  standalone: true,
  imports: [RouterModule],
  selector: 'admin',
  template: `<router-outlet></router-outlet>`,
  styles: [`h1 { font-family: Lato; }`],
})
export class AdminComponent {}

AdminHomeComponent を作成する

src/app/admin/admin-home.component.ts を作成します。これは、AdminComponent の子コンポーネントになります。

import { Component } from '@angular/core';

@Component({
  standalone: true,
  selector: 'admin-home',
  template: `<h1>AdminHome</h1>`,
  styles: [`h1 { font-family: Lato; }`],
})
export class AdminHomeComponent {}

AdminUsersComponent を作成する

同様に、src/app/admin/admin-users.component.ts を作成します。

import { Component } from '@angular/core';

@Component({
  standalone: true,
  selector: 'admin-users',
  template: `<h1>AdminUsers</h1>`,
  styles: [`h1 { font-family: Lato; }`],
})
export class AdminUsersComponent {}

ルーティングの設定

route.ts を作成する

src/app/admin/route.ts を作成し、AdminHomeComponent、AdminUsersComponent のルーティングを設定します。

import { Route } from '@angular/router';
import { AdminHomeComponent } from './admin-home.component';
import { AdminUsersComponent } from './admin-users.component';

export const ADMIN_ROUTES: Route[] = [
  { path: 'home', component: AdminHomeComponent },
  { path: 'users', component: AdminUsersComponent },
];

main.ts にルーティングを設定する

src/main.ts に、AdminComponentへのルーティングと、子コンポーネントの遅延読み込みの設定します。

import './polyfills';

import { enableProdMode, importProvidersFrom } from '@angular/core';

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router'; // 追加

const routes: Routes = [
  {
    path: 'admin',
    loadComponent: () =>
      import('./app/admin/admin.component').then((mod) => mod.AdminComponent),
    loadChildren: () =>
      import('./app/admin/routes').then((mod) => mod.ADMIN_ROUTES),
  },
]; // 追加

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(BrowserAnimationsModule, RouterModule.forRoot(routes)), // 変更
  ],
})
  .then((ref) => {
    // Ensure Angular destroys itself on hot reloads.
    if (window['ngRef']) {
      window['ngRef'].destroy();
    }
    window['ngRef'] = ref;

    // Otherwise, log the boot error
  })
  .catch((err) => console.error(err));

以下のようにすることで、スタンドアロンコンポーネントを遅延読み込みすることができます。詳しくはこちら

    loadComponent: () =>
      import('./app/admin/admin.component').then((mod) => mod.AdminComponent),

メニューの設定

src/app/app.component.html に、AdminHomeComponent、AdminUsersComponentへ遷移するメニューを設定します。

<mat-toolbar color="primary">
  <button mat-icon-button [matMenuTriggerFor]="menu">
    <mat-icon>menu</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <!-- ↓ 追加 -->
    <button mat-menu-item routerLink="admin/home">
      <mat-icon>wb_sunny</mat-icon>
      <span>home</span>
    </button>
    <button mat-menu-item routerLink="admin/users">
      <mat-icon>info</mat-icon>
      <span>users</span>
    </button>
    <!-- ↑ 追加 -->
  </mat-menu>
  ヘッダー
</mat-toolbar>
<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>
<router-outlet></router-outlet> <!--追加-->

メニューをクリックして画面を遷移することができるようになりました。