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

【问题标题】：Angularfire does not work on ionic capacitor app on iosAngularfire 不适用于 ios 上的离子电容器应用程序
【发布时间】：2022-01-13 03:33:55
【问题描述】：

我正在使用带有电容器和 angularfire 的离子。它工作正常，但不适用于 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

包.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上打印种子配置。在安卓上运行良好。

在 ios 上也可以使用实时重新加载

ionic capacitor run ios -l --external

所以如果我使用 xcode 运行它，它就不起作用。不确定在这种特定情况下是什么阻碍了

【问题讨论】：

  • 我只在IOS上遇到同样的错误。
  • 你有没有在日志中发现任何错误？
  • nope 在 firebase 日志或 ios 日志或任何地方都没有错误

标签： ios angular ionic-framework angularfire capacitor


【解决方案1】：

尝试将您的 angularfire 降级到 v7.0，它可能适用于 firebase v9。

【讨论】：

  • 我认为是电容器 3 的问题，但会试一试
  • 实际上我的 angularfire 已经是 v7。看看上面的 package.json。
【解决方案2】：

就我而言，我点击此链接：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
      });
    }
  }
}

这是我找到修复和示例代码的地方

【讨论】：

  • 在这种情况下，您的 app.module.ts 会是什么样子？因为初始化代码通常去那里
  • 抱歉，实际上这个修复是在 app.component.ts 中
  • 这部分是更正：我添加了这个 initializeAuth(app, { persistence: indexedDBLocalPersistence });
  • 我知道，但你能分享一下你的 app.module.ts 吗？
猜你喜欢
  • 2016-09-12
  • 1970-01-01
  • 2018-04-27
  • 2019-01-13
  • 1970-01-01
  • 2020-09-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode