I have implemented a component loading and an interceptor to handle all requests in my application. The loading component is displayed on the screen until the request is completed. However, I am encountering an error whenever the component inside my router outlet changes. Can someone assist me with this issue?
The error message I am receiving:
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?
Here is a snippet of my code:
export class MasterPageComponent implements OnInit {
constructor(private el: ElementService, private loader: LoaderService) { }
ngOnInit(): void {}
isLoading: Subject<boolean> = this.loader.isLoading;
}
Master-Page.component.html
<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="isLoading | async"></app-loading>
My LoaderService implementation:
export class LoaderService {
isLoading = new Subject<boolean>();
show() {
this.isLoading.next(true);
}
hide() {
this.isLoading.next(false);
}
}
My loader interceptor customization:
export class LoaderInterceptor implements HttpInterceptor {
constructor(private loader: LoaderService) {
}
intercept(req: HttpRequest<any>, next: HttpHandler) {
this.loader.show()
return next.handle(req).pipe(
finalize(() => this.loader.hide())
);
}
}