fix(migrations): resolve infinite loop for a single line element with…

… a long tag name and angle bracket on a new line (#54588)

Fixes an edge case where a single-line elemnt with a long tag name a closing bracket on a new line was putting the control flow migration into an infinite loop.

Fixes #54587.

PR Close #54588

packages/core/schematics/ng-generate/control-flow-migration/util.ts

@@ -652,7 +652,7 @@ export function formatTemplate(tmpl: string, templateType: string): string {
 
     // matches closing of an html element
     // </element>
-    const closeElRegex = /\s*<\/([a-zA-Z0-9\-_]+)*>/;
+    const closeElRegex = /\s*<\/([a-zA-Z0-9\-_]+)\s*>/m;
 
     // matches closing of a self closing html element when the element is on multiple lines
     // [binding]="value" />
@@ -664,7 +664,7 @@ export function formatTemplate(tmpl: string, templateType: string): string {
 
     // matches an open and close of an html element on a single line with no breaks
     // <div>blah</div>
-    const singleLineElRegex = /\s*<([a-zA-Z0-9]+)(?![^>]*\/>)[^>]*>.*<\/([a-zA-Z0-9\-_]+)*>/;
+    const singleLineElRegex = /\s*<([a-zA-Z0-9]+)(?![^>]*\/>)[^>]*>.*<\/([a-zA-Z0-9\-_]+)\s*>/;
 
     const lines = tmpl.split('\n');
     const formatted = [];

packages/core/schematics/test/control_flow_migration_spec.ts

@@ -4968,6 +4968,36 @@ describe('control flow migration', () => {
 
       expect(actual).toBe(expected);
     });
+
+    it('should handle single-line element with a log tag name and a closing bracket on a new line',
+       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-container *ngIf="true">`,
+           `<component-name-with-several-dashes></component-name-with-several-dashes`,
+           `></ng-container>`,
+         ].join('\n'));
+
+         await runMigration();
+         const actual = tree.readContent('/comp.html');
+         const expected = [
+           `@if (true) {`,
+           `  <component-name-with-several-dashes></component-name-with-several-dashes`,
+           `    >`,
+           `  }`,
+         ].join('\n');
+
+         expect(actual).toBe(expected);
+       });
   });
 
   describe('imports', () => {