Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ngx-loadable with all npm packages installed. Try it out:

require("@angular/common/package.json"); // @angular/common is a peer dependency. require("@angular/core/package.json"); // @angular/core is a peer dependency. require("@angular/router/package.json"); // @angular/router is a peer dependency. require("rxjs/package.json"); // rxjs is a peer dependency. var ngxLoadable = require("ngx-loadable")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ngx-loadable v2.1.1

ngx-loadable: Simpler Lazy Loading Non Routable Angular Modules

ngx-loadable

npm license size

ngx-loadable logo The library logo represents faster application like speed of wind

Table of Contents

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free