`polyfills.js:3056` 未处理的 Promise 拒绝：_xxx 不是 Angular 中的函数

huangapple
go评论101阅读模式
英文:

polyfills.js:3056 Unhandled Promise rejection: _xxx is not a function in Angular

问题

您的Angular 15 app.component.ts文件中出现了一个错误，错误信息是：TypeError: _this.isAppActive不是一个函数。此错误发生在成功接收Firebase令牌后调用isAppActive（promise）函数的行上。

在您的代码中，问题可能是this指针的上下文不正确。在您的subscribe函数内部，this指针可能指向了不正确的对象，导致isAppActive函数无法被正确调用。

您可以尝试将subscribe函数中的箭头函数改为普通函数，以确保this指针指向正确的上下文，如下所示：

  1. .subscribe(async function(token) { 
  2.   // ...
  3.   this.isAppActive().then(function(isActive) { // 修改此行
  4.     // ...
  5.   }).catch(function () {
  6.     console.log("isAppActive Promise Rejected: ");
  7.   });
  8. })

这可能会解决您的问题。请确保在其他地方使用this的地方也要小心处理上下文。

英文:

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

  1. polyfills.js:3056 Unhandled Promise rejection: _this.isAppActive is not a function ; Zone: <root> ; Task: null ; Value: TypeError: _this.isAppActive is not a function
  2.     at main.js:152:21
  3.     at Generator.next (<anonymous>)
  4.     at asyncGeneratorStep (vendor.js:216450:24)
  5.     at _next (vendor.js:216469:9)
  6.     at vendor.js:216474:7
  7.     at new ZoneAwarePromise (polyfills.js:3412:21)
  8.     at vendor.js:216466:12
  9.     at Object.next (main.js:169:11)
  10.     at ConsumerObserver.next (vendor.js:114130:25)
  11.     at SafeSubscriber._next (vendor.js:114099:22) TypeError: _this.isAppActive is not a function
  12.     at http://localhost/main.js:152:21
  13.     at Generator.next (<anonymous>)
  14.     at asyncGeneratorStep (http://localhost/vendor.js:216450:24)
  15.     at _next (http://localhost/vendor.js:216469:9)
  16.     at http://localhost/vendor.js:216474:7
  17.     at new ZoneAwarePromise (http://localhost/polyfills.js:3412:21)
  18.     at http://localhost/vendor.js:216466:12
  19.     at Object.next (http://localhost/main.js:169:11)
  20.     at ConsumerObserver.next (http://localhost/vendor.js:114130:25)
  21.     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:

  1. constructor(
  2.     private platform: Platform, private fbNotifications: FbNotificationsService, private fbData: FbRtdbService,
  3.     private route: Router, ...
  4.   ) {
  5.     this.fbNotifications.onFCMTokenChanged
  6.       .pipe(takeUntil(this._unsubscribeAll))
  7.       .subscribe({
  8.         async next(token) { 
  9.           if (token && !this.appLaunched) {
  10.             this.firebaseToken = token;
  11.             console.log('Token received in listener: ', token);
  12.             if (token == 'web-platform') {
  13.               this.stopApp = true;
  14.               await this.closeLoader();
  15.               this.taService.dialogClose("Unsupported Platform", "xxxxx is supported on mobile devices only at this time. Please install directly from the store.").then(() => {
  16.                 App.exitApp();
  17.               });
  18.             } else {
  19.   
  20.               this.appLaunched = true;
  21.               
  22.               this.isAppActive().then((isActive) => {       //<<<====== ERROR HERE
  23.                 console.log('Returned from isAppActive: ', isActive);
  24.                 if (isActive) {
  25.                   this.initializeApp();
  26.                 } else if (isActive == 0) {
  27.                   SplashScreen.hide();
  28.                   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(() => {
  29.                     App.exitApp();
  30.                   });
  31.                 }
  32.               }).catch(function () {
  33.                 console.log("isAppActive Promise Rejected: ");
  34.               });
  35.             }
  36.             this._unsubscribeAll.next(true);
  37.             this._unsubscribeAll.complete();
  38.           }
  39.         },
  40.         error(err) { 
  41.           
  42.         }
  43.       });

The isAppActive function is:

  1. isAppActive() {
  2.     return new Promise((resolve, reject) => {
  3.       this.awsdb.runQuery("getAppSettings", {}).subscribe({
  4.         next(res) { 
  5.           console.log('Received app settings: ', res);
  6.           if (!res) {
  7.             //DB request timed out - DB not available
  8.             SplashScreen.hide();
  9.             this.taService.dialogClose("Database Error", "Ooooops. The system Database is not available now. Please try again later").then((resDialog) => {
  10.               if (resDialog) {
  11.                 App.exitApp();
  12.               }
  13.             });
  14.           } else {
  15.             resolve(res[0].s["~properties"].appActive);
  16.           }   
  17.         },
  18.         error(err) { 
  19.           console.log('TG Query Error: ' + err.description);
  20.           //Route to some error page?
  21.           SplashScreen.hide();
  22.           this.taService.dialogClose("Network Error", "Ooooops. I can't find any Internet at this time");
  23.           reject(-1);
  24.         }
  25.       });
  26.     });
  27.   }

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

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

What am I missing, please?

答案1

得分: 1

因为您正在为next使用非箭头函数，所以this是包含next函数的封闭对象，而不是您正在构建的对象。

next函数应该是一个箭头函数，以访问使用this创建的对象：

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

或者在构造函数的顶部添加const that = this;并使用that，这样您就不会依赖于上下文可能会改变的this。

英文:

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:

  1. .subscribe({
  2.     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.

huangapple
  • 本文由 发表于 2023年4月16日 23:12:47
  • 转载请务必保留本文链接：https://go.coder-hub.com/76028576.html
  • angular
  • javascript
  • polyfills
  • promise
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定