Angular 5混合路由（懒加载+非懒加载）布局实现报错求助

我来帮你梳理下这个问题的核心原因和解决方案，结合Angular 5的路由机制和你的需求，应该能找到两全的办法：

一、定位报错根源 #

你遇到的Cannot find module '../../dashboard/dashboard.module'错误，大概率是Angular 5懒加载模块的写法不符合规范导致的。在Angular 5及更早版本中，懒加载模块的loadChildren必须使用「路径+#模块类名」的字符串格式，而不是单纯的模块路径。

如果你的代码里只写了loadChildren: '../../dashboard/dashboard.module'，缺少#DashboardModule这部分，Webpack就无法正确识别要懒加载的模块类，自然会抛出找不到模块的错误。

二、具体解决方案 #

1. 修正懒加载路由的写法 #

打开AuthenticatedLayoutRoutingModule，把懒加载的路由配置修改为：

const routes: Routes = [
  {
    path: '',
    // 必须加上#和模块类名
    loadChildren: '../../dashboard/dashboard.module#DashboardModule'
  }
];

注意要确保DashboardModule是你在dashboard.module.ts中导出的类名，大小写要完全一致。

2. 确认非懒加载模块的导入方式 #

你需要保证核心的非懒加载模块（比如PublicLayoutModule）是直接导入到顶层路由模块的imports数组中，而不是用loadChildren：

// app-layout-router.module.ts
import { PublicLayoutModule } from './public/public-layout.module';
import { AuthenticatedLayoutModule } from './authenticated/authenticated-layout.module';

@NgModule({
  imports: [
    RouterModule.forRoot([
      { path: '', component: PublicLayoutComponent },
      { path: 'dashboard', component: AuthenticatedLayoutComponent }
    ]),
    // 非懒加载模块直接导入
    PublicLayoutModule,
    AuthenticatedLayoutModule
  ],
  exports: [RouterModule]
})
export class AppLayoutRouterModule { }

这样公共页面（登录页等）会被打包到主chunk中，预渲染后用户打开就能直接交互，不需要等待模块加载。

3. 验证Dashboard模块的配置 #

确保DashboardModule本身配置正确，包含自己的路由模块：

// dashboard.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { DashboardComponent } from './dashboard.component';

@NgModule({
  declarations: [DashboardComponent],
  imports: [
    CommonModule,
    DashboardRoutingModule
  ]
})
export class DashboardModule { }

它的路由模块要定义好空路径对应的组件：

// dashboard-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard.component';

const routes: Routes = [
  { path: '', component: DashboardComponent }
];

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

4. 预渲染配置调整 #

如果你用Angular Universal做预渲染，记得在配置文件中排除/dashboard路由，只预渲染公共页面的路径。这样既满足SEO需求，又不会影响懒加载模块的正常加载逻辑。

三、验证效果 #

完成上述修改后，执行ng build，你应该能看到打包产物中生成了独立的dashboard chunk文件（比如0.chunk.js），访问/dashboard时会动态加载这个chunk，同时公共页面打开时无需额外加载模块，符合你的性能需求。

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