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()
}
}
"firebase": "^9.18.0",
"firebase-tools": "^8.0.0",
"@angular/fire": "^7.5.0",