如何应用环境配置

在理论开发中，总是须要针对不同的环境设定不同的参数，Angular 提供了一种应用环境机制，当应用 ng new 构建一个新我的项目时默认会在 src/environments 目录下针对开发环境与生产环境（environment.prod.ts）的配置项。

绝大多数状况下，咱们生产环境的后端申请地址与开发环境是不一样，因而能够别离为其定义不同的域，例如：

// environment.tsexport const environment = {  production: false,  apiBaseUrl: `https://test.asdf.com/`};

对于生产环境能够为：

// environment.prod.tsexport const environment = {  production: true,  apiBaseUrl: `https://api.asdf.com/`};

当然，对于开发人员而言，毋庸如何去分别它们，只须要在 src 目录的任意地位援用 apiBaseUrl 变量即可，就像这样：

import { environment } from 'src/environments/environment';console.log(`${environment.apiBaseUrl}`);

当通过 ng s 开发模式时主动应用 environment.ts，反之 ng b 会应用 environment.prod.ts 来代替。

事实上，不论 ng s 还是 ng b 两种模式，实质上都能够利用 -c 参数来调换，例如：

// ng s -c development  -> environment.ts// ng s -c production   -> environment.prod.ts

尽管 Angular 在创立时只产生两种环境，假使须要针对 CI 独自做一些额定的环境配置，只须要在 angular.json 文件配置的 architect/build/configurations 下新增一个新的节点，例如：

// angular.json"architect": {  "build": {    "configurations": {      // 新增 ci 节点      "ci": {        "fileReplacements": [{          "replace": "src/environments/environment.ts",          "with": "src/environments/environment.ci.ts"        }]      }    }  },  // 如果心愿 ng s 也失效，则以下也是必须的  "serve": {    "configurations": {      "ci": {        "browserTarget": "test:build:ci" // 留神 test 是我的项目名      }    }  }}

而后在 src/environments 目录下，新增 environment.ci.ts 文件：

// environment.ci.tsexport const environment = {  production: false,  apiBaseUrl: `https://ci.asdf.com/`};

最初，能够应用 ng b -c ci 命令，所有 apiBaseUrl 都将应用 https://ci.asdf.com/ 来代替了。

index.html 配置

不同环境应用不同的 index.html，比如说心愿生产环境下多减少一些 Google Analytics 统计代或IM之类的，可能你也很心愿在开发环境下不心愿加载这些让开发变慢的货色吧。

跟 environments 做法相似，只须要在 angular.json 减少一点配置即可：

// angular.json"architect": {  "build": {    "configurations": {      "production": {        "index": {          "input": "src/index.prod.html",          "output": "index.html"        }      }    }  }}

同样，须要在 src 下新增一个 index.prod.html 文件；当应用 ng b 时会采纳 index.prod.html 作为 index.html 的内容。

优化Tree-Shake

Angular 环境配置不光能替换配置；同时，依据这种文件替换模式，来帮忙咱们更敌对的进行 Tree-Shake 动作，而且十分彻底。

那么什么状况下会遇到呢？例如不心愿在开发环境下加载某个模块，以 NG-ALAIN 提供的 Mock性能 为例，并不心愿在生产环境下仍然加载它。

失常咱们第一想到的是应用 environment.production 来辨别环境进行动静加载，假如只心愿开发环境下加载 NG-ZORRO 的按钮模块：

import { NzButtonModule } from 'ng-zorro-antd/button';const moduels: Array<Type<any>> = [];if (environment.production) {  moduels.push(NzButtonModule);}@NgModule({  imports: [BrowserModule, ...moduels],  declarations: [AppComponent],  bootstrap: [AppComponent],})export class AppModule {}

即使代码层面曾经很明确不须要 NzButtonModule 模块，但对于编译而言仍然须要先加载编译，再到 Tree-Shake 环节剔除它；但它仍然会有一点狗皮膏药似的，还会蕴含一点点并不需要的代码在下面，这取决于指标模块是依赖关系。

因而，要想让它真正从咱们文件中隐没，最间接的方法就是让它不须要加载编译。这有两种形式能够做到：

粗犷

仔细的读者可能早已发现为什么这种配置的替换是用 fileReplacements 来形容，没错，诚如 fileReplacements 意思，实质上就是文件的替换；并且这里还是一个数组，象征者容许退出更多的替换，但这类必须是合乎 TypeScript 程序的文件类型。

因而，能够间接替换某个 .ts 文件，比方粗犷的把 app.module.ts 分为 app.module.prod.ts ，同时批改 angular.json 的配置：

"fileReplacements": [  {    "replace": "src/environments/environment.ts",    "with": "src/environments/environment.prod.ts"  },  {    "replace": "src/app/app.module.ts",    "with": "src/app/app.module.prod.ts"  }]

温和

另一种形式是，将模块的导入放到 environment.ts 文件当中，例如：

// environment.tsimport { NzButtonModule } from 'ng-zorro-antd/button';export const environment = {  production: false,  apiBaseUrl: `https://test.asdf.com/`,  modules: [NzButtonModule],};

最初，再将 modules 数组导入到根模块下。

// app/app.module.tsimport { environment } from 'src/environments/environment';@NgModule({  imports: [BrowserModule, ...environment.modules],  declarations: [AppComponent],  bootstrap: [AppComponent],})export class AppModule {}

论断

本篇只是 Angular 的一个简略使用，利用 Angular Cli 提供的文件替换能力，能够帮忙咱们解决不同环境下应用不同参数、模块、文件等。

总之，也算是侧面的阐明 Angular Cli 的可塑性也还是很强的。

良久没有写文章了，这也是两年多前写了一半放在草稿箱外面，加工了一下，发表于此。

Happy Coding~