FirebaseApp.initializeApp(Context) error in ionic 4 with angular

Question

I'm totally new to ionic and angular. I'm getting an issue in my ionic project. I have installed Angular firebase and firebase plugins. Error:

Default FirebaseApp is not initialized in this process com.xxx.xxx Make sure to call FirebaseApp.initializeApp(Context) first.

Firestore operations are working properly. But the only problem is when i'm trying to get the device fcm token it's throwing the error. Here is my code

app.module.ts

import { NgModule , AfterViewInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule, IonicRouteStrategy , IonSlides } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFirestore , AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireModule } from '@angular/fire';
import { Firebase } from '@ionic-native/firebase/ngx';
import { FcmService } from './services/notification/fcm.service';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    CommonModule,
    BrowserModule,
    IonicModule.forRoot(), 
    AppRoutingModule, 
    IonicStorageModule.forRoot(),
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(environment.firebaseconfig), 
    AngularFirestoreModule
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA],
  providers: [
    StatusBar,
    SplashScreen,
    IonSlides,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    AngularFirestore,
    FcmService,
    Firebase
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

}

app.component.ts

import { Component } from '@angular/core';
import { Platform, Events } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { FcmService } from './services/notification/fcm.service';


@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private fcm: FcmService,
  ) {
    this.initializeApp();
  }

  private notificationSetup() {
    this.fcm.getToken();
    this.fcm.onNotifications().subscribe(
      (msg) => {
        if (this.platform.is('ios')) {
          this.alertSerivce.presentToast(msg.aps.alert);
        } else {
          this.alertSerivce.presentToast(msg.body);
        }
      });
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.notificationSetup();
    });
  }

}

fcm.service.ts

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Firebase } from '@ionic-native/firebase/ngx';
import { Platform } from '@ionic/angular';



@Injectable({
  providedIn: 'root'
})
export class FcmService {

  constructor(
    private firebase: Firebase,
    private afs: AngularFirestore,
    private platform: Platform,
  ) { }

  async getToken() {
    let token: string;

    if (this.platform.is('android')) {
       await this.firebase.getToken().then((fcmtoken) => {
        token = fcmtoken
        console.log('Permission granted! Save to the server!', fcmtoken);
      }).catch((err) => {
        console.log('Error while getting fcm token', err)
      })
    }

    if (this.platform.is('ios')) {
      await this.firebase.getToken().then((fcmtoken) => {
        token = fcmtoken
        console.log('Permission granted! Save to the server!', fcmtoken);
      }).catch((err) => {
        console.log('Error while getting fcm token', err)
      })
      await this.firebase.grantPermission();
    }
    this.alert.presentToast(`FCMToken: ${token}`)
    this.saveToken(token);
    return token
  }

  private saveToken(token) {
    if (!token) return;
    this.storage.set(constants.LocalStorageKeys.fcmToken, token)
    return token
  }

  onNotifications() {
    return this.firebase.onNotificationOpen();
  }
}

package.json

 "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/fire": "^5.1.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/firebase": "^5.0.0",
     ...
  }

I'm i missing anything?. I have been stuck in this issue from 2 days. I have followed this https://medium.freecodecamp.org/how-to-get-push-notifications-working-with-ionic-4-and-firebase-ad87cc92394e

have u ever referred to this URL? - https://stackoverflow.com/questions/45977847/make-sure-to-call-firebaseapp-initializeappcontext-first-in-android seems to be a duplicate... — SuperStar518, Apr 20 '19 at 12:42
Where did you initialize firebase? How does it know your firebase database url? — Jay Ordway, Apr 20 '19 at 17:12
@JayOrdway I have initialised it `NgModule` imports in `app.module.ts`. I have also initialised manually in android project but still the issue occurs — Kalikanth040494, Apr 22 '19 at 05:18

score 1 · Answer 1 · answered May 11 '19 at 10:02

Try changing libraries in package.json to following versions:

     "com.google.android.gms:play-services-tagmanager:16.0.8"
     "com.google.firebase:firebase-core:16.0.8"
     "com.google.firebase:firebase-messaging:17.5.0"
     "com.google.firebase:firebase-config:16.4.1"
     "com.google.firebase:firebase-perf:16.2.4"

Also, search for this string:

      'com.google.gms:google-services:4.2.0'

make sure the version is this one.

Please try if it works.

FirebaseApp.initializeApp(Context) error in ionic 4 with angular

1 Answers1