Angularfire不适用于ios上的离子电容器应用程序

Question

我使用的离子与电容器和角火。它可以正常工作，但在ios上不起作用。在ios上，我没有看到任何错误--只看到永远不会返回任何内容的firebase调用。下面是我的package.json和其他相关信息。

ionic.info：

ionic info    

Ionic:

   Ionic CLI                     : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.9.1
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.1.4
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

   Capacitor CLI      : 3.3.2
   @capacitor/android : 3.3.2
   @capacitor/core    : 3.3.2
   @capacitor/ios     : 3.3.2

Cordova:

   Cordova CLI       : 10.0.0 (cordova-lib@10.1.0)
   Cordova Platforms : android broken, ios 5.1.1
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res (update available: 0.15.4) : 0.15.3
   native-run                             : 1.5.0

System:

   ios-deploy : 1.9.4
   ios-sim    : ios-sim/9.0.0 darwin-x64 node-v14.17.0
   NodeJS     : v14.17.0 (/usr/local/bin/node)
   npm        : 7.24.0
   OS         : macOS Monterey
   Xcode      : Xcode 13.1 Build version 13A1030d

Package.json：

  "dependencies": {
    "@angular/common": "~12.1.1",
    "@angular/core": "~12.1.1",
    "@angular/fire": "^7.2.0",
    "@angular/forms": "~12.1.1",
    "@angular/platform-browser": "~12.1.1",
    "@angular/platform-browser-dynamic": "~12.1.1",
    "@angular/router": "~12.1.1",
    "@capacitor/android": "^3.3.2",
    "@capacitor/app": "^1.0.6",
    "@capacitor/browser": "^1.0.6",
    "@capacitor/core": "3.3.2",
    "@capacitor/device": "^1.1.0",
    "@capacitor/haptics": "^1.1.3",
    "@capacitor/ios": "^3.3.2",
    "@capacitor/keyboard": "^1.1.3",
    "@capacitor/splash-screen": "^1.1.6",
    "@capacitor/status-bar": "^1.0.6",
    "@capacitor/storage": "^1.2.3",
    "@ionic-native/app-version": "^5.36.0",
    "@ionic-native/barcode-scanner": "^5.36.0",
    "@ionic-native/call-number": "^5.36.0",
    "@ionic-native/camera": "^5.36.0",
    "@ionic-native/camera-preview": "^5.36.0",
    "@ionic-native/contacts": "^5.36.0",
    "@ionic-native/email-composer": "^5.36.0",
    "@ionic-native/in-app-browser": "^5.36.0",
    "@ionic-native/in-app-purchase": "^5.36.0",
    "@ionic-native/in-app-purchase-2": "^5.36.0",
    "@ionic-native/social-sharing": "^5.36.0",
    "@ionic/angular": "^5.5.2",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "call-number": "^1.0.1",
    "cordova-plugin-app-version": "^0.1.12",
    "cordova-plugin-camera": "^6.0.0",
    "cordova-plugin-camera-preview": "^0.12.3",
    "cordova-plugin-contacts": "^3.0.1",
    "cordova-plugin-email-composer": "^0.10.0",
    "cordova-plugin-inappbrowser": "^5.0.0",
    "cordova-plugin-inapppurchase": "^1.2.0",
    "cordova-plugin-purchase": "^10.6.1",
    "cordova-plugin-x-socialsharing": "^6.0.3",
    "firebase": "^9.5.0",
    "forcejs": "^2.2.1",
    "phonegap-plugin-barcodescanner": "^8.1.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "xcode": "^3.0.1",
    "xml-js": "^1.6.11",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.1",
    "@angular-eslint/builder": "~12.0.0",
    "@angular-eslint/eslint-plugin": "~12.0.0",
    "@angular-eslint/eslint-plugin-template": "~12.0.0",
    "@angular-eslint/template-parser": "~12.0.0",
    "@angular/cli": "~12.1.1",
    "@angular/compiler": "~12.1.1",
    "@angular/compiler-cli": "~12.1.1",
    "@angular/language-service": "~12.0.1",
    "@capacitor/cli": "3.3.2",
    "@ionic/angular-toolkit": "^4.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "es6-promise-plugin": "^4.2.2",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.2.4"
  }

app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  entryComponents: [
  ],
  imports: [
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    BrowserModule,
    HttpClientModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    FormsModule,
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

以下是从未执行且catch块中没有错误的代码。在android上，同样的效果也很好：

 const resp:any = await this.dataSvc.getSeedConfig()
 console.log("seed config is::" + JSON.stringify(resp))

因此，上面的代码不会转到catch块，也不会在ios上打印种子配置。在android上运行得很好。

此外，在ios上，它也使用活动重新加载(使用

ionic capacitor run ios -l --external

所以，如果我使用xcode运行它，那么它就不能工作。不知道在那个特定的情况下是什么阻塞

Answer 1

https://stackoverflow.com/a/70594992/5701521已经在这里回答了这个问题，但是在这里回答也是有用的。

在这个问题上也有很多困难，但我设法解决了。对于那些需要帮助的人，这是我的密码。

您可以从app.module.ts删除所有与Firebase相关的导入，因为此解决方案只使用Firebase。rxfire和@angular/fire包可以从package.json中删除。我唯一的依赖是"firebase": "^9.6.1"。我使用getObject和list函数的可观察性，因为这是我所习惯的，我不想重写我的原始代码。

import { Injectable } from '@angular/core';
import { Capacitor } from '@capacitor/core';
import { environment } from '@environment';
import { initializeApp } from 'firebase/app';
import { Auth, getAuth, indexedDBLocalPersistence, initializeAuth, signInWithCustomToken } from 'firebase/auth';
import { Database, getDatabase, onValue, orderByChild, query, ref } from 'firebase/database';
import { Observable, Observer, from } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class FirebaseService {
  private readonly database: Database;
  private readonly auth: Auth;

  constructor() {
    const firebaseApp = initializeApp(environment.firebase);

    if (Capacitor.isNativePlatform()) {
      initializeAuth(firebaseApp, {
        persistence: indexedDBLocalPersistence
      });
    }

    this.database = getDatabase(firebaseApp);
    this.auth = getAuth(firebaseApp);
  }

  connectFirebase(firebaseToken) {
    return from(signInWithCustomToken(this.auth, firebaseToken));
  }

  disconnectFirebase() {
    return from(this.auth.signOut());
  }

  getObject<T>(path: string): Observable<T> {
    return new Observable((observer: Observer<T>) => {
      const dbRef = ref(this.database, path);
      const listener = onValue(dbRef, snapshot => {
        const data = snapshot.val();
        observer.next(data);
      });

      return {
        unsubscribe() {
          listener();
        }
      };
    });
  }

  public list<T>(path: string, orderChildBy?: string): Observable<Array<T>> {
    return new Observable<Array<T>>((observer: Observer<Array<T>>) => {
      const dbRef = ref(this.database, path);
      const dbReference = !orderChildBy ? dbRef : query(dbRef, orderByChild(orderChildBy));

      const listener = onValue(dbReference, snapshot => {
        const data = Object.values<T>(snapshot.val() || {});
        console.log(path, data);
        observer.next(data);
      });

      return {
        unsubscribe() {
          listener();
        }
      };
    });
  }
}

对于那些看不到由firebase引发的错误消息的人，请在Safari控制台中尝试下面的命令来查看错误。

window.location.reload()

Answer 2

试着将你的天使之火降到v7.0，它可能适用于firebase v9。

Answer 3

在我的例子中，我采用了以下链接：https://github.com/angular/angularfire/issues/3087#issuecomment-990599459

在为iOS仿真器和实际的iOS设备构建时，我也遇到了这个问题，但是将它添加到app.component.ts中对我是有帮助的。

import { Component } from '@angular/core';
import { Capacitor } from '@capacitor/core';
import { initializeApp } from 'firebase/app';
import { indexedDBLocalPersistence, initializeAuth } from 'firebase/auth';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor() {
    const app = initializeApp(environment.firebase);
    if (Capacitor.isNativePlatform) {
      initializeAuth(app, {
        persistence: indexedDBLocalPersistence
      });
    }
  }
}

这就是我找到修复程序和示例代码的地方。