Question

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

Answer 1

如果您使用的是CLI，请在.angular-cli.json文件中放置此代码。（从角度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'
}

在组件或服务中，您可以使用类似

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

您可以命令：

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

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

Answer 2

假设environment.ts文件导出（例如，常量命名环境），则首先导入常量（使用适当的路径）：

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

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

let mything = environment.mything;

Answer 3

通过使用名为{{3}的包将环境变量替换为envsub模板文件src/environments/environment.ts来签出handlebars来构建配置文件src/environments/environment.hbs的简便方法}。

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

例如，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文件。

我们如何在角度版本中使用环境变量＆gt; = 2

3 个答案: