Angular 19で発生する「'imports'はスタンドアロンコンポーネントでのみ有効」エラーの解決方法

Angular 18からAngular 19にアップデートした後、コンポーネントのimportsプロパティで以下のエラーが発生することはよくある問題です：

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

このエラーは、Angular 19の主要な変更点であるスタンドアロンコンポーネントのデフォルト化に関連しています。以下に効果的な解決策を優先順位で解説します。

---

🔧 即効性のある解決策（推奨）

1. VS Codeの再起動とキャッシュクリア（最優先）

Angular Language Serviceのキャッシュが古いまま残っているとエラーが発生します。次の手順を実行してください：

# Angularビルドキャッシュの削除
rm -rf .angular/cache

# node_modulesとpackage-lock.jsonの再生成（必要に応じて）
rm -rf node_modules package-lock.json
npm install

その後、VS Codeを完全に再起動してください。多くの場合これで解決します。

補足

Angular CLIのキャッシュ（.angular/cache）に古いバージョン（例：Angular 18）の情報が残っていると、このエラーが発生します。クリアすることで最新の環境を読み込めます。

2. Angular Language Serviceの更新

VS Code拡張機能のバージョン不一致が原因の場合：

1. VS Codeで拡張機能タブを開く（Ctrl+Shift+X）
2. Angular Language Serviceを検索
3. 更新ボタンが表示されたら最新バージョンに更新
4. VS Codeを再起動

---

⚙️ 追加対策（上記で解決しない場合）

3. ワークスペースの整理

マルチプロジェクト環境で異なるAngularバージョンが混在していると発生します：

1. Angular 19以外のプロジェクトを一時的に閉じる
2. angular.jsonを確認し、全プロジェクトがv19を参照しているかチェック
3. 必要ならプロジェクトごとに個別のVS Codeウィンドウを開く

4. @angular/language-serverのバージョン確認

package.jsonで依存関係を直接確認（最終手段）：

// package.json
"dependencies": {
  "@angular/language-service": "19.0.0", // ← 正しいバージョンか確認
  // ...
}

バージョンが19.0.0-next.xなどになっている場合：

npm install @angular/language-service@latest

---

❗ 非推奨な回避策（注意が必要）

警告

以下の方法は一時的な回避策で、根本解決ではないため慎重に

language-service.jsを直接編集（公式では推奨されない）：

// 変更前
let isStandalone = false;

// 変更後
let isStandalone = true;

この修正はnode_modules内のファイルを変更するため、npm installを実行するたびにリセットされます。

---

💡 根本原因と予防策

• Angular 19の変更点: すべてのコンポーネントがデフォルトでスタンドアロン化され、standalone: trueの明示的宣言が不要に
• エラー発生の仕組み: 古いLanguage Serviceが「importsにはstandalone: trueが必要」と誤認識
• 予防策:
  • アップデート前に公式ガイドを確認
  • アップデート後に必ずng updateを再実行
  • VS Code拡張機能を常に最新に保つ

これら対策で「'imports' is only valid on a component that is standalone」問題は解決可能です。再起動とキャッシュクリアで90%以上のケースが解消します。