[ng]Angular 5 环境信息配置

在项目中一个项目对应多个环境是非常常见的，至少你需要面对开发、测试、生产三个环境。

以前我有个很笨的方法，创建一个constant.ts文件，把三个环境的地址写上去，用到哪个把另外两个注释掉。

constant.ts

这个方法简单，但是很容易出错。万一生产包忘记改地址就会出大问题。

优化一下，在src/environments下已经有两个文件enviroment.ts 和 environments.prod.ts,我们再新增一个environments.stage.ts

目录结构

三个文件内容也修改一下，增加ServerAddress参数并填写开发、测试、生产所对应的服务地址。

environment.stage.ts 测试配置 environment.prod.ts 生产地址 environment.ts 开发地址

然后打开angular.json修改配置

angular.json

“production”的配置已经有了，我们复制一份production的配置，将名称改为“stage”，“fileReplacements“-“with”改为刚创建的environment.stage.ts

constant.ts

修改constant.ts的ServerAddress

命令

生产环境

编译：ng build --prod 或 ng build --configuration=production

运行： ng serve --configuration=production

测试环境

编译： ng build --configuration=stage

运行： ng serve--configuration=stage

开发环境

编译：ng build

运行：ng serve

---

参考资料：https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/application-environments.md