angularkeycloakangular18

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.

enter image description here 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 DOM is normally in Doctor view: enter image description here

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

Solution

  • Your current routing definition calls for the router-outlet in AppComponent to render AppComponent...

    Try changing to:

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