angular4 环境变量配置

好久没有来了，今天风和日丽，就来分享个小知识，不扯淡，直接进入主题：

需求：使用angular实现前后分离开发，必然遇到环境问题，比如：

在本地开发你需要请求的地址是：www.bendi.com

在内部测试的时候你需要请求的地址是：www.dev.com

在给测试人员测试的地址是：www.staging.com

最后再正式上给用户使用的地址是：www.prod.com

问题来了，那是不是每次我们编译生成对应环境的代码都要去修改一下请求地址呢？如果你这样做的话，没毛病，但是会抓狂，而且容易出错。

如果你公司需要走自动发布流程的话，问题就来了，你不可能每一个环境的自动发布代码不一样，这样合并的时候会有麻烦，而且不同环境代码不相同，这个也说不同。

怎么解决呢？这个时候我们自然而然就希望编译的时候编译器知道我们想要编译到那个环境，然后产出正确的代码

使用angular-cli编译就有个傻瓜式的解决方案，环境变量

在你的src/environments目录下有几个文件，他们分别是每个环境对于的配置：

1.比如environment.dev.ts对应的就是dev环境，你有多少个环境这里就新建多少个文件

2.去到angular-cli.json文件找到environments这个属性进行配置，比如：

"environments": {

"local": "environments/environment.ts",

"dev": "environments/environment.dev.ts",

"staging": "environments/environment.staging.ts",

"prod": "environments/environment.prod.ts"

}

local这些属性名是一会执行编译命令需要传递的参数，你传递那个属性名，编译就会读取那个文件：

比如：ng s --env=local，这个时候编译会读取environments/environment.ts这个文件

3.在我们需要使用环境变量的地方引入环境变量文件：

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

这里有些朋友可能觉得奇怪，这样写死的引入environment，不会有问题吗？

过来人告诉你，就是这样的，不要怀疑，angular-cli已经做了处理，你传递参数编译，这里会动态读取对应的文件，而且这里在需要使用的地方直接使用environment;

你如果觉得不放心，打印一下看看；

问题完美解决，不扯淡了，还有好多个bug要写。。。。。。。。。。。。。。。