From dbd6f386ea81e7f29bc1cb34fb8efbba8c290ea8 Mon Sep 17 00:00:00 2001
From: Jessica Janiuk <jessicajaniuk@google.com>
Date: Mon, 27 Nov 2023 10:33:00 -0500
Subject: [PATCH] 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
---
 .../control-flow-migration/index.ts           |  5 ++-
 .../control-flow-migration/types.ts           | 14 ++++----
 .../test/control_flow_migration_spec.ts       | 35 +++++++++++++++++++
 3 files changed, 43 insertions(+), 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
index 52b89263532..dbefddf7b19 100644
--- 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
index 313d6cc7003..7b71669c239 100644
--- 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
index aef63d6e21e..176b17b6333 100644
--- 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';