Angular 5升级至Angular 6后懒加载模块加载失败问题求助

我来帮你搞定这个懒加载模块的加载块错误！从你的描述来看，问题核心是懒加载模块的资源路径没有继承主应用的dist/前缀，反而从主域名加载，这是Angular 5到6迁移时常见的路径配置问题——因为Angular 6调整了deploy-url和base-href的解析逻辑。

具体解决方案： #

1. 修正ng serve命令参数

你的start脚本里已经设置了--deploy-url和--serve-path，但缺少--base-href参数，这会导致懒加载模块的路径计算不统一。修改后的start脚本如下：

"start": "ng serve --deploy-url http://localhost:4300/dist/ --base-href /dist/ --serve-path /dist/ --public-host http://localhost:4300"

解释：

• --base-href /dist/会设置应用的基础路径，让所有路由和资源请求都以/dist/开头
• 配合--deploy-url，可以确保懒加载的chunk文件也从http://localhost:4300/dist/加载，而不是主域名

2. 检查angular.json配置（关键！）

Angular 6将原有的angular-cli.json替换为angular.json，请确认你的开发环境构建配置里的deployUrl和baseHref是否正确：
找到projects -> 你的项目名 -> architect -> build -> options，添加/修改如下配置：

"options": {
  // ...其他配置
  "deployUrl": "http://localhost:4300/dist/",
  "baseHref": "/dist/"
}

这样ng serve会直接继承这些配置，避免命令行参数和配置文件冲突。

3. 确认懒加载路由的写法

Angular 6推荐使用动态import()语法来定义懒加载路由，确保路径是相对路径：

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'lazy-module',
    loadChildren: () => import('./path/to/your/lazy.module').then(m => m.LazyModule)
  }
];

如果你还在使用旧的字符串写法（'./path/to/your/lazy.module#LazyModule'），请确保路径没有拼写错误，相对路径是相对于当前路由文件的。

4. 清理缓存并重启服务

旧的打包缓存可能导致路径问题，执行以下步骤：

• 删除dist目录
• 运行ng serve重启服务（可以加上--delete-output-path参数自动清理dist：ng serve --delete-output-path ...）

为什么会出现这个问题？ #

Angular 5到6的迁移中，CLI对资源路径的解析逻辑做了优化，deploy-url现在主要用于指定资源的CDN路径，而base-href用于设置应用的基础路由路径。如果两者配置不统一，懒加载模块的chunk文件路径就会偏离主应用的资源路径，导致从主域名加载的错误。

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