概要

Angular で初期設定のまま作業してるとよく発生するエラーについての原因と対処法の備忘録

前提

バージョン
- Angular 17

事象

ng deploy, firebase deploy などのデプロイ時や、 ng build などのビルド時に以下の様な 「exceeded maximum budget」 エラーが発生する（css ファイル起因の例）。

# ワーニング系
▲ [WARNING] src/**/**.component.css exceeded maximum budget. Budget 2.00 kB was not met by 14.62 kB with a total of 16.62 kB.

または

#エラー系
✘ [ERROR] src/**/**.component.css exceeded maximum budget. Budget 4.00 kB was not met by 12.62 kB with a total of 16.62 kB.

原因

この 「exceeded maximum budget」 系のエラーは、バジェットの制限をしている設定に抵触したためです。

デフォルトでは angular.json ファイルに、本番用（Production モード）のビルドのバジェット制限が以下のように設定されています。

angular.json

"configurations": {
  "production": {
    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "500kb",
        "maximumError": "1mb"
      },
      {
        "type": "anyComponentStyle",
        "maximumWarning": "2kb",  // ここで Warning に引っかかる
        "maximumError": "4kb"     // ここで Error になる
      }
    ],

    :
},

対処法

設定ファイルのバジェット設定の 「maximumWarning」「maximumError」 の値を大きくすればエラーは解消します。

今回は、ビルド時に「4 kB」であるべきサイズが「16.62 kB」になっていたので、以下の様に修正してみます。

angular.json

    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "500kb",
        "maximumError": "1mb"
      },
      {
        "type": "anyComponentStyle",
+       "maximumWarning": "18kb",
+       "maximumError": "20kb" 
      }
    ],
},

すると、無事にビルドが通りました。

> ng build

Prerendered 14 static routes.


Initial Chunk Files   | Names         |  Raw Size | Estimated Transfer Size
main-PN7ZVHDG.js      | main          | 351.26 kB |                77.84 kB
polyfills-LZBJRJJE.js | polyfills     |  32.69 kB |                10.59 kB
styles-7H3E6A7Z.css   | styles        |  15.51 kB |                 3.40 kB

                      | Initial Total | 399.47 kB |                91.83 kB

# ビルド成功
Application bundle generation complete. [7.083 seconds]

この後、無事にデプロイも成功しました✨

ただ、パフォーマンスやサーバのコストに影響するため、できるだけこのサイズは大きくしない方が良いので、安易に大きくしすぎないようにソースコードやロジック・仕様を改善できないかも、後で検討してみましょう。