I have 2 lazy loaded modules declared in my AppModule:
{
path: 'dashboard',
loadChildren: () => import('./modules/dashboards/dashboard.module').then(m => m.DashboardModule),
canActivate: [ AuthGuard ]
},
{
path: 'auth',
loadChildren: () => import('./modules/auth/auth.module').then(m => m.AuthModule)
},
{path: '', redirectTo: 'auth', pathMatch: 'full'},
{path: '**', component: PageNotFoundComponent},
The auth module contains the login page. On successful login, it should redirect to the dashboard. Sadly, I cannot manage to navigate to the dashboard out of the auth module. I tried
this.router.navigate([ 'dashboard' ]);
this.router.navigate([ './dashboard' ]);
this.router.navigate([ '../dashboard' ]);
Auth Module Routes:
{
path: '',
component: AuthContainerComponent,
children: [
{
path: '',
redirectTo: 'login',
pathMatch: 'full',
},
{
path: 'login',
component: LoginComponent
}, ...]}
Dashboard Module Routes:
{
path: 'customer',
loadChildren: () => import('./customer/customer.module').then(m => m.CustomerModule),
canActivate: [ AuthGuard ],
data: {
roles: [ Roles.Customer ]
},
},
{
path: 'staff',
loadChildren: () => import('./staff/staff.module').then(m => m.StaffModule),
},
{path: '', redirectTo: 'customer', pathMatch: 'full'},
Any ideas why it is not working? Is it because the modules are lazy loaded? Thanks for any help!
Okay, totally my bad. The Auth Guard was the problem.