-
新しいモジュールを作成する: Angular CLIを使用して、新しいモジュールを作成します。
ng generate module myModule
-
ルーティング設定を追加する: モジュール内でルーティングを設定するために、ルーティングモジュールを作成します。
ng generate module myModule-routing --flat --module=myModule
これにより、
myModule
という名前のモジュールと、myModuleRoutingModule
という名前のルーティングモジュールが作成されます。 -
ルートコンポーネントを作成する: モジュール内に表示するコンポーネントを作成します。
ng generate component myComponent --module=myModule
これにより、
myComponent
という名前のコンポーネントが作成され、モジュールに追加されます。 -
ルーティングを設定する:
myModuleRoutingModule
ファイルを編集し、ルートのパスと表示するコンポーネントを定義します。import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { myComponent } from './myComponent.component'; const routes: Routes = [ { path: '', component: myComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class myModuleRoutingModule { }
-
ルーティングモジュールをモジュールに追加する:
myModule
モジュールにルーティングモジュールをインポートします。import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { myModuleRoutingModule } from './myModule-routing.module'; import { myComponent } from './myComponent.component'; @NgModule({ declarations: [myComponent], imports: [ CommonModule, myModuleRoutingModule ] }) export class myModule { }
これで、Angularでルーティングを備えたモジュールが作成されました。このモジュールを他のモジュールにインポートすることで、ルーティング機能を利用することができます。