Ionic集成Firebase遇NullInjectorError：缺少Firebase提供者

Hey there, let's get this Firebase provider error sorted out! This issue almost always boils down to missing dependencies, incorrect Angular module configuration, or using the wrong service in your component. Here's a step-by-step breakdown to fix it:

1. Double-check all required dependencies are installed #

First, make sure you've got all the necessary packages and plugins in place. Run these commands if you haven't already:

# Install the Cordova FCM plugin
ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated
# Install the Ionic Native wrapper for FCM
npm install @ionic-native/fcm
# Install Firebase core package (if missing)
npm install firebase

If you're using Angular with Firebase (beyond just FCM), you'll also need Angular Fire:

npm install @angular/fire firebase

2. Configure your AppModule correctly #

Open src/app/app.module.ts and make sure you're importing the FCM module and adding it to the providers array. This tells Angular to make the FCM service available across your app:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

// Import the FCM service
import { FCM } from '@ionic-native/fcm/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    FCM, // Critical: Add FCM here so Angular can inject it
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

A common mistake here: if you're trying to inject a raw Firebase class instead of FCM, Angular won't recognize it. Stick with the Ionic Native FCM service for push notifications.

3. Verify your component's injection code #

Head over to the component where the error is thrown and make sure you're injecting the right service:

import { Component } from '@angular/core';
import { FCM } from '@ionic-native/fcm/ngx'; // Import FCM, not Firebase

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private fcm: FCM) { // Inject the FCM service
    this.setupFCM();
  }

  setupFCM() {
    this.fcm.getToken().then(token => {
      console.log('FCM Token retrieved:', token);
    });
  }
}

If your constructor has private firebase: Firebase, that's the problem—swap it out for FCM as shown above.

4. Clear caches and rebuild your project #

Sometimes cached files can cause dependency issues. Run these commands to clean things up:

# Delete node modules and lock file
rm -rf node_modules package-lock.json
# Reinstall dependencies
npm install
# Clean Ionic build cache
ionic build --clean
# Rerun your app
ionic cordova run android
# Or for iOS: ionic cordova run ios

5. Check version compatibility #

Make sure your versions of @ionic-native/fcm, firebase, and Angular/Ionic play nice together. For example:

• If you're on Ionic 6+ (Angular 12+), use @ionic-native/fcm v6.x
• Check your package.json for any version conflicts and adjust if needed

内容的提问来源于stack exchange，提问作者Tauseef Mamun