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

时间:2017-06-19 03:56:10

标签: angular

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

3 个答案:

答案 0 :(得分:20)

  

如果您使用的是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目录中拥有环境目录,并且两个环境文件都应该在那里。

答案 1 :(得分:1)

假设environment.ts文件导出(例如,常量命名环境),则首先导入常量(使用适当的路径):

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

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

let mything = environment.mything;

答案 2 :(得分:1)

通过使用名为{{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文件。