Estoy en el proceso de actualizar la versión angular de 8 a 12. He actualizado con éxito de 8 a 11. Pero después de actualizar la versión angular a 12, recibí un error "loadComponent TypeError: no se pueden leer las propiedades de undefined (leyendo 'valores' )" Hemos utilizado el componenteFactoryResolver para cargar el componente dinámicamente. ¿Puedo necesitar cambiar alguna configuración en mi archivo?
He adjuntado mi código aquí también:
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); } }==========================
El error es:
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)¿Alguien puede ayudarme a solucionar este problema?
si veo su código, noto que desea acceder a un componente secundario y usar el componenteFactoryResolver para crear un componente dinámico, pero no está utilizando el enlace de ciclo de vida correcto, cuando usa el enlace de ciclo de vida OnInit, el componente secundario no es aún cargado, por lo que debe usar el enlace de ciclo de vida ngAfterViewInit , que le permite usar componentes completamente cargados y evitar este tipo de errores. verifique este problema similar de stackoverflow también.
y le aconsejo que depure paso a paso, lo que significa que registra en la consola el objeto principal, luego la propiedad, etc. para saber exactamente dónde está el problema.