Simple Interface Of Dynamic Lazy Loadable In Angular Component

ngx-loadable-component is dynamically lazy loading and splitting your Angular components with code.

lazy loading javascript on scroll, lazy load content on scroll, lazy load images example, angular lazy loading, lazy loading in angular example

⏳ Simple Lazy Loading Of Non-Routable Angular Modules | ngx-loadable

How to make use of it:

Installation:

npm i ngx-loadable-component

1. Create a component that you want to load dynamically.

@Component({
  selector: 'app-upside-down-face-emoji'
  ...
})
export class UpsideDownFaceEmojiComponent { }

2. Then create a module for the loadable component:

import { LoadableComponentModule } from 'ngx-loadable-component';

import { UpsideDownFaceEmojiComponent } from './upside-down-face-emoji.component';

@NgModule({
  imports: [
    // register as loadable component
    LoadableComponentModule.forChild(UpsideDownFaceEmojiComponent)
  ],
  declarations: [UpsideDownFaceEmojiComponent]
})
export class UpsideDownFaceEmojiComponentModule {}

3. Create a manifest that lists all the loadable components:

import { LoadableManifest } from 'ngx-loadable-component';

export enum LoadableComponentIds {
  UPSIDE_DOWN_FACE = 'UpsideDownFaceEmojiComponent'
}

export const appLoadableManifests: Array<LoadableManifest> = [
  {
    // used to retrieve the loadable component later
    componentId: LoadableComponentIds.UPSIDE_DOWN_FACE,
    // must be a unique value within the app...
    // but apart from that only used by angular when loading component
    path: `loadable-${LoadableComponentIds.UPSIDE_DOWN_FACE}`,
    // relative path to component module
    loadChildren: './components/upside-down-face-emoji/upside-down-face-emoji.module#UpsideDownFaceEmojiComponentModule'
  }
];

4. Add the Loadable Component Manifest and the Loadable Component Module to the root app module:

import { LoadableComponentModule } from 'ngx-loadable-component';

// loadable components manifest
import { appLoadableManifests } from './app-loadable.manifests';

@NgModule({
  declarations: [
      ...
  ],
  imports: [
    ...
    // components to load as seperate async
    LoadableComponentModule.forRoot(appLoadableManifests)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Make sure you import the loadable Components module into any of the feature modules you use in:

import { LoadableComponentModule } from 'ngx-loadable-component';

@NgModule({
  declarations: [
      ...
  ],
  imports: [
    ...
    LoadableComponentModule.forFeature()
  ]
})
export class MyFeatureModule { }

Dynamic Lazy Loadable Components, ngx-loadable-component Plugin/Github