Angularを使用したルーティングを備えたモジュールの作成方法


  1. 新しいモジュールを作成する: Angular CLIを使用して、新しいモジュールを作成します。

    ng generate module myModule
  2. ルーティング設定を追加する: モジュール内でルーティングを設定するために、ルーティングモジュールを作成します。

    ng generate module myModule-routing --flat --module=myModule

    これにより、myModuleという名前のモジュールと、myModuleRoutingModuleという名前のルーティングモジュールが作成されます。

  3. ルートコンポーネントを作成する: モジュール内に表示するコンポーネントを作成します。

    ng generate component myComponent --module=myModule

    これにより、myComponentという名前のコンポーネントが作成され、モジュールに追加されます。

  4. ルーティングを設定する: 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 { }
  5. ルーティングモジュールをモジュールに追加する: 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でルーティングを備えたモジュールが作成されました。このモジュールを他のモジュールにインポートすることで、ルーティング機能を利用することができます。