Persistent NG04002 ("No matching route found") navigating from lazy-loaded to eager route...

I'm facing a persistent routing issue in my Angular application (version 15.2.9) after refactoring some features into lazy-loaded feature modules. The error NG04002 ("Error: NG04002 Error: NG04002") appears in the console when I try to navigate from a component within my lazy-loaded module (CertificateListModule) to a route defined in my root module (AppModule).

Specifically, the error occurs when clicking a link with [routerLink]="['/good', itemId]" in a component (CardViewComponent) which is part of CertificateListModule. The target route is /good/:id, defined in AppRoutingModule.

What works:

• Navigating directly to the URL /good/actual_ID in the browser's address bar works without error. This proves that the good/:id route is correctly defined and reachable by the router in a "direct" navigation context.
• The lazy loading configuration for CertificateListModule seems to work, and the module is loaded when I access the configured paths (/ or /goods).

The problem:

The NG04002 error occurs only when navigation is initiated by clicking a link (routerLink) from a component located inside the lazy-loaded module (CertificateListModule). The router fails to find a match for /good/actual_ID in this specific context.

Router logs obtained manually confirm that the target URL is correct at the start of navigation, but a route matching error occurs immediately:

{
"id": 3,
"url": "/good/71157a04-aaf9-4f6f-ac91-f480767d4b06",
"type": 0, // NavigationStart
"navigationTrigger": "imperative",
"restoredState": null
}

{
"id": 3,
"url": "/good/71157a04-aaf9-4f6f-ac91-f480767d4b06",
"error": {
"code": 4002 // NG04002
},
"type": 3 // NavigationError
}


The immediate NavigationError after NavigationStart with a valid URL, and the absence of intermediate route recognition events (like RoutesRecognized), strongly indicates a failure very early in the route matching process, specifically when transitioning from the lazy module's context.

app-routing.module.ts

const routes: Routes = [
{ path: 'good/:id', component: GoodDetailsComponent }, // Eager route
{ path: 'login', component: LoginComponent },
{
path: 'goods',
loadChildren: () => import('./certificate-list/certificate-list.module').then(m => m.CertificateListModule)
},
{ path: '', redirectTo: 'goods', pathMatch: 'full' }, // Redirection
{ path: '**', component: NotfoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes, { enableTracing: true })],
exports: [RouterModule]
})
export class AppRoutingModule {}


certificate-list-routing.module.ts

const routes: Routes = [
{
path: '', component: CertificateListComponent,
},
];

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


extract of CardViewComponent.html which is part of CertificateListModule.

<div class="cards">
<a class="authent-block shop-card wallet-card" *ngFor="let g of goods.data" [routerLink]="['/good', g.id]"</a>
</div>


Thank you in advance for your help!

Continue reading...