如何构建具有不同环境的角度项目

Question

I am using Angular 5.2 and I need to bundle like it does with ng build --prod but with the different environment

I tried:

ng build --env=qa --aot --vendorChunk --common-chunk --output-hashing=bundles

but it does not give me the same bundling as i see with --prod

it generates both a .js and .js.map file

main.66dc6fba707fe2f3314c.bundle.js
main.66dc6fba707fe2f3314c.bundle.js.map

What options should I use to get me the same result at --prod but with a different environment?

Answer 1

In angular 6 you can create multiple environments in angular.json

Find configuration and inside that you can create multiple environment with various settings which you can find from here https://github.com/angular/angular-cli/wiki/angular-cli

example

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true
  },
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.staging.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true
  }
}

As you can see i have created an another environment name staging

The Dummy angular.json file is https://api.myjson.com/bins/12k70w

To run the application with specific environment just use

ng build --configuration=staging

I have also created a file in environment called environment.staging.ts

export const environment = {
    production: true,
    APIEndpoint: "http://0.0.0.0:8080/api"
};

Answer 2

When you are creating environment file, we need to set production: true which will enable Production Build with AOT by default in main.ts.

environment.stage.ts

export const environment = {
  production: true
};

main.ts

if (environment.production) {
  enableProdMode();
}


Cmd: ng build --prod --env=stage