angular.jsonのassetsセクションについて分かりやすく解説！

この記事では『angular.jsonのassetsセクション』について、

angular.jsonとは
- angular.jsonの構造
angular.jsonのassetsセクションとは
- assetsセクションのフィールド
- ビルド出力ディレクトリの変更方法

などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。

angular.jsonとは

angular.jsonファイルは、Angular CLIによって管理される、Angularアプリケーションの設定ファイルです。このファイルには、プロジェクトのビルド、サーブ、テストなどの設定が含まれています。

angular.jsonの構造

angular.jsonファイルの構造は以下のようになっています。このファイルでは、ビルド設定(buildセクション)、サーブの設定(serveセクション)、テストの設定(testセクション)などを行います。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "test-app": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "options": {
            "assets": [
              // ...
            ]
          },
        "serve": { ...},
        "e2e": { ...},
        "test": { ...},
        "lint": { ...},
        "extract-i18n": { ...},
        "server": { ...},
        "app-shell": { ...}
      }
    }
  },
  "cli": {
    "analytics": "a8c97189-673e-41da-8280-20920f6436c0"
  }
}
}

angular.jsonのassetsセクションとは

angular.jsonのassetsセクションは、Angularアプリケーションで使用する静的ファイル（画像、フォント、その他のリソース）やフォルダを指定するために使用されます。これらのファイルやフォルダはビルドプロセス中にコピーされ、ビルド出力ディレクトリ（デフォルトではdist/<your-project-name>）に配置されることで、最終的なアプリケーションに含まれるようになっています。

デフォルトでは、assetsセクションは以下のようになっています。

"assets": [
  "src/favicon.ico",
  "src/assets"
]

これをオブジェクト形式で表すと、以下のようになります。

"assets": [
  {
    "glob": "**/*",
    "input": "src/assets/",
    "output": "/assets/"
  },
  {
    "glob": "favicon.ico",
    "input": "src/",
    "output": "/"
  }
]

デフォルトでは、src/assetsフォルダの内容とsrc/favicon.icoがビルド出力に含まれます。具体的には、src/assetsフォルダ内のすべてのファイルがdist/<your-project-name>/assetsフォルダにコピーされ、src/favicon.icoはdist/<your-project-name>フォルダにコピーされます。

assetsセクションのフィールド

assetsセクション(セクションは設定ファイルの中で特定の機能や目的に関連するプロパティのグループです)で指定できるオブジェクトのフィールド(プロパティ)は以下のようになっています。

input
- ビルド前に格納しているファイルの場所を記述する。
output
- ビルド時にどのフォルダにコピーするかを記述する。
glob
- inputフォルダ内のどのファイルをoutputフォルダ内に格納するかを記述する。
ignore
- コピーから除外するファイルやフォルダを指定する。
followSymlinks
- シンボリックリンクをたどるかどうかを指定する。

例えば、src/dataフォルダ内のすべての.jsonファイルがビルド出力のdataフォルダにコピーされるようにするためには、以下のように記述します。

"assets": [
  {
    "glob": "**/*.json",
    "input": "src/data",
    "output": "/data"
  }
]

以下の例では、ignoreフィールドを使用してassetsフォルダ内の特定の.jsonファイルをビルド出力へのコピーから除外しています。

"assets": [
  {
    "glob": "**/*",
    "input": "src/assets",
    "output": "/assets",
    "ignore": ["**/*.json"]
  }
]

ビルド出力ディレクトリの変更方法

Angularのバージョンによっては、dist/<your-project-name>/browser直下にコピーされる場合があります。その場合、buildセクション内にあるbuilderセクションを以下のように変更すると、dist/<your-project-name>直下にコピーされるようになります(Angularバージョン17と18で確認済)。

// 変更前
"build": {
   "builder": "@angular-devkit/build-angular:application",
   "options": {
     "browser": "src/main.ts",
     ...
   },
   ...
}

// 変更後
"build": {
   "builder": "@angular-devkit/build-angular:browser-esbuild",
   "options": {
     "main": "src/main.ts",
     ...
   },
   ...
}

この設定により、ビルド出力がdist/your-project-nameに配置されるようになります。

本記事のまとめ

この記事では『angular.jsonのassetsセクション』について、以下の内容を説明しました。

angular.jsonとは
- angular.jsonの構造
angular.jsonのassetsセクションとは
- assetsセクションのフィールド
- ビルド出力ディレクトリの変更方法

お読み頂きありがとうございました。