1

enter image description hereI 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();
  }

}
user2024080
  • 1
  • 14
  • 56
  • 96
  • can you add the definition of the service and specifically `available$`. is that a Observable, BehaviorSubject, Subject...? – Edward Nov 25 '21 at 13:24
  • Try replacing `private routeSub: Subscription | undefined;` with `private routeSub!: Subscription;` – ruth Nov 25 '21 at 13:26
  • @Edward: https://scully.io/docs/Reference/ngLib/scully-routes-service/ – ruth Nov 25 '21 at 13:31
  • Sounds like you have multiple versions of RxJS. – cartant Nov 25 '21 at 13:33
  • @MichaelD - I updated the code, but still the issue persist. `private routeSub!: Subscription | undefined;` – user2024080 Nov 25 '21 at 13:47
  • looking at the Suclly package, it's using rxjs version `^7.0.0`, what version are you using. The only thing that occurs to me is what @cartant is alluding to. that you have a different version of rxjs than "scully" uses – Edward Nov 25 '21 at 13:50
  • @Edward - I am using angular 12.x with `"rxjs": "~6.6.0",` - how to correct it then? – user2024080 Nov 25 '21 at 13:51
  • 2
    It's my understanding that rxjs 7 had some pretty major changes from previous versions. I don't think angular 12.x supports rxjs 7. there is a thread on this [here](https://github.com/angular/angular/issues/41897). I do know that angular 13 does support it. if you are able to upgrade to 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 suppords angular 12. RXJS is a core feature of Angular, so blindly upgrading it on a version of Angular that doesn't support it would be risky – Edward Nov 25 '21 at 14:17

1 Answers1

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/init@1.1.4

vnapastiuk
  • 609
  • 7
  • 12