#码力全开·技术π对#Web技术(Chrome):Angular懒加载模块路由配置错误导致ChunkLoadError的解决方法

Angular懒加载模块路由配置错误导致​ChunkLoadError​的解决方法

Chrome
Angular
鱼弦CTO
2025-08-12 09:17:11
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
materialbaobao
materialbaobao

如果是loadChildren/loadComponent的导入路径或导出名不对,或模块未正确声明子路由

Angular 9+ 懒加载必须用动态导入:

​// modules{ path: 'users', loadChildren: () => import('./users/users.module').then(m => m.UsersModule) }// standalone component{ path: 'about', loadComponent: () => import('./about/about.component').then(c => c.AboutComponent) }​​​​​

users.module.ts 里确保:

@NgModule({ imports: [RouterModule.forChild(routes)] })

正确的 export class UsersModule {}(大小写一致)

文件路径、文件名大小写与实际磁盘一致(Linux 大小写敏感)。

路由层级正确:父路由里不要多写或少写 path 前缀。

常见的错误例子

then(m => m.UserModule) 写成了单数,实际导出是 UsersModule。

import('./users.module') 路径漏了文件夹:应为 ./users/users.module。

子模块只 forRoot 没 forChild。

分享
微博
QQ
微信https://www.51cto.com/aigc/
回复
2025-08-12 19:22:48
发布
相关问题
提问