-
ターミナルまたはコマンドプロンプトを開き、Angularプロジェクトのルートディレクトリに移動します。
-
ルーティングを含む新しいモジュールを生成するためのAngular CLIコマンドを実行します。以下のコマンドを入力して実行してください。
ng generate module モジュール名 --routing
例えば、"products"という名前のモジュールを生成する場合は、以下のようになります。
ng generate module products --routing
上記のコマンドを実行すると、新しいモジュール用のフォルダとファイルが自動的に生成されます。
-
モジュールが正しく生成されたら、生成されたモジュールファイル(例: products.module.ts)を編集します。ルーティング機能を追加するために、
@NgModule
デコレータのimports
プロパティにRouterModule
を追加します。import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; @NgModule({ declarations: [], imports: [ CommonModule, RouterModule ] }) export class ProductsModule { }
-
ルーティング機能を追加するために、生成されたモジュールファイル内でルーティング設定を定義します。
RouterModule.forRoot()
メソッドを使用してルートの設定を行います。import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [ // ルート定義をここに追加する ]; @NgModule({ declarations: [], imports: [ CommonModule, RouterModule.forRoot(routes) ] }) export class ProductsModule { }
例えば、"/products"というパスに対して
ProductListComponent
を表示する場合は、以下のようなルート定義を追加します。const routes: Routes = [ { path: 'products', component: ProductListComponent } ];
-
最後に、生成されたモジュールを他のモジュールやコンポーネントで使用するために、必要な箇所で
ProductsModule
をインポートします。
これで、Angularでルーティングを含むモジュールを生成する方法がわかりました。必要に応じて、生成されたモジュールやルート定義をカスタマイズしてください。