Angular 12 - 无法读取未定义的属性（读取“值”）

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.

Answer 1

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.