javascript - 从 .env 设置 Angular 6 环境变量

Question

有一个 Angular 6 项目使用来自 ./project/src/environments/environment.prod.ts 的环境变量

export const environment = {
  production: true,
  testVar: 'gg',
};

该项目的后端在 .env 文件中也有 env 变量，因此很多变量都是重复的 angular env 变量。如果有类似的东西就好了

export const environment = {
  production: true,
  testVar: process.env.TEST_VAR
};

，所以我不必复制变量。

即

我想从 .env 文件中解析变量，并在服务器上的 typescript 编译期间将它们的值分配给 angular env 变量。

如何做到这一点？也许用 webpack？

更新

一些说明。我的 .env 文件不包含 json。它看起来像这样:

TEST_VAR=1

更新

自 ng eject is not available for Angular 6 ，我似乎无法破解 webpack 配置。这里看起来像死胡同。

ng eject

Overview

Temporarily disabled.

Ejects your app and output theproper webpack configuration and scripts.

Answer 1

当我们想要容器化 Angular 应用程序时，这个问题也变得越来越重要。

我的研究让我想到了一个想法，我必须编写一个小的 node.js 或 typescript 程序，使用 dotenv 读取 .env 文件并在构建时创建 environment.ts 文件，然后再开始 ng 服务。您可以像这样在 package.json 中创建条目:

...
"config": "ts-node set-env.ts",
"server": "npm run config && ng serve"
...

并运行它

npm run server

这是一个很好的解释，带有一个 typescript 文件示例: https://medium.com/@ferie/how-to-pass-environment-variables-at-building-time-in-an-angular-application-using-env-files-4ae1a80383c