Angular ionic 4中的FirebaseApp.initializeApp（上下文）错误，带有角度

我对离子型和棱角型完全陌生。我的爱奥尼亚项目有个问题。我已经安装了Angular firebase和firebase插件。 错误：

消防仓库运作正常。但唯一的问题是，当我试图获取设备fcm令牌时，它抛出了错误。 这是我的密码

应用程序模块.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 {

}

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();
    });
  }

}

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();
  }
}

应用程序组件.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 {

}

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();
    });
  }

}

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();
  }
}

fcm.service.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 {

}

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();
    });
  }

}

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",
     ...
  }

我想我遗漏了什么？。我已经被困在这个问题上两天了。 我遵循了这一点

---

尝试将package.json中的库更改为以下版本：

     "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"

另外，搜索此字符串：

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

确保版本是这个版本

---

如果有效，请尝试。

您是否曾经引用过此URL？-似乎是重复的…你在哪里初始化firebase的？它是如何知道你的firebase数据库url的？@JayOrdway我已经在

app.module.ts

中初始化了它

NgModule

导入。我也在android项目中手动初始化，但问题仍然存在