Type 'Subscription' is missing the following properties from type 'Subscription': _parentOrParents, _subscriptions

Question

I am getting the above mentioned error with my angular ts file. but not able to understand to fix. any one help me

ts file :

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ScullyRoute, ScullyRoutesService } from '@scullyio/ng-lib';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-articles',
  templateUrl: './articles.component.html',
  styleUrls: ['./articles.component.scss']
})
export class ArticlesComponent implements OnInit, OnDestroy {

  posts: ScullyRoute[] = [];
  private routeSub: Subscription | undefined;

  constructor(private scullyService: ScullyRoutesService) { }

  ngOnInit(): void {
    this.routeSub = this.scullyService.available$.subscribe(posts => {
      this.posts = posts.filter(post => post.title);
    });
  }

  ngOnDestroy(): void {
    this.routeSub?.unsubscribe();
  }

}

Answer 1

Maybe the scully-route-service use a different version of rxjs. As a solution, instead of saving an istance of the subscription you can use rxjs pipe operator takeUntil and an subject for unsubscribing. Below the example code:

onDestroy$: Subject<boolean> = new Subject();

ngOnInit() {
 this.scullyService.available$.pipe(takeUntil(this.destroy$)).subscribe(() => 
{ //do stuff 
})
this.service.someSubscriber2.pipe(takeUntil(this.destroy$)).subscribe(() => 
{ //do stuff 
})
this.service.someSubscriber3.pipe(takeUntil(this.destroy$)).subscribe(() => 
{ //do stuff 
})
}

ngOnDestroy() {
  this.destroy$.next(true);
  this.destroy$.unsubscribe();
}

Or you can resolve the core of the problem by upgrading to angular 13, that would be the best bet. If you aren't able to upgrade to 13, I suggest downgrading your version of scully to one that supports angular 12.

If you are not thinking to upgrade to angular 13, the LTS version of scully that support rx 6 is 1.1.4: https://registry.npmmirror.com/@scullyio/init/1.1.4?spm=a2c6h.24755359.0.0.60394d45aVQlxP&file=1.1.4

You can install it by running npm install @scullyio/[email protected]