@gewd/lazy

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

[![NPM Version][npm-img]][npm-url]
[![Package Size][size-img]][size-url]

[npm-img]: https://img.shields.io/npm/v/@gewd/lazy.svg?
[npm-url]: https://www.npmjs.com/package/@gewd/lazy
[size-img]: https://img.shields.io/bundlephobia/minzip/@gewd/lazy.svg
[size-url]: https://bundlephobia.com/result?p=@gewd/lazy

@gewd/lazy/utils

Like the C# Lazy-Class
``ts
// 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

`ts
DynamicLoaderRegistry.RegisterLazyComponent('test-comp',
new Lazy(() => import('./lazy-wrapper/test-comp'))
);
`

Use it inside your app with:

`html
[componentInputs]="{ testProp: 'Component Binding from outside' }"
component="test-comp"
>
Normal content that is visible the content isn't loaded.



`

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 :+1:

Lazy Module Components

Register the GewdLazyModule to use the Components

`ts
GewdLazyLoaderModule

// or with .withLazy

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

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

Your module need to implement LazyModule

`ts
@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:

`html
[componentInputs]="{ testProp: 'Module Component Example' }"
[componentOutputs]="outputBinding"
moduleAlias="test-module"
component="MyModuleComp"
>
Normal content that is visible the content isn't loaded.



`

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

- https://dev.to/negue/lazy-loaded-components-in-angular-4lnd
- https://dev.to/negue/lazy-loaded-components-2-c7e
- https://dev.to/negue/lazy-loaded-components-3-extending-the-loader-59j5