Angular component rendered two times

I create an Angular 18 client with a spring-boot backend and a Keycloak-angular 16.0.1 auth middleware. The problem is I get the content of app.component.html rendered 2x after I logged in and open the root url. On page /doctor or /home everiting fine, but on root I get two menubar.

The content of this html is:

<app-navbar></app-navbar>
<router-outlet></router-outlet>


The app-routing.module.ts is this:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { KeycloakGuard } from './auth/keycloak.guard';
import {DoctorComponent} from './doctor/doctor.component';
import {HomeComponent} from './home/home.component';

const routes: Routes = [
{ path: '', component: AppComponent, canActivate: [KeycloakGuard] },
{ path: 'home', component: HomeComponent },
{ path: 'doctors', component: DoctorComponent },
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }


The project is on github: https://github.com/pzoli/forras-ng-module Please help me find solution. Thanks for suggestions.

Continue reading...