ngx-lazy-module

NgxLazyModule

This module contains tools for lazy loading modules outside of the routing context.

Getting Started

Install and save as a dev dependency

npm install ngx-lazy-module --save-dev

Add NgxLazyModule to Application

Add NgxLazyModule to the main application module. Use the forRoot function to provide a singleton of the LazyModuleService in your Angular application. Configure the RouterModule.forRoot with the modules you want to programatically load using the '__lazy/' prefix on the route and a canActivate guard to block routing. This allows us to use the Angular compiler to build the module in the context of the application and the prefix allows the LazyModuleService to identify the module for later.

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule, 
    RouterModule.forRoot([{
          path: '__lazy/LazyModule',
          loadChildren: './lazyModule/lazy.module#LazyModule',
        canActivate: [ () => false]
        }
    ]),
    NgxLazyModule.forRoot()],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Add module-outlet to Application

Similar to the router-outlet, the ngxLazyModuleOutlet directive will mark the location where a component from a lazy module will be rendered. The directive requires a name attribute that corresponds with a lazy-loaded module and a component attribute that corresponds with the component to be rendered once the lazy module is loaded.

    <div ngxLazyModuleOutlet name="ModalsModule" component="ModalComponent"></div>

Configure Lazy Modules

In order for the ngxLazyModuleOutlet directive to access components in the lazy module, you will need to setup a provider called $lazyComponents in the lazy module to map components to string accessors. These components should also be added to "entryComponents" list in the module's configuration.

import { ModalComponent } from './modal.component';

export function ModalComponentsFactory() {
    return  {
        ModalComponent, // access with string 'Modal Component'
        AlternativeNameforModalComponent: ModalComponent // access with string 'AlternativeNameforModalComponent'
    };
}

import { NgModule } from '@angular/core';

import { ModalComponent } from './modal.component';
import { ModalComponentsFactory } from './modals-module-components.factory';
@NgModule({
  declarations: [
      ModalComponent
    ],
  entryComponents: [ 
      ModalComponent 
    ],
  providers: [
    { provide: '$lazyComponents', useFactory: ModalComponentsFactory} 
  ]
})
export class ModalsModule {
}

Load the Module When You Need It

Use the function loadModule in the LazyModuleService to programmatically load a module. Once the configure module is loaded the ngxLazyModuleOutlet directive will display the configured component.

  public loadModal() {
    this.lazyModuleService.loadModule('ModalsModule');
  }

Local Development

Clone repo. npm i. Then use npm run start to run the demo project locally at http://localhost:4200