FirebaseX - Blank screen on iOS emulator

Hello,

I’m using cordova-plugin-firebasex plugin to implement push notification.
Everything is good for android but not for iOS (13.4.0).

The application build correctly but when I launch it on emulator, I got a blank screen after splash screen.
No erros in Xcode console & Safari dev console. But in Safari dev console, I got this :

Ionic app implementation :

Module

import { LOCALE_ID, NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

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

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr);

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { IonicStorageModule } from '@ionic/storage-angular';
import { Calendar } from '@awesome-cordova-plugins/calendar/ngx';
import { FirebaseX } from '@ionic-native/firebase-x/ngx';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    IonicStorageModule.forRoot(),
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: LOCALE_ID, useValue: 'fr-FR' },
    Calendar,
    FirebaseX
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

AppComponent

import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
import { BackendService } from './shared/services/backend.service';
import { FirebaseX } from '@ionic-native/firebase-x/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor(
    private platform: Platform,
    private backendService: BackendService,
    private firebase: FirebaseX) { }

  ngOnInit(): void {
    this.platform.ready().then(() => {
      this.firebase.onMessageReceived().subscribe((data: any) => {
        if (this.backendService.credential) {
          this.backendService.refreshEnvents$.next();
        }
      });
    });
  }

}

Package.json

{
  "name": "myapp-nb",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/forms": "^14.0.0",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "@awesome-cordova-plugins/calendar": "^5.45.0",
    "@capacitor/core": "4.3.0",
    "@ionic-native/calendar": "^5.36.0",
    "@ionic-native/firebase-x": "^5.36.0",
    "@ionic-native/native-storage": "^5.36.0",
    "@ionic/angular": "^6.1.9",
    "@ionic/cordova-builders": "^7.0.0",
    "@ionic/storage-angular": "^3.0.6",
    "bootstrap": "^5.2.1",
    "cocoapods": "^0.0.0",
    "cordova-android": "10.1.2",
    "cordova-browser": "6.0.0",
    "ionicons": "^6.0.3",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.0",
    "@angular-eslint/builder": "~13.0.1",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/cli": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/compiler-cli": "^14.0.0",
    "@angular/language-service": "^14.0.0",
    "@capacitor/cli": "4.3.0",
    "@ionic/angular-toolkit": "^6.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "cordova-ios": "^6.2.0",
    "cordova-plugin-androidx": "^3.0.0",
    "cordova-plugin-androidx-adapter": "^1.1.3",
    "cordova-plugin-calendar": "^5.1.6",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-firebasex": "^14.2.1",
    "cordova-plugin-googleplus": "^7.0.1",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-nativestorage": "^2.3.2",
    "cordova-plugin-splashscreen": "5.0.2",
    "cordova-plugin-statusbar": "^2.4.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.7.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-calendar": {},
      "cordova-plugin-androidx-adapter": {},
      "cordova-plugin-androidx": {},
      "cordova-plugin-firebasex": {}
    },
    "platforms": [
      "browser",
      "android"
    ]
  }
}

Thank for your help.

If you have a cordova.js linked in your index.html it won’t be server by Capacitor because Capacitor already injects the cordova.js content into the WebView. That’s why it appears as red. But that doesn’t cause any issues. You can safely remove the cordova.js script tag from your index.html.

You are probably getting a javascript error that you don’t see because it happens on app startup, you can hit the refresh icon on top left and that should restart the app so you can see the errors that happened on app startup.

Solved !
The problem was the app name in config.xml, it contained an apostrophe " ’ ".
It caused problems for Pod installation.