Angularでルーティングを含むモジュールを生成する方法


  1. ターミナルまたはコマンドプロンプトを開き、Angularプロジェクトのルートディレクトリに移動します。

  2. ルーティングを含む新しいモジュールを生成するためのAngular CLIコマンドを実行します。以下のコマンドを入力して実行してください。

    ng generate module モジュール名 --routing

    例えば、"products"という名前のモジュールを生成する場合は、以下のようになります。

    ng generate module products --routing

    上記のコマンドを実行すると、新しいモジュール用のフォルダとファイルが自動的に生成されます。

  3. モジュールが正しく生成されたら、生成されたモジュールファイル(例: 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 { }
  4. ルーティング機能を追加するために、生成されたモジュールファイル内でルーティング設定を定義します。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 }
    ];
  5. 最後に、生成されたモジュールを他のモジュールやコンポーネントで使用するために、必要な箇所でProductsModuleをインポートします。

これで、Angularでルーティングを含むモジュールを生成する方法がわかりました。必要に応じて、生成されたモジュールやルート定義をカスタマイズしてください。