Carlos Cifuentes
AngularJS → Angular reference

ng-include in modern Angular

ng-include has no direct equivalent. A partial becomes a component, a fragment reused inside one template becomes an ng-template, and heavy parts can load lazily with @defer.

Before · 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>
After · 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>
}

What changes

  • A partial becomes a component with explicit inputs, instead of reading whatever is in the parent scope.
  • Inline text/ng-template scripts become ng-template, rendered with NgTemplateOutlet.
  • Templates are no longer fetched at runtime; @defer loads the code of a block when a trigger fires.

Migration tip. Before converting a partial, list every scope variable it reads. That list is the input contract of the new component, and it is usually longer than expected.

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn