fix(migrations): CF Migration fix missing alias for bound ngifs (#53296)

thePunderWoman · dylhunn · commit 26e40c7f8916 · 2023-12-04T21:42:58.000-08:00
Empty aliases are considered the item in an ngFor, and ngIf was skipping that value. fixes: #53291 PR Close #53296
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/ifs.ts b/packages/core/schematics/ng-generate/control-flow-migration/ifs.ts
@@ -91,6 +91,9 @@ function migrateNgIf(etm: ElementToMigrate, tmpl: string, offset: number): Resul
 function buildIfBlock(etm: ElementToMigrate, tmpl: string, offset: number): Result {
   const aliasAttrs = etm.aliasAttrs!;
   const aliases = [...aliasAttrs.aliases.keys()];
+  if (aliasAttrs.item) {
+    aliases.push(aliasAttrs.item);
+  }
 
   // includes the mandatory semicolon before as
   const lbString = etm.hasLineBreaks ? '\n' : '';
@@ -137,6 +140,9 @@ function buildStandardIfElseBlock(
 function buildBoundIfElseBlock(etm: ElementToMigrate, tmpl: string, offset: number): Result {
   const aliasAttrs = etm.aliasAttrs!;
   const aliases = [...aliasAttrs.aliases.keys()];
+  if (aliasAttrs.item) {
+    aliases.push(aliasAttrs.item);
+  }
 
   // includes the mandatory semicolon before as
   let condition = etm.attr.value.replace(' as ', '; as ');
diff --git a/packages/core/schematics/test/control_flow_migration_spec.ts b/packages/core/schematics/test/control_flow_migration_spec.ts
@@ -356,6 +356,35 @@ describe('control flow migration', () => {
       ].join('\n'));
     });
 
+    it('should migrate an if case as a binding with let variable with no value', async () => {
+      writeFile('/comp.ts', `
+        import {Component} from '@angular/core';
+        import {NgIf} from '@angular/common';
+
+        @Component({
+          templateUrl: './comp.html'
+        })
+        class Comp {
+          show = false;
+        }
+      `);
+
+      writeFile('/comp.html', [
+        `<ng-template [ngIf]="viewModel$ | async" let-vm>`,
+        `  {{vm | json}}`,
+        `</ng-template>`,
+      ].join('\n'));
+
+      await runMigration();
+      const content = tree.readContent('/comp.html');
+
+      expect(content).toBe([
+        `@if (viewModel$ | async; as vm) {`,
+        `  {{vm | json}}`,
+        `}`,
+      ].join('\n'));
+    });
+
     it('should migrate an if else case as bindings', async () => {
       writeFile('/comp.ts', `
         import {Component} from '@angular/core';
