Astro + Angular で ng cli を使えるようにする

はじめに

@analogjs/astro-angular の初期状態では ng cli が入っていなかったので、使えるようにしてみました。

手順

1. Astro で Angular を使えるようにします

2. ng cliをインストールします

npm i -D @angular/cli

3. angular.json ファイルを作成します

angular.jsonファイルを作成して、ng cliを騙します。

あわせて generate component セマンティクスのオプションも設定します。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "components": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "",
      "architect": {}
    }
  },
  "schematics": {
    "@schematics/angular:component": {
      "path": "src/components",
      "standalone": true
    }
  }
}

オプションの説明

"path": "src/components"

隠し(?)オプションです。コンポーネントファイルの生成先です。これがないと、src/app/~~~ に生成されます。

"standalone": true

コンポーネントをモジュール非依存形式で生成します。

使ってみる

いつものようにコンポーネントを生成できるようになりました。

% npx ng g c HelloWorld
CREATE src/components/hello-world/hello-world.component.css (0 bytes)
CREATE src/components/hello-world/hello-world.component.html (26 bytes)
CREATE src/components/hello-world/hello-world.component.spec.ts (623 bytes)
CREATE src/components/hello-world/hello-world.component.ts (312 bytes)

成果物

作ったものは、こちらに置きました。