fix(migrations): control flow migration fails for async pipe with unboxing of observable (#52756) (#52972)

AnthonyFr75 · AndrewKushnir · commit ac9cd6108f6f · 2023-11-20T08:58:45.000-08:00
Update control flow syntax to use 'as' for proper async pipe handling, accounting for variable whitespace before 'let'. Fixes #52756 PR Close #52972
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/ifs.ts b/packages/core/schematics/ng-generate/control-flow-migration/ifs.ts
@@ -84,7 +84,10 @@ function migrateNgIf(etm: ElementToMigrate, tmpl: string, offset: number): Resul
 function buildIfBlock(etm: ElementToMigrate, tmpl: string, offset: number): Result {
   // includes the mandatory semicolon before as
   const lbString = etm.hasLineBreaks ? '\n' : '';
-  const condition = etm.attr.value.replace(' as ', '; as ');
+  const condition = etm.attr.value
+                        .replace(' as ', '; as ')
+                        // replace 'let' with 'as' whatever spaces are between ; and 'let'
+                        .replace(/;\s*let/g, '; as');
 
   const originals = getOriginals(etm, tmpl, offset);
 
@@ -106,7 +109,10 @@ function buildIfBlock(etm: ElementToMigrate, tmpl: string, offset: number): Resu
 function buildStandardIfElseBlock(
     etm: ElementToMigrate, tmpl: string, elseString: string, offset: number): Result {
   // includes the mandatory semicolon before as
-  const condition = etm.getCondition(elseString).replace(' as ', '; as ');
+  const condition = etm.getCondition(elseString)
+                        .replace(' as ', '; as ')
+                        // replace 'let' with 'as' whatever spaces are between ; and 'let'
+                        .replace(/;\s*let/g, '; as');
   const elsePlaceholder = `#${etm.getTemplateName(elseString)}|`;
   return buildIfElseBlock(etm, tmpl, condition, elsePlaceholder, offset);
 }
@@ -151,7 +157,10 @@ function buildStandardIfThenElseBlock(
     etm: ElementToMigrate, tmpl: string, thenString: string, elseString: string,
     offset: number): Result {
   // includes the mandatory semicolon before as
-  const condition = etm.getCondition(thenString).replace(' as ', '; as ');
+  const condition = etm.getCondition(thenString)
+                        .replace(' as ', '; as ')
+                        // replace 'let' with 'as' whatever spaces are between ; and 'let'
+                        .replace(/;\s*let/g, '; as');
   const thenPlaceholder = `#${etm.getTemplateName(thenString, elseString)}|`;
   const elsePlaceholder = `#${etm.getTemplateName(elseString)}|`;
   return buildIfThenElseBlock(etm, tmpl, condition, thenPlaceholder, elsePlaceholder, offset);
diff --git a/packages/core/schematics/test/control_flow_migration_spec.ts b/packages/core/schematics/test/control_flow_migration_spec.ts
@@ -100,7 +100,6 @@ describe('control flow migration', () => {
       } catch (e: any) {
         error = e.message;
       }
-
       expect(error).toBe('Cannot run control flow migration outside of the current project.');
     });
 
@@ -3513,5 +3512,68 @@ describe('control flow migration', () => {
       expect(content).toContain(
           'template: `<div>@if (toggle) {<div>@if (show) {<span>shrug</span>}</div>}</div>`');
     });
+
+    it('should update let value in a build if block to as value for the new control flow',
+       async () => {
+         writeFile('/comp.ts', `
+        import {Component} from '@angular/core';
+        import {NgIf} from '@angular/common';
+
+        @Component({
+          imports: [NgIf],
+          template: \`<ng-container *ngIf="value$ | async; let value"> {{value}} </ng-container>\`
+        })
+        class Comp {
+          value$ = of('Rica');
+        }
+      `);
+
+         await runMigration();
+         const content = tree.readContent('/comp.ts');
+         expect(content).toContain('template: `@if (value$ | async; as value) { {{value}} }`');
+       });
+
+    it('should update let value in a standard if else block to as value for the new control flow',
+       async () => {
+         writeFile('/comp.ts', `
+        import {Component} from '@angular/core';
+        import {CommonModule} from '@angular/common';
+
+        @Component({
+          imports: [CommonModule],
+          template: \`<div *ngIf="(logStatus$ | async)?.name; let userName; else loggedOut"> Hello {{ userName }} ! </div><ng-template #loggedOut></ng-template>\`
+        })
+        class Comp {
+          logStatus$ =  of({ name: 'Robert' });
+        }
+      `);
+
+         await runMigration();
+         const content = tree.readContent('/comp.ts');
+         expect(content).toContain(
+             'template: `@if ((logStatus$ | async)?.name; as userName) {<div> Hello {{ userName }} ! </div>} @else {}`');
+       });
+
+    it('should update let value in a standard if else, then block to as value for the new control flow',
+       async () => {
+         writeFile('/comp.ts', `
+        import {Component} from '@angular/core';
+        import {CommonModule} from '@angular/common';
+
+        @Component({
+          imports: [CommonModule],
+          template: \`<div *ngIf="isLoggedIn$ | async; let logIn; then loggedIn; else loggedOut"></div><ng-template #loggedIn>Log In</ng-template>
+          <ng-template #loggedOut>Log Out</ng-template>\`
+        })
+        class Comp {
+          isLoggedIn$ = of(true);
+        }
+      `);
+
+         await runMigration();
+         const content = tree.readContent('/comp.ts');
+         expect(content).toContain(
+             'template: `@if (isLoggedIn$ | async; as logIn) {\n  Log In\n} @else {\n  Log Out\n}`');
+       });
   });
 });
