[Fixed] Angular loading interceptor error when loading the component

Issue

I have a component, which is working if I remove my loader. When starting my component, I have a forkJoin to call 2 endpoints, but when placing the loader, it does not recognize my forkJoin, if I remove the loader, it will work normally. This error occurs only when calling my MachineComponent, all other components that are rendered in my MasterComponent, work normally. Can you help me?

ERROR

My code:

MasterPageComponent.html and TS

<div class="wrapper default-theme" [ngClass]="getClasses()">
  <app-navbar></app-navbar>
  <main>
    <app-sidebar></app-sidebar>
    <div class="pages container-fluid pt-4 pb-4 pl-4 pr-4 ">
      <router-outlet></router-outlet>
    </div>
    <div class="overlay" (click)="toggleSidebar()"></div>
  </main>
</div>
<app-loading *ngIf="loader.isLoading | async"></app-loading>

export class MasterPageComponent implements OnInit {

  constructor(private el: ElementService, 
    public loader: LoaderService, 
    private _changeDetectionRef: ChangeDetectorRef) { }

  ngOnInit(): void {}
  
  ngAfterViewChecked() : void {
    this._changeDetectionRef.detectChanges();
}


  getClasses() {
    const classes = {
      'pinned-sidebar': this.el.getSidebarStat().isSidebarPinned,
      'toggeled-sidebar': this.el.getSidebarStat().isSidebarToggeled
    }
    return classes;
  }
  toggleSidebar() {
    this.el.toggleSidebar();
  }

}

My MachineComponent.html and TS

import "rxjs/add/operator/takeWhile";

export class MachinesComponent implements OnInit, OnDestroy, AfterViewInit {

  public selectedServer: any;
  public selectedMachine: any;
  public flavors: any[] = [];
  public machines: any[] = [];
  private alive: boolean = true;
  public form: FormGroup;

  constructor(private serverService: MachineService, 
    private openstackService: OpenStackService,
    private modalService: NgbModal, 
    private alert: AlertService,
    private formBuilder: FormBuilder,
  ) {}

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      flavorRef: new FormControl('')
    })

    forkJoin(this.serverService.getServer(), 
    this.openstackService.getFlavors())
    .takeWhile(() => this.alive)
    .subscribe((data) => {
      this.machines = data[0];
      this.flavors = data[1]['flavors'];
    })

    this.setExpanded();

  }

My Loader Interceptor:

export class LoaderInterceptor implements HttpInterceptor  {
  private requests: HttpRequest<any>[] = [];

  constructor(private loader: LoaderService) {}

  removeRequest(req: HttpRequest<any>) {
    const i = this.requests.indexOf(req);
    if (i >= 0) {
      this.requests.splice(i, 1);
    }
    console.log(i, this.requests.length);
    this.loader.isLoading.next(this.requests.length > 0);
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.requests.push(req);
    this.loader.isLoading.next(true);
    return Observable.create(observer => {
      const subscription = next.handle(req)
        .subscribe(
        event => {
          if (event instanceof HttpResponse) {
            this.removeRequest(req);
            observer.next(event);
          }
        },
        err => { this.removeRequest(req); observer.error(err); },
        () => { this.removeRequest(req); observer.complete(); });
      // teardown logic in case of cancelled requests
      return () => {
        this.removeRequest(req);
        subscription.unsubscribe();
      };
    });
  }
}

My Loader Interceptor Service:

@Injectable()
export class LoaderService {
    public isLoading = new BehaviorSubject(false);

    constructor(){}
}

Solution

takeWhile is a pipe operator, so you should call it like:

forkJoin(this.serverService.getServer(), this.openstackService.getFlavors())
    .pipe(takeWhile(() => this.alive))
    .subscribe((data) => {
      this.machines = data[0];
      this.flavors = data[1]['flavors'];
    })