angular.json について

はじめに

書籍を見ながら angular の学習を進める中で、ng new で作成されたファイル名に差異があり、なんとなく気になったため書籍と揃えるためにファイル名を変更。(index.html → index.component.html 等他にも .ts とか .css も変えた。)
その後、npm run build 実行時に「<省略>/index.html なんかねぇよ」って怒られたため解決のために調べた内容の備忘録。
ほとんど ChatGPT に聞いた。。。

$ npm run build

> angular-app-name@0.0.0 build
> ng build

An unhandled exception occurred: Failed to read index HTML file "/Users/yourName/Project/path/angular-app-name/src/index.html".
See "/private/var/folders/06/0fy9kdpn3lsdhvhv7f8p4m940000gn/T/ng-jSwBxh/angular-errors.log" for further details.

angular.json とは

Angular プロジェクトのビルドや開発に関する設定ファイル。

• ビルドやサーブの対象プロジェクト
• 出力ディレクトリ（例: dist/）
• HTML や CSS、外部スクリプトのパス
• 開発サーバーやテストの設定
• 環境ファイルの切り替え設定（fileReplacements）

を行っているらしい。

どんな時に編集するのか

実際はそんなに触る必要はなさそう。
Angular CLI が、src/ 以下をプロジェクトのソースルートとして認識し、その中にある .ts, .html, .css などのファイルを自動的に参照してビルド対象に含めてくれるみたい。
例外として、

ケース	理由
index.html のパスを変更した	"index" の値を修正する必要がある。
グローバル CSS を追加した	"styles" にファイルパスを追記する。
外部 JS ライブラリを追加した	"scripts" に追記する必要がある。
静的ファイルのコピー対象を追加した	"assets" に追記が必要。

があるそう。

"architect": {
    "build": {
        "builder": "@angular/build:application",
        "options": {
            "index": "src/index.component.html",
            "browser": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "assets": [
                {
                    "glob": "**/*",
                    "input": "public"
                }
            ],
            "styles": [
                        "src/styles.css",
                        "src/custom.css"
            ],
            "scripts": [
                        "src/assets/js/script.js",
                        "src/assets/js/custom.js"
            ]
        },
    }
}

まとめ

やらなくていいファイル名の変更なんかしたがために、怒られたがそうでもなければこの段階でこのエラーには遭遇しなかっただろうし、結果的には良かったということにしておく。