Angular 5使用loadChildren从模块加载路由报错：未找到NgModule元数据

结合你使用的Angular 5.2、angular-cli 1.7.3和ng-packagr 2.4.1环境，这个错误通常和路由路径格式、模块配置、打包缓存或循环依赖有关，以下是针对性的解决方案：

1. 确认loadChildren的路径语法符合Angular 5.x要求 #

Angular 5.x还不支持Angular 8+的箭头函数式loadChildren语法，必须使用字符串路径+#模块名的格式。检查你的CoreModule路由配置：

const routes: Routes = [
  { path: '', component: LoginComponent },
  { 
    path: 'dashboard', 
    canActivate: [AuthGuardService],
    // 注意格式：相对路径 + # + 模块类名
    loadChildren: './dashboard/dashboard.module#DashboardModule' 
  }
];

确保路径是相对于当前CoreModule文件的正确相对路径，模块类名拼写完全一致。

2. 验证DashboardModule的NgModule配置正确性 #

确保DashboardModule正确添加了@NgModule装饰器，并且导入了RouterModule.forChild()来配置子路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入你的Dashboard组件
import { DashboardComponent } from './dashboard.component';

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

@NgModule({
  imports: [RouterModule.forChild(dashboardRoutes)],
  exports: [RouterModule], // 可选，但确保路由能被正确识别
  declarations: [DashboardComponent]
})
export class DashboardModule { }

重点检查：

• 有没有遗漏@NgModule装饰器
• 是否通过RouterModule.forChild()注册了子路由
• 模块类名和loadChildren中指定的完全一致

3. 检查ng-packagr的打包配置（如果DashboardModule是打包成库的话） #

如果你用ng-packagr将DashboardModule打包为独立库，需要确保ng-package.json配置正确：

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "src/dashboard.module.ts" // 指向你的模块入口文件
  }
}

同时，在主应用中引用打包后的模块时，路径要指向dist目录下的库文件，比如：

loadChildren: '../dist/dashboard/dashboard.module#DashboardModule'

打包后记得重新构建库：ng-packagr -p ng-package.json

4. 清理缓存并重启开发服务 #

Angular CLI 1.x的缓存可能导致元数据解析异常，执行以下步骤：

• 删除项目根目录下的dist文件夹
• 删除node_modules/.cache文件夹（如果存在）
• 执行ng serve --aot重启服务（AOT模式能提前发现元数据问题）

5. 排查循环依赖问题 #

检查CoreModule和DashboardModule之间是否存在循环导入：

• 比如CoreModule导入了DashboardModule，而DashboardModule又导入了CoreModule中的服务/组件
• 这种循环会导致Angular无法正确解析NgModule元数据，需要重构代码，将共享逻辑移到独立的SharedModule中

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