Ionic5+Angular9生产构建白屏 提示@angular/compiler未加载问题求助

解决方案 #

问题根因 #

该报错核心为生产模式默认开启AOT（预编译）时，项目中存在不符合AOT编译规范的代码/第三方依赖，导致编译过程中未正确生成运行时代码，触发JIT编译 fallback 但@angular/compiler包被生产构建的tree-shaking机制移除，最终出现白屏。

可依次执行以下步骤排查解决： #

• 步骤1：排查第三方依赖兼容性
  你依赖中的ionic-pullup@5.0.0-beta.3、ionic2-calendar@0.6.9属于社区维护的旧版本组件，普遍未适配Angular9的AOT编译规则。可先临时注释所有这两个组件的相关引用、从模块导入中移除对应依赖后，重新打生产包测试，优先排除第三方依赖问题。

• 步骤2：临时兼容验证
  在项目src/main.ts文件的最顶部添加一行导入代码：

  import '@angular/compiler';
  

  重新执行生产构建，如果白屏问题消失，可确认是AOT兼容问题，再进一步排查具体不符合规范的代码即可。

• 步骤3：修正编译配置
  打开项目根目录的tsconfig.json，在angularCompilerOptions节点下添加/修改以下配置，关闭兼容性差的Ivy编译引擎：

  "angularCompilerOptions": {
    "enableIvy": false,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
  

  另外不要关闭aot和buildOptimizer配置，这两个配置是生产构建性能和包体积优化的核心配置，关闭后反而会触发更多运行时问题。

• 步骤4：全量清理构建
  每次修改配置后，执行以下命令清理所有缓存后再打包，避免缓存导致的异常：

  rm -rf node_modules package-lock.json
  npm install
  ionic cordova platform rm android
  ionic cordova platform add android@9.0.0
  ionic cordova build android --prod --release
  

• 步骤5：排查业务代码规范
  如果以上步骤都未解决，检查所有业务代码是否符合AOT编译要求：

  • 所有组件、模块、管道、指令必须显式声明对应装饰器，禁止动态生成装饰器
  • 模板中使用的所有变量、方法必须在对应组件类中显式声明，禁止动态挂载属性
  • 所有NgModule的declarations、imports、providers数组必须使用静态常量，禁止传入动态生成的变量

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