Angular懒加载报错TypeError: 无法读取undefined的属性'ɵmod'

核心问题分析 #

这个错误本质是Angular无法识别你懒加载的模块——ɵmod是Angular编译后模块的内部元数据属性，出现该错误说明加载的模块不符合Angular懒加载要求，或是模块自身配置存在问题。

具体修正步骤 #

1. 确保懒加载指向Feature Module而非路由模块 #

Angular懒加载要求loadChildren必须指向完整的Feature Module（带@NgModule装饰器的根模块），而非单独的路由模块。

修正app-routing.module的路由配置：

const routes: Routes = [
  {
    path: 'dashboard',
    // 正确指向DashboardModule，而非路由模块
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

2. 完善DashboardModule的配置 #

你的DashboardModule中缺少TodayComponent的声明，而路由模块里已经使用了该组件，这会导致模块加载异常。需要将所有路由中用到的组件加入declarations数组：

@NgModule({
  // 加入TodayComponent，确保所有路由组件都被模块声明
  declarations: [DashboardComponent, TodayComponent],
  imports: [DashboardRoutingModule],
  // 若无需在其他模块复用组件，可移除exports配置
})
export class DashboardModule{}

3. 检查组件与模块的路径关联 #

确保DashboardComponent、TodayComponent的文件路径正确，且在DashboardModule中正确导入（无拼写错误、路径错误）。

额外排查点 #

• 检查tsconfig.json的include数组，确保包含./dashboard/**/*，避免模块被排除在编译范围外；
• 若使用Angular 8以下版本，可尝试使用字符串形式的懒加载写法：loadChildren: './dashboard/dashboard.module#DashboardModule'。

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