fix(migrations): Prevent removal of templates referenced with preceding whitespace characters

lukasmatta · atscott · commit e1f933fed098 · 2025-11-04T15:26:08.000-08:00
In #64745, a fix was introduced for templates referenced with a trailing semicolon. However, templates are still incorrectly removed when there are whitespace characters before the template name. This commit updates the control flow migration logic to ensure templates referenced with preceding whitespace are not removed. Fixes #64854 (cherry picked from commit 5b210e9)
diff --git a/packages/core/schematics/migrations/control-flow-migration/util.ts b/packages/core/schematics/migrations/control-flow-migration/util.ts
@@ -520,7 +520,7 @@ function analyzeTemplateUsage(nodes: any[], templateName: string): TemplateUsage
         for (const attr of node.attrs) {
           if (
             (attr.name === '*ngTemplateOutlet' || attr.name === '[ngTemplateOutlet]') &&
-            attr.value?.split(';')[0] === templateName
+            attr.value?.split(';')[0]?.trim() === templateName
           ) {
             isReferencedInTemplateOutlet = true;
           }
diff --git a/packages/core/schematics/test/control_flow_migration_spec.ts b/packages/core/schematics/test/control_flow_migration_spec.ts
@@ -1441,6 +1441,55 @@ describe('control flow migration (ng update)', () => {
       );
     });
 
+    it('should migrate but not remove ng-templates when referenced elsewhere with a trailing semicolon including leading whitespace character', async () => {
+      writeFile(
+        '/comp.ts',
+        `
+        import {Component} from '@angular/core';
+        import {NgIf} from '@angular/common';
+
+        @Component({
+          templateUrl: './comp.html'
+        })
+        class Comp {
+          show = false;
+        }
+      `,
+      );
+
+      writeFile(
+        '/comp.html',
+        [
+          `<div>`,
+          `<span *ngIf="show; then thenBlock; else elseBlock">Ignored</span>`,
+          `<ng-template #thenBlock><div>THEN Stuff</div></ng-template>`,
+          `<ng-template #elseBlock let-ctx>{{ ctx }} Else Content</ng-template>`,
+          `</div>`,
+          `<ng-container *ngTemplateOutlet="
+              elseBlock;
+              context: $implicit: 'Hello'"></ng-container>`,
+        ].join('\n'),
+      );
+
+      await runMigration();
+      const content = tree.readContent('/comp.html');
+      expect(content).toBe(
+        [
+          `<div>`,
+          `  @if (show) {`,
+          `    <div>THEN Stuff</div>`,
+          `  } @else {`,
+          `    {{ ctx }} Else Content`,
+          `  }`,
+          `  <ng-template #elseBlock let-ctx>{{ ctx }} Else Content</ng-template>`,
+          `</div>`,
+          `<ng-container *ngTemplateOutlet="
+              elseBlock;
+              context: $implicit: 'Hello'"></ng-container>`,
+        ].join('\n'),
+      );
+    });
+
     it('should not remove ng-templates used by other directives', async () => {
       writeFile(
         '/comp.ts',

Original file line number	Diff line number	Diff line change
`@@ -520,7 +520,7 @@ function analyzeTemplateUsage(nodes: any[], templateName: string): TemplateUsage`
`520`	`520`	`for (const attr of node.attrs) {`
`521`	`521`	`if (`
`522`	`522`	`(attr.name === '*ngTemplateOutlet' \|\| attr.name === '[ngTemplateOutlet]') &&`
`523`		`- attr.value?.split(';')[0] === templateName`
	`523`	`+ attr.value?.split(';')[0]?.trim() === templateName`
`524`	`524`	`) {`
`525`	`525`	`isReferencedInTemplateOutlet = true;`
`526`	`526`	`}`