在 Angular 5 环境中使用 process.env答案

【问题标题】：Use process.env in Angular 5 environment在 Angular 5 环境中使用 process.env
【发布时间】：2018-09-04 21:24:02
【问题描述】：

我尝试使用标准 ng build --prod 命令构建 Angular 5 应用程序，并且我想将 environment.prod.ts 中的基本 API-Url 设置为取决于我的 process.env 变量的值。

这是我的文件：

export const environment = {
    production: true,
    apiUrl: `${process.env.BASE_URL}` || 'http://localhost:8070/',
};

但是当我尝试构建应用程序时出现以下错误：

ERROR in src/environments/environment.ts(7,16): error TS2304: Cannot find name 'process'.

在构建应用程序时如何根据环境变量设置我的 API-Url？

【问题讨论】：

您可以在执行 ng build 之前编写一个生成环境文件的小节点脚本。
您可以更新 webpack 构建以使用 DefinePlugin，或者您可以使用 babeljs.io/docs/plugins/transform-inline-environment-variables——无论如何，您都必须更改构建管道。
我刚刚使用了一个 JSON 文件 - dev.to/jdgamble555/…

【解决方案1】：

更新

根据原始答案下面的 cmets 并不完全清楚 - Angular 是使用 Angular CLI 构建的，它是一个节点应用程序，但在构建过程中，您无法直接从应用程序内部访问 process.env，因为它没有处理作为 Node 应用程序。

概念基本相同，但理解上述内容很重要。

原创

在编译 Angular 代码时，您将无法访问 process.env。

process.env 可用于Node 应用程序，而 Angular 应用程序不可用。

您有多种选择：

选项 2 听起来可能适合您。在这种情况下，你想把它放在你的 angular-cli.json 中：

"environments": {
    "dev": "path/to/dev/env",
    "prod": "path/to/prod/env"
}

并使用ng build --env=prod 构建您的应用程序。

【讨论】：

你如何访问这个？
我认为将 secret 环境变量放入 environment.ts 文件中是不正确的。
@novaline 正确，您不应该将秘密环境变量放在您的环境文件中。但是，如果您要向浏览器发送某些内容，那么无论如何它都不是什么秘密。
@chrispy，是的，它在浏览器上并不是什么秘密。但是，如果我不想将我的 secret 环境变量放在 repository 中怎么办？这将是我对 env 文件的应用程序。
@obsessiveprogrammer 我在答案中添加了一个部分，以确保任何遇到此答案的人都清楚这一点。