前回作成したコンポーネントがAppModuleに登録されているので、SharedModuleを作成してそちらに登録するように変更します。
これは後からモジュールを作成するパターンになりますが、一般的には先にモジュールを作成する方が多いため、今後使用するUserModuleも作成しておきます。
モジュールとは
Angularのモジュールは、アプリケーションの一部を構成し、関連するコンポーネント、ディレクティブ、パイプ、サービスなどをグループ化するコンテナです。モジュールはアプリケーションの機能を整理し、再利用しやすくする役割を果たします。
特に、Angularのモジュールは@NgModuleデコレータを使用して定義され、以下の主要なメタデータプロパティを持ちます：
declarations: モジュール内で使用されるコンポーネント、ディレクティブ、パイプを宣言します。imports: 他のモジュールがエクスポートしたクラスを使用できるように、このモジュールが他のモジュールに依存していることを指定します。exports: 他のモジュールで使用できるように、宣言されたクラスの一部をエクスポートします。providers: アプリケーション全体で使用できるサービスのプロバイダーを登録します。bootstrap: アプリケーションの起点となるルートコンポーネントを指定します。
モジュールを作成する
モジュールを作成するにはng generate moduleコマンドを使用します。
--dry-runオプション
モジュールを作成する前に--dry-runオプションについて確認しておきましょう。
--dry-runオプションはコマンドを実行せずに、コマンドで作成・更新される内容を確認できるオプションです。前回のようにコンポーネントを指定する際に、appから指定すればいいのかappの下から指定すればいいのか迷うことがあると思います。このような場合には、--dry-runオプションでどんなファイルが作成されてどんなファイルが更新されるかを確認するとよいでしょう。
$ ng generate module shared --dry-run
CREATE src/app/shared/shared.module.ts (192 bytes)
NOTE: The "--dry-run" option means no changes were made.実際に実行してみると、作成されるモジュールのパスと名前が確認でき、「NOTE: The “–dry-run” option means no changes were made.」と変更がなかった旨のメッセージ表示されています。
SharedModuleはルーティングを必要としない共通コンポーネント・サービス等をまとめたモジュールですので、--routingオプションなしで実行します。
では、--dry-runなしで実行しましょう。
$ ng generate module shared
CREATE src/app/shared/shared.module.ts (192 bytes)気づいたかもしれませんが、コンポーネントのときとは違ってモジュールクラスのファイルが作成された以外に更新されたファイルなどはありません。すなわち、作成したモジュールが自動的にどこかのモジュールに自動登録されることはありません。
まずはSharedModuleを修正します。まずは修正前の状態を確認しておきましょう。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [],
imports: [
CommonModule
]
})
export class SharedModule { }
前回作成したTitleComponentを追加していきます。モジュールに属するコンポーネント、ディレクティブ、パイプはdeclarationsに記載します。加えて、他のモジュールに公開するためにexportsに記載します。
修正後のモジュールが以下のようになります。
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { TitleComponent } from './components/title/title.component';
@NgModule({
declarations: [TitleComponent],
imports: [CommonModule],
exports: [TitleComponent],
})
export class SharedModule {}
次にAppModuleを修正します。これまではTitleComponentをapp.component.htmlで使用するためにAppModuleに登録していました。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TitleComponent } from './shared/components/title/title.component';
@NgModule({
declarations: [AppComponent, TitleComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
今後は、SharedModuleをインポートすることでTitleComponentを使用できるようにします。まずはdeclarationsからTitleComponentを削除し、その代わりにimportsにTitleComponentが登録されているSharedModuleを追加します。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, SharedModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
実際に動作するか確認してみましょう。http://localhost:4200/にアクセスし、これまでどおり
のように表示されれば正しく修正できています。
UserModuleを作成する
次に今後使用するUserModuleを作成します。
モジュール名は単数形か複数形か
結論からいうと、チームによって異なります。これは個人的な見解となりますが、単数形と複数形で意味が異なる単語もあるため、単数形で書くことを基本にして複数形の意味を使いたい場合は複数形を使用する、というのがよいのではないかと考えています。
モジュールを作成する
ではUserModuleを作成します。今回はルーティングを伴うモジュールとするため、--routingオプションを使用します。また、今回は省略形であるng g mコマンドで実行します。--dry-runオプションをつけて確認しましょう。
$ ng g m user --routing --dry-run
CREATE src/app/user/user-routing.module.ts (247 bytes)
CREATE src/app/user/user.module.ts (272 bytes)
NOTE: The "--dry-run" option means no changes were made.appディレクトリの下にuserディレクトリが作成され、user.module.tsが作成されます。加えて、ルーティングモジュールであるuser-routing.module.tsも作成されることが確認できます。
期待したとおりに作成されることを確認できたので、--dry-runオプションを外して実行します。
$ ng g m user --routing
CREATE src/app/user/user-routing.module.ts (247 bytes)
CREATE src/app/user/user.module.ts (272 bytes)UserModuleは現時点ではコンポーネントなど何も属していないのでこのままにしておきます。とりあえず作成したコードだけ確認しておきます。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserRoutingModule } from './user-routing.module';
@NgModule({
declarations: [],
imports: [
CommonModule,
UserRoutingModule
]
})
export class UserModule { }
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UserRoutingModule { }
これまでに作成したモジュールとは異なり、user-routing.module.tsにはroutesという定数があります。使い方については今後確認していきます。
変更をコミット＆プッシュする
毎度のことですが、ここまでの変更をコミット＆プッシュします。
$ git add .
$ git commit -m 'create SharedModule and UserModule'
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
[main ed5311a] create SharedModule and UserModule
4 files changed, 33 insertions(+), 3 deletions(-)
create mode 100644 src/app/shared/shared.module.ts
create mode 100644 src/app/user/user-routing.module.ts
create mode 100644 src/app/user/user.module.ts
$ git push
Enumerating objects: 15, done.
Counting objects: 100% (15/15), done.
Delta compression using up to 10 threads
Compressing objects: 100% (10/10), done.
Writing objects: 100% (10/10), 1.12 KiB | 1.12 MiB/s, done.
Total 10 (delta 5), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (5/5), completed with 4 local objects.
To github.com:t0k0sh1/angular-tutorial.git
90cd6c9..ed5311a main -> mainまとめ
今回はSharedModuleを作成し、TitleComponentをAppModuleからSharedModuleに移しました。今後は共通コンポーネントはSharedModuleに登録していくことにします。
また、今後に備えてルーティング設定をもったUserModuleも作成しました。こちらは今後使用していきます。
次回は画面にメッセージを表示するコンポーネントの作成を通じてサービスを使ったコンポーネント間のデータの受け渡しについて見ていきます。
