Angular 13自定义构建替换main.ts遇编译问题求解决方案

以下是几种简洁解决问题的思路：

思路一：环境变量+条件导入（无需修改配置文件） #

把原main.ts改成入口分发文件，将核心逻辑抽离到单独文件：

• 新建main-default.ts，把原来main.ts里的代码移进去，暴露一个启动函数（比如bootstrap）
• 新建main-custom.ts，写自定义环境的启动逻辑，同样暴露bootstrap函数
• 修改main.ts：

// src/main.ts
if (process.env.BUILD_ENV === 'custom') {
  import('./main-custom').then(mod => mod.bootstrap());
} else {
  import('./main-default').then(mod => mod.bootstrap());
}

• 构建时通过环境变量指定版本：

# 自定义构建
BUILD_ENV=custom ng build
# 默认构建
ng build

这种方式不用改任何配置文件，编译时只会打包实际用到的入口逻辑，不会有多余文件。

思路二：单独的TS配置文件（彻底分离编译范围） #

为自定义构建单独准备一份TS配置，完全隔离入口文件：

1. 复制项目根目录的tsconfig.json，命名为tsconfig.custom.json
2. 修改tsconfig.custom.json的files字段，只保留自定义入口：

{
  "extends": "./tsconfig.json",
  "files": [
    "src/main-custom.ts"
  ]
}

3. 在package.json的scripts里添加自定义构建命令：

"scripts": {
  "build": "ng build",
  "build:custom": "ng build --tsConfig tsconfig.custom.json"
}

执行npm run build:custom时，只会编译main-custom.ts，完全不会处理main.ts，从根源避免了编译冗余和警告问题。

思路三：优化fileReplacements配置（适配原有流程） #

如果想保留fileReplacements的方式，调整TS配置避免警告：

1. 在angular.json里确保fileReplacements配置正确：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "configurations": {
          "custom": {
            "fileReplacements": [
              {
                "replace": "src/main.ts",
                "with": "src/main-custom.ts"
              }
            ]
          }
        }
      }
    }
  }
}

2. 修改tsconfig.json，把main.ts和main-custom.ts从files字段移到include字段：

"include": [
  "src/**/*.ts",
  "src/main.ts",
  "src/main-custom.ts"
],
"files": [] // 清空files字段或者只保留必要的全局文件

3. 执行自定义构建命令：

ng build --configuration custom

这种方式下，TS会把两个文件都纳入编译，但fileReplacements会替换实际入口，同时因为用了include而非files，TS不会检测入口文件是否未使用，也就不会弹出警告。

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