I am in the process of upgading Angular Version from 8 to 12. I have succesfully upgraded from 8 to 11. But After upgrading the angular Version to 12, i got a error "loadComponent TypeError: Cannot read properties of undefined (reading 'values')" We have used the componentFactoryResolver to load the component dynamically. May i need to change any of configuration in my file.
I have attched my code here as well:
import { Component, ComponentFactoryResolver, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { TemplateWithMainHeaderDirective } from './template-with-mainheader.directive';
@Component({
selector: 'app-template-with-mainheader',
templateUrl: './template-with-mainheader.component.html',
styleUrls: ['./template-with-mainheader.component.scss']
})
/** template-content-area component*/
export class TemplateWithMainHeaderComponent {
@ViewChild(TemplateWithMainHeaderDirective, { static: true }) templatedirectiveHost: TemplateWithMainHeaderDirective;
currentExerciseRef: any;
currentComponentRef: any;
backurl: string = "/";
/** template-content-area ctor */
constructor(private componentFactoryResolver: ComponentFactoryResolver, private activatedRoute: ActivatedRoute) {
}
ngOnInit(): void {
var initcomponent = this.activatedRoute.snapshot.data['initselector'];
this.loadComponent(initcomponent);
}
loadComponent(exerciseRef) {
try {
if (this.currentExerciseRef) {
this.currentExerciseRef.destroy();
}
const factories = Array.from(this.componentFactoryResolver['_factories'].values());
const factory: any = factories.find((x: any) => x.selector === exerciseRef);
if (factory) {
const viewContainerRef = this.templatedirectiveHost.viewContainerRef;
const componentRef = viewContainerRef.createComponent(factory);
this.currentExerciseRef = componentRef;
}
} catch (e) {
console.log("loadComponent", e);
}
}
==========================
Error is:
loadComponent TypeError: Cannot read properties of undefined (reading 'values')
at TemplateWithMainHeaderComponent.loadComponent (template-with-mainheader.component.ts:33:80)
at TemplateWithMainHeaderComponent.ngOnInit (template-with-mainheader.component.ts:25:10)
at callHook (core.js:2538:1)
at callHooks (core.js:2507:1)
at executeInitAndCheckHooks (core.js:2458:1)
at refreshView (core.js:9499:1)
at refreshEmbeddedViews (core.js:10609:1)
at refreshView (core.js:9508:1)
at refreshComponent (core.js:10655:1)
at refreshChildComponents (core.js:9280:1)
Can anyone helpme to fix this issue.
if i see your code , i notice that you want to access to a child component and use the componentFactoryResolver to create a dynamic component , but you are not using the right lifecycle hook , when you use the OnInit lifecycle hook , the child component is not yet loaded , so you need to use the ngAfterViewInit lifecycle hook , that allows you to use a fully loaded components and prevent this kind of errors. check this similar stackoverflow issue too.
and i advice you to debug step by step , that means , you console log the parent object , then the property etc... to know exactly where is the problem.