[Angular] ビルド時に環境変数を参照する方法 - @angular-builders/custom-webpack を使って

はじめに

Angular プログラムの中で環境変数を参照したいなと

environment.ts

export const environment {
  user: process.env['USER']
}

なんて書いても、うまくいきません。
その解決方法です。

必要なもの

• @angular-builders/custom-webpack

やること

やることの一覧です。

• 各パッケージをインストール
• angular.jsonファイルを変更　
• webpackの設定ファイルを作る
• TypeScriptの宣言ファイルを作る
• プログラムの中で参照する

ひとつずつ見てみます。

各パッケージをインストール

いつものようにやります。

npm i -D @angular-builders/custom-webpack

angular.json ファイルを変更

builder を @angular-devkit/build-angular から @angular-builders/custom-webpack へ変更します。
オプションとして webpack の設定ファイルを指定します。
プロジェクトひとつあたり、4ヶ所書き換えるところがあります。

       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
+            "customWebpackConfig": {
+              "path": "./custom-webpack.config.js",
+            },
             "outputPath": "dist/ms365-events-of-day",
             "index": "src/index.html",
             "main": "src/main.ts",

webpackの設定ファイルを作る

プロジェクトのルートに custom-webpack.config.js という名前で作りました。

Defineプラグインを使って、環境変数を参照します。

const webpack = require("webpack");

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      USER: JSON.stringify(process.env["USER"]),
    }),
  ],
};

TypeScriptの宣言ファイルを作る

srcの下のどこか適当なところに、拡張子 .d.ts でファイルを作ります。

ここでは src/defined.d.ts というファイルを作りました。

Defineプラグインに書いた名前と、同じ名前で宣言します。

declare const USER: string;

プログラムの中で参照する

プログラムの中では、宣言した名前で使用できます。
Webpack Define プラグインが、これをよしなに置き換えてくれるというわけです。

例えば、このように参照します。

@Component()
export class AppComponent implements OnInit {
  title = USER;
}

環境

最後に環境です。

• Angular 14