Angular 2项目报错：无法定位触发错误控件及Chunk 20加载失败问题

嘿，别被错误提示里的表单控件调用栈误导啦！这个Loading chunk 20 failed本质不是表单控件的问题，而是Angular在懒加载模块时，对应的chunk文件找不到或者加载失败导致的。下面给你一步步排查和解决的思路：

1. 先检查懒加载路由配置 #

首先确认你的路由里懒加载模块的配置有没有写错：

• 打开你的路由模块（比如app-routing.module.ts），找到用loadChildren配置的懒加载路由，检查路径和模块名是否正确：

  // 正确的懒加载配置示例
  {
    path: 'user-profile',
    loadChildren: () => import('./user-profile/user-profile.module').then(m => m.UserProfileModule)
  }
  

• 重点看import里的文件路径有没有拼写错误，模块类名是不是和目标模块里的一致。

2. 验证打包后的chunk文件是否存在 #

如果是生产环境部署后出现的问题：

• 登录你的服务器，找到静态资源部署目录，看看chunk-20.js（或者带hash的文件名，比如chunk-20.d4434bb2.js）是不是存在，有没有被完整上传。
• 如果用了CDN，检查CDN上是否同步了这个chunk文件，有没有缓存未更新的情况。

3. 清理缓存试试 #

不管是开发还是生产环境，缓存都可能是元凶：

• 浏览器端：强制刷新页面（Ctrl+F5），或者直接清除浏览器缓存后重新访问。
• 开发环境：先执行ng clean清空Angular的构建缓存，再重新执行ng build或者ng serve。

4. 检查Angular构建配置 #

打开angular.json，检查构建相关的配置：

• 看看outputHashing字段的设置，如果是all，每次构建chunk文件都会生成新的hash名，要确保部署时所有新文件都被替换。
• 可以尝试临时关闭懒加载（把loadChildren改成直接导入模块），重新构建运行，看是否还会报错，以此确认是不是懒加载的问题。

5. 添加全局错误兜底处理 #

为了避免用户看到晦涩的错误提示，可以全局捕获chunk加载失败的情况，做友好处理：

• 创建一个全局错误处理器：

  import { ErrorHandler, Injectable } from '@angular/core';
  
  @Injectable()
  export class GlobalErrorHandler implements ErrorHandler {
    handleError(error: unknown): void {
      const errMsg = (error as Error).message;
      if (errMsg?.includes('Loading chunk')) {
        alert('资源加载失败，请刷新页面重试');
        window.location.reload();
      }
      // 其他错误的处理逻辑
      console.error('全局捕获错误:', error);
    }
  }
  

• 在app.module.ts里注册这个处理器：

  import { NgModule, ErrorHandler } from '@angular/core';
  import { GlobalErrorHandler } from './global-error-handler';
  
  @NgModule({
    // ...其他配置
    providers: [
      { provide: ErrorHandler, useClass: GlobalErrorHandler }
    ]
  })
  export class AppModule { }
  

总结一下：这个错误的核心是懒加载的chunk文件无法被找到/加载，跟表单控件无关，先从路由配置、文件部署、缓存这几个方向排查，大概率就能解决问题啦。

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