開発者ツール
Angular CLI

Angularアプリケーションのビルド

Angular CLIアプリケーションまたはライブラリは、ng buildコマンドでビルドできます。 これにより、TypeScriptコードがJavaScriptにコンパイルされ、必要に応じて出力が最適化、バンドル、ミニファイされます。

ng buildは、angular.jsonで指定されたデフォルトプロジェクトのbuildターゲットのビルダーのみを実行します。 Angular CLIには、通常buildターゲットとして使用される4つのビルダーが含まれています。

ビルダー 目的
@angular-devkit/build-angular:application クライアントサイドバンドル、Nodeサーバー、およびビルド時プリレンダリングされたルートを持つアプリケーションをesbuildでビルドします。
@angular-devkit/build-angular:browser-esbuild ブラウザで使用するクライアントサイドアプリケーションをesbuildでバンドルします。詳細については、browser-esbuildドキュメントを参照してください。
@angular-devkit/build-angular:browser ブラウザで使用するクライアントサイドアプリケーションをwebpackでバンドルします。
@angular-devkit/build-angular:ng-packagr Angular Package Formatに準拠したAngularライブラリをビルドします。

ng newで生成されたアプリケーションは、デフォルトで@angular-devkit/build-angular:applicationを使用します。 ng generate libraryで生成されたライブラリは、デフォルトで@angular-devkit/build-angular:ng-packagrを使用します。

特定のプロジェクトで使用されているビルダーは、そのプロジェクトのbuildターゲットを調べることで判断できます。

{  "projects": {    "my-app": {      "architect": {        // `ng build` invokes the Architect target named `build`.        "build": {          "builder": "@angular-devkit/build-angular:application",        },        "serve": {  }        "test": {  }      }    }  }}

このページでは、@angular-devkit/build-angular:applicationの使用法とオプションについて説明します。

出力ディレクトリ

このビルドプロセスの結果はディレクトリに出力されます(デフォルトではdist/${PROJECT_NAME})。

サイズバジェットの設定

アプリケーションは機能が増えるにつれて、サイズも大きくなります。 CLIを使用すると、設定でサイズしきい値を設定して、アプリケーションの各部分が定義したサイズ境界内に収まるようにできます。

サイズ境界は、CLI設定ファイルangular.jsonの、各設定済み環境budgetsセクションで定義します。

{  "configurations": {    "production": {      "budgets": [        {          "type": "initial",          "maximumWarning": "250kb",          "maximumError": "500kb"        },      ]    }  }}

アプリケーション全体および特定のパーツに対してサイズバジェットを指定できます。 各バジェットエントリは、特定のタイプのバジェットを設定します。 サイズ値は次の形式で指定します。

サイズ値 詳細
123または123b バイト単位のサイズ。
123kb キロバイト単位のサイズ。
123mb メガバイト単位のサイズ。
12% ベースラインに対するサイズの割合。(ベースライン値には無効です。)

バジェットを設定すると、アプリケーションの特定のパーツが設定した境界サイズに達するか超えた場合に、ビルダーが警告またはエラーを報告します。

各バジェットエントリは、次のプロパティを持つJSONオブジェクトです。

プロパティ
type バジェットのタイプ。次のいずれかです:
詳細
bundle 特定のバンドルのサイズ。
initial アプリケーションのブートストラップに必要なJavaScriptとCSSのサイズ。デフォルトでは500kbで警告、1mbでエラーになります。
allScript すべてのスクリプトのサイズ。
all アプリケーション全体のサイズ。
anyComponentStyle 任意のコンポーネントスタイルシートのサイズ。デフォルトでは2kbで警告、4kbでエラーになります。
anyScript 任意のスクリプトのサイズ。
any 任意のファイルのサイズ。
name バンドルの名前 (type=bundleの場合)。
baseline 比較のためのベースラインサイズ。
maximumWarning ベースラインに対する警告の最大しきい値。
maximumError ベースラインに対するエラーの最大しきい値。
minimumWarning ベースラインに対する警告の最小しきい値。
minimumError ベースラインに対するエラーの最小しきい値。
warning ベースラインに対する警告のしきい値 (最小および最大)。
error ベースラインに対するエラーのしきい値 (最小および最大)。

CommonJS依存関係の設定

アプリケーションとその依存関係の全体で、常にネイティブのECMAScriptモジュール (ESM) を優先してください。 ESMは、強力な静的解析サポートを備えた完全に規定されたWeb標準およびJavaScript言語機能です。これにより、他のモジュール形式よりもバンドル最適化が強力になります。

Angular CLIは、CommonJS依存関係をプロジェクトにインポートすることもサポートしており、これらの依存関係を自動的にバンドルします。 しかし、CommonJSモジュールは、バンドラーやミニファイアがそれらのモジュールを効果的に最適化するのを妨げ、結果としてバンドルサイズが大きくなる可能性があります。 詳細については、CommonJSがバンドルを大きくする仕組みを参照してください。

Angular CLIは、ブラウザアプリケーションがCommonJSモジュールに依存していることを検出すると、警告を出力します。 CommonJS依存関係に遭遇した場合は、メンテナーにECMAScriptモジュールのサポートを依頼するか、自分でそのサポートに貢献するか、またはニーズを満たす代替の依存関係を使用することを検討してください。 CommonJS依存関係を使用するのが最善の選択肢である場合は、angular.jsonにあるbuildオプションのallowedCommonJsDependenciesオプションにCommonJSモジュール名を追加することで、これらの警告を無効にできます。

"build": {  "builder": "@angular-devkit/build-angular:browser",  "options": {     "allowedCommonJsDependencies": [        "lodash"     ]   }},

ブラウザの互換性を設定する

Angular CLIは、異なるブラウザバージョンとの互換性を確保するためにBrowserslistを使用します。 サポートされているブラウザに応じて、Angularは、ビルドされたアプリケーションがサポートされているブラウザによって実装されていない機能を使用しないように、特定のJavaScriptおよびCSS機能を自動的に変換します。ただし、Angular CLIは、不足しているWeb APIを補うためにポリフィルを自動的に追加しません。angular.jsonpolyfillsオプションを使用してポリフィルを追加します。

デフォルトでは、Angular CLIは、現在のメジャーバージョンでAngularがサポートするブラウザに一致するbrowserslist設定を使用します。

内部設定を上書きするには、ng generate config browserslistを実行します。これにより、Angularがサポートするブラウザに一致する.browserslistrc設定ファイルがプロジェクトディレクトリに生成されます。

特定のブラウザとバージョンをターゲットにする方法の詳細は、browserslistリポジトリを参照してください。 このリストをより多くのブラウザに拡張することは避けてください。アプリケーションコードがより広範に互換性がある場合でも、Angular自体はそうではない可能性があります。 このリストのブラウザまたはバージョンのセットは、常に_減らす_べきです。

HELPFUL: browsersl.istを使用して、browserslistクエリの互換性のあるブラウザを表示します。

Tailwindの設定

AngularはTailwind、ユーティリティファーストのCSSフレームワークをサポートしています。

Angular CLIとの統合については、Tailwindのドキュメントを参照してください。