Search code examples
angulartypescriptangular-routing

Route between lazy loaded modules ion angular 9


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!


Solution

  • Okay, totally my bad. The Auth Guard was the problem.