Lazy Loading Angular Standalone Components

Image by 995645 from Pixabay

Scenario

We want to lazy load a standaloneProfileComponent .

Approach

{ 
  path: 'profile',
  loadComponent: () => import('./admin/profile.component').then(m => m.AdminComponent)
}

If the profile component needs a provider , it that can be included like this.

{ 
  path: 'profile',
  providers: [ProfileService],
  loadComponent: () => import('./admin/profile.component').then(m => m.AdminComponent)
}

Also if profile has child routes they can be loaded by directly loading the routes.

{ 
  path: 'profile',
  loadChildren: () => import('./profile/profile.routes').then(c => c.profileRoutes)
}

If the profile components wants a lazy loaded provider then define it in the profile.routes definition.

export const profileRoutes: Routes = [
  { 
    path: '',
    pathMatch: 'prefix',
    providers: [ProfileService],
    children: [
      { path: '', component: ProfileComponent }
    ]
  }
];