AngularFireDatabase works on web and android but not ios #3403

### Operating System

iOS 16.5

### Browser Version

chrome

### Firebase SDK Version

"firebase": "^9.23.0",

### Firebase SDK Product:

Database

### Describe your project's tooling

Ionic app using Angular

### Describe the problem

https://github.com/angular/angularfire/issues/3403

**im using AngularFireDatabase to connect to my realtime database

this works fine on Android and Web, but not on ios

on ios i get this error**

[Error] TypeError: undefined is not an object (evaluating 'gapi.iframes.getContext')
callback (main.cb86b0cb1b1543a2.js:1:156205)
(anonymous function) (api.js:29)
Ja (api.js:21:705)
E (api.js:28:502)
(anonymous function) (api.js:29:83)
(anonymous function) (api.js:29:146)
Global Code (cb=gapi.loaded_0:1)
[Error] Error: A`capacitor
(anonymous function) (api.js:29:638)
(anonymous function) (api.js:29)
Ja (api.js:21:705)
E (api.js:28:502)
(anonymous function) (api.js:29:83)
(anonymous function) (api.js:29:146)
Global Code (cb=gapi.loaded_1:1)
[Error] Cross-origin redirection to http://developers.google.com/ denied by Cross-Origin Resource Sharing policy: Origin capacitor://localhost is not allowed by Access-Control-Allow-Origin. Status code: 301
[Error] XMLHttpRequest cannot load https://apis.google.com/_/jserror?script=https%3A%2F%2Fapis.google.com%2F_%2Fscs%2Fabc-static%2F_%2Fjs%2Fk%3Dgapi.lb.en.5o5-TAFr18s.O%2Fm%3Dgapi_iframes%2Frt%3Dj%2Fsv%3D1%2Fd%3D1%2Fed%3D1%2Frs%3DAHpOoo_qgszOsFrBH7bZ1Rmfwa9Mc03wLQ%2Fcb%3Dgapi.loaded_0&error=A%60capacitor&line=150 due to access control checks.
[Error] Failed to load resource: Cross-origin redirection to http://developers.google.com/ denied by Cross-Origin Resource Sharing policy: Origin capacitor://localhost is not allowed by Access-Control-Allow-Origin. Status code: 301 (jserror, line 0)

Here is my app module code

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http'
import { initializeApp, provideFirebaseApp } from '@angular/fire/app'
import { getFirestore, provideFirestore } from '@angular/fire/firestore'
import { environment } from '../environments/environment';
import { provideAnalytics, getAnalytics, ScreenTrackingService, UserTrackingService } from '@angular/fire/analytics';
import { provideDatabase, getDatabase } from '@angular/fire/database'
import { getAuth, provideAuth } from '@angular/fire/auth'
import { FIREBASE_OPTIONS } from '@angular/fire/compat'

@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule,
provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
provideFirestore(() => getFirestore()),
provideAnalytics(() => getAnalytics()),
provideDatabase(() => getDatabase()),
provideAuth(() => getAuth()),
],
providers: [
{provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
{provide: FIREBASE_OPTIONS, useValue: environment.firebaseConfig},
ScreenTrackingService,
UserTrackingService
],
bootstrap: [AppComponent],
})
export class AppModule {
}

here is my package.json

{
"name": "seasonal-simple",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"@angular/animations": "^16.0.0",
"@angular/common": "^16.0.0",
"@angular/compiler": "^16.0.0",
"@angular/core": "^16.0.0",
"@angular/fire": "^7.6.1",
"@angular/forms": "^16.0.0",
"@angular/platform-browser": "^16.0.0",
"@angular/platform-browser-dynamic": "^16.0.0",
"@angular/router": "^16.0.0",
"@capacitor/android": "5.0.2",
"@capacitor/app": "^5.0.2",
"@capacitor/core": "5.0.2",
"@capacitor/haptics": "^5.0.2",
"@capacitor/ios": "5.0.2",
"@capacitor/keyboard": "^5.0.2",
"@capacitor/status-bar": "^5.0.2",
"@ionic/angular": "^7.0.0",
"firebase": "^9.23.0",
"ionicons": "^7.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"vite": "^4.3.9",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.0.0",
"@angular-eslint/builder": "^16.0.0",
"@angular-eslint/eslint-plugin": "^16.0.0",
"@angular-eslint/eslint-plugin-template": "^16.0.0",
"@angular-eslint/schematics": "^16.0.0",
"@angular-eslint/template-parser": "^16.0.0",
"@angular/cli": "^16.0.0",
"@angular/compiler": "^16.0.0",
"@angular/compiler-cli": "^16.0.0",
"@angular/language-service": "^16.0.0",
"@capacitor/assets": "^2.0.4",
"@capacitor/cli": "5.0.2",
"@ionic/angular-toolkit": "^9.0.0",
"@types/jasmine": "~4.3.0",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "5.3.0",
"@typescript-eslint/parser": "5.3.0",
"capacitor-set-version": "^2.0.13",
"eslint": "^7.26.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~4.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"ts-node": "^8.3.0",
"typescript": "~5.0.2"
},
"description": "An Ionic project"
}

### Steps and code to reproduce issue

get data from realtime database, works in browsers and on android, does not work on ios