@ngx-env/builder是一个简单的Angular库，可以轻松使用系统环境变量(process.env)

在Angular中无法像下面这样使用系统环境变量。

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

为了解决这个问题，在这里我们介绍一种简单实现的方法，而不是使用custom-webpack方法。我们将使用一个叫作ngx-env的包。

版本

Angular版本：14.2.10
请注意，目前（2023/01/02），似乎还不支持Angular 15。

如何使用ngx-env

1. ng add @ngx-env/builder

1. src/env.d.ts进行变量定义

tsconfig.json中进行排除

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已经更新。

2. 在 src/env.d.ts 文件中定义变量。

当查看”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;
  };
};

只需一种选择：在这里编写用于使用的环境变量的类型定义即可。
我想要使用一个名为NG_APP_API_URL的环境变量，所以我这样写了。

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

顺便提一下，环境变量需要以NG_APP_开头。
你也可以在dotenv中使用NG_APP_*进行设定。

3. 在 tsconfig.json 中排除文件。

如果继续使用的话，将会出现如下的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。

附录

顺便提一下，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",

参考文献