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

This makes sure colons after else and then cases get migrated properly. fixes: #53150 PR Close #53076
angular · Nov 28, 2023 · dbd6f38 · dbd6f38
1 parent 8f6affd
commit dbd6f38
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 11 deletions.
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/index.ts b/packages/core/schematics/ng-generate/control-flow-migration/index.ts
@@ -119,9 +119,8 @@ function runControlFlowMigration(
 }
 
 function sortFilePaths(names: string[]): string[] {
-  const templateFiles = names.filter(n => n.endsWith('.html'));
-  const classFiles = names.filter(n => !n.endsWith('.html'));
-  return [...templateFiles, ...classFiles];
+  names.sort((a, _) => a.endsWith('.html') ? -1 : 0);
+  return names;
 }
 
 function generateErrorMessage(path: string, errors: MigrateError[]): string {

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,12 @@ 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)
-          .trim()
-          .split(';')[0]
-          .trim();
-    }
-    return this.attr.value.slice(targetLocation + targetStr.length).trim().split(';')[0].trim();
+    const secondTargetLocation = secondStr ? this.attr.value.indexOf(secondStr) : undefined;
+    return this.attr.value.slice(targetLocation + targetStr.length, secondTargetLocation)
+        .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';