fix(migrations): Fixes the root level template offset in control flow migration (#52355)

thePunderWoman · dylhunn · commit 90eb879779c2 · 2023-10-24T14:22:31.000-07:00
When migrating an ng-template later on in a file, the migrationResult was not being reset to zero and causing offsets to be double applied due to ng-template nodes being included in the migration loop. PR Close #52355
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/util.ts b/packages/core/schematics/ng-generate/control-flow-migration/util.ts
@@ -155,8 +155,8 @@ export function migrateTemplate(template: string): {migrated: string|null, error
   let offset = 0;
   let nestLevel = -1;
   let postOffsets: number[] = [];
-  let migrateResult: Result = {tmpl: result, offsets: {pre: 0, post: 0}};
   for (const el of visitor.elements) {
+    let migrateResult: Result = {tmpl: result, offsets: {pre: 0, post: 0}};
     // applies the post offsets after closing
     if (el.nestCount <= nestLevel) {
       const count = nestLevel - el.nestCount;
@@ -189,7 +189,6 @@ export function migrateTemplate(template: string): {migrated: string|null, error
     result = migrateResult.tmpl;
     offset += migrateResult.offsets.pre;
     postOffsets.push(migrateResult.offsets.post);
-    const nm = el.el.name;
     nestLevel = el.nestCount;
   }
 
diff --git a/packages/core/schematics/test/control_flow_migration_spec.ts b/packages/core/schematics/test/control_flow_migration_spec.ts
@@ -1798,7 +1798,66 @@ describe('control flow migration', () => {
     });
   });
 
-  describe('template removal', () => {
+  describe('template', () => {
+    it('should migrate a root level template thats not used in control flow', async () => {
+      writeFile('/comp.ts', `
+        import {Component} from '@angular/core';
+        import {NgIf} from '@angular/common';
+
+        @Component({
+          selector: 'declare-comp',
+          templateUrl: './comp.html'
+        })
+        class DeclareComp {
+        }
+      `);
+
+      writeFile('/comp.html', [
+        `<div class="content">`,
+        `  <ng-container *ngTemplateOutlet="navigation" />`,
+        `  <ng-container *ngIf="content()">`,
+        `    <div class="class-1"></div>`,
+        `  </ng-container>`,
+        `</div>`,
+        `<ng-template #navigation>`,
+        `  <div class="cont">`,
+        `      <button`,
+        `        *ngIf="shouldShowMe()"`,
+        `        class="holy-classname-batman"`,
+        `      >`,
+        `        Wow...a button!`,
+        `      </button>`,
+        `  </div>`,
+        `</ng-template>`,
+      ].join('\n'));
+
+      await runMigration();
+
+      const content = tree.readContent('/comp.html');
+      const result = [
+        `<div class="content">`,
+        `  <ng-container *ngTemplateOutlet="navigation" />`,
+        `  @if (content()) {\n`,
+        `    <div class="class-1"></div>\n  `,
+        `}`,
+        `</div>`,
+        `<ng-template #navigation>`,
+        `  <div class="cont">`,
+        `      @if (shouldShowMe()) {`,
+        `<button\n       `,
+        `        class="holy-classname-batman"`,
+        `      >`,
+        `        Wow...a button!`,
+        `      </button>`,
+        `}`,
+        `  </div>`,
+        `</ng-template>`,
+
+      ].join('\n');
+
+      expect(content).toBe(result);
+    });
+
     it('should not remove a template thats not used in control flow', async () => {
       writeFile('/comp.ts', `
         import {Component} from '@angular/core';
