[SOLVED] service.function is not a function in Angular 19 with Ionic (Capacitor)

service.function is not a function in Angular 19 with Ionic (Capacitor)

I am creating an Ionic app with Angular 19 and using Capacitor. I am facing an issue only on iOS in web and android it works like a clock.

The code:

Login Component:

    notificationService = inject(NotificationService);    
    async signin() {
            if (this.loginForm.valid) {
              this.isLoading.set(true);
        
              const { isGranted, canRequest } =
                await this.notificationService.checkPermission();
        
              try {
                if (!isGranted && canRequest) {
                  this.isNotificationModalOpen.set(true);
                  const granted =
                    await this.notificationService.requestNotificationPermission();
                  if (!granted) {
                    // User denied notifications, proceed with login without token
                    await this.proceedWithLogin();
                    return;
                  }
                }
        
                // Get FCM token if permission is granted
                const fcmToken = await this.notificationService.getToken();
                await this.proceedWithLogin(fcmToken);
              } catch (error) {
                console.error('Error during login:', error);
                this.isLoading.set(false);
              }
            }
        }

Notifications Service:

     public async checkPermission(): Promise<{
        isGranted: boolean;
        canRequest: boolean;
      }> {
        if (this.isNative) {
          const permStatus = await PushNotifications.checkPermissions();
          return {
            isGranted: permStatus.receive === 'granted',
            canRequest: permStatus.receive === 'prompt',
          };
        } else {
          if (!('Notification' in window)) {
            return { isGranted: false, canRequest: false };
          }
    
          const permission = Notification.permission;
          return {
            isGranted: permission === 'granted',
            canRequest: permission === 'default',
          };
        }
      }

I am monitoring the error in Sentry and it is:

this.notificationService.checkPermission is not a function. (In 'this.notificationService.checkPermission()', 'this.notificationService.checkPermission' is undefined)

When signin() is called, nothing happens. It just keeps loading without signing in and I get the above error in Sentry Thanks in advance.

Solution

I found the issue in case someone faces the same problem:

The issue was me injecting Firebase Messaging in the NotificationsService. It ran well on other platforms but for iOS there was a timing issue apparently. Using a lazy getter fixed the issue