迷ったらコレ！Angular RouterのRouterModule.forRoot(ROUTES)とRouterModule.forChild(ROUTES)を使い分けるためのヒント

2024-04-02

RouterModule.forRoot(ROUTES)とRouterModule.forChild(ROUTES)の違い

概要

メソッド	役割	使用場所
`RouterModule.forRoot(ROUTES)`	アプリ全体のルーティング設定を行う	AppModule
`RouterModule.forChild(ROUTES)`	特定のモジュールの内部ルーティング設定を行う	子モジュール

詳細

RouterModule.forRoot(ROUTES)

アプリ全体のルーティング設定を行います。
アプリ起動時に一度だけ呼び出されます。
以下の機能を提供します。
- ルーティング用のサービスであるRouterの提供
- アプリ全体のルート設定
- ルーティング用のディレクティブの提供 (例: <router-outlet>)

RouterModule.forChild(ROUTES)

特定のモジュールの内部ルーティング設定を行います。
それぞれのモジュールで必要に応じて呼び出されます。

ポイント:

forRootはアプリ全体で1回だけ、forChildは各モジュールで必要に応じて呼び出す。
forRootはRouterサービスを提供するが、forChildは提供しない。

例

// AppModule

import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeModule } from './home/home.module';

const ROUTES = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomeModule' }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot(ROUTES),
    HomeModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

// HomeModule

import { RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';

const ROUTES = [
  { path: '', component: HomeComponent }
];

@NgModule({
  declarations: [
    HomeComponent
  ],
  imports: [
    RouterModule.forChild(ROUTES)
  ]
})
export class HomeModule { }

上記の例では、AppModuleでRouterModule.forRoot(ROUTES)を使ってアプリ全体のルーティング設定を行い、HomeModuleでRouterModule.forChild(ROUTES)を使ってHomeModule内でのルーティング設定を行っています。

まとめ

RouterModule.forRoot(ROUTES)とRouterModule.forChild(ROUTES)は、役割が異なる2つのメソッドです。それぞれの役割を理解し、適切な使い分けが重要です。

基本的なルーティング設定

// AppModule

import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeModule } from './home/home.module';

const ROUTES = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomeModule' }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot(ROUTES),
    HomeModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

// HomeModule

import { RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';

const ROUTES = [
  { path: '', component: HomeComponent }
];

@NgModule({
  declarations: [
    HomeComponent
  ],
  imports: [
    RouterModule.forChild(ROUTES)
  ]
})
export class HomeModule { }

このコードは、上記の解説で示した基本的なルーティング設定の例です。

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

// AppModule

import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeModule } from './home/home.module';
import { AboutModule } from './about/about.module';

const ROUTES = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomeModule' },
  { path: 'about', loadChildren: './about/about.module#AboutModule' }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot(ROUTES),
    HomeModule,
    AboutModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

// HomeModule

import { RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';

const ROUTES = [
  { path: '', component: HomeComponent },
  { path: 'detail/:id', component: DetailComponent }
];

@NgModule({
  declarations: [
    HomeComponent,
    DetailComponent
  ],
  imports: [
    RouterModule.forChild(ROUTES)
  ]
})
export class HomeModule { }

// AboutModule

import { RouterModule } from '@angular/router';
import { AboutComponent } from './about.component';

const ROUTES = [
  { path: '', component: AboutComponent }
];

@NgModule({
  declarations: [
    AboutComponent
  ],
  imports: [
    RouterModule.forChild(ROUTES)
  ]
})
export class AboutModule { }

このコードは、複数のモジュールでルーティング設定を行う例です。

ネストされたルーティング

// AppModule

import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeModule } from './home/home.module';

const ROUTES = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomeModule' }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot(ROUTES),
    HomeModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

// HomeModule

import { RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { ChildModule } from './child/child.module';

const ROUTES = [
  { path: '', component: HomeComponent },
  { path: 'child', loadChildren: './child/child.module#ChildModule' }
];

@NgModule({
  declarations: [
    HomeComponent
  ],
  imports: [
    RouterModule.forChild(ROUTES),
    ChildModule
  ]
})
export class HomeModule { }

// ChildModule

import { RouterModule } from '@angular/router';
import { ChildComponent } from './child.component';

const ROUTES = [
  { path: '', component: ChildComponent }
];

@NgModule({
  declarations: [
    ChildComponent
  ],
  imports: [
    RouterModule.forChild(ROUTES