Angular 4.4升级至8.2后懒加载部署ChunkLoadError问题求助

这种本地生产模式跑的顺风顺水，一部署到服务器就报ChunkLoadError: Loading chunk 24 failed的情况，我碰到过好多次了，基本都是路径、缓存或者服务器路由配置的问题，给你几个针对性的解决方案：

1. 先把base-href配置搞对 #

Angular构建时如果没指定正确的base-href，部署后相对路径直接就乱了，自然找不到块文件。

• 构建命令里加上--base-href参数：如果你的应用部署在服务器根目录，就用/；要是在子目录比如/my-app/，就改成对应路径：

  ng build --prod=true --cross-origin=anonymous --source-map=false --base-href /
  

• 嫌每次加参数麻烦的话，直接在angular.json里配置：找到projects -> [你的项目名] -> architect -> build -> options，加上"baseHref": "/"，以后构建就自动生效了。

2. 搞定浏览器缓存的坑 #

服务器缓存了旧的块文件，或者构建出来的块文件名没加唯一哈希，都会导致新旧资源混淆。

• 先确认angular.json里的outputHashing是all（prod模式默认是这个，但保险起见查一下），这样每个构建的块文件都会带唯一哈希值，彻底避免缓存冲突：

  "outputHashing": "all"
  

• 部署的时候记得清掉服务器上的旧静态资源，或者给服务器加个缓存策略，让js块这类静态资源别被长期缓存，比如设置Cache-Control头为no-cache或者短过期时间。

3. 服务器路由得配置fallback #

懒加载依赖Angular的前端路由，要是服务器没配置 fallback，用户直接访问懒加载模块的路由时，服务器会返回404，间接导致块加载失败。

• 用Nginx的话，在配置里加个try_files指令，把所有请求都转发到index.html：

  location / {
    try_files $uri $uri/ /index.html;
  }
  

• 用Apache的话，建个.htaccess文件，加Rewrite规则：

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  

4. 核对构建产物的路径 #

本地构建完看看dist目录里有没有报错的那个24.js块文件，再对比服务器上部署的目录结构和本地是不是完全一致，确保所有静态资源都上传到位了。

5. 检查跨域配置 #

你用了--cross-origin=anonymous，如果静态资源和页面不在同一个域名下，得确保服务器配置了CORS头，允许对应的域名访问这些块文件。

要是以上方法都试了还不行，打开浏览器开发者工具的Network面板，看看加载失败的块文件请求URL到底是什么，路径错没错，一眼就能定位问题所在。

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