Angular 7：如何用CLI实现外部配置不打包，支持一次构建多次部署？

嘿，我太懂你想要一次构建、多次灵活部署的需求了——这对QA和运维团队来说简直是效率神器！刚好我之前在Angular 7项目里实现过完全符合你要求的方案，不用环境模块、不用自定义配置服务、也不用碰ng eject，纯靠Angular CLI就能搞定，给你一步步拆解：

1. 调整配置文件的写法与位置 #

首先把你的config.js改成全局变量暴露的形式（不要用模块导出，不然Webpack会把它打包进bundle），放在src/assets/config/目录下：

// src/assets/config/config.js
window.appConfig = {
  apiUrl: 'some-api-url'
};

2. 配置Angular CLI，确保配置文件原样复制到构建目录 #

打开angular.json，找到对应项目的build配置里的assets数组，添加规则让CLI把config.js原样复制到dist目录，不参与打包：

"architect": {
  "build": {
    "options": {
      "assets": [
        "src/favicon.ico",
        "src/assets",
        // 添加这条规则
        {
          "glob": "config.js",
          "input": "src/assets/config/",
          "output": "/assets/config/"
        }
      ],
      // 其他配置...
    }
  }
}

3. 在index.html中提前引入配置文件 #

修改src/index.html，把config.js的引入放在Angular核心脚本（比如main.js）之前，确保Angular启动前全局配置已经可用：

<!-- src/index.html -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Your App</title>
  <base href="/">
</head>
<body>
  <app-root></app-root>
  <!-- 先引入配置文件 -->
  <script src="assets/config/config.js"></script>
  <!-- 再引入Angular的核心脚本 -->
  <script src="runtime.js" defer></script>
  <script src="polyfills.js" defer></script>
  <script src="styles.js" defer></script>
  <script src="vendor.js" defer></script>
  <script src="main.js" defer></script>
</body>
</html>

4. 在Angular组件中使用全局配置 #

在需要使用配置的组件里，先声明全局变量的类型（避免TypeScript报错），然后直接使用即可：

// src/app/app.component.ts
import { Component } from '@angular/core';

// 声明全局变量的类型
declare const appConfig: { apiUrl: string };

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    // 直接访问全局配置
    console.log(appConfig.apiUrl);
  }
}

为什么这个方案符合你的要求？ #

• 不用环境模块：完全脱离了environment.*.ts那一套，配置完全独立
• 不用自定义配置服务：不需要写HTTP请求去异步加载配置，启动时直接可用
• 不用ng eject：所有操作都是通过Angular CLI的原生配置完成，没有修改Webpack配置
• 配置文件不打包进bundle：构建后dist/assets/config/config.js是独立文件，运维可以直接修改里面的apiUrl，不用重新构建

这样你执行ng build --prod后，拿到的dist包里的config.js是完全独立的，每次部署只需要修改这个文件的内容就行，完美实现一次构建多次部署的目标！

内容的提问来源于stack exchange，提问作者belzebu