Angular 9 lazy load each component of a module

Question

I have a module who has a big set of components that are accessed by different subroutes. I'm already lazy loading the module, but I'd like to know if it's possible to lazy load the subcomponents:

const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivate: [AuthGuardService],
    children: [
      {
        path: '',
        component: DashboardComponent,
        canActivate: [AuthGuardService]
      },
      {
        path: 'users',
        component: UsersComponent, // I want to lazy load that
        canActivate: [AuthGuardService]
      },
      {
        path: 'account',
        component: AccountComponent, // I want to lazy load that
        canActivate: [AuthGuardService]
      },
      {
        path: 'invoices',
        component: InvoicesComponent, // I want to lazy load that
        canActivate: [AuthGuardService]
      },
      {
        path: 'upgrade',
        component: StripeFormComponent, // I want to lazy load that
        canActivate: [AuthGuardService]
      }
    ]
  }
];

Any idea if that's possible?

This is probably a bad idea. Better to just use seperate modules in this case. — MikeOne
– MikeOne, Commented Mar 21, 2020 at 15:42

Loy · Accepted Answer · 2020-03-21 16:51:09Z

1

You can read about component lazy-loading there: https://johnpapa.net/angular-9-lazy-loading-components/ But i think that separate each component to module is better idea

answered Mar 21, 2020 at 16:51

Loy

1165 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 9 lazy load each component of a module

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related