如何构建具有不同环境的角度项目 [英] how to build angular project with different environment

问题描述

我正在使用 Angular 5.2，我需要像使用 ng build --prod 那样进行捆绑，但使用不同的环境

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

我试过了:

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

但它没有给我提供与 --prod 相同的捆绑

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

它同时生成一个 .js 和 .js.map 文件

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

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

我应该使用哪些选项来在 --prod 上获得相同的结果但使用不同的环境?

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

推荐答案

在 angular 6 中你可以在 angular.json 中创建多个环境

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

找到配置并在其中创建具有各种设置的多个环境，您可以从这里找到https://github.com/angular/angular-cli/wiki/angular-cli

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

示例

"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

虚拟 angular.json 文件是 https://api.myjson.com/bins/12k70w

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

我还在环境中创建了一个名为 environment.staging.ts 的文件

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"
};

这篇关于如何构建具有不同环境的角度项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！