Angular SwPush requestSubscription promise never resolves

Question

I'm trying to add web-push notifications in an angular application following the guide in https://blog.angular-university.io/angular-push-notifications/

I've added a simple SwPush.requestSubscription() like the following:

public requestSubscription() {
  this.swPush.requestSubscription({
    serverPublicKey: environment.vapidPublicKey
  })
  .then(subscription => {
    return this.save(subscription);
  })
  .catch(err => {
    console.log('Could not subscribe to notifications', err);
  });
}

I've build the app by doing ng build --prod and use localhost so that the service workers will work.

The popup to allow/ block notifications appears as expected but when I click on Allow the requestSubscription promise is not resolved.

What am I missing?

Edit:

I've figured that another piece of code was causing the problem which I didn't think at the beginning was related, and this is why I didn't mention it in my question.

Before requestSubscription I created a method to get the current permission status ( grant | denied | default | prompt ) using the Permissions API (where available) as such:

public getNotificationPermissionState(): Observable<string> {
  if ( !('serviceWorker' in navigator) ) {
    return of('unsupported');
  }

  // @ts-ignore
  if (typeof navigator.permissions !== 'undefined') {
    // @ts-ignore
    return navigator.permissions.query({ name: 'notifications' })
      .then((result) => {
        return of(result.state);
      });
  }

  return of(Notification.permission);
}

When I completely removed the the navigator.permissions.query() call and just used the Notification.permission the promise of requestSubscription was resolved.

I'm not posting this as an answer in case anyone knows why those two don't go along and care to say...