Angular-routing: Routing link in html-template can't be matched with a route defined in the routing-modules

Question

I have one question regarding routing (multiple routes inside the module, lazy loading).

Suppose I have 2 modules

1-app.routing.module.ts 2-user.management.routing.module.ts

Inside the app routing module file, I have

const appRoutes: Routes = [
 { path: '', redirectTo: '/login', pathMatch: 'full' },
 { path: 'login',  loadChildren: () => import('../app/user.management/user.management.module')
 .then(m => m.UserManagementModule) }
]
 
@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModules {}

and inside user management routing module file

const userManagementRouting: Routes = [
 { path: '', component: LoginComponent },
 { path: 'forgot-password', component: ForgotPasswordComponent }
];
 
@NgModule({
 imports: [RouterModule.forChild(userManagementRouting)],
 exports: [RouterModule]
})
export class UserManagementRoutingModule { }

When I run the app using "ng serve", it works as expected. I have added a link like

<a class="btn btn-link" routerLink="/forgot-password">Forgot Password </a>

when I clicked on forgot password link the app throw error

"Error: Uncaught (in promise): Error: cannot match any routes. URL segment: 'forgot-password'"
"Cannot match any routes. URL segment: 'forgot password"

Can you please guide me here on what's wrong with my code?

Answer 1

If the suggestion of R. Richards didn't work either try

routerLink=['/forgot-password']

or

routerLink=['/login/forgot-password']

Note that you're using a relative path. So where is this Html-template located?

You could also use an absolute path.

Please let us know if it doesn't work out. Take care and good luck.