CoreUI with Angular 18 - interceptor not intercepting http requests

I just started with coreUi and Angular 18 and would like to intercept the requests, when the user calls another route. I started with the standard coreUi modern theme and set everything up so far but chaning the route is not beeing intercepted. Maybe someone can help and tell me, what i am doing wrong.

app.component.ts

import { Component, OnInit } from '@angular/core';
import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
import { Title } from '@angular/platform-browser';

import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from './icons/icon-subset';

@Component({
  selector: 'app-root',
  template: '<router-outlet />',
  standalone: true,
  imports: [RouterOutlet]
})
export class AppComponent implements OnInit {
  title = 'CoreUI Pro Angular Admin Template';

  constructor(
    private router: Router,
    private titleService: Title,
    private iconSetService: IconSetService
  ) {
    this.titleService.setTitle(this.title);
    // iconSet singleton
    this.iconSetService.icons = { ...iconSubset };
  }

  ngOnInit(): void {
    this.router.events.subscribe((evt) => {
      if (!(evt instanceof NavigationEnd)) {
        return;
      }
    });
  }
}

app.config.ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';
import {
  provideRouter,
  withEnabledBlockingInitialNavigation,
  withHashLocation,
  withInMemoryScrolling,
  withRouterConfig,
  withViewTransitions
} from '@angular/router';

import { DropdownModule, SidebarModule } from '@coreui/angular-pro';
import { IconSetService } from '@coreui/icons-angular';
import { routes } from './app.routes';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { authInterceptor } from '../interceptors/auth.interceptor';
import { JwtModule } from '@auth0/angular-jwt';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes,
      withRouterConfig({
        onSameUrlNavigation: 'reload'
      }),
      withInMemoryScrolling({
        scrollPositionRestoration: 'top',
        anchorScrolling: 'enabled'
      }),
      withEnabledBlockingInitialNavigation(),
      withViewTransitions(),
      withHashLocation()
    ),
    importProvidersFrom(SidebarModule, DropdownModule, JwtModule.forRoot({})),
    IconSetService,
    provideAnimations(),
    provideHttpClient(withInterceptors([authInterceptor])), 
  ]
};

auth.interceptor.ts

import { HttpInterceptorFn } from '@angular/common/http';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
    console.log("Intercepting Requests")
    return next(authReq);
};

_nav.ts

  {
    name: 'Pages',
    url: '/login',
    iconComponent: { name: 'cil-star' },
    children: [
      {
        name: 'Login',
        url: '/login',
        icon: 'nav-icon-bullet'
      },
      {
        name: 'Register',
        url: '/register',
        icon: 'nav-icon-bullet'
      },
    ]
  },

If the routing is different, then try running the activate guard on the route change.

 ngOnInit(): void {
    this.router.events.pipe(
        filter((e): e is NavigationEnd => e instanceof NavigationEnd),
        debounceTime(100),
    ).subscribe((evt) => {
        authGuard();
    });
  }

You are looking for a guard, that checks on each route load.

[
  { path: 'gallery', component: GalleryComponent, canActivate: [authGuard] },
  { path: 'hello', component: HelloComponent, canActivate: [authGuard] }
]

Then we define the guard to check if token present in localStorage else redirect to login.

const authGuard: CanActivateFn = () => {
  return localStorage?.get('token') ? true : this.router.createUrlTree(['/login']);
};