[SOLVED] TypeError: Cannot read property 'showActions' of undefined

Edit: Problem solved. In Capacitor 3, Modals is now ActionSheet and Dialog.

Help please? Why do I get this error in my notifications service? This code was working in another app and I’ve copied it to a new blank app, now it’s failing. I’ve compared it to the original and don’t see where the problem was.

TypeError: Cannot read property 'showActions' of undefined

notifications.service.ts:

import { Injectable, NgZone } from '@angular/core';
import { Platform } from '@ionic/angular';
import { Plugins } from '@capacitor/core';
import {
  ActionPerformed,
  PushNotificationSchema,
  PushNotifications,
  Token,
} from '@capacitor/push-notifications';

const { Modals } = Plugins;

@Injectable({
  providedIn: 'root',
})
export class NotificationsService {
  constructor(private platform: Platform, private ngZone: NgZone) {}

  start() {
    # Setup of other listeners removed
	
    PushNotifications.addListener(
      'pushNotificationReceived',
      (notification: PushNotificationSchema) => {
        console.log(
          '[DEBUG] notifications start() pushNotificationReceived: ',
          JSON.stringify(notification)
        );
        if ('helpButton' in notification.data) {
          console.log(
            '[DEBUG] notifications start() pushNotificationReceived helpButton in notification.data'
          );
          this.ngZone.run(() => {
            this.showActions(
              notification.title,
              notification.body,
              notification.data['helpDoc']
            );
          });
        }
      }
    );
  }

  showActions(title: string, message: string, helpDoc: string) {
    Modals.showActions({
      title,
      message,
      options: [
        {
          title: 'OK',
        },
        {
          title: 'Help',
        },
      ],
    });
  }
}

app.component.ts:

import { Component, NgZone } from '@angular/core';
import { NotificationsService } from './providers/notifications.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(
    private notificationsService: NotificationsService,
    private ngZone: NgZone
  ) {
    this.ngZone.run(() => this.notificationsService.start());
  }
}

app.module.ts:

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 { NotificationsService } from './providers/notifications.service';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    NotificationsService,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

As you can see by logcat, the service is mostly working:

2021-06-27 09:33:46.109 7263-7987/com.securecoop.app V/Capacitor/PushNotificationsPlugin: Notifying listeners for event pushNotificationReceived
2021-06-27 09:33:46.119 7263-7263/com.securecoop.app I/Capacitor/Console: File: http://localhost/main.js - Line 244 - Msg: [DEBUG] notifications start() pushNotificationReceived:  {"id":"0:1624800828740467%ec6cdc84ec6cdc84","data":{"helpButton":"{\"helpButton\":true}"},"title":"Test","body":"123"}
2021-06-27 09:33:46.120 7263-7263/com.securecoop.app I/Capacitor/Console: File: http://localhost/main.js - Line 246 - Msg: [DEBUG] notifications start() pushNotificationReceived helpButton in notification.data
2021-06-27 09:33:46.122 7263-7263/com.securecoop.app E/Capacitor/Console: File: http://localhost/ - Line 462 - Msg: TypeError: Cannot read property 'showActions' of undefined

2 posts - 1 participant

Read full topic