CODEWITHSUNDEEP
angular
Antoniossss
Antoniossss

Reputation: 32507

Is it possible to lazy load component from developer module?

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>
  1. I would like to be able to include such components into view just like any other components
  2. 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 ?

Upvotes: 1

Views: 51

Answers (1)

maxime1992
maxime1992

Reputation: 23793

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>

Upvotes: 2

Related Questions