[Angular]MultipleModule構成でのRouting

概要

• Angularアプリでモジュールを区切るとモジュール単位でルーティングの設定ができます
• 複数モジュール作るとそれぞれネームスペースを切って疎結合に開発していくことができます
• どのように設定するか試してみたメモです

手順

アプリの雛形作成

• まずはAngularCLIでアプリの雛形を作ります

ng new ng-multiple-module-routing-sample --routing=true --skip-tests=true --no-interactive=

• src/app配下のファイル

% tree src/app
src/app
├── app-routing.module.ts
├── app.component.css
├── app.component.html
├── app.component.ts
├── app.module.ts

• app.component.htmlの余計なコードを消しておきます

src/app/app.component.html

<router-outlet></router-outlet>

moduleの作成

• homeモジュールを作ります

ng generate module --name=home --module=app --route=home --routing --no-interactive

• src/app/homeができました

% tree src/app
src/app
├── app-routing.module.ts
├── app.component.css
├── app.component.html
├── app.component.ts
├── app.module.ts
└── home
    ├── home-routing.module.ts
    ├── home.component.css
    ├── home.component.html
    ├── home.component.ts
    └── home.module.ts

• この時点でroutingに関するファイルはsrc/app/app.routing.module.tsとsrc/app/home/home-routing.module.tsの2つできあがっています
• まずはapp.routing.module.tsを見てみます

src/app/app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    // /home/**へのアクセスはh./home/home.moduleへ飛ばされる
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
  },
];

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

• app.routing.module.tsにはhomeモジュールのルーティングが設定されています
• /homeから始まるURLにアクセスするとhomeモジュールへのアクセスと判断されhome.routing.module.tsのルールが適用されます
• home.routing.module.tsを見てみます

src/app/home/home.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';

// pathの部分は/homeの後ろの値のこと。つまり''は/homeに該当する
const routes: Routes = [{ path: '', component: HomeComponent }];

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

• path: ''へのアクセスがHomeComponentにマッピングされています
• これはすなわち、/homeにアクセスするとHomeComponentが表示されるということです
• アクセスするとhome worls!が表示されます

moduleにルーティングを追加

• homeモジュール内にページを追加してみます
• aboutコンポーネントを作成します

ng generate component --name=home/about --module=home --skipTests --no-interactive

• src/app/home/aboutができました

% tree src/app
src/app
├── app-routing.module.ts
├── app.component.css
├── app.component.html
├── app.component.ts
├── app.module.ts
└── home
    ├── about
    │   ├── about.component.css
    │   ├── about.component.html
    │   └── about.component.ts
    ├── home-routing.module.ts
    ├── home.component.css
    ├── home.component.html
    ├── home.component.ts
    └── home.module.ts

• homeモジュールのroutingにaboutコンポーネントへのマッピングを追加します

src/app/home/home.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  // /home/aboutにアクセスするとAboutComponentが表示される
  { path: 'about', component: AboutComponent },
];

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

• Aboutコンポーネントへのルーティングを追加しました
• Homeモジュール内のroutingなので/home/aboutにアクセスするとAboutコンポーネントが表示されるというわけです

• Homeモジュール内で以下のよなredirectの設定をすると/homeへのアクセスが/home/aboutへリダイレクトされるといった具合です

const routes: Routes = [
  { path: '', redirectTo: 'about', pathMatch: 'full' },
  { path: 'about', component: AboutComponent },
];

注意

• モジュール内のルーティングの設定でpath: '/about'のように/をつけてしまうとうまく動かないので気をつけてください
• これのせいでうまく動かなくてはまりました

感想

• 分割したモジュールごとにネームスペースが区切られて疎結合に開発していくことができます
• 規模が大きくなってきた場面で活きてきそうですね