Angular中environments的神奇之处

前言

在使用angular脚手架构建angular项目时，都会给我们生成一个名叫environments的文件夹。从字面意识理解像是环境变量的意思。

可以看见后缀不一样

有卵用

他们分别是每个环境对应的配置，执行不同的命令，就会调用不同的文件。

例如： 比如environment.prod.ts对应的就是prod环境，你有多少个环境这里就新建多少个文件。（当然没有的就是默认的运行环境）

只有这些文件并起不了作用。关键在这里

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

这才是起作用的地方

使用

奇怪它怎么知道是哪个文件呢？

本地调试的时候

ng s -e=prod

简单解释下， ng：angular脚手架提供的命令操作 s: serve 的简写，运行程序 -e=prod： -env=prod的简写，大概意思就是启用prod的运行环境配置，prod就是在上面json文件中配置的环境名。

发布的时候，当然用法也是一样，不过通常我们都是把ng命令封装在package.json文件中。如下：

简化了

我们使用 npm run start就等于使用了ng serve --port 4001 --open这个命令。

场景

在angular项目开发中，前后台分离，后台api地址生产环境，测试环境，开发环境的api地址可定都不会是同一个ip地址。这样通过environments来控制的话，就不担心在测试，生产，开发环境来回切换时去改配置文件了。

演示一下

默认环境

默认环境

  ng s 

打开浏览器查看

和配置的一样

其他环境

其他环境

ng s -e=dprod --hmr 

见证奇迹