0
515
VistasLazy loading Angular 13+ módulos sin el compilador obsoleto
He trabajado mucho con la carga y creación de instancias de módulos Angular . (sin el enrutador)
Pero ahora con Angular 13 veo obsolescencias para las herramientas de compilación habituales para instanciar un NgModule:
Aquí está mi código de acceso habitual para cargar un módulo
const moduleFactory = await this.compiler.compileModuleAsync(module); const moduleRef = moduleFactory.create(this.injector); const componentFactory = moduleRef.instance.resolveComponent(selector);Mirando más profundo El cambio V13 donde ViewContainerRef ahora tiene la fábrica incluida hace que los componentes dinámicos sean 1 paso más fáciles. Sin embargo, con respecto a ViewContainerRef.createComponent() , la documentación establece:
Angular en desuso ya no requiere fábricas de componentes para crear componentes dinámicamente. Use una firma diferente del método createComponent, que permite pasar la clase Component directamente.
Entonces, ¿cuáles son las nuevas direcciones para estas tareas en Angular 13+?
2 Respuestas
Responde la pregunta0
Puede aprovechar un nuevo método createNgModuleRef y reemplazar estos pasos:
const moduleFactory = await this.compiler.compileModuleAsync(module); const moduleRef = moduleFactory.create(this.injector);con
const moduleRef = createNgModuleRef(module, this.injector);También puede leer sobre todas las obsolescencias y posibles reemplazos en Angular doc https://angular.io/guide/deprecations
0
Aquí tienes Importa ViewContainerRef, Renderer2, Injector
Crear un elemento de contenido
const messageText = this.renderer.createText('message');Crear la referencia del componente
const compRef = this.vcr.createComponent(<ComponentClass>, {Injector: this.injector, projectNodes: [[messageText]]});Si quieres el elemento
const elem = compRef.location.nativeElement;