ngx-lazy-el (alpha)
Easy lazy loading components
Important note: for now this is an experiment and still needs to be battle-tested. API might break! Meanwhile, follow me @juristr) for questions/ideas/getting notified about updates.
How to use it
Install Angular Elements on your project
This library depends on Angular Elements. You can install that via
$ ng add @angular/elements
Install ngx-lazy-el
Install the library from npm.
$ npm install @juristr/ngx-lazy-el
or
$ yarn add @juristr/ngx-lazy-el
Lazy load a component
Configure the Module containing the lazy loaded component
First of all, expose the Angular Component that should be loaded via a customElementComponent
property.
...
@NgModule({
declarations: [HelloWorldComponent],
...
exports: [HelloWorldComponent]
})
export class HelloWorldModule {
customElementComponent: Type<any> = HelloWorldComponent;
}
Define the lazy component map in your AppModule
Just like with the Angular Router, define the map of component selector and lazy module.
// app.module.ts
...
const lazyConfig = [
{
selector: 'app-hello-world',
loadChildren: () =>
import('./hello-world/hello-world.module').then(m => m.HelloWorldModule)
}
];
@NgModule({
...
imports: [
...
NgxLazyElModule.forRoot(lazyConfig),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Use the lazy loaded Component
To use the lazy loaded component in another module, first of all register the CUSTOM_ELEMENT_SCHEMA
.
import { ..., CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
...
})
export class SomeModule {}
That is needed because otherwise Angular won't recognize the tag as it is no more an Angular Component, but Custom Element.
Next, you can just use the Custom Element by applying the *ngxLazyEl
directive.
<app-hello-world *ngxLazyEl [person]="person"></app-hello-world>
If it is behind a *ngIf
or other non-visible component, the app-hello-world
will be lazy loaded on the fly.
Questions?
Open an issue or ping me on Twitter.