fix(migrations): properly handle ngIfThen cases in CF migration (#53256)

thePunderWoman · pkozlowski-opensource · commit a3599515bb25 · 2023-11-29T17:34:02.000+01:00
The migration was handling bound casees of [ngIfThenElse] and also needed [ngIfThen]. fixes: #53254 PR Close #53256
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/types.ts b/packages/core/schematics/ng-generate/control-flow-migration/types.ts
@@ -12,6 +12,7 @@ import ts from 'typescript';
 export const ngtemplate = 'ng-template';
 export const boundngifelse = '[ngIfElse]';
 export const boundngifthenelse = '[ngIfThenElse]';
+export const boundngifthen = '[ngIfThen]';
 export const nakedngfor = 'ngFor';
 
 function allFormsOf(selector: string): string[] {
@@ -315,7 +316,8 @@ export class ElementCollector extends RecursiveVisitor {
       for (const attr of el.attrs) {
         if (this._attributes.includes(attr.name)) {
           const elseAttr = el.attrs.find(x => x.name === boundngifelse);
-          const thenAttr = el.attrs.find(x => x.name === boundngifthenelse);
+          const thenAttr =
+              el.attrs.find(x => x.name === boundngifthenelse || x.name === boundngifthen);
           const forAttrs = attr.name === nakedngfor ? this.getForAttrs(el) : undefined;
           this.elements.push(new ElementToMigrate(el, attr, elseAttr, thenAttr, forAttrs));
         }
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/util.ts b/packages/core/schematics/ng-generate/control-flow-migration/util.ts
@@ -290,7 +290,7 @@ export function getTemplates(template: string): Map<string, Template> {
     // count usages of each ng-template
     for (let [key, tmpl] of visitor.templates) {
       const escapeKey = escapeRegExp(key.slice(1));
-      const regex = new RegExp(`[^a-zA-Z0-9-<]${escapeKey}\\W`, 'gm');
+      const regex = new RegExp(`[^a-zA-Z0-9-<\']${escapeKey}\\W`, 'gm');
       const matches = template.match(regex);
       tmpl.count = matches?.length ?? 0;
       tmpl.generateContents(template);
diff --git a/packages/core/schematics/test/control_flow_migration_spec.ts b/packages/core/schematics/test/control_flow_migration_spec.ts
@@ -3559,6 +3559,46 @@ describe('control flow migration', () => {
       expect(content).toBe(result);
     });
 
+    it('should migrate template with ngIfThen and remove template', async () => {
+      writeFile('/comp.ts', `
+        import {Component} from '@angular/core';
+        import {NgIf} from '@angular/common';
+
+        @Component({
+          selector: 'declare-comp',
+          templateUrl: 'comp.html',
+        })
+        class DeclareComp {}
+      `);
+
+      writeFile('/comp.html', [
+        `<ng-template`,
+        `  [ngIf]="mode === 'foo'"`,
+        `  [ngIfThen]="foo"`,
+        `  [ngIfElse]="bar"`,
+        `></ng-template>`,
+        `<ng-template #foo>`,
+        `  Foo`,
+        `</ng-template>`,
+        `<ng-template #bar>`,
+        `  Bar`,
+        `</ng-template>`,
+      ].join('\n'));
+
+      await runMigration();
+      const content = tree.readContent('/comp.html');
+
+      const result = [
+        `@if (mode === 'foo') {`,
+        `  Foo`,
+        `} @else {`,
+        `  Bar`,
+        `}\n`,
+      ].join('\n');
+
+      expect(content).toBe(result);
+    });
+
     it('should move templates after they were migrated to new syntax', async () => {
       writeFile('/comp.ts', `
         import {Component} from '@angular/core';
