Lazy Loaded Components - #2

Extending the features of the component-level lazy loader thanks to 🎉 Ivy 🎉

Continue from Part 1:

1. Inject services into lazy-loaded components:

Since the loader uses the same injector-Instance we can inject the same services as the parent Component.

Side-note: The usual lifecycle callbacks are still working on lazy-loaded components.

2. @Input()

To set the inputs on the loaded component, the loader uses componentInputs: any as @Input()

  private setInputs() {
    if (this.componentInstance && this.componentInputs) {
      const inputs = Object.keys(this.componentInputs);

      for (const inputKey of inputs) {
        this.componentInstance[inputKey] = this.componentInputs[inputKey];
      }
    }
  }

setInputs will be called once after the component is created and on each ngOnChanges that is called for componentInputs.

Now you can also set inputs to the loaded component 🎉

3. @Output()

In order to use the outputs of your loaded component, you can just set your callbacks with:

[componentOutputs]="{
 outputName: onYourCallbackMethod
}"

Since this object is just a dictionary of key: Function, its rather "easy" to subscribe to the loaded component outputs. 🎉

  private unsubForOutputs$ = new Subject();
  private setOutputs () {
    this.unsubOutputs();

    if (this.componentInstance && this.componentOutputs) {
      const outputs = Object.keys(this.componentOutputs);

      for (const outputKey of outputs) {
        if (this.componentInstance[outputKey]) {
          const emitter = this.componentInstance[outputKey] as EventEmitter<any>;
            emitter.pipe(
              takeUntil(this.unsubForOutputs$),
            ).subscribe(this.componentOutputs[outputKey]);
        }
      }
    }
  }

  private unsubOutputs () {
    this.unsubForOutputs$.next();
  }

4. Prevent loading the same components multiple times

The prior example had this:

const imported = await DynamicLoaderComponent.LazyComponents[this.component]();

That way the requested component would be loaded (HTTP-call) every time.

To prevent this we can just add a simple cache - object which holds the resolved-promises (in the same way I refactored the registration (again 😅)):

export class DynamicLoaderRegistry {
  // Registry
  public static LazyComponents: { [key: string]: () => Promise<any> } = {};
  // Loaded-Cache
  public static AlreadyLoaded: { [key: string]: Promise<any> } = {};
}


// cache the promises
    const importComponent = DynamicLoaderRegistry.AlreadyLoaded[this.component]
      || (DynamicLoaderRegistry.AlreadyLoaded[this.component] = DynamicLoaderRegistry.LazyComponents[this.component]());

    const imported = await importComponent;

Now if the same component is requested, its only loaded once 🎉

Finalizing the component-loader 🎉 (.. for now 😅)

See: Current Version

to be continued / tried / tested:

• example repo / project
• show that the component is loading
• lazy-loaded module (and one of its components)

Any thoughts / suggestions / ideas ?