angular8多环境多目录打包文件.

在一个大型项目中,不可能只存在本地环境,测试环境和生产环境.大多时候分多个测试环境,比如
1.普通测试环境   打包到build文件夹
2.预发布一套(模拟正式线环境)  打包到PublishTest01文件夹
3.预发布二套(模拟正式线环境)  打包到PublishTest02文件夹
4.正式线环境 打包到Release文件夹

不同的环境下连不同的服务器
在environments文件夹下添加如下3个文件:

三个文件里面的内容分别为:

配置angular.json,自定义设置打包命令
配置Release打包命令
在architect 新建Release并保持和build下的字段一样.然后做如下改动:
1.Release=>options => outputPath改成"PublishTarget/Release" ,其余字段不变(会打包到PublishTarget/Release文件夹下)
2.Release=>configurations=>production 将production改成release,然后fileReplacements下面的with路径换成environment.release.ts,其余字段不变

{
  ......
  "projects": {
    "DemoProject": {
      ......
      "architect": {
        "build": {...},
        "Release":{
          "builder": "@angular-devkit/build-angular:browser",
          "options": { 
             "outputPath": "PublishTarget/Release",
             ... // 其余字段同build->options下一样,直接复制过来改下outputPath就行 
           },
           "configurations":{
              // 将architect => build => configurations => production 复制一份,
              // 并改名为release,fileReplacements=>with 换成environment.release.ts
              // 其余字段保持不变
              "release":{ 
                 ......
                "fileReplacements": [
                  {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.release.ts"
                  }
                ]
              }
           }
        }

PublishTest01和PublishTest02的命令同Release设置差不多,换成对应的文件就行.这里就不演示了.
configurations里面是可以配置多个的:
例如在build=>configurations下新建 productionText1:{...},productionText2:{...}

"architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": { ...... },
          "configurations": {
            "production": {......}
            "productionTest1": {......},
            "productionTest2": {......},
           }

可以运行 ng build --prod -c=productionTest1 来使用productionTest1下的配置;

言归正传,我们接着来打包Release

配置package.json命令: ng run project:target[:configuration]

{
  ......
  "scripts": {
    ......
    "Release": "ng run DemoProject:Release --build--optimizer --aot -c=release",
    "PublishTest01": "ng run DemoProject:PublishTest01 --build--optimizer --aot -c=test1",
    "PublishTest02": "ng run DemoProject:PublishTest02 --build--optimizer --aot -c=test2",
    ......
  },
}

解释一下ng run project:target[:configuration]:
project:项目名称  DemoProject
target:配置的命令  PublishTest01 
configuration:使用的配置  -c=test1

最后运行命令
npm run Release
npm run PublishTest01
npm run PublishTest02
结果如图:

最后在main.ts中打印当前环境:

import { environment } from './environments/environment';
 
console.log(environment.env)

不同的包打印的结果:
PublishTarget\Release下的包打印结果

PublishTarget\PublishTest01下的包打印结果

PublishTarget\PublishTest02下的包打印结果

 此时就实现了多环境多目录打包文件