Angular|Angular 环境配置 Angular环境配置

如何使用环境配置在实际开发中，总是需要针对不同的环境设定不同的参数，Angular 提供了一种应用环境机制，当使用 ng new 构建一个新项目时默认会在 src/environments 目录下针对开发环境与生产环境（environment.prod.ts）的配置项。
绝大多数情况下，我们生产环境的后端请求地址与开发环境是不一样，因此可以分别为其定义不同的域，例如：

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

对于生产环境可以为：

// environment.prod.ts export 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.ts export 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 = []; 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 的可塑性也还是很强的。
好久没有写文章了，这也是两年多前写了一半放在草稿箱里面，加工了一下，发表于此。
【Angular|Angular 环境配置】Happy Coding~