Tips for @angular/cli-第3篇:environments配置文件的正确玩法

0_1522641751576_angular-cli.jpg

为什么要environments配置文件?

一个典型的场景:在开发阶段,我们想访问一些mock出来的假数据;开发完上线之后,我们需要访问真正的后端服务。

比如,开发阶段访问数据的URL是这样的:

然后,上线之后访问的真实URL是这样的:

有人说,这简单,上线之前手动改掉不就完了嘛。

不不不,你再仔细想想,如果只有一两个文件,手动改没问题,但是那种大型项目里面,有几千个TS文件,手动改会粗事的。

仔细看一下上面的URL路径,你会发现后面的 /my-test-data/inbound-records.json 这一部分是相同的,只有前面的域名和端口不一样。

很明显,我们可以抽出一个变量出来,然后拼接一下,就像这样:

  • apiBaseURL+"/my-test-data/inbound-records.json"

然后apiBaseURL这个东东可以在编译的时候指定一个环境变量,那就完美解决了这个问题。

利用@angular/cli的环境变量配置文件

@angular/cli 在创建新项目的时候会自动生成两份环境变量配置文件environment.ts 和 environment.prod.ts,默认放在app/environments目录下。

我们来改一改,增加一份配置文件,并且在文件里面加一些我们自己的配置项,就像这样:

0_1522641002542_1.png

0_1522641011016_2.png

0_1522641020912_3.png

0_1522641029786_4.png

然后angular-cli.json里面是这么配置的:

0_1522641038016_5.png

main.ts里面是这样写的(猥琐了一下,把配置项放到了window对象上):

0_1522641075832_6.png

在我们的Service里面是这样拼接的:

0_1522641151088_7.png

来尝试运行一下,首先试试 ng serve --env=dev ,应用起来之后在chrome的命令窗口里面查看一下window.environment,可以看到这个:

0_1522641298926_深度截图_选择区域_20180402115455.png

然后再试试 ng serve --env=prod,应用起来之后在chrome的命令窗口里面查看一下window.environment,可以看到这个:

0_1522641403754_深度截图_选择区域_20180402115638.png

OK,这样就很六了对不对,只要在编译的时候指定需要dev还是prod,或者mock,不用修改代码实现就能动态使用不同的后端URL了。

一个小坑

在main.ts里面,你会发现我们import的是environment.dev,但是这里import什么版本其实不重要,因为@Angular/cli会在编译时根据你给的–env参数自己动态替换。

当然,如果你不给–env参数,它就默认使用这里import的版本了。

一点小吐槽

github上有一些人吐槽这种编写多份环境变量配置文件的方式,认为这样搞很不优雅,如果你想看他们讨论的细节,请点这里:https://github.com/angular/angular-cli/issues/4318

实例项目的完整版本请参考这里:https://gitee.com/mumu-osc/OpenWMS-Frontend

谢谢,会玩儿了,这个问题搜了很多资料,还是大漠老师写得最清晰!

干货,赞

赞一个!看起来我们的做法要改改了,我们貌似玩得不太对。。。

angular 6 用不了,改成configurations了。谁出个最新的教程?

  1. 在environments文件夹下增加 environments.local.ts
  2. 调整angular.json文件中的configurations对象中增加:
    “local”: {
    “fileReplacements”: [
    {
    “replace”: “src/environments/environment.ts”,
    “with”: “src/environments/environment.local.ts”
    }
    ]
    }

为啥不用proxy

登录后回复

与 Angular开发者 的连接断开,我们正在尝试重连,请耐心等待