My Angular 15 app.component.ts throws this error to the console:

polyfills.js:3056 Unhandled Promise rejection: _this.isAppActive is not a function ; Zone: <root> ; Task: null ; Value: TypeError: _this.isAppActive is not a function
    at main.js:152:21
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (vendor.js:216450:24)
    at _next (vendor.js:216469:9)
    at vendor.js:216474:7
    at new ZoneAwarePromise (polyfills.js:3412:21)
    at vendor.js:216466:12
    at Object.next (main.js:169:11)
    at ConsumerObserver.next (vendor.js:114130:25)
    at SafeSubscriber._next (vendor.js:114099:22) TypeError: _this.isAppActive is not a function
    at http://localhost/main.js:152:21
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (http://localhost/vendor.js:216450:24)
    at _next (http://localhost/vendor.js:216469:9)
    at http://localhost/vendor.js:216474:7
    at new ZoneAwarePromise (http://localhost/polyfills.js:3412:21)
    at http://localhost/vendor.js:216466:12
    at Object.next (http://localhost/main.js:169:11)
    at ConsumerObserver.next (http://localhost/vendor.js:114130:25)
    at SafeSubscriber._next (http://localhost/vendor.js:114099:22)

This error is raised on the line calling the isAppActive (promise) function after successfully receiving the Firebase token:

constructor(
    private platform: Platform, private fbNotifications: FbNotificationsService, private fbData: FbRtdbService,
    private route: Router, ...
  ) {
    this.fbNotifications.onFCMTokenChanged
      .pipe(takeUntil(this._unsubscribeAll))
      .subscribe({
        async next(token) { 
          if (token && !this.appLaunched) {
            this.firebaseToken = token;
            console.log('Token received in listener: ', token);
            if (token == 'web-platform') {
              this.stopApp = true;
              await this.closeLoader();
              this.taService.dialogClose("Unsupported Platform", "xxxxx is supported on mobile devices only at this time. Please install directly from the store.").then(() => {
                App.exitApp();
              });
            } else {
  
              this.appLaunched = true;
              
              this.isAppActive().then((isActive) => {       //<<<====== ERROR HERE
                console.log('Returned from isAppActive: ', isActive);
                if (isActive) {
                  this.initializeApp();
                } else if (isActive == 0) {
                  SplashScreen.hide();
                  this.taService.dialogClose("Thank You", "Thank you for your interest in using xxxx. At this time we have reached our quota for new members. Please open the app again in a few days as we open up for more members.").then(() => {
                    App.exitApp();
                  });
                }
              }).catch(function () {
                console.log("isAppActive Promise Rejected: ");
              });
            }
            this._unsubscribeAll.next(true);
            this._unsubscribeAll.complete();
          }
        },
        error(err) { 
          
        }
      });

The isAppActive function is:

isAppActive() {
    return new Promise((resolve, reject) => {
      this.awsdb.runQuery("getAppSettings", {}).subscribe({
        next(res) { 
          console.log('Received app settings: ', res);
          if (!res) {
            //DB request timed out - DB not available
            SplashScreen.hide();
            this.taService.dialogClose("Database Error", "Ooooops. The system Database is not available now. Please try again later").then((resDialog) => {
              if (resDialog) {
                App.exitApp();
              }
            });
          } else {
            resolve(res[0].s["~properties"].appActive);
          }   
        },
        error(err) { 
          console.log('TG Query Error: ' + err.description);
          //Route to some error page?
          SplashScreen.hide();
          this.taService.dialogClose("Network Error", "Ooooops. I can't find any Internet at this time");
          reject(-1);
        }
      });
    });
  }

I can see this is coming from polyfills, but the polyfills.ts file looks innocent:

import './zone-flags';
import 'zone.js';  // Included with Angular CLI.
(window as any)['global'] = window;
global.Buffer = global.Buffer || require('buffer').Buffer;

What am I missing, please?

>Solution :

Because you’re using a non-arrow function for next, this there is the enclosing object holding the next function that you’re giving to subscribe; not the object you’re constructing.

The next function should be an arrow function to access the object being created using this:

.subscribe({
    next: async (token) => {

Or do something like put const that = this; at the top of the constructor and use that so you aren’t relying on this that can change depending on the context.