Angular 12 - Cannot read properties of undefined (reading 'values')

Question

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.

please reformat you question so its more readable. The code i would suggest adding as a code snippet. and the console errors i would show instead of having it as a link. Preferable also put the errors in a code snippet as well. Since you don't know how long those images would stay active in the future incase others run into the same issue. — Henrik Bøgelund Lavstsen, Aug 15 '22 at 09:50
@HenrikBøgelundLavstsen, Can you please check my aboved edited issue — Oviya, Aug 15 '22 at 11:50
@oviya please check link below [link](https://stackoverflow.com/questions/70946038/replace-deprecated-angular-componentfactoryresolver-componentfactory) — ProSheta, Aug 15 '22 at 11:57

score -1 · Answer 1 · answered Aug 15 '22 at 13:24

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.

Angular 12 - Cannot read properties of undefined (reading 'values')

1 Answers1