升级到Angular12后Ionic安卓App白屏 报错goog.getLocale不是函数

错误含义 #

TypeError: goog.getLocale is not a function 表示运行时代码尝试调用Google Closure库提供的goog.getLocale()国际化相关方法，但全局goog对象上不存在该方法，核心依赖API缺失直接触发运行时异常，打断应用初始化流程，最终表现为白屏。

白屏诱因 #

核心原因是Angular 12默认构建配置变更，与项目中使用的AGM（Angular Google Maps）相关依赖版本不兼容，具体触发逻辑如下：

• 项目中当前使用的@agm/core@3.0.0-beta.0、agm-direction@0.8.9、agm-overlays@2.0.0等谷歌地图相关依赖，仅适配Angular 11及更早版本，内部依赖旧版Google Maps JS SDK通过Closure库导出的goog全局对象方法。
• Angular 12默认调整了生产构建优化策略：
  • 废弃ES5编译输出，默认仅输出ES2015+格式代码
  • 增强了摇树优化和全局符号清理逻辑，会将未被显式标记为外部依赖的全局方法误裁剪
• 桌面浏览器环境下谷歌地图SDK加载时机早于AGM初始化，因此无报错；移动端Capacitor容器的资源加载顺序发生变化，导致AGM初始化时goog对象还未完成挂载，或是相关方法已经被构建工具裁剪，直接触发异常。
  另外项目中@ngrx全家桶仍停留在v10版本，和Angular 12也存在版本不匹配的潜在问题，但本次报错的直接诱因是AGM相关依赖的版本适配问题。

修复方案 #

• 将所有AGM相关依赖升级到适配Angular 12的版本：@agm/core升级到v1.1.0以上稳定版，同步升级agm-direction、agm-overlays的对应兼容版本
• 在angular.json的构建配置中，将谷歌地图SDK相关的全局goog对象声明为外部依赖，避免被构建工具裁剪：
  找到architect.build.options节点，添加如下配置：

  "externals": {
    "goog": "goog"
  }
  

• 确认index.html中谷歌地图JS SDK的引入放在所有构建产物JS引入之前，保证goog对象在AGM初始化前完成挂载
• 同步升级@ngrx全家桶到v12版本，消除其他依赖不兼容风险

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