ngx-loadable
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-loadablecomponent
<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
Contribution guidelines for this project
License
© 2019 ngx-loadable. All Rights Reserved.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
 Zama Khan Mohammed 💻 🎨 💡 📖 🤔 🚇 |
 rumanhassan 🤔 💻 🔧 |
 aijazkhan81 🖋 |
 Aditya Menon 📖 |
 David Würfel 🐛 |
 Michael Reeves 📖 |
 siddharthpal 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent