Angular 11模块懒加载ng serve运行正常 执行构建时报错

报错场景 #

Angular版本为11.1.2，项目配置模块懒加载后，ng serve本地启动服务时功能完全正常，执行构建操作时触发如下报错：

[error] Error: When building multiple chunks, the "output.dir" option must be used, not "output.file". To inline dynamic imports, set the "inlineDynamicImports" option
中文翻译：[错误] 构建多个代码块时，必须使用output.dir配置项而非output.file。如果需要内联动态导入，请设置inlineDynamicImports配置项。

根因 #

• 懒加载逻辑会生成多个独立的代码chunk包，而生产构建配置里指定了单文件输出参数output.file，两者存在配置冲突
• 本地ng serve走开发环境构建配置，默认采用多chunk输出模式，因此不会触发报错

解决方案 #

方案一：保留懒加载能力（推荐） #

修改构建配置，删除单文件输出的限制：

1. 打开项目根目录下的angular.json配置文件
2. 定位到projects → <你的项目名称> → architect → build → options节点
3. 检查配置项，删除自定义配置（含额外引入的自定义webpack/rollup配置）里的output.file参数，仅保留Angular原生的outputPath指定输出目录即可，Angular默认会自动处理多chunk的输出逻辑
4. 重新执行构建命令验证

方案二：关闭懒加载chunk拆分，内联动态导入 #

如果不需要懒加载拆分，要把所有代码打包为单个文件，直接开启内联动态导入配置即可：
在angular.json对应构建配置的options节点下添加"inlineDynamicImports": true参数：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "options": {
            "inlineDynamicImports": true,
            // 其余原有配置保持不变
          }
        }
      }
    }
  }
}

如果使用自定义构建工具配置，直接在对应构建工具的配置项中开启inlineDynamicImports: true即可。

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