2

This question relates directly to a public Angular API: https://angular.io/api/core/ViewContainerRef#insert

I am dynamically loading components from their ngFactories via this code.

I have upgraded from Angular 8.2 to 9.1 and seeing some errors in the way my components are loaded into a view. This code was working perfectly fine until the upgrade to angular 9.1:

// Create a view for the component to be inserted into
@ViewChild('myView', { read: ViewContainerRef, static: true }) myView: ViewContainerRef;

// Grab dynamic module
let moduleFactory: NgModuleFactory<any> = myNgFactory;
// Create reference using the current code's injector
let moduleReference = moduleFactory.create(this.injector);
// Grab the component factory from the module
let componentFactory = moduleReference.componentFactoryResolver.resolveComponentFactory(myComponentFactory);
// Create the component
let component = componentFactory.create(moduleReference.injector);
// Then insert into myView
this.myView.insert(component.hostView);

The error happens on the last line, when trying to run the ViewContainerRef.insert

Error:

ERROR TypeError: Cannot read property '1' of undefined
  at ViewContainerRef.insert(core.js:15711)
  ...

The error happens here in the console (compiled core):

insert(viewRef, index) {
  /** @type {?} */
  const lView = (/** @type {?} */(((/** @type {?} */(viewRef)))._lView));
  const tView = lView[TVIEW];
  ^^^^^^^^
  ... 
}

I found higher in the core.js file that the const TVIEW = 1

The direct Angular code reference (code has not changed from Angular 8 to 9 as far as I can tell): https://github.com/angular/angular/blob/9.1.x/packages/core/src/view/refs.ts#L207

My Component object that I am trying to insert (I do see a small difference in the component, is this the cause?):

Angular 8

Angular 9

I found a similar question but I am receiving a different error: Angular 9 isssue with dynamic component load

I was hoping posting would allow folks to share some ideas or point me in the right direction where things are going wrong or if this is even possible in the Angular 9 Ivy compiler? Any help on this is much apperciated!

Davy Jones
  • 37
  • 5
  • Angular 9 uses AOT and Ivy by default. Have you by any chance tried to disable Ivy and use JIT compilation just to rule them out ? – ihor.eth Aug 27 '20 at 00:39
  • 1
    @ihorbond your comment help me realize my problem. I had disabled Ivy in the module creation but not in the environment which I wanted to dynamically pull it in. In the tsconfig: `angularCompilerOptions: { enableIvy: false }` – Davy Jones Aug 27 '20 at 11:51

1 Answers1

0

I did some digging and figured out my issue. The lView does not exist on my reference because I compiled that component / module with Ivy turned off in my tsconfig but not in that environment I was loading it in:

"angularCompilerOptions": { 
  "enableIvy": false 
}

Now with turning Ivy off in the environment where I was dynamically loading as these components as well, it works as expected.

Davy Jones
  • 37
  • 5