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

标签 javascript angular angular6

有一个 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 the proper webpack configuration and scripts.

最佳答案

当我们想要容器化 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

关于javascript - 从 .env 设置 Angular 6 环境变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52276922/

相关文章:

javascript - 从浏览器打印 ZPL (txt)(Coldfusion 脚本)

html - 迭代对象并将其显示在表 Angular 6 中

angular - 使用@angular/cdk-experimental 在 Angular Material 2 表中使用虚拟滚动

angular - 通过 Angular2 路由器传递数据

angular - Angular 6 中的所有 angular.json 选项是什么?

javascript - 当 ng-show 可以适用于两种情况时,为什么要使用 ng-hide

javascript - 在打开的窗口中监听 URL 变化

javascript - mocha api 测试 - PUT 路线

html - 在 HTML 中调用 TypeScript 函数?

javascript - Angular HttpClient post 方法参数