Angular 8升级至9后页面空白，控制台报registerNgModuleType错误

1. 排查第三方依赖兼容性 #

• 运行ng update @angular/core @angular/cli，让Angular CLI自动处理核心依赖升级，同时它会提示哪些第三方库需要更新到兼容Angular 9的版本。
• 检查package.json中的第三方库版本，比如Angular Material、ngx-bootstrap这类常用库，必须升级到9.x系列版本。
• 执行npm ls查看依赖树，排查是否存在依赖Angular 8的嵌套包，这类包会导致元数据解析冲突。

2. 检查NgModule配置错误 #

• 逐一检查所有模块的imports、declarations、providers数组，确认没有引入未定义的组件、指令或服务（比如导入路径错误、组件未正确导出）。
• 检查懒加载路由配置，将旧的字符串式懒加载语法（如loadChildren: './module/path#ModuleName'）替换为Angular 9推荐的动态导入语法：

  loadChildren: () => import('./module/path').then(m => m.ModuleName)
  

3. 临时禁用Ivy编译器测试 #

Angular 9默认启用Ivy渲染引擎，部分旧第三方库可能不兼容Ivy，可临时禁用排查：

• 在tsconfig.json的angularCompilerOptions中添加配置：

  "angularCompilerOptions": {
    "enableIvy": false
  }
  

• 执行ng clean && ng build --prod重新构建项目，若页面恢复正常，说明存在不兼容Ivy的依赖，需升级该依赖至支持Ivy的版本。

4. 彻底清理缓存与依赖 #

• 删除node_modules、package-lock.json（或yarn.lock）文件
• 执行npm cache clean --force清理npm缓存
• 运行npm install重新安装依赖
• 执行ng clean清理Angular构建缓存后再重新启动项目

5. 验证入口文件与Bootstrap配置 #

• 确认main.ts中的bootstrap代码正确无误：

  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
  

• 检查AppModule是否正确导出，元数据（如declarations、imports）无语法错误。

内容的提问来源于stack exchange，提问作者Владислав