Angular 20 アプリケーションセットアップ

厳密なデフォルト設定と明確なセーフティチェック付きで、現在のディレクトリに本番環境対応の Angular 20 アプリケーションを直接作成します。

目的

厳密なデフォルト設定を使用して現在のディレクトリに本番環境対応の Angular 20 アプリケーションを直接作成し、間違ったフォルダでの危険なスキャフォルディングを防止します。

このスキルを使用する場合

• ユーザーが Angular アプリケーションの作成、初期化、またはスキャフォルディングをリクエストした場合。
• ユーザーが厳密な TypeScript とミニマルなデフォルト設定の Angular 20 を希望する場合。
• ユーザーが現在のフォルダにスキャフォルディングしたい場合(ネストされたアプリディレクトリなし)。

このスキルを使用しない場合

• ユーザーが上書きされるべきではない既存の非空プロジェクトに Angular を追加するよう求めた場合。
• ユーザーが別の Angular メジャーバージョンをリクエストした場合。
• ユーザーがモノレポワークスペース戦略(Nx、マルチプロジェクトワークスペース、カスタムビルダー)をリクエストした場合。

必須入力

プロジェクト名が明示的に提供されていない場合は、ユーザーに確認してください。 プロジェクト名を推測したり推測で入力したりしないでください。 ルーティングまたはスタンドアロン設定が提供されていない場合は、CLI のデフォルトを保持し、非対話形式で実行します。

プリフライトセーフティチェック(必須)

ng new を実行する前に:

1. 現在のディレクトリが意図したアプリのルートであることを確認します。
2. 既存のトップレベルファイルをリストアップし、以下のアローリストを使用してフォルダの安全性を分類します:
   • これらのエントリのみが存在する場合、追加の確認なしでインプレーススキャフォルディングを許可: .git、.gitignore、.gitattributes、README.md、LICENSE、LICENSE.md。
   • その他すべてのエントリを非空プロジェクト状態として扱い、続行する前に明確な確認を要求します。
3. 既存の Angular/ワークスペースマーカーは常に高リスクとして扱い、明確な確認を要求します:
   • angular.json、workspace.json、package.json、src/、projects/、tsconfig.json。
4. ターゲットメジャーバージョンが 20 でない場合は、Angular 20 で続行するか別バージョン対応フローに切り替えるかを確認するため停止します。
5. npx が利用不可の場合は、スキャフォルディングを進める前に Node.js/npm をインストールするよう求めて停止します。

ルートディレクトリルール

意図したアプリのルートにスキャフォルディングし、すべてのコマンドをそのルートで実行します。 --directory . を使用して、Angular CLI がネストされたサブフォルダを作成する代わりに現在のフォルダに書き込むようにします。 現在のディレクトリが意図したアプリのルートでない場合は、スキャフォルディングコマンドを実行する前にユーザーに確認または ディレクトリ変更を求めて停止します。

スキャフォルディングコマンド(ベースライン)

ターゲットルートから以下のコマンドを使用します:

npx -y @angular/cli@20 new <project-name> --directory . --style=css --strict --skip-git --ai-config=none --defaults

デフォルト:

• パッケージマネージャー: npm
• ルーティング: ユーザーが --routing または --no-routing を指定しない限り Angular CLI のデフォルト。
• スタンドアロン: ユーザーが --standalone または --no-standalone を指定しない限り Angular CLI のデフォルト。
• AI 設定: ユーザーがサポートされている値を明示的にリクエストしない限り none。

オプションのユーザー駆動バリアント

ユーザーが明示的にリクエストした場合のみ適用:

• スタイル拡張子の変更(--style=scss など)。
• ルーティングのオン/オフを強制(--routing または --no-routing)。
• パッケージマネージャーの変更(--package-manager pnpm|yarn|bun|npm)。
• reference.md のサポートされている値に --ai-config を設定。
• スタンドアロンモードのオーバーライド(--standalone または --no-standalone)。

ユーザーがサポートされていない --ai-config をリクエストした場合は、推測する代わりにサポートされている値の入力を求めて停止します。

検証

アプリのルートから実行:

npm install

npm run build

npm run test -- --watch=false

テストがまだ設定されていない場合は、成功を主張する代わりに明確に報告し、次の修正ステップを提供します。 ビルドまたはテストが失敗した場合は、失敗したコマンドと最初の実行可能な修正を報告します。

出力契約

実行後、以下を報告:

1. 実行した正確なコマンド。
2. デフォルトから選択されたプロンプト/フラグ。
3. ビルド結果。
4. テスト結果。
5. 作成されたファイル(例: angular.json、package.json、src/main.ts)。
6. 必要な後続アクション。
7. フォルダで明確な上書き確認が必要だったかどうか、および何が確認されたか。

承認チェックリスト

• Angular 20 セットアップリクエストを正しくトリガーする。
• プロジェクト名を仮定しない。
• 意図しないフォルダでの危険な生成を防止する。
• インプレーススキャフォルディング(--directory .)を使用する。
• ビルドとテストコマンドで検証する。
• 具体的なコマンド/結果のサマリーで結果を報告する。
• 非空フォルダ、サポートされていないフラグ、および不足しているツール前提条件を明示的に処理する。

アシスタント移植性ルール

• 特定のエディタまたはエージェントランタイムを想定しない、汎用的なツール言語「アシスタント」および「ワークスペースルート」を使用します。
• 対話的なデフォルトより決定論的な非対話形式のコマンドと明確なフラグを優先します。
• ブロックされている場合は、1つの具体的なブロッカーと必要な正確なコマンドまたは入力を報告します。

リファレンス

Angular 20 ドキュメンテーション

ヒント

• グローバル ng より npx -y @angular/cli@20 を優先し、バージョンのずれを回避します。
• 非スキャフォルディングファイルが存在する場合は常にフォルダの意図を確認します。
• 誤ったネストされたフォルダを避けるため、すべてのインプレーススキャフォルディングコマンドに --directory . を含めます。
• ディレクトリ名からプロジェクト名を推測しない、不足しているときは明示的に質問します。
• ユーザーがサポートされている代替案をリクエストしない限り --ai-config=none を保持します。
• テスト前に npm run build を使用して、設定の問題をより速くキャッチします。
• CI 風シェルで npm run test -- --watch=false がハングする場合は、プロジェクトがすでにサポートしている場合のみ --browsers=ChromeHeadless を追加します。