fix(migrations): allows colons in ngIf else cases to migrate

This makes sure colons after else and then cases get migrated properly. fixes: #53150
angular · Nov 27, 2023 · 5a56672 · 5a56672
1 parent abccf34
commit 5a56672
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/types.ts b/packages/core/schematics/ng-generate/control-flow-migration/types.ts
@@ -133,14 +133,20 @@ export class ElementToMigrate {
 
   getTemplateName(targetStr: string, secondStr?: string): string {
     const targetLocation = this.attr.value.indexOf(targetStr);
+
     if (secondStr) {
       const secondTargetLocation = this.attr.value.indexOf(secondStr);
       return this.attr.value.slice(targetLocation + targetStr.length, secondTargetLocation)
+          .replace(':', '')
           .trim()
           .split(';')[0]
           .trim();
     }
-    return this.attr.value.slice(targetLocation + targetStr.length).trim().split(';')[0].trim();
+    return this.attr.value.slice(targetLocation + targetStr.length)
+        .replace(':', '')
+        .trim()
+        .split(';')[0]
+        .trim();
   }
 
   start(offset: number): number {

diff --git a/packages/core/schematics/test/control_flow_migration_spec.ts b/packages/core/schematics/test/control_flow_migration_spec.ts
@@ -723,6 +723,41 @@ describe('control flow migration', () => {
       ].join('\n'));
     });
 
+    it('should migrate an if else case with a colon after else', 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', [
+        `<div>`,
+        `<span *ngIf="show; else: elseTmpl">Content here</span>`,
+        `<ng-template #elseTmpl>Else Content</ng-template>`,
+        `</div>`,
+      ].join('\n'));
+
+      await runMigration();
+      const actual = tree.readContent('/comp.html');
+      const expected = [
+        `<div>`,
+        `  @if (show) {`,
+        `    <span>Content here</span>`,
+        `  } @else {`,
+        `    Else Content`,
+        `  }`,
+        `</div>`,
+      ].join('\n');
+
+      expect(actual).toBe(expected);
+    });
+
     it('should migrate an if else case with no space after ;', async () => {
       writeFile('/comp.ts', `
         import {Component} from '@angular/core';