Angular 9 延遲加載模塊的每個組件

Question

我有一個模塊，它有一大組可通過不同子路由訪問的組件。 我已經在延遲加載模塊，但我想知道是否可以延遲加載子組件：

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]
      }
    ]
  }
];

知道這可能嗎？

Answer 1

您可以在那里閱讀有關組件延遲加載的信息： https : //johnpapa.net/angular-9-lazy-loading-components/但我認為將每個組件與模塊分開是更好的主意