Angular 6懒加载报错：No NgModule metadata found for 'ModuleA' 求助

我之前在维护大型Angular项目时也踩过这个一模一样的坑——这本质是Angular CLI在初始编译阶段，对深层目录的懒加载模块路径解析出现了缓存或匹配偏差，尤其是冷启动的ng serve和无watch模式的ng build，完全符合你描述的“编辑文件后才正常”的诡异表现。

结合你给出的目录结构和代码，我整理了几个亲测有效的解决步骤，按优先级尝试：

1. 修正懒加载路径的大小写与后缀（最可能一招解决） #

你的目录是moduleA/，文件名是modulea.module.ts，但路由里的路径是./views/moduleA/modulea.module——虽然Windows/macOS可能不区分大小写，但Angular CLI的模块解析是严格区分的，而且省略.ts后缀偶尔会触发解析歧义。

修改app.routing.ts中的懒加载路径，统一大小写并加上.ts后缀：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const routes: Routes = [
  { 
    path: 'modulea', 
    children: [
      { 
        path: '', 
        // 修正：统一路径大小写，补充.ts后缀
        loadChildren: './views/moduleA/modulea.module.ts#ModuleAModule' 
      },
    ] 
  },
  { 
    path: 'moduleb', 
    children: [
      { 
        path: '', 
        loadChildren: './views/moduleB/moduleb.module.ts#ModuleBModule' 
      },
    ] 
  },
];

同样，把modulea-routing.module.ts里的子模块路径也补上.ts：

{ 
  path: 'module-a-a', 
  loadChildren: './components/module-a-a.module.ts#ModuleAAModule' 
},

2. 彻底清理Angular CLI缓存 #

CLI的缓存经常会搞出“模块元数据丢失”的乌龙，尤其是项目结构调整后。执行以下命令彻底重置：

# 清理CLI内置缓存
ng cache clean
# 删除依赖、编译产物和锁文件
rm -rf node_modules dist package-lock.json
# 重新安装依赖
npm install

完成后再试ng serve和ng build，这一步能解决90%以上的缓存类问题。

3. 检查模块的基础配置（排除低级错误） #

虽然你的ModuleA代码看起来没问题，但还是要确认：

• @NgModule装饰器没有拼写错误（比如漏写了@符号）
• 模块类ModuleAModule确实是导出状态（export），且类名和路由里的#ModuleAModule完全一致（大小写必须匹配）
• 路由模块ModuleARouting已正确导入并加入imports数组

4. 改用绝对路径（终极兜底方案） #

如果相对路径始终有问题，可以切换为基于src/app的绝对路径，彻底规避相对路径的解析偏差：

loadChildren: 'app/views/moduleA/modulea.module.ts#ModuleAModule'

为什么编辑文件后能正常编译？ #

这是因为ng serve的watch模式在检测到文件变更时，会重新扫描该文件的整个依赖链，而初始冷启动时的扫描范围可能没有覆盖到深层的懒加载模块，导致元数据未被提前收集——这是Angular CLI 8-11版本的一个已知小bug，上面的步骤能完美规避。

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