Encountering the "Unrecognized teardown 1" error when subscribing to an Observable in Typescript and Angular2

Question

Encountering the "Unrecognized teardown 1" error when subscribing to an Observable in Typescript and Angular2

Having trouble with using an Observable in my Angular2.rc.4 Typescript app. Check out the plunker for it here: https://embed.plnkr.co/UjcdCmN6hSkdKt27ezyI/

The issue revolves around a service that contains this code:

private messageSender : Observable<string>;

constructor() {
    this.messageSender = Observable.create(observer => this.clients.push(observer));
 }

public listenForMessages() : any {
    console.log("Listen Requested...")
    return this.messageSender;
}

I'm trying to listen to it from a component:

ngOnInit() {
    this.chatter.listenForMessages().subscribe(msg => console.log(msg));
}

This leads to the error below:

EXCEPTION: Error: Unrecognized teardown 1 added to Subscription.
Error: Unrecognized teardown 1 added to Subscription.
    at Subscriber.Subscription.add (Subscription.ts:151)
    at Observable.subscribe (Observable.ts:93)
    at LoginPage.ngOnInit (login.ts:15)
    at DebugAppView._View_LoginPage_Host0.detectChangesInternal (LoginPage.template.js:29)
    at DebugAppView.AppView.detectChanges (view.ts:261)
    at DebugAppView.detectChanges (view.ts:377)
    at DebugAppView.AppView.detectContentChildrenChanges (view.ts:280)
    at DebugAppView.AppView.detectChangesInternal (view.ts:272)
    at DebugAppView.AppView.detectChanges (view.ts:261)
    at DebugAppView.detectChanges (view.ts:377)
BrowserDomAdapter.logError @ browser_adapter.ts:82

After many hours of investigation, I have not found solutions on other sites. The error message originates from RxJS and is triggered when the object passed into .subscribe() method isn't recognized. Even passing lambdas or pre-defined functions results in the same issue.

Any insights? Creating the Observable in the component doesn't cause issues, but subscribing in the service triggers the error... Very perplexing situation.

typescript angular rxjs

Answer 1

Answer №1

If you encounter a similar error message, it may be due to not providing Object.create with a callback function that returns TeardownLogic. Here's the definition of TeardownLogic:

export type TeardownLogic = AnonymousSubscription | Function | void;

This is what an AnonymousSubscription interface looks like:

export interface AnonymousSubscription {
  unsubscribe(): void;
}

For instance, instead of returning a boolean like this:

this.showSomething = Observable.create((observer: Observer<boolean>) => this.code === "00108");

You should be returning an AnonymousSubscription like this:

this.showSomething = Observable.create((observer: Observer<boolean>) => {
    observer.next(this.code === "00108");
});

Answer 2

If you encounter a similar error message, it may be due to not providing Object.create with a callback function that returns TeardownLogic. Here's the definition of TeardownLogic:

export type TeardownLogic = AnonymousSubscription | Function | void;

This is what an AnonymousSubscription interface looks like:

export interface AnonymousSubscription {
  unsubscribe(): void;
}

For instance, instead of returning a boolean like this:

this.showSomething = Observable.create((observer: Observer<boolean>) => this.code === "00108");

You should be returning an AnonymousSubscription like this:

this.showSomething = Observable.create((observer: Observer<boolean>) => {
    observer.next(this.code === "00108");
});

Answer 3

Answer №2

The main issue here is that when you use Array#push it returns a number, not an object or value related to TeardownLogic. This creates a problem in the code snippet

Observable.create(observer => this.clients.push(observer))

.

My recommendation would be to avoid the observer-array pattern altogether. It seems like trying to reinvent something that already exists and works well. This pattern has been seen in ng2 tutorials and honestly, it's not a good approach.

If you require multicast behavior, consider using a Subject instead:

private messageSender : Subject<string>;

constructor() {
    this.messageSender = new Subject<string>();
}

public listenForMessages() : any {
    console.log("Listen Requested...")
    return this.messageSender.asObservable();
}

A more efficient solution might involve eliminating the intermediate Subject entirely and subscribing directly to the message source. However, without further details about your application, it's difficult to provide specific guidance on how to achieve this.

Answer 4

The main issue here is that when you use Array#push it returns a number, not an object or value related to TeardownLogic. This creates a problem in the code snippet

Observable.create(observer => this.clients.push(observer))

.

My recommendation would be to avoid the observer-array pattern altogether. It seems like trying to reinvent something that already exists and works well. This pattern has been seen in ng2 tutorials and honestly, it's not a good approach.

If you require multicast behavior, consider using a Subject instead:

private messageSender : Subject<string>;

constructor() {
    this.messageSender = new Subject<string>();
}

public listenForMessages() : any {
    console.log("Listen Requested...")
    return this.messageSender.asObservable();
}

A more efficient solution might involve eliminating the intermediate Subject entirely and subscribing directly to the message source. However, without further details about your application, it's difficult to provide specific guidance on how to achieve this.

Answer 5

Answer №3

Focusing on @Tom's response, I encountered a similar issue due to neglecting the Observer.

Incorrect Approach:

@Injectable()
export class QuizEditorGuard implements CanDeactivate<QuizEditorPage> {

  constructor(private app: ApplicationService) { }

  canDeactivate(
    quizEditor: QuizEditorPage,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    return Observable.create((observer: Observer<boolean>) => {
      if (quizEditor && quizEditor.hasUnsavedChanges) {
        observer.next(true);
        observer.complete();
      }
      else
        return false; //issue lies here
    });
  }
}

Correct Approach:

@Injectable()
export class QuizEditorGuard implements CanDeactivate<QuizEditorPage> {

  constructor(private app: ApplicationService) { }

  canDeactivate(
    quizEditor: QuizEditorPage,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    return Observable.create((observer: Observer<boolean>) => {
      if (quizEditor && quizEditor.hasUnsavedChanges) {
        observer.next(true);
        observer.complete();
      }
      else {
        observer.next(false); //always remember to notify the observer
        observer.complete();
      }
    });
  }
}

Referring back to @Steven's query, his issue arose from the same cause: He failed to instruct his object on how to proceed after inserting the client.

Observable.create(observer => 
    this.clients.push(observer));
    observer.next("some string");
    observer.complete();
 }

Answer 6

Focusing on @Tom's response, I encountered a similar issue due to neglecting the Observer.

Incorrect Approach:

@Injectable()
export class QuizEditorGuard implements CanDeactivate<QuizEditorPage> {

  constructor(private app: ApplicationService) { }

  canDeactivate(
    quizEditor: QuizEditorPage,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    return Observable.create((observer: Observer<boolean>) => {
      if (quizEditor && quizEditor.hasUnsavedChanges) {
        observer.next(true);
        observer.complete();
      }
      else
        return false; //issue lies here
    });
  }
}

Correct Approach:

@Injectable()
export class QuizEditorGuard implements CanDeactivate<QuizEditorPage> {

  constructor(private app: ApplicationService) { }

  canDeactivate(
    quizEditor: QuizEditorPage,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    return Observable.create((observer: Observer<boolean>) => {
      if (quizEditor && quizEditor.hasUnsavedChanges) {
        observer.next(true);
        observer.complete();
      }
      else {
        observer.next(false); //always remember to notify the observer
        observer.complete();
      }
    });
  }
}

Referring back to @Steven's query, his issue arose from the same cause: He failed to instruct his object on how to proceed after inserting the client.

Observable.create(observer => 
    this.clients.push(observer));
    observer.next("some string");
    observer.complete();
 }

Encountering the "Unrecognized teardown 1" error when subscribing to an Observable in Typescript and Angular2

Answer №1

Answer №2

Answer №3

Similar questions

Mastering Data Labels in ng2-chart: A step-by-step guide

Retrieving data from a database and displaying rows in a FormArray with Angular 5

Every time I attempt to execute an npm command, such as ng new, I encounter a "module not found" error despite having installed node version "v16.13.0"

Guide on importing a markdown file (.md) into a TypeScript project

Unable to resolve host name for registry.npmjs.org on port 80

New Chrome update restricts insecure cookies from functioning in Angular

Setting a custom port for your Node.js Typescript project on Heroku

Developing a Generic API Invocation Function

Merge two RxJS Observables/Subscriptions and loop through their data

Leveraging the power of Kendo UI for Angular, bind the click event of a kendoButton to a method associated with a variable within

Issue with installing firebase-tools through macOS terminal

Calling the ngSubmit.emit() function does not alter the submitted property within the formGroup

Angular app experiences a breakdown due to a JitCompiler issue

What is the best way to include multiple targets/executables within a single Node.js repository?

What is the best way to send various parameters to a component using [routerLink] or router.navigate?

Tips for selecting the best className type for material-ui components

Tips for finalizing a subscriber after a for loop finishes?

While attempting to utilize npm install, I encounter an error on a discord bot stating "msvsVersion is not defined."

Counting up in Angular from a starting number of seconds on a timer

Encountering the identical error message while attempting to execute my application: "Uncaught TypeError: this.microservicesModule.register is not a function."