How to fix ExpressionChangedAfterItHasBeenCheckedError when using router.events and navigate?

Question

Angular

Implemented a transition spinner between child components using router.events.
Main Component Template

<div [ngClass]="{'loading-class':loading}">
<router-outlet></router-outlet>
</div>

The component itself

export class MyComponent {
    loading: boolean;
    constructor(router: Router) {
        router.events
            .pipe(
                filter(e => e instanceof NavigationStart || e instanceof NavigationEnd),
                map(e => e instanceof NavigationStart),
                distinctUntilChanged()
            )
            .subscribe(loading => this.loading = loading);
    }
}

As a result, NavigateStart shows the loading wheel, and NavigateEnd shows the page.
Everything works great, but if we navigate to the same router (url) where we are, for example when we need to clear the parameters in the url, an ExpressionChangedAfterItHasBeenCheckedError occurs because we have already initialized the component .

Google only helped to find crutch solutions - make the change asynchronous (setTimeout or EventEmitter(true)) or force a change of environment. This article describes them and also says that such solutions are bad.

I myself came up with only remembering the url when navigating and then checking it with a new one during transitions, but this is also a hack.
Perhaps there is a more elegant solution. I'm sure someone has already experienced this.

Answer 1

export class MyComponent {
  loadingClass = this.createLoadingClass();

  constructor(router: Router) {}

  private createLoadingClass(): Observable<boolean> {
    return router.events.pipe(
      map(e => e instanceof NavigationStart),
    );
  }
}

<div [class.loading]="loadingClass | async">
But why is this needed? Why does it take so long to navigate the route?