Router Lazy Loading issue after Angular 11.1.2

Question

I just upgraded my project to the latest version of Angular (11.1.2) and now I'm having some issues with my router. I am not entirely sure what is going on but I will try to explain it as best as I can.

My AuthRoutingModule is loading fine, I confirmed that by checking the RouteConfigLoadStart event. But I don't see my PagesRoutingModule getting loaded at all and when I try to navigate to any of the pages it just redirects me back to the root route.

This setup worked fine for 11.1.0:

AppRoutingModule:

const authModule = () => import('./modules/authentication/auth.module').then(x => x.AuthModule);
const pagesModule = () => import('./modules/pages/pages.module').then(x => x.PagesModule);

const routes: Routes = [
  {
    path: '',
    loadChildren: pagesModule
  },
  {
    path: 'login',
    loadChildren: authModule
  },
  {
    path: 'print',
    outlet: 'print',
    component: OrderReceiptComponent
  },
  {
    path: '**', redirectTo: ''
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled', preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

AuthRoutingModule:

const routes: Routes = [
  {
    path: '',
    component: AuthComponent,
    children: [
      {
        path: '',
        component: LoginComponent
      },
      {
        path: 'wachtwoord-vergeten',
        component: PasswordRecoveryComponent
      },
      {
        path: 'wachtwoord-resetten',
        component: ResetPasswordComponent
      },
      {
        path: 'registreren',
        component: RegistrationComponent
      },
      {
        path: 'verificatie',
        component: AccountVerificationComponent
      }
    ]
  }
];

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

PagesRoutingModule:

const routes: Routes = [
  {
    path: '',
    component: PagesComponent,
    children: [
      {
        path: '',
        component: DashboardComponent,
        canActivate: [AuthGuard],
        data: { roles: [Role.User, Role.Admin], title: 'Dashboard' }
      },
      {
        path: 'authorize',
        component: AuthorizeComponent,
        canActivate: [AuthGuard],
        data: { roles: [Role.User], title: 'Authorizeren' }
      },
      {
        path: 'menus',
        component: MenusComponent,
        canActivate: [AuthGuard],
        data: { roles: [Role.User], title: 'Menukaarten' }
      },
      {
        path: 'menus/:id',
        component: EditMenuComponent,
        canActivate: [AuthGuard],
        children: [

        ],
        data: { roles: [Role.User], title: 'Menukaart bewerken' }
      },
      {
        path: 'instellingen',
        component: SettingsComponent,
        canActivate: [AuthGuard],
        data: { roles: [Role.User], title: 'Instellingen' },
        children: [
          {
            path: 'website-instellingen',
            component: WebsiteSettingsComponent,
            canActivate: [AuthGuard],
            data: { roles: [Role.User], title: 'Website Instellingen' }
          },
          {
            path: 'openingstijden',
            component: OpeningHoursComponent,
            canActivate: [AuthGuard],
            data: { roles: [Role.User], title: 'Openingstijden' }
          },
          {
            path: 'betalingen',
            component: PaymentsComponent,
            canActivate: [AuthGuard],
            data: { roles: [Role.User], title: 'Betalingen' }
          },
          {
            path: 'bezorg-gebieden',
            component: DeliveryAreasComponent,
            canActivate: [AuthGuard],
            data: { roles: [Role.User], title: 'Bezorg gebieden' }
          }
        ]
      },
      {
        path: 'statistieken',
        component: SalesComponent,
        canActivate: [AuthGuard],
        data: { roles: [Role.User], title: 'Statistieken' }
      },
      {
        path: 'aanbiedingen',
        component: CouponsComponent,
        canActivate: [AuthGuard],
        data: { roles: [Role.User], title: 'Aanbiedingen' }
      },
      {
        path: 'shop',
        component: ShopComponent,
        canActivate: [AuthGuard],
        data: { roles: [Role.User], title: 'Shop' }
      },
      {
        path: 'promotie',
        component: PromotionComponent,
        canActivate: [AuthGuard],
        data: { roles: [Role.User], title: 'Promotie' }
      },
      {
        path: 'abonnementen',
        component: SubscriptionsComponent,
        canActivate: [AuthGuard],
        data: { roles: [Role.Admin], title: 'Abonnementen' }
      },
      {
        path: 'admin-dashboard',
        component: AdminDashboardComponent,
        canActivate: [AuthGuard],
        data: { roles: [Role.Admin], title: 'Admin Dashboard' }
      }
    ]
  }
];

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

I'm more than happy to provide additional details that might get to a solution. Thanks in advance.

Answer 1

For lazy loading, you need to import each module's routes in your app.routing.module like this:

 const routes: Routes = [ // Redirect homepage to dashboard page { path: '', redirectTo: 'dashboard', pathMatch: 'full', }, // Panel Layout: { canActivate: [AuthGuard], loadChildren: () => import('./modules/modules.module').then((module) => module.ModulesModule), }, // 404 not found page { path: '**', component: NotFoundPageComponent }, ];

and then in each module, you need to define path and component which you want to load:

 const routes: Routes = [ { path: 'list', component: UserComponent }, { path: 'new', component: NewUserComponent }, { path: 'history/:id', component: UserHistoryComponent }, ];

Answer 2

So in the end the problem was not with the router. It was actually doing it's job completely fine. The issue was on my end by not properly setting the Role of the current user.