Angular 12升级13后构建成功但浏览器无法加载，报ChunkLoadError

问题描述 #

将Angular 12迁移至Angular 13，迁移流程显示成功，但构建后在浏览器运行时应用无法正常显示，控制台抛出：

ChunkLoadError: Loading chunk 552 failed.

同时控制台提示2个文件未找到，但检查dist目录时发现对应文件实际存在；ng v显示当前Angular版本为13.x。已尝试Stack Overflow上的常规方案但未解决。

排查与解决步骤 #

1. 检查base href配置 #

Angular 13对部署路径的处理更严格，若应用部署在非根目录，需确保base href配置正确：

• 构建时通过命令指定：ng build --base-href /your-app-deploy-path/
• 或在angular.json中配置：

  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "baseHref": "/your-app-deploy-path/"
          }
        }
      }
    }
  }
  

• 同时确认index.html中的<base href="/">与部署路径匹配。

2. 排查文件名大小写问题 #

Linux类服务器区分文件名大小写，而Windows不区分，迁移后可能出现chunk文件名大小写与请求路径不一致的情况：

• 对比控制台报错的请求路径文件名，与dist目录中的实际文件名是否大小写一致
• 修改路由配置、模块导入路径中的大小写，确保与实际文件路径完全匹配

3. 清除缓存并配置构建哈希 #

浏览器缓存旧的chunk清单会导致请求不存在的旧文件名：

• 强制刷新浏览器（Ctrl+Shift+R）清除本地缓存
• 在angular.json中开启构建哈希，确保每次构建生成唯一文件名：

  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "outputHashing": "all"
          }
        }
      }
    }
  }
  

4. 检查延迟加载模块配置 #

Angular 13对延迟加载模块的语法要求更严格，需确保路由配置正确：

• 将旧的字符串式loadChildren替换为动态导入语法：

  // 旧写法
  loadChildren: './path/to/module#ModuleName'
  // 新写法（Angular 8+推荐，13强制要求）
  loadChildren: () => import('./path/to/module').then(m => m.ModuleName)
  

• 检查模块路径是否正确，避免拼写错误或路径层级错误

5. 确认部署路径与服务器配置 #

若应用部署在服务器上，需确保：

• 服务器静态文件根目录指向dist文件夹（如Nginx配置中root字段设置为dist的绝对路径）
• 服务器location配置正确，允许访问dist下的所有静态资源

6. 重新同步Angular CLI与依赖版本 #

可能存在局部CLI版本不匹配或依赖损坏的情况：

• 全局重新安装Angular 13 CLI：

  npm uninstall -g @angular/cli
  npm install -g @angular/cli@13
  

• 清理本地依赖并重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

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