Angular+Ionic开启optimization后Android/iOS启动白屏报错求助

核心原因 #

开启optimization=true后，Angular的代码压缩混淆工具（Terser）会重命名Firebase/Capacitor相关的标识符，导致原本的auth方法被混淆为ke.auth，但代码调用逻辑仍依赖原标识符，从而抛出TypeError: ke.auth is not a function错误，引发白屏/无限启动页问题。

具体解决步骤 #

1. 调整Angular构建配置，保护Firebase/Capacitor依赖 #

修改angular.json中测试环境的build配置，避免关键依赖被错误优化或混淆：

"configurations": {
  "test": {
    "optimization": true,
    "aot": true,
    "buildOptimizer": true,
    // 允许CommonJS依赖，防止Firebase包被误处理
    "allowedCommonJsDependencies": [
      "@firebase/app",
      "@firebase/auth",
      "@firebase/messaging",
      "@capacitor/push-notifications"
    ],
    // 配置Terser保留关键标识符不被混淆
    "terserOptions": {
      "keep_classnames": true,
      "keep_fnames": true,
      "mangle": {
        "reserved": ["auth", "getToken", "subscribeToTopic"]
      }
    }
  }
}

2. 修正推送注册代码，规避混淆风险 #

调整Firebase初始化和Capacitor推送注册的写法，避免因变量重命名导致的调用失败：

// 错误写法（易被混淆）
const { auth } = firebase.initializeApp(environment.firebase);
auth().signInAnonymously();

// 正确写法（显式保留实例引用）
const firebaseApp = firebase.initializeApp(environment.firebase);
const authInstance = firebaseApp.auth();
authInstance.signInAnonymously();

// Capacitor推送注册逻辑调整
async registerPushNotifications() {
  const { PushNotifications } = Plugins;
  await PushNotifications.requestPermissions();
  // 显式声明Firebase消息实例，避免被混淆
  const messaging = firebase.messaging();
  const token = await messaging.getToken();
  await PushNotifications.register();
}

3. 消除Source Map加载警告 #

在测试环境build配置中关闭不必要的Source Map生成：

"configurations": {
  "test": {
    // ...其他配置
    "sourceMap": false
  }
}

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