fix(migrations): ensure we do not overwrite prior template replacements in migration (#53393)

thePunderWoman · alxhub · commit 1f5c8bf11678 · 2023-12-07T09:36:01.000-08:00
This fixes a bug where only the last replacement of a template placeholder would apply. fixes: #53383 PR Close #53393
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/util.ts b/packages/core/schematics/ng-generate/control-flow-migration/util.ts
@@ -369,14 +369,13 @@ export function processNgTemplates(template: string): {migrated: string, err: Er
 function replaceRemainingPlaceholders(template: string): string {
   const replaceRegex = new RegExp(`θ.*δ`, 'g');
   const placeholders = [...template.matchAll(replaceRegex)];
-  let migrated = template;
   for (let ph of placeholders) {
     const placeholder = ph[0];
     const name = placeholder.slice(1, placeholder.length - 1);
-    migrated =
+    template =
         template.replace(placeholder, `<ng-template [ngTemplateOutlet]="${name}"></ng-template>`);
   }
-  return migrated;
+  return template;
 }
 
 /**
diff --git a/packages/core/schematics/test/control_flow_migration_spec.ts b/packages/core/schematics/test/control_flow_migration_spec.ts
@@ -4149,6 +4149,58 @@ describe('control flow migration', () => {
         `<ng-template #empty>Empty</ng-template>`,
       ].join('\n'));
     });
+
+    it('should replace all instances of template placeholders', 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 *ngIf="condition; else otherTemplate">`,
+        `  <ng-container *ngIf="!defaultTemplate; else defaultTemplate">`,
+        `    Hello!`,
+        `  </ng-container>`,
+        `</div>`,
+        `<ng-template #otherTemplate>`,
+        `  <div>`,
+        `    <ng-container *ngIf="!defaultTemplate; else defaultTemplate">`,
+        `      Hello again!`,
+        `    </ng-container>`,
+        `  </div>`,
+        `</ng-template>`,
+      ].join('\n'));
+
+      await runMigration();
+      const content = tree.readContent('/comp.html');
+
+      expect(content).toBe([
+        `@if (condition) {`,
+        `  <div>`,
+        `    @if (!defaultTemplate) {`,
+        `      Hello!`,
+        `    } @else {`,
+        `      <ng-template [ngTemplateOutlet]="defaultTemplate"></ng-template>`,
+        `    }`,
+        `  </div>`,
+        `} @else {`,
+        `  <div>`,
+        `    @if (!defaultTemplate) {`,
+        `      Hello again!`,
+        `    } @else {`,
+        `      <ng-template [ngTemplateOutlet]="defaultTemplate"></ng-template>`,
+        `    }`,
+        `  </div>`,
+        `}\n`,
+      ].join('\n'));
+    });
   });
 
   describe('formatting', () => {
