⏳ Simple Lazy Loading Of Non-Routable Angular Modules

ngx-loadable wraps the complex implementation of lazy loading of non-routable modules into a simple API. It provides an ngx loadable component and a LoadableService for lazy loading modules. A component can be used to control the loading of a single unit and to display different states, such as loading, error, exit timing, and loading.

angular lazy load component with routing, lazy loaded module not loading component, how to check if module is loaded in angular, lazy loading in angular

A Vue.js Plugin for Lazyloading Your Image or Component

How to make use of it:

Installations:

npm install ngx-loadable --save

or

yarn add ngx-loadable

1. Import LoadableModule in NgModule and declare it in Imports, you can also use forRoot() of forChild() function.

import { LoadableModule } from 'ngx-loadable';

@NgModule({
  imports: [
    LoadableModule
  ]
})

2. Use the downloadable component ngx.

<button (click)="show = true" (mouseenter)="loginModalModule.preload()">
    Preload on mouseenter and show on click
</button>

<ngx-loadable
    #loginModalModule
    [module]="'login-modal'"
    [show]="show"
    [timeout]="1000"
>
    <div loading>Loading...</div>
    <div error>Error</div>
    <div timedOut>
        TimedOut!
        <button (click)="loginModalModule.reload()">
            Reload
        </button>
    </div>
</ngx-loadable>

3. Or use LoadableService.

import { LoadableService } from 'ngx-loadable';
...
class YourComponent {
    contructor(private loadableService: LoadableService) { }
    load() {
        this.loadableService.preload('lazy')
            .then(() => console.log('loaded'))
            .catch((error) => console.error(error));
        }
    }
}

Lazy Loaz Non Routable Modules, ngx-loadable Plugin/Github