Angular v17 CLI Default to Standalone: Does Lazy Loading Still Require @NgModule for Routing?

Issue

Angular v17 onwards defaults to the Standalone approach in the CLI, and there's no more explicit use of @NgModule for application organization. My question is regarding lazy loading with the new default configuration.

Suppose I define my routes in the following way (as im using standalone components):

export const routes: Routes = [
    {'path' : '', component: DashboardComponent},
    {'path' : 'users', component: UsersComponent},
    {'path' : '**', component: DashboardComponent},
];

Will lazy loading still work with this new standalone-oriented approach, or is it necessary to adhere to the traditional @NgModule and feature module way to apply the lazy loading concept in Angular v17? I'd appreciate any insights, experiences, or documentation references related to this potential change in behavior.

Solution

If you want to use lazy loading for a standalone component, you can use loadComponent instead of component!

Lazy loading a standalone component - Angular Docs

export const routes: Routes = [
    {'path': '', component: DashboardComponent},
    {
      // here users route component will get lazy loaded, by using a callback with import statement!
      'path': 'users', 
      loadComponent: () =>
      import('./app/users/users.component').then(
        (mod) => mod.UsersComponent
      ),
    },
    {'path': '**', component: DashboardComponent},
];

You can still use ngModules its acceptable, its just that standalone is the new mainstream way to do it.

Here is a stackblitz where both are implemented, from another SO question

SO Question

Forked Stackblitz

Answered By - Naren Murali