Is it possible to lazy load component from developer module?

Question

I would like to be able to create developer purpose components that would provide some usefull debugging information (for example eg internal state of the component) which could be included into the application views just like any other component but only if this is not a production environment. It would be something like

<my-component #subject></my-component>

<ng-container *ngIf='!isProduction'>
    <dev-debug-inspector [subject]="subject"></dev-debug-inspector>
</ng-container>

I would like to be able to include such components into view just like any other components
It MUST be a lazy load compoent as I dont want those to bundled into feature modules - so production would stay clean (having not loaded modules in the production files would be fine I guess)

Is it possible ?

maxime1992 · Accepted Answer · 2021-08-11 11:13:30Z

2

It's definitely possible to lazy load a component based on some conditions without using the router.

Example:

public lazyDevComponent = null;

constructor() {
  if (!isProduction) {
    this.lazyDevComponent = import(`../routing-step-details-per-types/types/cam/cam.component`).then(
      ({ CamComponent }) => CamComponent,
    );
  }
}

and on TS side:

<ng-template
  *ngIf="lazyDevComponent"
  [ngComponentOutlet]="lazyDevComponent"
></ng-template>

answered Aug 11, 2021 at 11:13

maxime1992

24k11 gold badges90 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Antoniossss Over a year ago

I didn't expect it to be that easy. What about data binding to CamComponent?

maxime1992 Over a year ago

can't but you can use a service from that component to get whatever you need

Collectives™ on Stack Overflow

Is it possible to lazy load component from developer module?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related