NgModuleとは何ですか?

Question

NgModuleとは何ですか?

Accepted Answer

**NgModule**は`@NgModule`デコレータを付与されたクラスであり、関連するコンポーネント、ディレクティブ、パイプ、サービスを統一されたブロックにグループ化して、Angularがそれらをどのようにコンパイルして配線するかを指示します。(注記: 最新のAngularは**スタンドアロンコンポーネント**をNgModuleより優先する傾向が強まっていますが、NgModuleの理解は依然として既存のほとんどのコードベースで必須です。)

## NgModuleの構造

```ts
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

@NgModule({
  declarations: [UserListComponent, UserCardComponent], // components/directives/pipes THIS module owns
  imports: [CommonModule, FormsModule],                 // other modules whose exports we need
  exports: [UserListComponent],                          // what we make available to importers
  providers: [UserService],                              // services (DI) provided by this module
})
export class UsersModule {}
```

## 4つのキー配列

```text
declarations → components, directives, and pipes that BELONG to this module
imports      → other NgModules whose exported features this module needs
exports      → the subset of declarations/modules made available to importers
providers    → services registered for dependency injection
```

コンポーネントは**1つの**モジュールでのみ宣言でき、そのモジュールのテンプレートで使用可能にするために宣言されている(またはスタンドアロンとしてインポートされている)必要があります。

## ルートモジュール

```ts
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  bootstrap: [AppComponent], // the root component to launch
})
export class AppModule {}
```

すべての(スタンドアロンでない)アプリは、開始コンポーネントを指名する`bootstrap`配列を持つルート`AppModule`を持ちます。

## フィーチャーモジュールと組織

```text
AppModule (root) → imports → UsersModule, AdminModule, SharedModule
```

アプリは**フィーチャーモジュール**(ドメイン領域ごとに1つ)と**共有モジュール**(共通のコンポーネント/パイプ)に編成され、コードベースをモジュール化し、フィーチャーごとのレイジーローディングを有効にします。

## スタンドアロンへのシフト

```ts
@Component({ standalone: true, imports: [CommonModule], ... }) // no NgModule needed
```

最新のAngularでは、コンポーネントを**スタンドアロン**にすることができます。つまり、依存関係を直接宣言することで、NgModuleのボイラープレートを削減または排除できます。

## なぜ重要なのか

NgModuleはAngularの従来の組織化および依存関係配線メカニズムです。`declarations`/`imports`/`exports`/`providers`を理解することは、大多数の既存Angularアプリをナビゲートし、レイジーローディングを理解するために必要です。

新しいコードはスタンドアロンコンポーネントへと傾いていますが、NgModuleの知識は実世界のAngular作業において依然として不可欠です。