From ffe9b1fcc2ecb8dc0d36c7f9228ac1a052554eef Mon Sep 17 00:00:00 2001
From: cexbrayat <cedric@ninja-squad.com>
Date: Thu, 12 Oct 2023 15:15:44 +0200
Subject: [PATCH] fix(core): handle for alias with as in control flow migration
 (#52183)

This adds the support of `let index as myIndex` in `*ngFor` for the control flow migration.

Before: `@for (itm of items; track itm)`
After: `@for (itm of items; track itm; let myIndex = $index)`

PR Close #52183
---
 .../control-flow-migration/util.ts            | 15 +++++++++--
 .../test/control_flow_migration_spec.ts       | 25 +++++++++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/packages/core/schematics/ng-generate/control-flow-migration/util.ts b/packages/core/schematics/ng-generate/control-flow-migration/util.ts
index cd708491e2ea1..646a9ea0321a0 100644
--- a/packages/core/schematics/ng-generate/control-flow-migration/util.ts
+++ b/packages/core/schematics/ng-generate/control-flow-migration/util.ts
@@ -169,7 +169,8 @@ export function migrateTemplate(template: string): string|null {
 
 function migrateNgFor(
     etm: ElementToMigrate, tmpl: string, offset: number): {tmpl: string, offset: number} {
-  const aliasRegexp = /=\s+(count|index|first|last|even|odd)/gm;
+  const aliasWithEqualRegexp = /=\s+(count|index|first|last|even|odd)/gm;
+  const aliasWithAsRegexp = /(count|index|first|last|even|odd)\s+as/gm;
   const aliases = [];
 
   const parts = etm.attr.value.split(';');
@@ -187,10 +188,20 @@ function migrateNgFor(
       trackBy = `${trackByFn}($index, ${loopVar})`;
     }
     // aliases
-    if (part.match(aliasRegexp)) {
+    // declared with `let myIndex = index`
+    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()}`);
     }
+    // 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 aliasStr = (aliases.length > 0) ? `;${aliases.join(';')}` : '';
diff --git a/packages/core/schematics/test/control_flow_migration_spec.ts b/packages/core/schematics/test/control_flow_migration_spec.ts
index e6f59566a34ff..aa3b524bad8b8 100644
--- a/packages/core/schematics/test/control_flow_migration_spec.ts
+++ b/packages/core/schematics/test/control_flow_migration_spec.ts
@@ -521,6 +521,31 @@ describe('control flow migration', () => {
           'template: `<ul>@for (itm of items; track itm; let index = $index) {<li>{{itm.text}}</li>}</ul>`');
     });
 
+    it('should migrate with alias declared with as', async () => {
+      writeFile('/comp.ts', `
+        import {Component} from '@angular/core';
+        import {NgFor} from '@angular/common';
+        interface Item {
+          id: number;
+          text: string;
+        }
+
+        @Component({
+          imports: [NgFor],
+          template: \`<ul><li *ngFor="let itm of items; index as myIndex">{{itm.text}}</li></ul>\`
+        })
+        class Comp {
+          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
+        }
+      `);
+
+      await runMigration();
+      const content = tree.readContent('/comp.ts');
+
+      expect(content).toContain(
+          'template: `<ul>@for (itm of items; track itm; let myIndex = $index) {<li>{{itm.text}}</li>}</ul>`');
+    });
+
     it('should migrate with multiple aliases', async () => {
       writeFile('/comp.ts', `
         import {Component} from '@angular/core';