由于角度6中的加载器拦截器，导致ExpressionChangedAfterItHasBeenCheckedError错误

Question

I have an angular 6 project. And I create an interceptor for showing 'loading' panel.But because of this loading panel, I'm taking this error ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true' ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true' ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true' .How can I fix this?

My interceptor

export class LoaderInterceptor implements HttpInterceptor {
  constructor(private ch: CommonHelper) { }

    intercept(request: HttpRequest < any >, next: HttpHandler): Observable < HttpEvent < any >> {
      this.ch.showLoader();
      return next.handle(request)
        .pipe(
          tap((event: HttpEvent<any>) => {
            if (event instanceof HttpResponse) {
              this.ch.hideLoader();
            }
          }, (error: any) => {
            if (error instanceof HttpErrorResponse) {
              this.ch.messageHelper.showErrorMessage('Error Occured');
            }
            this.ch.hideLoader();
          })
        );
    }
}

My show and hide methods

showLoader() {
    this.globals.displayLoader = true;
  }

hideLoader() {
    this.globals.displayLoader = false;
  }

My layout.html

 <div class="loading-screen" *ngIf="ch.globals.displayLoader">
    <div class="loading-loader"></div>
 </div>

Answer 1

Try to put your method to show/hide in setTimeout, like this -

setTimeout(() => {this.ch.hideLoader();}, 0)

For more explanation refer here -

• https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4