Estoy trabajando en un proyecto de Angular 13 y necesito renderizar componentes dinámicos. La plantilla del componente y la lógica comercial provienen del lado del servidor como una cadena. Leí que no puede crear plantillas dinámicamente en Angular 13, ya que Angular debe compilar cualquier componente en el momento de la compilación, y las aplicaciones de Angular no se envían con el compilador JIT.

Esto es solo para una parte de la aplicación en la que permito que los clientes creen sus tableros personalizados.

Era posible hacer eso en Angular 12, pero en Angular 13 el servicio del compilador ya no está expuesto.

Código trabajando en Angular 12:

Modelo:

 <div> <ng-container *ngComponentOutlet="component"></ng-container> </div>

Componente:

 import { Compiler, Component, NgModule, OnInit } from '@angular/core' @Component({ selector: 'my-lab', templateUrl: './lab.component.html', styleUrls: ['./lab.component.scss'], }) export class LabComponent implements OnInit { component: any constructor(private compiler: Compiler) {} async ngOnInit() { const componentClass = class { public testing = { name: 'yago', } } const imports = (this.component = await this.compile({ template: `<div>Testing here {{ testing | json}}</div>`, componentClass, imports: [CommonsModule], })) } async compile(input: any) { const { template, componentClass, imports } = input const templateCompoment = Component({ template })(componentClass) const module = NgModule({ declarations: [templateCompoment], exports: [templateCompoment], imports: [...imports], })(class {}) const compiledModule = await this.compiler.compileModuleAndAllComponentsAsync(module) return templateCompoment } }

Me pregunto si necesita usar un conjunto diferente de API en Angular 13 o superior para poder hacer esto. ¿Alguien ha hecho esto?