Skip to content

Commit

Permalink
fix(migrations): CF migration log warning when collection aliasing de…
Browse files Browse the repository at this point in the history
…tected in @for (#53238)

This logs a warning when an ngFor has a collection aliased, which is not supported with new syntax.

fixes: #53233

PR Close #53238
  • Loading branch information
jessicajaniuk authored and pkozlowski-opensource committed Nov 29, 2023
1 parent 6be8804 commit 2b3d3b0
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 0 deletions.
Expand Up @@ -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;
Expand Down
28 changes: 28 additions & 0 deletions packages/core/schematics/test/control_flow_migration_spec.ts
Expand Up @@ -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', () => {
Expand Down

0 comments on commit 2b3d3b0

Please sign in to comment.