Angular 15.2.0生产构建懒加载模块无法加载（404错误）

1. 核对路由懒加载配置 #

• 确保路由中懒加载模块使用相对路径的箭头函数形式，Angular 15推荐写法：

  {
    path: 'lazy-path',
    loadChildren: () => import('./modules/lazy/lazy.module').then(m => m.LazyModule)
  }
  

  避免使用字符串拼接形式（如loadChildren: './modules/lazy/lazy.module#LazyModule'），这类写法易因路径大小写、层级错误引发问题。
• 检查模块实际文件路径与路由配置的路径完全匹配，生产环境服务器通常区分大小写，注意文件名、目录名的大小写一致性。

2. 检查angular.json构建配置 #

• 确认projects.[你的项目名].architect.build.configurations.production下的outputPath正确，构建产物需输出到服务器指定的部署目录。
• 配置正确的baseHref：如果项目部署在域名子路径下（如https://xxx.com/app/），构建时需指定--base-href /app/，或在angular.json中配置：

  "configurations": {
    "production": {
      "baseHref": "/app/",
      // 其他生产配置项
    }
  }
  

  若部署在根路径，baseHref设为/即可。
• 慎用deployUrl：Angular 15中该配置已逐步被baseHref替代，若静态资源部署在独立CDN路径，再考虑设置deployUrl指向资源根地址。

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

Angular是单页应用，直接访问懒加载路径时，服务器会因找不到对应静态文件返回404，需配置路由 fallback到index.html：

• Nginx示例配置：

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

• Apache示例配置：

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

• 测试懒加载chunk文件可访问性：直接在浏览器地址栏输入chunk文件的URL（如/dist/lazy-module.xxxx.js），确认返回200状态码。

4. 验证构建过程与产物 #

• 执行构建命令时添加--verbose参数，查看详细日志确认懒加载模块的chunk文件是否正常生成：

  ng build --configuration production --verbose
  

• 检查dist目录结构，确认懒加载模块对应的chunk文件存在，且文件名与路由加载逻辑匹配。
• 不要关闭AOT编译：Angular 15默认开启AOT，--aot=false会导致懒加载路径解析异常，生产构建务必保持AOT开启。

5. 排查路由模块本身问题 #

• 确认懒加载模块内已正确导出RouterModule.forChild(routes)，模块路由路径与父路由无冲突。
• 调整路由优先级：确保懒加载路由定义在通配符路由（**）之前，避免被提前拦截。

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