routing stuck (stopped working) after a few clicks if a router is declared in child component

on Angular version 18.0.0

//package.json
"@angular/animations": "^18.0.0",
"@angular/common": "^18.0.0",
"@angular/compiler": "^18.0.0",
"@angular/core": "^18.0.0",


my routing initially seems to work fine

//app.config.ts
import { provideRouter } from '@angular/router';
import { provideNoopAnimations } from '@angular/platform-browser/animations';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
providers: [provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes), provideNoopAnimations()]
};

//app.routes.ts
export const routes: Routes = [
{
path: 'staff',
component: StaffComponent,
title: 'Home details',
children: StaffRoutes
},
];

//staff/staff.routes.ts
export const StaffRoutes: Routes = [
{ path: 'new', component: StaffDetailComponent },
{ path: 'view/:id', component: StaffDetailComponent },
{ path: 'list', component: StaffListComponent },
{ path: '', redirectTo: 'list', pathMatch: 'full' },
]

//top-navitgation.component.ts
export class TopNavigationComponent {
items: MenuItem[] | undefined;

ngOnInit() {
this.items = [
{
label: 'Home',
route: '/',
},
{
label: 'Staff',
route: 'staff',
},
];
}

//staff-sub-menu.component.ts
export class StaffSubMenuComponent {
items: MenuItem[] | undefined;

ngOnInit() {
this.items = [
{
label: 'Functions',
items: [

{
label: 'View staffs',
icon: 'pi pi-list',
route: 'list'
},
{
label: 'New Staff',
route: 'new'
},
]
}
];
}
}

//app.component.html
<main>
<p-toast/>
<nav><app-top-navigation></app-top-navigation></nav>
<router-outlet></router-outlet>
</main>

//staff.component.html
<router-outlet></router-outlet>


all routing works fine (clicks the links navigate to the components without issue) right up until I add anything that is Router related into the "child" component StaffDetailComponent

//staff-detail-component.ts
import { Router } from '@angular/router'; //not useful if I cannot use router

@Component({
providers: [Router], //not useful if I cannot use router
})

export class StaffDetailComponent {
//router: Router; //because router cannot be initialized (stuck) it cannot be declared

staffService: StaffService = inject(StaffService);

//cannot do this, it will cause routing to be stuck
constructor(private messageService: MessageService, private router : Router) {
}

constructor(private messageService: MessageService, private injector: Injector) {
//injecting also stucks the routing
//this.router = this.injector.get(Router);
doStuff();
}

doStuff(): void {
//which means I don't get to do this
//this.router.navigate(['staff/list']);
}
}


either when I try to declare a router in the component constructor, or inject a router, after I nagivated through the staffDetail component, it gets stuck, meaning which ever link I click, it stays on same page without navigating. When mouse over in the browser, the links still shows the correct addresses from the routes.ts

1. Did I miss any concept of route / provideRoute?
2. is the multi-layered router-outlet causing this? Did I use the wrong design / got it totally wrong?
3. If I am trying to navigate to somewhere else like after pressing a button to save things in doStuff(), is this.router.navigate(['staff/list']); the correct call or is there some other routing / navigation pattern I should use?

Continue reading...