Implementing Lazy-Loaded Feature Modules

Provide code to create a feature module with lazy-loading using Angular CLI and configure the router to use it.

ng generate module feature-module --route feature --module app.module

This Angular CLI command generates a new feature module named 'feature-module' and sets up a route called 'feature' in the application's main routing module 'app.module'. The '--route' option automatically configures lazy loading for the feature module.

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature-module/feature-module.module').then(m => m.FeatureModuleModule)
  }
];

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

This code defines a routing configuration for the feature module. The 'loadChildren' property utilizes a dynamic import statement to load the feature module lazily. The 'FeatureModuleRoutingModule' is then decorated with NgModule to import and export the RouterModule with the module-specific routes.

@NgModule({
  declarations: [
    // components that belong to this module
  ],
  imports: [
    CommonModule,
    FeatureModuleRoutingModule // Import the FeatureModuleRoutingModule that includes the lazy-loaded route
  ]
})
export class FeatureModuleModule { }

This code creates an Angular module ('FeatureModuleModule') using the NgModule decorator. The module includes declarations for the components within the module and imports both the 'CommonModule' and the previously defined 'FeatureModuleRoutingModule' to wire up the lazy-loaded routing configuration.