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.

Continue reading...