*ngForまたはCommonModuleのインポート忘れによるエラーの解決

エラーメッセージが表示される場合

Angularで以下のエラーが発生した場合:

The *ngFor directive was used in the template, but neither the NgFor directive nor the CommonModule was imported.

これはAngular 17以降のスタンドアロンコンポーネントを使用する環境で*ngForディレクティブを利用する際、必要なモジュールのインポートが不足していることを示します。

エラー発生の条件

このエラーが表示される典型的なシナリオ:

• Angular 17以上でスタンドアロンコンポーネントを使用している（デフォルト設定）
• テンプレート内で*ngForディレクティブを利用している
• コンポーネントにNgForディレクティブまたはCommonModuleがインポートされていない

<!-- 以下のようなテンプレートでエラーが発生 -->
<ul>
    <li *ngFor="let c of contacts">
        {{c.id}} - {{c.name}}
    </li>
</ul>

---

解決方法 1: NgForの直接インポート

スタンドアロンコンポーネントでは、使用するディレクティブを直接インポートする必要があります。

TypeScriptファイルでの修正手順:

import { Component } from '@angular/core';
import { NgFor } from '@angular/common'; // NgForを明示的にインポート

@Component({
  selector: 'app-contacts',
  standalone: true,
  imports: [NgFor], // インポート配列に追加
  templateUrl: './contacts.component.html',
  styleUrl: './contacts.component.scss'
})
export class ContactsComponent {
  contacts = [
    { id: 1, name: '田中 太郎' },
    { id: 2, name: '佐藤 花子' }
  ];
}

複数ディレクティブを使用する場合

*ngIfなど他のビルトインディレクティブも使用する場合は、代わりにCommonModule全体をインポートすると効率的です:

import { CommonModule } from '@angular/common';

@Component({
  standalone: true,
  imports: [CommonModule], // 全汎用ディレクティブを一括インポート
  // ...
})

---

解決方法 2: 新しい制御フロー構文への移行

Angular 17以降では、パフォーマンスと型安全性が向上した新しい制御フロー構文が推奨されています。

<ul>
  @for (c of contacts; track c.id) {
    <li>{{c.id}} - {{c.name}}</li>
  }
</ul>

新しい構文の主な利点

1. trackによる最適化：要素の一意な識別子を明示（例：track c.id）
2. ランタイムパフォーマンス向上：従来の*ngForより処理が効率化
3. 型サポートの強化：TypeScriptの型チェックがテンプレート内で機能

マイグレーション時の注意

既存プロジェクトの場合は、Angular CLIで自動変換コマンドが利用可能:

ng generate @angular/core:control-flow

ただし、複雑なテンプレート構造では手動確認が推奨されます。

---

根本原因と予防策

エラーの本質的原因:

予防のベストプラクティス:

1. Angular CLIの厳格モードを活用

   ng new --strict

2. IDE拡張機能の利用（開発中に未インポートディレクティブを検知）
3. 新規コンポーネント作成時は、使用するディレクティブをインポート配列に確実に追加

---

推奨解決方法

1. 新規プロジェクト開発時
   → 新しい制御フロー構文（@for）を積極採用
   パフォーマンス・型安全性・可読性の改善が得られる

2. 既存プロジェクトの改修時
   → CommonModuleのインポートで即時解決
   既存コード構造を大きく変更せず対応可能

どちらの方法を選択する場合も、開発環境で厳密な型チェックを有効にし、類似エラーの早期検知を実現しましょう。