$compile en Angular moderno

Angular compila los templates en el build, así que no hay forma de compilar un string de HTML en tiempo de ejecución. La UI dinámica se arma eligiendo entre componentes que ya existen.

Antes · AngularJS

app.directive('widgetHost', function ($compile) {
  return {
    scope: { type: '<', data: '<' },
    link: function (scope, element) {
      var tag = scope.type + '-widget';
      var html = '<' + tag + ' data="data"></' + tag + '>';
      element.append($compile(html)(scope));
    }
  };
});

Después · Angular

const WIDGETS: Record<string, Type<unknown>> = {
  chart: ChartWidgetComponent,
  table: TableWidgetComponent,
};

@Component({
  selector: 'app-widget-host',
  imports: [NgComponentOutlet],
  template: `<ng-container [ngComponentOutlet]="component()"
               [ngComponentOutletInputs]="{ data: data() }" />`,
})
export class WidgetHostComponent {
  type = input.required<string>();
  data = input<unknown>();
  component = computed(() => WIDGETS[this.type()]);
}

Qué cambia

Un mapa de clave a clase de componente reemplaza el string de HTML armado por concatenación.
NgComponentOutlet renderiza el componente elegido desde el template y le pasa sus inputs.
ViewContainerRef.createComponent hace lo mismo desde código y devuelve un ComponentRef, con setInput para pasar datos.

Consejo de migración. Averigua temprano si hay templates que vienen de una base de datos o de una respuesta del backend. Esos no se pueden portar tal cual y necesitan un rediseño: un conjunto fijo de componentes guiado por datos.

Relacionado

¿Planeas una migración o una plataforma de microfrontends?

En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.

Escríbeme por LinkedIn