我们如何在角度版本中使用环境变量> = 2答案

【问题标题】：how can we use environment variable in angular version >=2我们如何在角度版本中使用环境变量> = 2
【发布时间】：2017-11-21 04:01:44
【问题描述】：

我现在正在阅读 angular4 文档，注意到有一个文件夹，即环境，如果我们使用 env=prod 构建，则在该文件夹下有多个环境文件，例如 environment.ts、environment.prod.ts ，然后将使用 prod 环境变量。现在我有一个问题，如何从代码中获取环境变量？我用谷歌搜索了很多文档，但没有提及这一点。谁能帮忙告诉我如何获取环境变量值？谢谢

【问题讨论】：

相关的解决方案是使用我们可以从外部源检索的环境变量，smaillns.medium.com/…

标签： angular

【解决方案1】：

假设 environment.ts 文件导出，例如一个名为 environment 的常量，那么首先你导入该常量（使用适当的路径）：

import { environment } from '../environment';

然后在代码中你只需使用常量：

let mything = environment.mything;

【讨论】：

【解决方案2】：

如果您使用 CLI，则在 .angular-cli.json 文件中放置此代码。（从 Angular 6 开始，.angular-cli.json 文件被重命名为 .angular.json）

"environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }

在开发环境文件中，可以写

export const environment = {
production: false,
url: 'http://something.com'
};

而在prod环境文件中，你可以写

export const environment = {
production: true,
url: 'http://something.com'
}

在组件或服务中，可以使用like

import {environment} from '../../environments/environment';
environment.url;

你可以指挥：

ng serve --dev     // Or 
ng serve --prod

注意：你应该在app目录下直接有environments目录，并且两个环境文件都应该在那里。

【讨论】：

问题是，如果您在环境文件中包含 prod 配置，您最终仍会将它们提交到您的 vcs 工具。这也意味着您的 ci 将部署一个 --prod 构建，其中可以从 .bundle.js 文件中读取值（api-keys、密码和其他敏感信息）。它们很难找到，但它们以明文形式存在...对于 prod，您必须通过单独的 git repo 提取配置，或者找到提供环境变量的方法。
从 angular 6 开始，.angular-cli.json 文件被重命名为 .angular.json source

【解决方案3】：

查看envsub，通过使用名为envsub 的包将环境变量替换为handlebars 模板文件src/environments/environment.hbs，轻松构建配置文件src/environments/environment.ts。

确保从.angular-cli.json 中删除environments 键。

例如，src/environments/environment.hbs 的内容可能是这样的：

export const environment = {
    production: ${ MYAPP_PRODUCTION }
};

要将MYAPP_PRODUCTION 替换为false，请从终端运行以下命令。

MYAPP_PRODUCTION=false envsub src/environments/environment.hbs src/environments/environment.ts

生成的文件src/environments/environment.ts 将是

export const environment = {
    production: false
};

您可以向package.json 添加额外的脚本来构建您的配置文件。

"scripts": {
    "config": "envsub src/environments/environment.hbs src/environments/environment.ts",
}

通过在终端中运行以下命令来构建配置：

MYVAR=test npm run config

记得从版本控制中排除src/environments/environment.ts。对于 git，您可以使用 .gitignore 文件。

【讨论】：

【解决方案4】：

当一位同事给我发邮件this link 时，我遇到了同样的障碍

基本上你在environments/environment.ts中定义你的“秘密”，然后在你想使用它的组件中导入环境，然后按如下方式使用它（根据Angular docs）

1。在environments/environment.ts中设置

export const environment = { 
production: false, 
secret: "123456789"     //  <-- your "secret" variable
};

2。将其导入到您的组件中

import { environment } from 'src/environments/environment';

3。使用它。

mySecret = environment.secret

【讨论】：