Angular v19での「Component is standalone」エラーの解決方法

問題：NgModule内でのスタンドアロンコンポーネント宣言エラー

Angular v18からv19にアップデート後、次のエラーのいずれかが発生する場合があります：

Component AppComponent is standalone, and cannot be declared in an NgModule

または

'imports' is only valid on a component that is standalone.

エラーの根本原因:
Angular v19で、コンポーネントのstandaloneプロパティのデフォルト値がfalseからtrueに変更されました。従来のNgModuleアーキテクチャを使用する場合、NgModuleに登録するコンポーネントに明示的にstandalone: falseを設定していないと、この互換性エラーが発生します。

---

解決策1：コンポーネントの設定を明示的に更新（推奨）

1. 非スタンドアロンコンポーネントにstandalone: falseを追加
2. importsプロパティが誤って残っていないか確認

app.component.ts:

@Component({
  standalone: false, // 明示的に宣言
  // imports: [CommonModule], // ← NgModule内のコンポーネントでは不要（削除）
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {}

app.module.ts:

@NgModule({
  declarations: [AppComponent], // 従来通り宣言可能に
  bootstrap: [AppComponent]
})
export class AppModule {}

解決策2：自動マイグレーションの実行

ng updateコマンドで公式マイグレーションツールを使用：

ng update @angular/core@19 @angular/cli@19

動作原理

このコマンドはプロジェクト内の全コンポーネントをスキャンし：

1. NgModuleに登録されているコンポーネントにstandalone: falseを付加
2. スタンドアロンコンポーネントのimportsを有効化
3. 非互換のプロパティを自動修正

解決策3：バッチ処理で一括修正（大規模プロジェクト向け）

以下のスクリプトで*.component.tsを一括修正：

# macOS/Linux
find ./src -name "*.component.ts" -exec sed -i '' -E 's/@Component\(\{/@Component({\n    standalone: false,/g' {} +
find ./src -name "*.component.ts" -exec sed -i '' -E '/standalone: false,/,/imports:/d' {} +

注意事項

1. 実行前のバックアップ必須
2. 各ファイル修正後の手動確認を推奨
3. Windowsの場合はエディタで正規表現置換を実施

---

背景：なぜAngularはこの変更を導入したのか

Angularチームが公式ブログで説明する方針：

• 長期的なモジュールシステムの方向性としてスタンドアロンをデフォルト化
• v18から「プロジェクト新規生成時のstandalone: trueデフォルト化」の延長線
• 段階的移行のためにデフォルト値をバージョン19で逆転

設計思想の比較

パターン	ユースケース	利点
スタンドアロン	新規プロジェクト・シンプルな構成	依存関係が明示的・モジュール不要
NgModule	大規模アプリ・既存プロジェクト	コンポーネントグループ管理・階層化が容易

---

ベストプラクティス

ケース別推奨アプローチ

アップデートチェックリスト

1. 公式移行ガイドの確認
2. テストプロジェクトでng updateの動作検証
3. メインコードのバックアップ
4. エラーの段階的修正（AppComponentから順に対応）

# エラー箇所の特定
ng build --force
# 修正後に再ビルド検証
ng serve

---

結論

Angular v19の変更は移行期における一時的な課題ですが、公式ツールを使い次の手順で対応可能です：

1. ng updateで自動修正を試行
2. エラー発生コンポーネントにstandalone: falseを明示追加
3. NgModule不要のスタンドアロン移行を検討（長期戦略）

アップデートに伴う詳細情報はAngular公式Update Guideで随時公開されています。