Angular 17迁移Vite后合并构建文件至单文件的问题

核心原因 #

Angular 17的@angular-devkit/build-angular:application构建器基于Vite，产物结构、模块格式（默认ESM）和旧browser构建器完全不同，直接用concat简单拼接会破坏模块依赖逻辑，导致执行错误。以下是可行的解决思路：

思路1：让Vite直接输出单文件（推荐） #

不需要额外的合并脚本，通过配置Vite的Rollup选项，直接构建出单个bundle文件：

1. 在项目根目录创建vite.config.ts：

import { defineConfig } from 'vite';
import angular from '@angular-devkit/build-angular/src/vite/plugins/angular';

export default defineConfig({
  plugins: [angular()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'bundle.js', // 指定输出文件名
        format: 'iife', // 选择适合单文件加载的格式，UMD也可
        inlineDynamicImports: true, // 将动态导入的模块打包进主文件
      },
    },
  },
});

2. 调整angular.json的构建配置，关闭代码拆分：

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:application",
    "options": {
      "outputPath": "dist/your-project",
      "optimization": {
        "scripts": true,
        "styles": true,
        "fonts": true,
        "splitChunks": false // 禁止拆分代码块
      },
      "outputHashing": "none"
      // 其他原有配置...
    }
  }
}

3. 直接执行构建命令即可生成单文件：

ng build --configuration=production

思路2：替换concat为专业打包工具处理 #

如果必须保留合并脚本的流程，用esbuild或rollup替代concat，它们能正确处理ESM模块的依赖关系：

1. 安装esbuild：

npm install esbuild --save-dev

2. 修改build.js为以下内容（注意替换实际的文件路径）：

const esbuild = require('esbuild');

esbuild.build({
  entryPoints: [
    'dist/your-project/browser/runtime.js',
    'dist/your-project/browser/polyfills.js',
    'dist/your-project/browser/main.js'
  ],
  outfile: 'dist/your-project/browser/bundle.js',
  format: 'iife',
  bundle: true,
  minify: true, // 可选，生产环境建议开启
}).catch(() => process.exit(1));

3. 执行原构建命令即可，此时合并逻辑会正确处理模块依赖。

思路3：排查文件路径与产物变化 #

先确认新构建器的产物结构：

• 旧构建器产物通常在dist/项目名下，新构建器默认会把浏览器产物放在dist/项目名/browser目录
• 部分文件可能不再生成（比如polyfills.js，Angular 17可能已将必要polyfill合并进主文件）
  先检查dist目录下的实际文件，调整build.js中的文件路径和待合并文件列表，再尝试合并。

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