Error - Azure Notification Hub w Push Notification Ionic 5

In the project, I’m trying to implement azure notification hub which use capacitor push notification which i following a Github Link suggest by the Azure

The below code is the service ts which the original code can be refer with the link below.

Due to it uses the capacitor v2, i did my best to convert it to the v3 cause the push notification capacitor deprecated once i copy the code, After converting, I’m facing an issue where once I run the page in myapp (IOS), it does print AzureNotificationHubsService: Platform ready which i set the console log in the code below, after that it just went error in console log which state ERROR {“rejection”:{},“promise”…

ps. I did implement the push capability which i refer this link posted by the microsoft Using Azure Notification Hubs in Apache Cordova and Ionic Apps, I also did create a custom service events for this due to the events has been removed in Ionic 5

Sorry For Bad English…

 ⚡ [log] - HomePage constructor
⚡  [log] - AzureNotificationHubsService: Platform ready
⚡  [error] - ERROR {"rejection":{},"promise":{"_zone_symbolstate":0,"zone_symbol_value":"..."},"zone":{"_parent":{"_parent":null,"_name":"<root>","_properties":{},"_zoneDelegate":{"_taskCounts":{"microTask":0,"macroTask":0,"eventTask":0},"zone":"...","_parentDelegate":"...","_forkZS":"...","_forkDlgt":"...","_forkCurrZone":"...","_interceptZS":"...","_interceptDlgt":"...","_interceptCurrZone":"...","_invokeZS":"...","_invokeDlgt":"...","_invokeCurrZone":"...","_handleErrorZS":"...","_handleErrorDlgt":"...","_handleErrorCurrZone":"...","_scheduleTaskZS":"...","_scheduleTaskDlgt":"...","_scheduleTaskCurrZone":"...","_invokeTaskZS":"...","_invokeTaskDlgt":"...","_invokeTaskCurrZone":"...","_cancelTaskZS":"...","_cancelTaskDlgt":"...","_cancelTaskCurrZone":"...","_hasTaskZS":"...","_hasTaskDlgt":"...","_hasTaskDlgtOwner":"...","_hasTaskCurrZone":"..."}},"_name":"angular","_properties":{"isAngularZone":true},"_zoneDelegate":{"_taskCounts":{"microTask":0,"macroTask":0,"eventTask":20},"zone":"...","_parentDelegate":"...","_forkZS":"...","_forkDlgt":"...","_forkCurrZone":"...","_interceptZS":"...","_interceptDlgt":"...","_interceptCurrZone":"...","_invokeZS":{"name":"angular","properties":"..."},"_invokeDlgt":"...","_invokeCurrZone":"...","_handleErrorZS":"...","_handleErrorDlgt":"...","_handleErrorCurrZone":"...","_scheduleTaskZS":{"name":""},"_scheduleTaskDlgt":"...","_scheduleTaskCurrZone":"...","_invokeTaskZS":"...","_invokeTaskDlgt":"...","_invokeTaskCurrZone":"...","_cancelTaskZS":"...","_cancelTaskDlgt":"...","_cancelTaskCurrZone":"...","_hasTaskZS":"...","_hasTaskDlgt":"...","_hasTaskDlgtOwner":"...","_hasTaskCurrZone":"..."}},"task":{"type":"microTask","state":"notScheduled","source":"Promise.then","zone":"angular","runCount":0}}
import { AlertController, Platform } from '@ionic/angular';
import { Injectable } from '@angular/core';

// use lodash to clone data objects coming from the push service
import * as _ from 'lodash';

import { 
  PushNotifications, PushNotificationsPlugin,PushNotificationSchema, Token, ActionPerformed 
} from '@capacitor/push-notifications';

// Interface(s)
import { Registration, Notification, EventType } from '../interfaces/events';
// Azure Notification Hubs configuration (in an external file)
import { config } from '../../app/config';

//import events cause ionic 5 remove event from angular which need use observable
import { Events } from '../../services/events'

//import { Plugins } from '@capacitor/core';

// Create a local object that will represent our Cordova plugin
declare let PushNotificationSchema;

// Import the Capacitor Push Plugin (PushNotification vs. PushNotifications)

  providedIn: 'root'
export class AzureNotificationHubsService {

  // make an empty array of registrations and notifications
  public pushEvents: (Registration | Notification)[] = [];

    private alertCtrl: AlertController,
    private events: Events,
    private platform: Platform
  ) {
    // Wait until the container's initialized before doing anything here
    this.platform.ready().then(() => {
      console.log('AzureNotificationHubsService: Platform ready');

      // make sure the config values are set in the config.ts file.
      if (config.hubName && config.hubConnectionString) {
        // Initialize the Push Service
        const push = PushNotificationSchema.init({
          // Initialize the ANH Cordova plugin, this is required to use ANH
          // Pass in our configuration values
          notificationHubPath: config.hubName,
          connectionString: config.hubConnectionString,
          // Set some other stuff the plugin wants
          android: { sound: true },
          ios: { alert: 'true', badge: true, sound: 'false' },
          windows: {}

        push.on('registration', data => {
          // Registration event for the ANH Cordova plugin (Capacitor has its own)
          console.log('AzureNotificationHubsService: Registration');
          // Copy the event data into a Registration object
          const registration: Registration = _.clone(data);
          // Populate the object type
          registration.type = EventType.registration;
          // Set the title (registrations won't have one)
          registration.title = 'Registration';
          // Set the created date
          registration.received = new Date(;
          // Add the event to the events array
'anh: data-change');

          // Tell the user
            header: registration.title,
            message: 'Registration completed successfully',
            buttons: ['OK']
          }).then((alert) => alert.present());

        PushNotifications.addListener('registration', (token: Token) => {
          // this alert should never fire because we're not using the Capacitor plugin's
          // registration method for anything, we're doing it through Notification Hubs
            // @ts-ignore
            header: 'Registration (Capacitor)',
            message: `Push registration success (token: ${token.value})`,
            buttons: ['OK']
          }).then((alert) => alert.present());

        PushNotifications.addListener('pushNotificationReceived', (pushNotification: PushNotificationSchema) => {
          console.log('AzureNotificationHubsService: pushNotificationReceived');
          // Populate the object type
          // @ts-ignore
          pushnotification.type = EventType.notification;
          // Set the created date
          // @ts-ignore
          pushNotification.received = new Date(;
          // convert the notification's data object into a string
 = JSON.stringify(;
          // Add the event to the events array
          this.saveData(pushNotification as Notification);
'anh: data-change');

          // Tell the user
            // @ts-ignore
            header: 'Notification',
            buttons: ['OK']
          }).then((alert) => alert.present());

      } else {
        // Tell the user this won't work until they fix the config.
          header: 'Invalid Configuration',
          // tslint:disable-next-line:max-line-length
          message: 'Please populate the project\'s <strong>src/app/config.ts</strong> file with settings from your Azure Notification Hubs configuration.',
          buttons: ['OK, I\'m sorry!']
        }).then((alert) => alert.present());


  // saveData(data: Registration | Notification) {
  saveData(data: Registration | Notification) {
    console.log('AzureNotificationHubsService: saveData()');


Did you manage to get this running?