Angular 15中_this.isAppActive is not a function错误排查求助

错误日志 #

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)

触发场景 #

该错误在成功接收Firebase令牌后调用isAppActive Promise函数时触发，相关组件构造函数代码：

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) { 
          
        }
      });

isAppActive函数定义：

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);
        }
      });
    });
  }

用户的polyfills.ts文件：

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

问题根源 #

错误的核心是**this指向丢失**：
在subscribe的配置对象中，你用async next(token) {...}的普通方法定义回调，当RxJS调用这个next方法时，this会绑定到配置对象本身，而不是组件实例。此时调用this.isAppActive()，相当于在配置对象中查找该方法，自然找不到，导致报错。

错误日志显示来自polyfills.js只是因为Promise错误在Zone.js上下文抛出，实际和polyfills.ts无关。

解决方案 #

方案1：将回调改为箭头函数 #

箭头函数不会绑定自身this，会继承外层组件实例的this，修改后：

.subscribe({
  next: async (token) => {  // 改为箭头函数形式
    if (token && !this.appLaunched) {
      // ... 原有逻辑不变
      this.isAppActive().then((isActive) => {
        // ... 后续逻辑
      }).catch(() => {  // 这里也改成箭头函数，避免后续用this时出错
        console.log("isAppActive Promise Rejected: ");
      });
    }
  },
  error: (err) => { 
    // ... 错误处理逻辑
  }
});

方案2：手动绑定this到组件实例 #

如果坚持用普通函数形式，可通过bind(this)强制绑定组件实例：

.subscribe({
  next: async function(token) {
    // ... 原有逻辑
  }.bind(this),  // 绑定组件实例的this
  error: function(err) {
    // ... 错误处理逻辑
  }.bind(this)
});

额外检查 #

确认isAppActive是直接定义在组件类中的实例方法，不是静态方法，也没有被误赋值为其他类型。

内容的提问来源于stack exchange，提问作者Mor Sagmon