[Fixed] Angular Loading Error ExpressionChangedAfterItHasBeenCheckedError


I created a component loading and an interceptor for all requests in my application, loading appears on the screen until the request is finalized. However, I get an error whenever the component of my router outlet changes. can you help me?

My error:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ‘undefined’. Current value: ‘true’. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook?

My code:

export class MasterPageComponent implements OnInit {

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

  ngOnInit(): void {}

  isLoading: Subject<boolean> = this.loader.isLoading;


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

My LoaderService:

export class LoaderService {
    isLoading = new Subject<boolean>();
    show() {
    hide() {

My loader interceptor:

export class LoaderInterceptor implements HttpInterceptor  {

  constructor(private loader: LoaderService) {


  intercept(req: HttpRequest<any>, next: HttpHandler) {
    return next.handle(req).pipe(
      finalize(() => this.loader.hide())



It’s not an error, it’s an annoying warning that disappears after you compile your app in --prod mode.

To silence it :

constructor(private changeDetector : ChangeDetectorRef) { }


Leave a Reply

(*) Required, Your email will not be published