DEV Community

negue
negue

Posted on

3 2

Lazy Loaded Components - #4 NPM-Package

Proudly presenting npm install @gewd/lazy -S πŸ˜‰

NPM Version

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
Enter fullscreen mode Exit fullscreen mode

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'))
};
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)
    )
  },
};
Enter fullscreen mode Exit fullscreen mode

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
      }
    ];
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

GitHub logo negue / gewd

List of utilities / components around Angular

Any ideas / issues / suggestions, write here or open an issue :)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay