Angularルーティングを備えたモジュールの生成方法


  1. Angularプロジェクトを作成します。ng newコマンドを使用して新しいプロジェクトを作成します。

  2. モジュールを生成します。ng generate moduleコマンドを使用して新しいモジュールを生成します。たとえば、以下のようにコマンドを入力します。

ng generate module my-module --routing

--routingフラグを使用することで、ルーティング機能を有効にしたモジュールが生成されます。

  1. ルーティングの設定を行います。生成されたモジュール内のルーティングファイル(通常はmy-module-routing.module.ts)を開き、必要なルートを定義します。たとえば、以下のようなコードを追加します。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MyModuleRoutingModule { }

上記の例では、''パス(ルートパス)にHomeComponentを関連付け、'about'パスにAboutComponentを関連付けています。

  1. モジュールを他のコンポーネントで使用します。生成したモジュールを他のコンポーネントで使用するには、imports配列にモジュールを追加します。たとえば、app.module.tsimports配列に以下のように追加します。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyModule } from './my-module/my-module.module'; // 生成したモジュールをインポート
import { AppComponent } from './app.component';
@NgModule({
  imports: [BrowserModule, MyModule], // モジュールを追加
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

これにより、他のコンポーネントで生成したモジュールの機能を利用することができます。

以上が、Angularでルーティングを備えたモジュールを生成する方法です。この方法に従うことで、簡単にルーティング機能を実装したモジュールを作成することができます。