在Angular 5环境中使用process.env

Question

我试图使用标准的ng build --prod命令构建一个Angular 5应用程序，并希望将基本的API-Url设置在environment.prod.ts中，该值取决于我的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？

- Freshchris

---

你可以编写一个小的Node脚本，在执行ng build之前生成你的环境文件。 - matmo

你可以更新webpack构建以使用DefinePlugin，或者你可以使用https://babeljs.io/docs/plugins/transform-inline-environment-variables/ - 无论如何，你都必须更改你的构建流程。 - Explosion Pills

我刚刚使用了一个JSON文件 - https://dev.to/jdgamble555/sharing-secret-environment-variables-with-google-cloud-build-and-angular-universal-7e3 - Jonathan

Answer 1

更新

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

概念基本上保持不变，但理解上述内容很重要。

原始内容

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

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

您有几个选项：

1. 如果确实需要动态更改环境文件，则可以在构建管道中创建某种任务以更新环境文件中的正确值。

2. 只需将其硬编码并创建多个环境文件以匹配每个环境。您可以在angular-cli.json中指定您的环境。

选项2听起来可能适合您。在这种情况下，您需要将以下内容放入您的angular-cli.json中：

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

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

以下是更详细的信息： https://alligator.io/angular/environment-variables/

- chrispy

---

我认为把秘密环境变量放在 environment.ts 文件中不正确。 - Lin Du

没错，你不应该将秘密环境变量放在环境文件中。但如果你要将某些内容传递到浏览器中，那么它本来就不是很保密了。 - chrispy

@chrispy，是的，在浏览器上它不会是什么秘密。但是如果我不想把我的秘密环境变量放在代码库里怎么办？这就是我使用env文件的应用场景。 - Rin Minase

process.env 可用于 Node 应用程序，但 Angular 应用程序不支持。Angular CLI 是执行构建的 Node 应用程序。因此，这不是它无法工作的原因。必须由 ng build 处理方式导致。 - obsessiveprogrammer

@obsessiveprogrammer 我已经添加了一个部分到答案中，以确保任何遇到这个答案的人都能明白。 - chrispy