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

…scores

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: angular#54532

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 = [];
@@ -768,6 +768,7 @@ export function formatTemplate(tmpl: string, templateType: string): string {
     }
     tmpl = formatted.join('\n');
   }
+  debugger;
   return tmpl;
 }
 

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', () => {