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

1. Angular CLIを使用して、新しいモジュールを生成します。ターミナルまたはコマンドプロンプトを開き、以下のコマンドを実行します。

ng generate module my-module --routing

2. 上記のコマンドを実行すると、my-moduleという名前の新しいモジュールが生成されます。--routingフラグを使用することで、ルーティング機能が自動的に有効になります。

3. 生成されたモジュール内には、ルーティング機能を設定するためのファイルと、コンポーネントを配置するためのディレクトリが含まれています。以下に、生成されたファイルとディレクトリの一部を示します。

my-module/
  ├── my-module.module.ts
  ├── my-module-routing.module.ts
  └── components/
      └── my-component.component.ts

4. my-module-routing.module.tsファイルを開き、ルーティングを設定します。以下は、簡単な例です。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyComponentComponent } from './components/my-component.component';
const routes: Routes = [
  { path: '', component: MyComponentComponent }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MyModuleRoutingModule { }

5. my-component.component.tsファイルを開き、必要なコンポーネントのコードを記述します。以下は、簡単な例です。

import { Component } from '@angular/core';
@Component({
  selector: 'app-my-component',
  template: '<h1>My Component</h1>'
})
export class MyComponentComponent { }

以上で、ルーティングとコンポーネントを含むモジュールの生成が完了しました。生成されたモジュールは、他のモジュールからインポートして使用することができます。