ERROR NullInjectorError: R3InjectorError(AppModule)[MessagingService -> AngularFireMessaging -> InjectionToken angularfire2.app.options

I’ve seen several answers to this question, none of which have helped. I’ve created a chat PWA and I’m trying to set up Firebase push notification using FCM. I’m following a tutorial and I’m currently receiving this error when loading the app after importing the service to be used in the app.component class.

Here’s the app.module.ts

import { AngularFireMessagingModule } from '@angular/fire/compat/messaging';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, 
    IonicModule.forRoot(), 
    provideFirebaseApp(() => initializeApp(environment.firebase)), 
    provideAnalytics(() => getAnalytics()), 
    provideAuth(() => getAuth()), 
    provideFirestore(() => getFirestore()), 
    provideFunctions(() => getFunctions()), 
    provideMessaging(() => getMessaging()), 
    providePerformance(() => getPerformance()), 
    provideStorage(() => getStorage()),
    AngularFireMessagingModule],
  providers: [{ provide: RouteReuseStrategy, 
    useClass: IonicRouteStrategy }, 
    ScreenTrackingService,
    Storage,
    UserTrackingService],

  bootstrap: [AppComponent],
})
export class AppModule {}

The actual messaging service:

import { Injectable } from '@angular/core';
import { getMessaging, getToken } from "firebase/messaging";
import { AngularFireMessaging } from '@angular/fire/compat/messaging';

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

  constructor(private angularFireMessaging: AngularFireMessaging) { }

  async saveDeviceToken () {

    console.log('token', fcmToken);
    this.angularFireMessaging.requestToken.subscribe((token) => {
      console.log('token', token);
    }, (error) => {
        console.log('error', error)
    })
  }
}

and here’s the app.component.ts. When I import the messaging service in app.component.ts is when the error appears:

import { Component } from '@angular/core';
import { Storage } from '@ionic/storage';
import { MessagingService } from './services/messaging.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],

})
export class AppComponent {
  constructor(private storage: Storage,
              ) {}

  async ngOnInit() {
    await this.storage.create();
    this.messagingService.saveDeviceToken()
  }
}

enter image description here

    "firebase": "^9.18.0",
    "firebase-tools": "^8.0.0",
        "@angular/fire": "^7.5.0",