Angularでシステム環境変数(process.env)を簡単に使う方法 @ngx-env/builder

Angularではシステムの環境変数を下記のように使用することはできません。

environment.ts

export const environment {
  hoge: process.env['FUGA']
}

これを解決するためには、custom-webpackを使う方法がありますが、今回はこちらの方法ではなく、ngx-envというpackageを使って簡単に実現する方法を紹介します。

Version

angular version : 14.2.10
angular15にはまだ対応していない模様ですので注意してください。(2023/01/02現在)

How to use ngx-env

1. ng add @ngx-env/builder
2. src/env.d.tsで変数定義
3. tsconfig.jsonでexclude

1. ng add @ngx-env/builder

angularプロジェクトの中で下記コマンドを実行します。

ng add @ngx-env/builder

ℹ Using package manager: npm
✔ Found compatible package version: @ngx-env/builder@2.2.0.
✔ Package information loaded.

The package @ngx-env/builder@2.2.0 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
CREATE src/env.d.ts (174 bytes)
UPDATE angular.json (3049 bytes)

src/env.d.tsというファイルが作られ、angular.jsonはUpdateされました。

2. src/env.d.tsで変数定義

src/env.d.tsというファイルの中身を見ると、下記のような中身になっています。

default src/env.d.ts

declare var process: {
  env: {
    NG_APP_ENV: string;
    // Replace the line below with your environment variable for better type checking
    [key: string]: any;
  };
};

ここに使用する環境変数の型定義を書けばOKです。
私はNG_APP_API_URLという環境変数を使いたいので、こう書きました。

modified src/env.d.ts

declare var process: {
  env: {
    NG_APP_API_URL: string;
  };
};

ちなみに、環境変数はNG_APP_から始まる必要があります。
dotenvにNG_APP_*と書いて使うこともできます。

3. tsconfig.jsonでexclude

このまま使おうとすると、下記のようなTypeエラーが出てしまうので、tsconfigでenv.d.tsを無視するようにします。

Error: src/env.d.ts:1:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'process' must be of type 'Process', but here has type '{ env: { NG_APP_ENV: string; }; }'.

1 declare var process: {
              ~~~~~~~

  node_modules/@types/node/ts4.8/globals.d.ts:27:13
    27 declare var process: NodeJS.Process;
                   ~~~~~~~
    'process' was also declared here.

tsconfig.jsonの末尾にexcludeを追加します。

  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  },
+  "exclude": ["src/env.d.ts"]
}

おわり

以上です。
直接process.envを使うのも、environment.tsの中でprocess.envを使うのも可能です。

Appendix

ちなみにangular.jsonは次のように書き換えられています。
builderが@angular-devkit/builder/angularから、@ngx-env/builderに変わっている様子です。

-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@ngx-env/builder:browser",
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@ngx-env/builder:dev-server",
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@ngx-env/builder:extract-i18n",
-          "builder": "@angular-devkit/build-angular:karma", 
+          "builder": "@ngx-env/builder:karma",

Reference