Angular 9 IVY Lazy loaded component bindings not working

Question

Directives such as ngIf, ngClass, ngStyle don't work in lazy loaded component (introduced in Angular 9).

core.js:12626 Can't bind to 'xxx' since it isn't a known property of 'xxx'.

The only binding I managed to get it working is something like: [style.color]="color". Lazy loading the webpack js bundle works fine as long as there is no binding or there is just simple binding as [style.color]="color".

The Lazy loaded component is not declared in NgModule and it is loaded as such

 async lazy1() {
    this.viewContainerRef.clear();
    const { LazyComponent } = await import("./lazy.component");
    this.viewContainerRef.createComponent(
      this.cfr.resolveComponentFactory(LazyComponent)
    );
  }

Full example (can't be run in stackblitz for some reason): https://stackblitz.com/edit/angular-zyp3wm

This can e reproduced in a step by step fashion by following the article below https://johnpapa.net/angular-9-lazy-loading-components/ You just need to add a ngIf somewhere in a one of the lazy component to get the problem I am experiencing.

This is expected behavior according to angular team. One should wrap the component in a module and load the module instead. More info: https://github.com/angular/angular/issues/36604 — Royalsmed, Apr 13 '20 at 12:10

score 0 · Answer 1 · answered Apr 14 '20 at 06:38

Rendering a component which not declared in any NgModule or to be exact that using other elements that not declared or import in the same NgModule is not possible.

I wrote a blog post on the future of standalone components in the world of Angular Ivy a few months ago - you can find it here. It might help you understand the optional NgModule perspective, and what are the costs (Manual CD, different injector etc...)

Angular 9 IVY Lazy loaded component bindings not working

1 Answers1