Simple Interface Of Dynamic Lazy Loadable In Angular | ngx-loadable-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:


npm i ngx-loadable-component

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

  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';

  imports: [
    // register as loadable component
  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';

  declarations: [
  imports: [
    // components to load as seperate async
  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';

  declarations: [
  imports: [
export class MyFeatureModule { }

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

See Demo And Download

Official Website(dan-harris): Click Here

This superior jQuery/javascript plugin is developed by dan-harris. For extra advanced usage, please go to the official website.

Related Posts


Generating Beautiful Vector Graphs With jQuery | smartGraph

SmartGraph is a free and easy-to-use JavaScript library to create beautiful vector diagrams with many customizations. This plugin allows developers to create dynamic, responsive, draggable vector graphics…


Image Slider With 20 Cool Transitions Component | vue-flux

Vue flux is an image slider developed with Vuejs 2 that comes with 20+ nice transitions out of the box. Included transitions 2D transitions Fade: Fades from…


Simple background Image Parallax Scroll Plugin In jQuery

Background parallax effect is a simple jQuery background image without any library. Uses jQuery’s scroll() function to track the scroll event and applies the exact parallax scroll…


Modular Color Picker Plugin for Bootstrap | BS Colorpicker

Bootstrap Colorpicker is a standard color picker plugin for Bootstrap 4. Colorpicker Plugin for Bootstrap 5/4/3 frameworks that allow you to add a color picker to an…


GDPR Friendly iFrame Manager In Vanilla JS | iframemanager

IframeMananger is a lightweight JavaScript plug-in that helps you to comply with GDPR by completely removing iframes at first and setting a notice related to that service….


Diagonal Thumbnails Carousel Slider | Anime.js

Diagonal Slider is a cool mini carousel made with Anime.js JavaScript library. It takes a bunch of pictures and turns them into a circular user interface where…