The error message "TypeError: finalizer.unsubscribe is not a method in Angular Ionic" suggests

I am experiencing difficulties with posting to the API while using a base class. I'm unsure how to resolve the issue mentioned below.

Any assistance would be greatly appreciated.

    core.mjs:7635 ERROR Error: Uncaught (in promise): UnsubscriptionError: 1 errors occurred during unsubscription:
1) TypeError: finalizer.unsubscribe is not a function
Error
    at _super (createErrorClass.js:4:26)
    at new UnsubscriptionErrorImpl (UnsubscriptionError.js:3:5)
    at OperatorSubscriber.unsubscribe (Subscription.js:55:23)
    at OperatorSubscriber.unsubscribe (Subscriber.js:55:19)
    at OperatorSubscriber.unsubscribe (OperatorSubscriber.js:51:19)
    at OperatorSubscriber._complete (OperatorSubscriber.js:42:26)
    at OperatorSubscriber.complete (Subscriber.js:49:18)
    at Observable.<anonymous> (job.service.ts:248:16)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at resolvePromise (zone.js:1262:35)
    at zone.js:1169:21
    at zone.js:1185:37
    at asyncGeneratorStep (asyncToGenerator.js:6:1)
    at _next (asyncToGenerator.js:25:1)
    at _ZoneDelegate.invoke (zone.js:409:30)
    at Object.onInvoke (core.mjs:26231:33)
    at _ZoneDelegate.invoke (zone.js:408:56)
    at Zone.run (zone.js:169:47)
    at zone.js:1326:38

Additionally, here is the code snippet causing the problem:

return Observable.create(async (observer) => {
      const result = await this.convertNativeImagesToBase64(isMobile);
      observer.next(result);
      observer.complete()
    }).pipe(
      mergeMap(() => {

        return this.apiService.sendIssue(payload).pipe(map((response: any) => {
    
            return response;
          },
        ));
      }),
      catchError((error) => {
        const errorMessage = this.getErrorMessage(error, "Failed.");
        const failed: any = { Success: false, Message: errorMessage };
        return throwError(failed);
      })
    )
angulartypescriptobservable

Answer №1

The problem might lie within the usage of Observable.create as no return value is specified. Consider using a different operator for promises.

return from(this.convertNativeImagesToBase64(isMobile)).pipe(
      mergeMap(() => {

        return this.apiService.sendIssue(payload).pipe(map((response: any) => {
    
            return response;
          },
        ));
      }),
      catchError((error) => {
        const errorMessage = this.getErrorMessage(error, "Failed.");
        const failed: any = { Success: false, Message: errorMessage };
        return throwError(failed);
      })
    )

Alternatively, you can utilize defer to delay the promise execution until subscription rather than immediate execution.

return defer(() => this.convertNativeImagesToBase64(isMobile)).pipe(
      mergeMap(() => {

        return this.apiService.sendIssue(payload).pipe(map((response: any) => {
    
            return response;
          },
        ));
      }),
      catchError((error) => {
        const errorMessage = this.getErrorMessage(error, "Failed.");
        const failed: any = { Success: false, Message: errorMessage };
        return throwError(failed);
      })
    )

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The scrolling experience in Next js is not as smooth as expected due to laggy MOMENTUM

Currently, I am in the process of constructing my portfolio website using Next.js with Typescript. Although I am relatively new to both Next.js and Typescript, I decided to leverage them as a learning opportunity. Interestingly, I encountered an issue with ...

javascriptreactjstypescriptnext.js

In Typescript, it is not possible to use generics as a function parameter in a

Looking for a solution regarding passing the union of two specific samples of generics to a function. The function in question is as follows: function myCommonFunc<T>({ data, render, }: { data: T; render: (data: T) => number; }) { return ...

javascripttypescript

The concept of a singleton design pattern is like a hidden treasure waiting to be

My approach to implementing the singleton pattern in a typescript ( version 2.1.6 ) class is as follows: export class NotificationsViewModel { private _myService: NotificationService; private _myArray: []; private static _instance: Notificatio ...

typescriptdesign-patternssingletonnativescript

Encountering a TypeScript issue with bracket notation in template literals

I am encountering an issue with my object named endpoints that contains various methods: const endpoints = { async getProfilePhoto(photoFile: File) { return await updateProfilePhotoTask.perform(photoFile); }, }; To access these methods, I am using ...

typescript

The e2e directory seems to be missing from my Angular project

https://i.stack.imgur.com/xzrlb.png Despite reinstalling the CLI, the E2E feature still eludes me. ...

angularangular-cli

Developing a nested data table using Angular and mongoose framework

I'm struggling to display the contents of a nested array field within a mat-table. Below is the code I currently have (stored in employee.component.ts): employee: Employee; usages: Usage[]; dataSource: MatTableDataSource<Usage>; displ ...

angularmongodbexpressmongoose

How to make a unique array of arrays in Javascript without any repeated elements

Hello fellow programmers! I'm diving into Javascript and facing a little challenge that I need help with. Let me share some data that I'm dealing with: <pre> [ [ { "id": 2759178563, "title": "Ergonomic Paper Computer", ...

javascriptarraysloopstypescript

Having trouble resolving the TypeScript error stating that "@types/express-serve-static-core/index has no exported member"? Here's how you

Encountering errors after upgrading node from version 14.18.0 to 20.16.0: ../node_modules/@types/express/index.d.ts node_modules/@types/express-serve-static-core/index"' has no exported member 'CookieOptions' node_modules/@types/express ...

typescriptexpressnestjs

Turn off the page refresh in Angular 6 routing

Having an issue with Angular where clicking a link causes the browser to reload the entire site instead of just loading the component associated with the path. What should I do? The default components are Page1 and Page2. In app.module.ts: import {Router ...

angularangular-routing

Bring in the SCSS using a relative path with Angular CLI

When trying to import a *.css file into a .scss using the @import rule, I encountered some issues. The .css file contains relative path references like url('path') and is part of an imported library located in the node_modules directory. My .com ...

cssangularsassangular-cli

React, Typescript, and Material-UI 4 compilation dilemma

Out of the blue, my entire project collapsed and I can't seem to build it. I recently reset the project using a fresh create-react app build, which seemed fine initially. However, just yesterday, I encountered a similar issue but with a different erro ...

reactjstypescriptmaterial-ui

Troubleshooting issues with Angular 2+ flip animation when used in conjunction with ngIf

I am looking to create a sleek card flip animation using ngIf Link to code: https://stackblitz.com/edit/angular-card-flip-2wj64j?file=app%2Fcard%2Fcard.component.html Current animation: https://i.stack.imgur.com/CEaEc.gif ==================CODE======== ...

angularangular-animations

Webpack does not support d3-tip in its current configuration

I'm having some trouble getting d3-tip to work with webpack while using TypeScript. Whenever I try to trigger mouseover events, I get an error saying "Uncaught TypeError: Cannot read property 'target' of null". This issue arises because th ...

javascriptd3.jstypescriptwebpack

Issue with Angular 7: Difficulty integrating a personalized TypeScript declaration file

Recently, I created a custom TypeScript definition file called brat.d.ts export declare class head { ready(callback: () => any); } export declare class Util { static embed(divId: string, collData: any, docData: any, webFontsURLs: Array<string ...

angulartypescripttypesangular7

Is there a way to automatically validate all input fields as soon as a user arrives on the page and immediately clicks the button?

<form class="form-horizontal" (submit)="submit($event)" [formGroup]="formUser"> <input name="firstname" formControlName="firstName"> <input name="lastname" formControlName="lastName"> <button type="submit" class="btn btn-de ...

angularformbuilder

Getting the FormArray value in an Angular TypeScript file

Having trouble accessing the form array value in my TypeScript file - it's coming up as a blank array. Here's my HTML code: <mat-form-field class="example-full-width" > <mat-label>Locations </mat-lab ...

htmlangulartypescript

Finding the hidden treasure within a nested array and transforming a boolean gem into a dazzling string - the ultimate quest!

How do I convert the values in the "active" field to "Yes" if true and "No" if false? [ { "id":81, "time":"2022-01-01 19:30:00", "subList":[ { "active":false, "success":null } ] }, { "id":89, "time":"2022-01-01 21:00:15", "subList":[ { "active":true, "suc ...

arraystypescriptmultidimensional-arraynested

Encountered a TypeError when using Angular 2 with ng-bootstrap and NgbTabset: Uncaught (in promise) error due to inability to read property 'templateRef'

I am attempting to use NgTabset but encountering an error that reads TypeError: Cannot read property 'templateRef' of undefined. Strangely, when I replace the ng-template with the template tag, everything works smoothly. Can anyone help me identi ...

angularng-bootstrapangular-ui-bootstrap-tab

What is the best way to categorize items in Angular lists based on their type

Lately, I've been delving into Angular and I'm facing a challenge - I want to split a list into two based on their type and display them in separate fields. My main query is: can I achieve this by using a for loop in the .ts file, or is there a s ...

htmlangulartypescript

The value of type 'number' cannot be assigned to type 'string | undefined'

Having an issue with the src attribute. I am trying to display an image on my website using the id number from an API, but when I attempt to do so, it gives me an error in the terminal saying 'Type 'number' is not assignable to type 'st ...

reactjstypescript