NgLazyLoadComponent
Lazy load Angular component into HTML template without routing.
Description
This library help to lazy load Angular component dynamically and render a at runtime. The NgLazyLoadComponent
takes a function named lazyImporter
as an input, which returns a Promise
containing the component to be loaded. NgLazyLoadComponent
has full life-cycle support for inputs and outputs.
See the stackblitz demo.
Get Started
Step 1: install ng-lazy-load-component
npm i ng-lazy-load-component
Step 2: Import NgLazyLoadComponentModule
into your app module, eg.:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';
import { NgLazyLoadComponentModule } from 'ng-lazy-load-component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
CommonModule,
NgLazyLoadComponentModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 2: This is test-lazy.ts
, an example of component with NgModule
to lazy load (but also works with standalone component without NgModule
), eg.:
import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, NgModule, Output } from '@angular/core';
@Component({
selector: 'test-lazy',
template: `
Input1: {{testInput1}} <button (click)="testOutput1.emit(testInput1)">Output1</button><br />
Input2: {{testInput2}} <button (click)="testOutput2.emit(testInput2)">Output2</button>
`
})
export class TestLazyComponent {
@Input() testInput1 = 0;
@Input() testInput2 = 0;
@Output() testOutput1: EventEmitter<number> = new EventEmitter<number>();
@Output() testOutput2: EventEmitter<number> = new EventEmitter<number>();
}
@NgModule({
declarations: [TestLazyComponent],
imports: [CommonModule],
exports: [TestLazyComponent]
})
export class TestLazyModule {}
If you have the NgModule
and the component into two separate files, you can export the component in the same file of the NgModule
, eg.:
import { NgModule } from '@angular/core';
import { TestLazyComponent } from './test-lazy.component';
export { TestLazyComponent }
@NgModule({
declarations: [TestLazyComponent],
imports: [CommonModule],
exports: [TestLazyComponent]
})
export class TestLazyModule {}
Step 3: usage
import { Component } from '@angular/core';
import { NgLazyLoadComponentImporter, NgLazyLoadComponentOutput, NgLazyLoadComponentInput } from 'ng-lazy-load-component';
import type { TestLazyComponent } from './test-lazy';
@Component({
selector: 'app-root',
template: `
<ng-lazy-load-component
[lazyImporter]="lazyImporter"
[componentInput]="{testInput1, testInput2}"
(componentOutput)="onComponentOutput($event)"
>
<div #loading>Loading...</div> <!-- optional -->
<div #error>Ops!</div> <!-- optional -->
</ng-lazy-load-component>
`,
})
export class AppComponent {
public testInput1: NgLazyLoadComponentInput<TestLazyComponent, 'testInput1'> = 0;
public testInput2: NgLazyLoadComponentInput<TestLazyComponent, 'testInput2'> = 0;
lazyImporter: NgLazyLoadComponentImporter = () => import('./test-lazy').then((m) => ({
component: m.TestLazyComponent,
module: m.TestLazyModule
}));
onComponentOutput(event: NgLazyLoadComponentOutput<TestLazyComponent>) {
switch (event.property) {
case 'testOutput1': this.testInput1 = event.value + 1; break;
case 'testOutput2': this.testInput2 = event.value + 1; break;
}
}
}
The import()
syntax, avoids dynamic imports using variables as paths to the modules. So needs to provide a static path to the module to let webpack to generate metadata for the module at the compile time.
The main issue of the import()
syntax is that it starts importing the module when the compiler reads the line it is written in. So in this case, we use function syntax to avoid it's importing until the function will be called.
Support
This is an open-source project. Star this repository, if you like it, or even donate. Thank you so much!
My other libraries
I have published some other Angular libraries, take a look: