[enter image description here][1][I am facing an issue with lazy loading the user module in my application. I have set up a login page as the default path in the user.routing file, but for some reason, I cannot navigate from the login page to the signup page using router.navigate. The User module consists of sub-modules (login, signup, forgot) which are components within the user module. Interestingly, everything works perfectly fine when I import the User Module in the App Module. However, if I do not import the User Module in the App Module, the routing functionality along with other directives does not work as expected.]
App Structure:
app
|-(appModule.ts, app.component.ts, app.component.html)
|-user
|-[UserModule.ts, user-routing.ts]
|-loginComponent
|-signupComponent
|-forgotComponent
UserModule:
const routes: Routes = [
{ path: '', component: LoginComponent },
{ path: 'signup', pathMatch:'full',component: SignupComponent },
{ path: 'forgot', component: ForgotComponent }
];
@NgModule({
declarations: [LoginComponent, SignupComponent, ForgotComponent],
imports: [
CommonModule,
RouterModule.forChild(routes),
]
})
AppRouting:
export const routes: Routes = [
{ path: 'login', pathMatch: 'full' ,loadChildren: () => import('./user/user.module').then(m => m.UserModule)},
]