Posted on Dec 25, 2019

Lazy Loaded Components - #4 NPM-Package

Proudly presenting `npm install @gewd/lazy -S` 😉

Finally, the demo-repository and loader package is done. Here are some of the changes:

`Lazy`-Helper

Like the C# Lazy-Class, I created a simple helper, which holds the lazy-Value once its already have been requested.

import { Lazy } from '@gewd/lazy/utils'; // create var myLazy = Lazy.create(() => import(/*...*/)) // callback/promise will be only executed once `.getValue()` is called const result = await myLazy.getValue(); // once the value was loaded, it'll just use this cached promise

In the previously articles you saw that I cached the requests, in a separate dictionary, with this I don't need to handle that.

Lazy Components

As you can see the registration of LazyComponents changed a bit, now using the Lazy-Helper.

// Register the lazy component, without a module DynamicLoaderRegistry.LazyComponents = { 'test-comp': new Lazy<any>(() => import('./lazy-wrapper/test-comp')) };

Use it inside your app with:

<gewd-lazy-component [componentInputs]="{ testProp: 'Component Binding from outside' }" component="test-comp" > Normal content that is visible the content isn't loaded. <div isLoading> This content will be visible while the component is loading / being created. </div> </gewd-lazy-component>

This is useful for components that don't need any other module's or using 3rd party web-components.

Note, using components of the host-module not working yet.

But for this issue I created the lazy-components (using modules), this type of lazy-loading has been around for quite a while, there are existing libraries for this, but here is my approach :)

Lazy Module Components

DynamicLoaderRegistry.LazyModuleComponents = { 'test-module': { load: new Lazy<any>( () => import('./lazy-wrapper/test-module-comp') .then(({TestModule}) => TestModule) ) }, };

Your lazy module need to implement LazyModule

@NgModule({ declarations: [ MyModuleComp // Your Component ], imports: [ CommonModule, MatButtonModule // any dependent module ] }) export class TestModule implements LazyModule { getComponents (): LazyModuleComponentInfo[] { return [ { name: 'MyModuleComp', // key to access it componentType: MyModuleComp // your component } ]; } }

Use it inside your app with:

<gewd-lazy-module-component [componentInputs]="{ testProp: 'Module Component Example' }" [componentOutputs]="outputBinding" moduleAlias="test-module" component="MyModuleComp" > Normal content that is visible the content isn't loaded. <div isLoading> This content will be visible while the component is loading / being created. </div> </gewd-lazy-module-component>