Angular 18迁移新构建器后生成空Chunk文件致MIME类型错误

可能的原因 #

• 代码分割逻辑异常：路由懒加载、动态导入的模块为空或路径错误，导致构建器生成无内容的空chunk，同时其他chunk仍保留对它的引用。比如某个懒加载模块没有实际业务代码，或者loadChildren路径写错，构建器依然会生成对应的chunk文件。
• 构建器版本bug：@angular/build 18.2.12存在特定场景下的chunk生成缺陷，比如处理空模块、重复导入等边缘情况时，错误生成空chunk并被其他chunk引用。
• 缓存或依赖冲突：构建缓存残留的旧数据，或者第三方依赖的打包逻辑与新构建器不兼容，触发了空chunk的生成。

解决方法 #

• 排查代码分割配置
  • 检查所有路由懒加载模块，确保每个模块都有有效代码，loadChildren的路径准确无误，模块正确导出NgModule。
  • 核对动态导入语句（如import('./lazy-module')），确认目标模块非空，导入路径无拼写错误。
• 调整构建器版本
  • 升级到@angular/build的最新稳定补丁版，官方可能已修复该空chunk问题。
  • 若升级无效，可暂时回退到18.1.x版本，验证是否为新版本引入的问题。
• 清理构建缓存
  • 执行命令 ng cache clean 清除Angular构建缓存，之后重新构建项目，避免缓存导致的异常。
• 检查自定义Webpack配置
  • 若项目使用了extraWebpackConfig，排查splitChunks等代码分割规则是否过于宽松，导致生成空chunk。可临时移除自定义配置，确认问题是否消失。
• 临时禁用自动代码分割
  • 在angular.json的build配置中添加：

    "optimization": {
      "scripts": {
        "splitChunks": false
      }
    }
    

    关闭自动代码分割，验证是否还会生成空chunk。若问题解决，再逐步调整splitChunks的具体规则。

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