Angular：NgModule とスタンドアローンコンポーネントの違い

1. はじめに

Angular では長年、NgModule を単位としてアプリケーションを構成してきました。しかし Angular v14 でスタンドアローンコンポーネントが導入され、公式ドキュメントでも新規開発ではスタンドアローンが推奨されています。Angular 19 以降ではコンポーネントがデフォルトでスタンドアローンになります。

2. 結論（概要）

✔ スタンドアローンコンポーネント

コンポーネント自身が依存関係を完結させる仕組み。

• standalone: true を指定
• imports 配列で必要な依存を自己完結
• 他の場所から直接 import 可能

✔ NgModule

複数コンポーネントをまとめるコンテナ。

• declarations / imports / providers / exports を管理
• アプリを論理単位で構造化する

3. NgModule の詳細

役割

• declarations：属するコンポーネントを定義
• imports：依存モジュールの取り込み
• providers：サービス提供範囲を制御
• exports：外部公開する要素を指定

コード例

@NgModule({
  declarations: [HomeComponent],
  imports: [CommonModule],
  exports: [HomeComponent]
})
export class HomeModule {}

4. スタンドアローンコンポーネントの詳細

役割

• NgModule に属さず、単体で利用できる
• imports で必要な依存関係を自己解決

コード例

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './home.component.html'
})
export class HomeComponent {}

5. Routing の違い

NgModule の場合

{
  path: 'home',
  loadChildren: () =>
    import('./home/home.module').then(m => m.HomeModule)
}

スタンドアローンの場合

{
  path: 'home',
  loadComponent: () =>
    import('./home/home.component').then(c => c.HomeComponent)
}

6. スタンドアローンのメリット

• 依存がコンポーネント単位で完結
• 再利用性が高い
• 設定漏れ・モジュール宣言エラーが減る
• 学習コストが低い

7. デメリットと注意点

• imports が分散しがち → Barrel（index.ts）で集約すると良い
• 大規模開発ではガイドラインが必要

8. 実務での使い分け

新規・中小規模

→ スタンドアローン中心で問題なし

既存大規模（モジュール中心）

→ 新規画面からスタンドアローンへ段階的移行が推奨

ライブラリ開発

→ スタンドアローン中心へ移行が進んでいるが、既存資産は NgModule 併存も多い

9. 参考にした Web サイト一覧

• Angular 公式ドキュメント（Standalone Components / NgModules / Routing / Migration Guide）
• Angular University：Standalone Components ガイド
• Telerik Blog：Standalone と Modules のハイブリッド運用
• Infragistics Blog：スタンドアロンコンポーネント徹底解説
• Medium：Standalone Components 系記事
• Bacancy：Angular Standalone Components 解説
• dev.to：Standalone への移行ガイド