fix(migrations): CF Migration - ensure bound ngIfElse cases ignore line breaks (#53435)

thePunderWoman · alxhub · commit 96ab999698ca · 2023-12-08T14:31:25.000-08:00
When using ternaries or other expressions in bound if / else cases, it is possible that line breaks could end up affecting template replacement. fixes: #53428 PR Close #53435
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/ifs.ts b/packages/core/schematics/ng-generate/control-flow-migration/ifs.ts
@@ -153,9 +153,9 @@ function buildBoundIfElseBlock(etm: ElementToMigrate, tmpl: string, offset: numb
   } else if (aliases.length === 1) {
     condition += `; as ${aliases[0]}`;
   }
-  const elsePlaceholder = `θ${etm.elseAttr!.value}δ`;
+  const elsePlaceholder = `θ${etm.elseAttr!.value.trim()}δ`;
   if (etm.thenAttr !== undefined) {
-    const thenPlaceholder = `θ${etm.thenAttr!.value}δ`;
+    const thenPlaceholder = `θ${etm.thenAttr!.value.trim()}δ`;
     return buildIfThenElseBlock(etm, tmpl, condition, thenPlaceholder, elsePlaceholder, offset);
   }
   return buildIfElseBlock(etm, tmpl, condition, elsePlaceholder, offset);
diff --git a/packages/core/schematics/test/control_flow_migration_spec.ts b/packages/core/schematics/test/control_flow_migration_spec.ts
@@ -4201,6 +4201,39 @@ describe('control flow migration', () => {
         `}\n`,
       ].join('\n'));
     });
+
+    it('should trim newlines in ngIf conditions', 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]="customClearTemplate"`,
+        `  [ngIfElse]="`,
+        `    isSidebarV3 || variant === 'v3' ? clearTemplateV3 : clearTemplate`,
+        `  "`,
+        `></ng-template>`,
+      ].join('\n'));
+
+      await runMigration();
+      const content = tree.readContent('/comp.html');
+
+      expect(content).toBe([
+        `@if (customClearTemplate) {`,
+        `} @else {`,
+        `  <ng-template [ngTemplateOutlet]="isSidebarV3 || variant === 'v3' ? clearTemplateV3 : clearTemplate"></ng-template>`,
+        `}`,
+      ].join('\n'));
+    });
   });
 
   describe('formatting', () => {

Original file line number	Diff line number	Diff line change
`@@ -153,9 +153,9 @@ function buildBoundIfElseBlock(etm: ElementToMigrate, tmpl: string, offset: numb`
`153`	`153`	`} else if (aliases.length === 1) {`
`154`	`154`	condition += `; as ${aliases[0]}`;
`155`	`155`	`}`
`156`		- const elsePlaceholder = `θ${etm.elseAttr!.value}δ`;
	`156`	+ const elsePlaceholder = `θ${etm.elseAttr!.value.trim()}δ`;
`157`	`157`	`if (etm.thenAttr !== undefined) {`
`158`		- const thenPlaceholder = `θ${etm.thenAttr!.value}δ`;
	`158`	+ const thenPlaceholder = `θ${etm.thenAttr!.value.trim()}δ`;
`159`	`159`	`return buildIfThenElseBlock(etm, tmpl, condition, thenPlaceholder, elsePlaceholder, offset);`
`160`	`160`	`}`
`161`	`161`	`return buildIfElseBlock(etm, tmpl, condition, elsePlaceholder, offset);`