dubangarcia / ngx-loadable

⏳ Simple Lazy Loading for Non Routable Angular Modules

ngx-loadable

The library logo represents faster application like speed of wind

Table of Contents

• Problem
• Solution
• Install
• Usage
• Contribute
• License

Problem

Angular provides an easy way for adding route based lazy loading modules. But in most of the projects, each route tends to have a lot of different components. It could be because of lots of modals, tabs, and components that appear based on user interaction in a single route.

Solution

The ngx-loadable wraps the complex implementation for lazy loading non routable modules in a simple API. It provides a component ngx-loadable and a service LoadableService to lazy load modules. A component can be used to control the loading of one module and to display different states, i.e. loading, error, timedOut and loaded.

Install

Install and manage the ngx-loadable using NPM. You may use yarn or npm.

npm install ngx-loadable --save

or

yarn add ngx-loadable

Usage

NgModule

Import the LoadableModule in the NgModule and declare them in the "imports", you can also use the forRoot() for forChild() function.

• Step 1:

import { LoadableModule } from 'ngx-loadable';

@NgModule({
  imports: [
    LoadableModule
  ]
})

• Step 2: Create a Module with a Component bootstrapped to the Module

• Step 3: Include the module path in the lazyModules array in angular.json file, for it to be created as a lazy module by Angular CLI

• Step 4: Use the ngx-loadable component

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

or use the 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));
        }
    }
}

Contribute

Please contribute by creating issues/PRs

License

© 2019 ngx-loadable. All Rights Reserved.