Angular使用loadChildren懒加载报loadChunkError:true错误如何解决

这个错误本质是动态import()加载对应懒加载代码块（即你配置的al-ordering命名的webpack chunk）时Promise被reject，触发了你在then第二个参数里自定义的抛出逻辑，常见触发场景如下：

• 路由配置存在语法/结构错误：Angular原生Route配置对象不识别selector字段，你把ngx-element注册元素用的selector属性错误写到了路由配置里，会干扰路由模块的加载解析逻辑；另外webpack魔法注释里用反引号包裹chunk名，部分webpack版本会无法正确识别chunk命名规则，导致chunk输出路径和动态导入的匹配路径不一致。
• 部署缓存不匹配：版本迭代发布后，用户本地浏览器缓存了旧版本的入口文件（runtime.js、index.html），旧文件里记录的懒加载chunk哈希地址和服务器上现存的新版本chunk路径不匹配，请求chunk时返回404，触发加载失败。
• 资源路径配置错误：Angular构建时配置的baseHref、deployUrl参数和项目实际部署的服务器路径不一致，导致动态import拼接出的chunk请求路径错误，资源无法访问。
• ngx-element时序冲突：如果是将OrderingModule包装为自定义Web Component使用，模块未完成加载就提前执行自定义元素注册逻辑，会打断模块加载流程，触发Promise reject。
• 网络或资源访问异常：用户网络波动、CDN节点故障、静态资源CORS配置错误，都会导致chunk资源请求失败。

• 修正基础路由配置：移除路由配置中不属于Route接口的selector字段，给路由配置正确的path属性，同时将webpack魔法注释里的chunk名包裹符号从反引号改为单引号，避免webpack解析异常。修正后的参考配置：

{
  path: 'ordering',
  loadChildren: () => import(
    /* webpackChunkName: 'al-ordering' */
    './features/ordering/ordering.module'
  ).then(m => m.OrderingModule)
}

如果需要在ngx-element中使用该模块的selector，将selector配置放到模块内部的自定义元素注册逻辑里，不要和路由配置混写。

• 修复部署缓存逻辑：服务器端给index.html、runtime入口文件配置no-cache响应头，保证用户每次访问都拉取最新的入口映射文件；带内容哈希的业务chunk文件可以配置长缓存，兼顾加载速度和版本更新正确性。可以额外添加全局chunk加载失败监听，捕获到loadChunkError时自动触发一次无缓存页面刷新，拉取最新版本资源，避免用户手动清理缓存。
• 核对构建部署路径：执行生产构建时，根据项目实际部署的子路径传入正确的--base-href参数，例如项目部署在站点的/app/子路径下，构建命令需要添加--base-href=/app/，保证动态import拼接的chunk请求路径和服务器实际资源路径一致。
• 调整ngx-element注册时序：将自定义元素的注册逻辑放到模块加载完成的回调里执行，确保模块内所有依赖都加载完成后，再调用createCustomElement方法注册自定义元素，避免时序冲突打断模块加载。
• 排查资源请求问题：打开浏览器开发者工具的网络面板，复现错误时查看al-ordering开头的chunk文件请求状态：如果返回404就核对对应chunk文件是否上传到服务器的正确路径；如果返回CORS跨域错误就给静态资源服务配置正确的跨域响应头；如果是请求超时就排查CDN节点可用性和用户网络状态。

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