Angular升级至5.0.0后ngc编译报错：无法加载NgClass摘要

我之前也遇到过类似的Angular版本升级后的编译问题，咱们一步步拆解原因和解决办法：

问题根源 #

Angular 5的ngc（AOT编译器）对模块元数据的处理逻辑比Angular 4严格得多。当你的MyModuleB导入MyModuleA时，ngc需要完整解析MyModuleA及其所有依赖模块的元数据汇总（summary），但如果MyModuleA没有正确导出它的依赖模块，MyModuleB的编译上下文就无法找到这些依赖的指令/组件的元数据，从而抛出类似“Could not load the summary for directive X”的错误。

具体解决步骤 #

1. 修复共享模块的导出配置 #

MyModuleA作为被其他模块导入的共享模块，需要把它依赖的、外部模块可能用到的公共模块导出。修改MyModuleA的代码：

@NgModule({
  imports: [ CommonModule, IonicModule, TranslateModule.forChild() ],
  exports: [ CommonModule, IonicModule, TranslateModule ] // 新增导出配置
})
export class MyModuleA {
  static forRoot(): ModuleWithProviders {
    return { ngModule: MyModuleA, providers: [ ModuleAService ] };
  }
}

这样MyModuleB导入MyModuleA后，就能间接获取到CommonModule、IonicModule等模块的元数据，ngc就能找到NgClass、ActionSheetCmp这些指令的summary了。

2. 调整tsconfig.json的编译参数 #

Angular 5默认开启了strictMetadataEmit（严格元数据导出），这个选项会严格校验模块元数据的有效性，可能放大了之前版本隐藏的依赖问题。你可以先临时关闭它来验证问题：
在tsconfig.json的compilerOptions里添加：

"strictMetadataEmit": false

⚠️ 注意：这只是临时调试手段，最终建议保持这个选项开启（或者默认值），因为它能确保你的模块符合AOT编译的规范，避免后续出现更隐蔽的问题。

3. 清理依赖和编译缓存 #

版本升级后，旧的依赖缓存或编译产物可能导致冲突，执行以下命令彻底清理：

# 删除node_modules和锁文件
rm -rf node_modules
rm package-lock.json
# 重新安装依赖
npm install
# 清理之前的编译产物（如果有对应的脚本）
npm run clean

之后再重新执行ngc编译，看是否解决问题。

4. 理解模块依赖传递逻辑 #

你疑惑为什么MyModuleB没用到IonicModule却需要处理它的错误，其实核心原因是：MyModuleA内部的组件/指令可能依赖了IonicModule的内容，当ngc编译MyModuleB时，需要解析MyModuleA的完整依赖链。如果MyModuleA没有导出IonicModule，ngc在MyModuleB的编译上下文中就找不到IonicModule的元数据，从而报错。

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