fix(migrations): CF migration log warning when collection aliasing detected in @for (#53238)

thePunderWoman · pkozlowski-opensource · commit 2b3d3b0fe101 · 2023-11-29T10:29:53.000+01:00
This logs a warning when an ngFor has a collection aliased, which is not supported with new syntax. fixes: #53233 PR Close #53238
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/fors.ts b/packages/core/schematics/ng-generate/control-flow-migration/fors.ts
@@ -92,6 +92,12 @@ function migrateStandardNgFor(etm: ElementToMigrate, tmpl: string, offset: numbe
 
   // first portion should always be the loop definition prefixed with `let`
   const condition = parts[0].replace('let ', '');
+  if (condition.indexOf(' as ') > -1) {
+    let errorMessage = `Found an aliased collection on an ngFor: "${condition}".` +
+        ' Collection aliasing is not supported with @for.' +
+        ' Refactor the code to remove the `as` alias and re-run the migration.';
+    throw new Error(errorMessage);
+  }
   const loopVar = condition.split(' of ')[0];
   let trackBy = loopVar;
   let aliasedIndex: string|null = null;
diff --git a/packages/core/schematics/test/control_flow_migration_spec.ts b/packages/core/schematics/test/control_flow_migration_spec.ts
@@ -3259,6 +3259,34 @@ describe('control flow migration', () => {
               `A duplicate ng-template name "#elseTmpl" was found. ` +
               `The control flow migration requires unique ng-template names within a component.`);
     });
+
+    it('should log a migration error when collection aliasing is detected in ngFor', async () => {
+      writeFile('/comp.ts', `
+        import {Component} from '@angular/core';
+        import {NgIf} from '@angular/common';
+
+        @Component({
+          imports: [NgIf],
+          templateUrl: './comp.html'
+        })
+        class Comp {
+          toggle = false;
+        }
+      `);
+
+      writeFile('./comp.html', [
+        `<div *ngFor="let item of list$ | async as list;">Content</div>`,
+      ].join('\n'));
+
+      await runMigration();
+      tree.readContent('/comp.ts');
+
+      expect(warnOutput.join(' '))
+          .toContain(
+              `Found an aliased collection on an ngFor: "item of list$ | async as list". ` +
+              `Collection aliasing is not supported with @for. ` +
+              `Refactor the code to remove the \`as\` alias and re-run the migration.`);
+    });
   });
 
   describe('template', () => {
