fix(migrations): CF Migration - ensure bound ngIfElse cases ignore li…

…ne breaks (angular#53435) When using ternaries or other expressions in bound if / else cases, it is possible that line breaks could end up affecting template replacement. fixes: angular#53428 PR Close angular#53435
rlmestre · Jan 26, 2024 · 8406a6c · 8406a6c
1 parent 2f80999
commit 8406a6c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
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', () => {