ng-include en Angular moderno

ng-include no tiene equivalente directo. Un parcial pasa a ser un componente, un fragmento reutilizado dentro de un template pasa a ser un ng-template, y las partes pesadas se pueden cargar de forma diferida con @defer.

Antes · AngularJS

<div ng-include="'partials/header.html'"></div>
<div ng-include="'partials/chart.html'"></div>

<script type="text/ng-template" id="row.html">
  <span>{{ item.name }}</span>
</script>
<li ng-repeat="item in vm.items" ng-include="'row.html'"></li>

Después · Angular

<app-header />

<ng-template #row let-item>
  <span>{{ item.name }}</span>
</ng-template>
@for (item of items(); track item.id) {
  <li><ng-container [ngTemplateOutlet]="row"
        [ngTemplateOutletContext]="{ $implicit: item }" /></li>
}

@defer (on viewport) {
  <app-chart [data]="chartData()" />
} @placeholder {
  <div class="chart-placeholder"></div>
}

Qué cambia

Un parcial pasa a ser un componente con inputs explícitos, en vez de leer lo que haya en el scope padre.
Los scripts text/ng-template pasan a ser ng-template, renderizados con NgTemplateOutlet.
Los templates ya no se descargan en tiempo de ejecución; @defer carga el código de un bloque cuando se activa un disparador.

Consejo de migración. Antes de convertir un parcial, lista todas las variables de scope que lee. Esa lista es el contrato de inputs del nuevo componente, y suele ser más larga de lo esperado.

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