Provides a simple interface for dynamic, lazy loadable components
MIT License
Dynamically lazy load & code-split your Angular components.
(Supports Angular 6+)
Core functionality derived heavily from dynamically loading components with angular-cli
🚧 no mucking around with seperate build processes
💤 lazy load components
🆓 free code splitting via Angular
⚡ demo
🤓 ingenious core pattern thought up by actual smart people
👌 created for the use case of seperating large single components (such as wysiwg editors, charts .etc) from the rest of your app code.
Install via npm;
npm i ngx-loadable-component
* unfortunately, only an aot build angular setup will work correctly within the loadable component setup 🤷 ️ .. an example of how this is setup can be seen within the base directory of this repo(app demo)
Create a component you wish to dynamically load... e.g. loadable component
upside-down-face-emoji.component.ts
@Component({
selector: 'app-upside-down-face-emoji'
...
})
export class UpsideDownFaceEmojiComponent { }
* its important that this component does not use OnPush
changeDetection as this will interfere with the loadable component setup
Then create a module for the loadable component:
upside-down-face-emoji.module.ts
import { LoadableComponentModule } from 'ngx-loadable-component';
import { UpsideDownFaceEmojiComponent } from './upside-down-face-emoji.component';
@NgModule({
imports: [
// register as loadable component
LoadableComponentModule.forChild(UpsideDownFaceEmojiComponent)
],
declarations: [UpsideDownFaceEmojiComponent]
})
export class UpsideDownFaceEmojiComponentModule {}
Create a manifest file which lists all your loadable components:
app-loadable.manifests.ts
import { LoadableManifest } from 'ngx-loadable-component';
export enum LoadableComponentIds {
UPSIDE_DOWN_FACE = 'UpsideDownFaceEmojiComponent'
}
export const appLoadableManifests: Array<LoadableManifest> = [
{
// used to retrieve the loadable component later
componentId: LoadableComponentIds.UPSIDE_DOWN_FACE,
// must be a unique value within the app...
// but apart from that only used by angular when loading component
path: `loadable-${LoadableComponentIds.UPSIDE_DOWN_FACE}`,
// relative path to component module
loadChildren: './components/upside-down-face-emoji/upside-down-face-emoji.module#UpsideDownFaceEmojiComponentModule'
}
];
Add the loadable component manifest & loadable component module to root app module:
app.module.ts
import { LoadableComponentModule } from 'ngx-loadable-component';
// loadable components manifest
import { appLoadableManifests } from './app-loadable.manifests';
@NgModule({
declarations: [
...
],
imports: [
...
// components to load as seperate async
LoadableComponentModule.forRoot(appLoadableManifests)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Be sure to import the loadable component module into any feature modules you use it in:
my-feature.module.ts
import { LoadableComponentModule } from 'ngx-loadable-component';
@NgModule({
declarations: [
...
],
imports: [
...
LoadableComponentModule.forFeature()
]
})
export class MyFeatureModule { }
Add a loadable component where needed:
app.component.html
<div class="app--emojis">
<loadable-component [componentId]="UPSIDE_DOWN_FACE_COMPONENT_ID" [loadComponent]="loadUpsideDownFaceComponent">
<!-- any element in the loadable component content area will only be shown whilst loadComponent is false -->
<app-placeholder-emoji></app-placeholder-emoji>
</loadable-component>
</div>
app.component.ts
import { LoadableComponentIds } from '../../app-loadable.manifests';
@Component({ ... })
export class AppComponent {
// loadable component ids
UPSIDE_DOWN_FACE_COMPONENT_ID: string = LoadableComponentIds.UPSIDE_DOWN_FACE;
// flags to load components
// setting this to 'true' will cause the loadable component
// to load the specified component id
loadUpsideDownFaceComponent: boolean = false;
}
If our loadable component has inputs/outputs - like so:
upside-down-face-emoji.component.html
<a (click)="onClick()">
<div>🙃</div>
<div>{{ text }}</div>
</a>
upside-down-face-emoji.component.ts
export class UpsideDownFaceEmojiComponent {
@Input() text: string = 'upside down';
@Output() clicked: EventEmitter<string> = new EventEmitter<string>();
constructor() {}
onClick(): void {
this.clicked.emit(this.text);
}
}
We then create a model representing the inputs/outputs (for some typing goodness 💯):
upside-down-face-emoji.inputs.model.ts
import { LoadableComponentInputs } from 'ngx-loadable-component';
export interface UpsideDownFaceEmojiComponentInputs extends LoadableComponentInputs {
text: string;
}
upside-down-face-emoji.outputs.model.ts
import { LoadableComponentOutputs } from 'ngx-loadable-component';
export interface UpsideDownFaceEmojiComponentOutputs extends LoadableComponentOutputs {
clicked: Function;
}
And add our inputs/outputs to the loadable component wherever its used:
app.component.html
<div class="app--emojis">
<loadable-component
[componentId]="UPSIDE_DOWN_FACE_COMPONENT_ID"
[loadComponent]="loadUpsideDownFaceComponent"
[componentInputs]="upsideDownFaceInputs"
[componentOutputs]="upsideDownFaceOutputs">
<!-- any element in the loadable component content area will only be shown whilst loadComponent is false -->
<app-placeholder-emoji></app-placeholder-emoji>
</loadable-component>
</div>
app.component.ts
import { LoadableComponentIds } from '../../app-loadable.manifests';
import { UpsideDownFaceEmojiComponentInputs } from '../../components/upside-down-face-emoji/models/upside-down-face-emoji.inputs.model';
import { UpsideDownFaceEmojiComponentOutputs } from '../../components/upside-down-face-emoji/models/upside-down-face-emoji.outputs.model';
@Component({ ... })
export class AppComponent {
// loadable component ids
UPSIDE_DOWN_FACE_COMPONENT_ID: string = LoadableComponentIds.UPSIDE_DOWN_FACE;
// flags to load components
// setting this to 'true' will cause the loadable component
// to load the specified component id
loadUpsideDownFaceComponent: boolean = false;
// inputs for loadable component
get upsideDownFaceInputs(): UpsideDownFaceEmojiComponentInputs {
return {
text: 'not upside down'
}
}
// outputs for loadable component
get upsideDownFaceOutputs(): UpsideDownFaceEmojiComponentOutputs {
return {
clicked: (text: string) => this.onClickedUpsideDownFace(text)
}
}
onClickedUpsideDownFace(text: string): void {
console.log('🖱', text);
}
}
And voila! we now have input/output binding 👌.
* note that the inputs in the parent component (of the loadable component - e.g. upsideDownFaceInputs()
) have to be within a getter or function for change detection to apply correctly
Custom css classes can be passed via the loadable component componentCssClasses
input.
These will be added to the host element of the provided loadable component. e.g.
app.component.html
<div class="app--emojis">
<loadable-component ... [componentCssClasses]="customCssClasses" >
...
</loadable-component>
</div>
app.component.ts
@Component({ ... })
export class AppComponent {
...
// custom css classes
customCssClasses: Array<string> = ['my-custom--class--1', 'my-custom--class--2']
...
}
🤔 created by Dan Harris
👨💻 website: danharris.io
🐤 twitter: @danharris_io
☕ made with love and late nights
🤷 this package works well for my use case... no guarantees made to its general use
👀 MIT License
💖 if you've read this far... thanks for the star
😎 title font courtesy of the awesome lazer84 font
😡 please send all abusive letters via handwritten note to this address
📫 all constructive feedback welcome.