angular - 在 Angular 5 环境中使用 process.env

Question

我尝试使用标准 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？

Answer 1

更新

根据下面的评论，原始答案并不完全清楚——Angular 是使用 Angular CLI 构建的，它是一个节点应用程序，但您无法直接从内部访问 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/