Angular 6 compiler.js报错求助：无法读取'name'属性

这种诡异的编译错误真的闹心——明明只是加了两个方法，删了之后还报错，而且堆栈全是混淆代码，完全摸不着头绪对吧？别慌，这个错误的核心提示是"cannot be used as an entry component"，结合你的情况，大概率是缓存残留、元数据配置错误或者组件引用异常导致的，你新增的方法可能只是个触发点而已。下面是一步步的排查方案：

第一步：彻底清理所有缓存 #

缓存是这类“改回去还报错”问题的头号嫌疑犯，尤其是Angular构建缓存和npm缓存可能残留了错误的编译元数据：

• 先清理Angular的构建产物和缓存：运行ng clean（Angular 6 CLI支持这个命令），如果不行就手动删除项目根目录下的dist文件夹和node_modules/.cache目录。
• 清理npm缓存：执行npm cache clean --force，之后重新安装依赖：npm install。
• 重启开发服务器时加上--no-cache参数：ng serve --no-cache，避免加载旧缓存。

第二步：检查Entry Components配置 #

错误提示直接指向entry component的问题，先排查根模块和各个Feature Module的entryComponents数组：

• 打开AppModule和所有自定义模块，检查entryComponents里的组件是否都正确导入了，有没有拼写错误、或者引用了已经被删除/重命名的组件。
• 注意：Angular 6中，通过路由声明的组件通常不需要手动加入entryComponents，但模态框、动态加载的组件需要。如果某个组件被错误地加入了entryComponents但本身元数据有问题，就会触发这个错误。

第三步：排查组件/服务的元数据错误 #

编译器扫描组件/服务的装饰器元数据时，如果出现异常，可能会导致内部的组件类型对象变成undefined，进而报错Cannot read property 'name'：

• 逐个检查最近修改过的组件（包括你新增方法的那两个）的@Component装饰器：检查selector、templateUrl/template、styleUrls有没有路径错误或拼写错误。
• 检查服务的@Injectable装饰器：有没有错误的providedIn配置（比如providedIn: 'root'是否正确使用）。
• 如果项目比较大，可以尝试注释法排查：逐个注释模块中的组件声明，重启服务看错误是否消失，以此缩小问题范围。

第四步：检查AOT编译配置 #

如果你的项目开启了AOT编译（Angular 6默认开发环境是JIT，生产环境是AOT），可以分别测试两种编译模式：

• 运行ng serve --no-aot，看错误是否消失，如果消失，说明是AOT编译时的元数据处理问题，重点排查组件的元数据是否符合AOT要求（比如不能在装饰器里用动态表达式）。
• 运行ng build --aot，查看编译过程中是否有更详细的错误提示（比浏览器控制台的报错更具体）。

第五步：检查TypeScript配置和导出问题 #

• 打开tsconfig.json，检查compilerOptions中的strict、emitDecoratorMetadata等选项是否被错误修改，这些选项会影响Angular对组件元数据的解析。
• 确保所有组件类都正确导出了，比如某个组件如果只在模块内部使用，但被错误地加到了entryComponents，又没有导出，也可能导致编译器无法识别其类型。

按照这个顺序排查，大概率能找到问题所在——毕竟你之前的项目稳定运行了一年多，问题肯定不是核心框架本身，而是某个配置、缓存或元数据的小异常被触发了。

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