Angular5懒加载代码块从错误URL加载问题求助

这种情况我之前也踩过坑，核心问题基本都是Angular的基础路径配置和Java EE的上下文路径不匹配，导致懒加载模块请求时找不到正确的资源位置。下面是一步步的解决办法：

1. 打包时指定正确的base-href #

Angular的懒加载模块是基于base href来解析路径的，如果你把WAR部署到Java EE服务器的某个上下文路径下（比如http://yourserver/myapp/），打包时必须明确指定这个路径：

ng build --prod --output-hashing none --base-href /myapp/

这里的/myapp/要和你WAR部署的上下文路径完全一致，结尾的斜杠不能少。要是不确定上下文路径，可以看服务器部署后的访问URL——比如你访问Angular首页是http://localhost:8080/myapp/index.html，那base-href就是/myapp/。

2. 检查路由配置的懒加载路径 #

确保你的懒加载路由用的是相对路径，别用绝对路径。比如正确的写法：

const routes: Routes = [
  { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule' }
];

绝对路径（比如/lazy/lazy.module#LazyModule）会直接忽略base href的配置，大概率会导致请求路径出错。

3. 确认Java EE服务器的静态资源映射 #

要保证WAR包中Angular打包后的所有资源（包括懒加载的chunk文件，比如0.js、1.js）都能被服务器正确访问：

• 把Angular打包后dist目录下的所有文件，直接放到WAR包的webapp根目录下（或者你指定的静态资源目录）
• 检查Java EE的web.xml或者服务器配置，别让后端Servlet拦截*.js这类静态资源的请求

4. 调试验证路径是否正确 #

打包部署后，打开浏览器开发者工具（F12）切换到Network标签：

• 先看首页加载的main.js、polyfills.js等资源的请求URL是否正确（比如http://yourserver/myapp/main.js）
• 触发懒加载操作，看对应的chunk文件请求URL——如果是http://yourserver/0.js而不是http://yourserver/myapp/0.js，那肯定是base href没配置对

按这几步走，基本就能解决懒加载模块URL错误的问题了。

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