Angular 5 AOT编译报错：未找到AppModule的NgModule元数据

这个错误我之前帮好几个Angular开发者排查过，当用AOT编译启动Angular 5应用时出现这个报错，通常是这几个常见原因导致的，给你整理了针对性的解决办法：

1. 检查AppModule的装饰器是否正确 #

确保你的AppModule类上确实标注了@NgModule装饰器，并且相关依赖导入正确，别犯拼写错误：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

要是把@NgModule写成了小写m的@Ngmodule，或者忘记导入NgModule类，Angular肯定找不到元数据。

2. 确认tsconfig.json的AOT配置正确 #

AOT编译对TypeScript配置有特定要求，检查你的tsconfig.json是否包含这些关键配置项：

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit": false
  }
}

重点是emitDecoratorMetadata和experimentalDecorators必须设为true，这俩是Angular读取模块元数据的基础。

3. 检查main.ts的引导方式 #

AOT编译的引导代码和JIT模式不一样，确保你的main.ts用的是AOT专属的引导方式：

// AOT正确引导方式
import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

要是还在用JIT的bootstrapModule方法，就会和AOT编译出的产物不匹配，自然找不到元数据。

4. 清理编译缓存重新构建 #

有时候旧的编译缓存会搞出奇怪的问题，执行以下命令清理后重新构建试试：

# Mac/Linux
rm -rf node_modules dist aot
npm install
npm run build -- --aot

# Windows
rd /s /q node_modules dist aot
npm install
npm run build -- --aot

5. 排查循环依赖或模块导出问题 #

如果AppModule里导入的某个模块存在循环依赖，或者组件/模块没有正确导出，也可能导致元数据解析失败。可以暂时注释掉一些非核心模块，逐个排查定位问题点。

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