Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juristr/ngx-lazy-el
Lazy Loading Angular Components made easy powered by Angular Elements
https://github.com/juristr/ngx-lazy-el
angular lazy-loading performance
Last synced: 12 days ago
JSON representation
Lazy Loading Angular Components made easy powered by Angular Elements
- Host: GitHub
- URL: https://github.com/juristr/ngx-lazy-el
- Owner: juristr
- License: mit
- Created: 2019-04-23T21:07:44.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:55:47.000Z (almost 2 years ago)
- Last Synced: 2024-10-04T12:49:18.409Z (about 1 month ago)
- Topics: angular, lazy-loading, performance
- Language: TypeScript
- Homepage: https://juri.dev
- Size: 5.15 MB
- Stars: 27
- Watchers: 5
- Forks: 9
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-lazy-el
[](https://badge.fury.io/js/%40juristr%2Fngx-lazy-el)
Easy lazy loading components 💪 by Angular Elements.
## How to use it
Also check out my talks about using this library
- [ngRome 2019 - Lazy Loading on Steroids (with Angular Elements)](https://youtu.be/weVK53N-x-8)
- [JSBE.io - Lazy Loading on Steroids with NG Elements](https://youtu.be/-YdM-1xZBoI)
### 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
#### 1) 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 = HelloWorldComponent;
}
```
#### 2) 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 {}
```
#### 3) 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],
imports: [NgxLazyElModule]
...
})
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. Also note that I import the `NgxLazyElModule` if you haven't already. Otherwise the `*ngxLazyEl` directive won't work.
Now you can just use the Custom Element by applying the `*ngxLazyEl` directive.
```
```
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](https://github.com/juristr/ngx-lazy-el/issues) or ping me [on Twitter](https://twitter.com/juristr).