Skip to content

Latest commit

 

History

History
156 lines (122 loc) · 4.18 KB

README.md

File metadata and controls

156 lines (122 loc) · 4.18 KB
Raw

@gewd/lazy

Collection of functions around Angular Lazy-Loading Components and some other utils

NPM Version Package Size

@gewd/lazy/utils

Like the C# Lazy-Class

// 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

Lazy Components

Register the lazy component, without a module

DynamicLoaderRegistry.RegisterLazyComponent('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>

Properties:

Prop Type Description
component string Key used in DynamicLoaderRegistry.LazyComponents
componentInputs InputMap Key-Value map of the lazy loaded component properties
componentOutputs OutputMap Map of outputs
componentCreated EventEmitter Event when the component is created
componentLoading EventEmitter Event when the component is loading

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. Got a fix ? Open a PR 👍

Lazy Module Components

Register the GewdLazyModule to use the Components

// outside of the Angular Module
const lazyModule = new Lazy(
            () => import(/* webpackChunkName: "markdown-example-module" */ './examples/markdown-example/markdown-example.module')
              .then(({MarkdownExampleModule}) => MarkdownExampleModule)
);


GewdLazyLoaderModule.withLazy([
      {
        moduleName: 'markdown-example',
        moduleConfig: {
          load: lazyModule
        }
      },
    ])

This is for component that needs other components in it, e.g. Angular Material.

// alternative to the .withLazy way
DynamicLoaderRegistry.RegisterLazyModuleComponent('test-module', {
  load: new Lazy<any>(
    () => import('./lazy-wrapper/test-module-comp')
    .then(({TestModule}) => TestModule)
  )
});

Your 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>

Properties:

Prop Type Description
moduleAlias string Key used in DynamicLoaderRegistry.LazyModuleComponents
component string Key used in getComponents
componentInputs InputMap Key-Value map of the lazy loaded component properties
componentOutputs OutputMap Map of outputs
componentCreated EventEmitter Event when the component is created
componentLoading EventEmitter Event when the component is loading

Articles / Tutorials