fix(migrations): Fix cf migration regular expression to include under…

…scores (#54533)

In rare cases people may use an underscore in their component names, which was not accounted for in the formatting portion of the migration.

fixes: #54532

PR Close #54533

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

@@ -652,19 +652,19 @@ 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\-_]+)*>/;
 
     // matches closing of a self closing html element when the element is on multiple lines
     // [binding]="value" />
-    const closeMultiLineElRegex = /^\s*([a-zA-Z0-9\-\[\]]+)?=?"?([^”<]+)?"?\s?\/>$/;
+    const closeMultiLineElRegex = /^\s*([a-zA-Z0-9\-_\[\]]+)?=?"?([^”<]+)?"?\s?\/>$/;
 
     // matches closing of a self closing html element when the element is on multiple lines
     // with no / in the closing: [binding]="value">
-    const closeSelfClosingMultiLineRegex = /^\s*([a-zA-Z0-9\-\[\]]+)?=?"?([^”\/<]+)?"?\s?>$/;
+    const closeSelfClosingMultiLineRegex = /^\s*([a-zA-Z0-9\-_\[\]]+)?=?"?([^”\/<]+)?"?\s?>$/;
 
     // 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\-_]+)*>/;
 
     const lines = tmpl.split('\n');
     const formatted = [];

packages/core/schematics/test/control_flow_migration_spec.ts

@@ -4932,6 +4932,42 @@ describe('control flow migration', () => {
 
          expect(actual).toBe(expected);
        });
+
+    it('should handle dom nodes with underscores mixed in', 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 *ngIf="show">show</div>`,
+        `<a-very-long-component-name-that-has_underscores-too`,
+        `  [selected]="selected | async "`,
+        `>`,
+        `</a-very-long-component-name-that-has_underscores-too>`,
+      ].join('\n'));
+
+      await runMigration();
+      const actual = tree.readContent('/comp.html');
+      const expected = [
+        `@if (show) {`,
+        `  <div>show</div>`,
+        `}`,
+        `<a-very-long-component-name-that-has_underscores-too`,
+        `  [selected]="selected | async "`,
+        `  >`,
+        `</a-very-long-component-name-that-has_underscores-too>`,
+      ].join('\n');
+
+      expect(actual).toBe(expected);
+    });
   });
 
   describe('imports', () => {