fix(migrations): do not generate aliased variables with the same name (#56154)

crisbeto · thePunderWoman · commit b70b80ba55ff · 2024-05-30T14:54:36.000Z
Adds some logic to avoid generating expressions like `let $index = $index` in the control flow migration. Fixes #56152. PR Close #56154
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/fors.ts b/packages/core/schematics/ng-generate/control-flow-migration/fors.ts
@@ -137,23 +137,31 @@ function migrateStandardNgFor(etm: ElementToMigrate, tmpl: string, offset: numbe
     if (part.match(aliasWithEqualRegexp)) {
       // 'let myIndex = index' -> ['let myIndex', 'index']
       const aliasParts = part.split('=');
-      // -> 'let myIndex = $index'
-      aliases.push(` ${aliasParts[0].trim()} = $${aliasParts[1].trim()}`);
+      const aliasedName = aliasParts[0].replace('let', '').trim();
+      const originalName = aliasParts[1].trim();
+      if (aliasedName !== '$' + originalName) {
+        // -> 'let myIndex = $index'
+        aliases.push(` let ${aliasedName} = $${originalName}`);
+      }
       // if the aliased variable is the index, then we store it
-      if (aliasParts[1].trim() === 'index') {
+      if (originalName === 'index') {
         // 'let myIndex' -> 'myIndex'
-        aliasedIndex = aliasParts[0].replace('let', '').trim();
+        aliasedIndex = aliasedName;
       }
     }
     // declared with `index as myIndex`
     if (part.match(aliasWithAsRegexp)) {
       // 'index    as   myIndex' -> ['index', 'myIndex']
       const aliasParts = part.split(/\s+as\s+/);
-      // -> 'let myIndex = $index'
-      aliases.push(` let ${aliasParts[1].trim()} = $${aliasParts[0].trim()}`);
+      const originalName = aliasParts[0].trim();
+      const aliasedName = aliasParts[1].trim();
+      if (aliasedName !== '$' + originalName) {
+        // -> 'let myIndex = $index'
+        aliases.push(` let ${aliasedName} = $${originalName}`);
+      }
       // if the aliased variable is the index, then we store it
-      if (aliasParts[0].trim() === 'index') {
-        aliasedIndex = aliasParts[1].trim();
+      if (originalName === 'index') {
+        aliasedIndex = aliasedName;
       }
     }
   }
diff --git a/packages/core/schematics/test/control_flow_migration_spec.ts b/packages/core/schematics/test/control_flow_migration_spec.ts
@@ -2189,6 +2189,64 @@ describe('control flow migration', () => {
       );
     });
 
+    it('should not generate aliased variables declared via the `as` syntax with the same name as the original', async () => {
+      writeFile(
+        '/comp.ts',
+        `
+        import {Component} from '@angular/core';
+        import {NgFor} from '@angular/common';
+        interface Item {
+          id: number;
+          text: string;
+        }
+
+        @Component({
+          imports: [NgFor],
+          template: \`<div *ngFor="let item of items; index as $index;">{{$index}}</div>\`
+        })
+        class Comp {
+          items: Item[] = [{id: 1, text: 'blah'}, {id: 2, text: 'stuff'}];
+        }
+      `,
+      );
+
+      await runMigration();
+      const content = tree.readContent('/comp.ts');
+
+      expect(content).toContain(
+        'template: `@for (item of items; track item) {<div>{{$index}}</div>}`',
+      );
+    });
+
+    it('should not generate aliased variables declared via the `let` syntax with the same name as the original', async () => {
+      writeFile(
+        '/comp.ts',
+        `
+        import {Component} from '@angular/core';
+        import {NgFor} from '@angular/common';
+        interface Item {
+          id: number;
+          text: string;
+        }
+
+        @Component({
+          imports: [NgFor],
+          template: \`<div *ngFor="let item of items; let $index = index">{{$index}}</div>\`
+        })
+        class Comp {
+          items: Item[] = [{id: 1, text: 'blah'}, {id: 2, text: 'stuff'}];
+        }
+      `,
+      );
+
+      await runMigration();
+      const content = tree.readContent('/comp.ts');
+
+      expect(content).toContain(
+        'template: `@for (item of items; track item) {<div>{{$index}}</div>}`',
+      );
+    });
+
     it('should migrate with a trackBy function and an aliased index', async () => {
       writeFile(
         '/comp.ts',
