Angular CLIでコンポーネントを作成して特定のモジュールに追加する方法

2024-04-02

Angular CLIでコンポーネントを作成して特定のモジュールに追加する方法

前提条件

Angular CLIがインストールされていること
ターミナルまたはコマンドプロンプトを使用できること

手順

ターミナルまたはコマンドプロンプトを開き、プロジェクトディレクトリに移動します。
以下のコマンドを実行して、コンポーネントを生成します。

ng generate component <component-name> --module <module-name>

<component-name> はコンポーネント名に置き換えます。
<module-name> はコンポーネントを追加したいモジュール名に置き換えます。

ng generate component MyComponent --module AppModule

このコマンドを実行すると、以下のファイルが生成されます。

<component-name>.component.ts：コンポーネントの TypeScript ファイル

生成されたファイルを開き、必要に応じて編集します。
アプリケーションを起動して、コンポーネントが正しく動作することを確認します。

詳細

--module オプションは、コンポーネントを追加するモジュールを指定します。
--flat オプションを指定すると、コンポーネント用のディレクトリを作成せずに、ファイルを現在のディレクトリに生成します。
--display-block オプションを指定すると、コンポーネントの HTML テンプレートで display: block スタイルが自動的に設定されます。

モジュールについて

Angular アプリケーションはモジュールで構成されています。モジュールは、コンポーネント、サービス、パイプなどの関連するコードをまとめるための単位です。

コンポーネントを作成する際は、どのモジュールに追加するかを指定する必要があります。一般的には、コンポーネントとその関連するコードを同じモジュールにまとめます。

補足

上記の手順は、基本的なコンポーネントを作成するためのものです。より複雑なコンポーネントを作成するには、追加のオプションや設定が必要になる場合があります。
Angular CLI は、コンポーネントの生成以外にも、様々な機能を提供しています。詳細は Angular CLI のドキュメントを参照してください。

AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyComponent } from './my-component/my-component.component';

@NgModule({
  declarations: [
    AppComponent,
    MyComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

MyComponent

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

my-component.component.html

<h1>My Component</h1>

<p>This is my component.</p>

my-component.component.css

/*
  コンポーネントのスタイルをここに記述
*/

実行

上記のコードをファイルに保存します。

ng serve

ブラウザで http://localhost:4200 を開くと、アプリケーションが表示されます。

説明

AppModule はアプリケーションのルートモジュールです。
MyComponent はシンプルなコンポーネントで、<h1> タグと <p> タグのみを持っています。

このコードを参考に、独自のコンポーネントを作成してアプリケーションに追加してみてください。

Angular CLIでコンポーネントを作成して特定のモジュールに追加する他の方法

手動でファイルを作成する

コンポーネント用のディレクトリを作成します。
コンポーネントの TypeScript ファイル、HTML テンプレートファイル、CSS スタイルファイルを作成します。
コンポーネントをモジュールの declarations 配列に追加します。

// my-component ディレクトリを作成
mkdir my-component

// my-component.component.ts ファイルを作成
// ...

// my-component.component.html ファイルを作成
// ...

// my-component.component.css ファイルを作成
// ...

// app.module.ts ファイルを編集
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyComponent } from './my-component/my-component.component';

@NgModule({
  declarations: [
    AppComponent,
    MyComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular IDEを使用すると、コンポーネントを簡単に作成してモジュールに追加することができます。

例：