refactor(migrations): centralize parseTemplate method (#62983)

aparzi · AndrewKushnir · commit 7a336c159dbb · 2025-08-21T11:41:32.000-07:00
refactor - Moved parseTemplate logic to a shared utility function to improve code reuse and maintainability PR Close #62983
diff --git a/packages/core/schematics/migrations/control-flow-migration/cases.ts b/packages/core/schematics/migrations/control-flow-migration/cases.ts
@@ -8,22 +8,15 @@
 
 import {visitAll} from '@angular/compiler';
 
-import {
-  ElementCollector,
-  ElementToMigrate,
-  endMarker,
-  MigrateError,
-  Result,
-  startMarker,
-} from './types';
+import {ElementCollector, ElementToMigrate, endMarker, Result, startMarker} from './types';
 import {
   calculateNesting,
   getMainBlock,
   getOriginals,
   hasLineBreaks,
-  parseTemplate,
   reduceNestingOffset,
 } from './util';
+import {MigrateError, parseTemplate} from '../../utils/parse_html';
 
 export const boundcase = '[ngSwitchCase]';
 export const switchcase = '*ngSwitchCase';
diff --git a/packages/core/schematics/migrations/control-flow-migration/fors.ts b/packages/core/schematics/migrations/control-flow-migration/fors.ts
@@ -8,24 +8,17 @@
 
 import {visitAll} from '@angular/compiler';
 
-import {
-  ElementCollector,
-  ElementToMigrate,
-  endMarker,
-  MigrateError,
-  Result,
-  startMarker,
-} from './types';
+import {ElementCollector, ElementToMigrate, endMarker, Result, startMarker} from './types';
 import {
   calculateNesting,
   getMainBlock,
   getOriginals,
   getPlaceholder,
   hasLineBreaks,
-  parseTemplate,
   PlaceholderKind,
   reduceNestingOffset,
 } from './util';
+import {MigrateError, parseTemplate} from '../../utils/parse_html';
 
 export const ngfor = '*ngFor';
 export const nakedngfor = 'ngFor';
diff --git a/packages/core/schematics/migrations/control-flow-migration/ifs.ts b/packages/core/schematics/migrations/control-flow-migration/ifs.ts
@@ -8,23 +8,16 @@
 
 import {visitAll} from '@angular/compiler';
 
-import {
-  ElementCollector,
-  ElementToMigrate,
-  endMarker,
-  MigrateError,
-  Result,
-  startMarker,
-} from './types';
+import {ElementCollector, ElementToMigrate, endMarker, Result, startMarker} from './types';
 import {
   calculateNesting,
   getMainBlock,
   getOriginals,
   getPlaceholder,
   hasLineBreaks,
-  parseTemplate,
   reduceNestingOffset,
 } from './util';
+import {MigrateError, parseTemplate} from '../../utils/parse_html';
 
 export const ngif = '*ngIf';
 export const boundngif = '[ngIf]';
diff --git a/packages/core/schematics/migrations/control-flow-migration/index.ts b/packages/core/schematics/migrations/control-flow-migration/index.ts
@@ -12,10 +12,11 @@ import {join, relative} from 'path';
 import {canMigrateFile, createMigrationProgram} from '../../utils/typescript/compiler_host';
 
 import {migrateTemplate} from './migration';
-import {AnalyzedFile, MigrateError} from './types';
+import {AnalyzedFile} from './types';
 import {analyze} from './util';
 import {getProjectTsConfigPaths} from '../../utils/project_tsconfig_paths';
 import {normalizePath} from '../../utils/change_tracker';
+import {MigrateError} from '../../utils/parse_html';
 
 interface Options {
   path?: string;
diff --git a/packages/core/schematics/migrations/control-flow-migration/migration.ts b/packages/core/schematics/migrations/control-flow-migration/migration.ts
@@ -12,21 +12,15 @@ import {migrateCase} from './cases';
 import {migrateFor} from './fors';
 import {migrateIf} from './ifs';
 import {migrateSwitch} from './switches';
-import {
-  AnalyzedFile,
-  endI18nMarker,
-  endMarker,
-  MigrateError,
-  startI18nMarker,
-  startMarker,
-} from './types';
+import {AnalyzedFile, endI18nMarker, endMarker, startI18nMarker, startMarker} from './types';
 import {
   canRemoveCommonModule,
   formatTemplate,
   processNgTemplates,
   removeImports,
   validateMigratedTemplate,
 } from './util';
+import {MigrateError} from '../../utils/parse_html';
 
 /**
  * Actually migrates a given template to the new syntax
diff --git a/packages/core/schematics/migrations/control-flow-migration/switches.ts b/packages/core/schematics/migrations/control-flow-migration/switches.ts
@@ -9,22 +9,15 @@
 import {Element, Node, Text, visitAll} from '@angular/compiler';
 
 import {cases} from './cases';
-import {
-  ElementCollector,
-  ElementToMigrate,
-  endMarker,
-  MigrateError,
-  Result,
-  startMarker,
-} from './types';
+import {ElementCollector, ElementToMigrate, endMarker, Result, startMarker} from './types';
 import {
   calculateNesting,
   getMainBlock,
   getOriginals,
   hasLineBreaks,
-  parseTemplate,
   reduceNestingOffset,
 } from './util';
+import {MigrateError, parseTemplate} from '../../utils/parse_html';
 
 export const ngswitch = '[ngSwitch]';
 
diff --git a/packages/core/schematics/migrations/control-flow-migration/types.ts b/packages/core/schematics/migrations/control-flow-migration/types.ts
@@ -6,15 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {
-  Attribute,
-  Block,
-  Element,
-  LetDeclaration,
-  ParseTreeResult,
-  RecursiveVisitor,
-  Text,
-} from '@angular/compiler';
+import {Attribute, Block, Element, LetDeclaration, RecursiveVisitor, Text} from '@angular/compiler';
 import ts from 'typescript';
 
 import {lookupIdentifiersInSourceFile} from './identifier-lookup';
@@ -116,18 +108,7 @@ export interface AliasAttributes {
   aliases: Map<string, string>;
 }
 
-export interface ParseResult {
-  tree: ParseTreeResult | undefined;
-  errors: MigrateError[];
-}
-
-/**
- * Represents an error that happened during migration
- */
-export type MigrateError = {
-  type: string;
-  error: unknown;
-};
+export type {MigrateError} from '../../utils/parse_html';
 
 /**
  * Represents an element with a migratable attribute
diff --git a/packages/core/schematics/migrations/control-flow-migration/util.ts b/packages/core/schematics/migrations/control-flow-migration/util.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Attribute, Element, HtmlParser, Node, ParseTreeResult, visitAll} from '@angular/compiler';
+import {Attribute, Element, Node, ParseTreeResult, visitAll} from '@angular/compiler';
 import {dirname, join} from 'path';
 import ts from 'typescript';
 
@@ -20,13 +20,12 @@ import {
   i18nCollector,
   importRemovals,
   importWithCommonRemovals,
-  MigrateError,
-  ParseResult,
   startI18nMarker,
   startMarker,
   Template,
   TemplateCollector,
 } from './types';
+import {MigrateError, parseTemplate} from '../../utils/parse_html';
 
 const startMarkerRegex = new RegExp(startMarker, 'gm');
 const endMarkerRegex = new RegExp(endMarker, 'gm');
@@ -265,36 +264,6 @@ function getNestedCount(etm: ElementToMigrate, aggregator: number[]) {
   }
 }
 
-/**
- * parses the template string into the Html AST
- */
-export function parseTemplate(template: string): ParseResult {
-  let parsed: ParseTreeResult;
-  try {
-    // Note: we use the HtmlParser here, instead of the `parseTemplate` function, because the
-    // latter returns an Ivy AST, not an HTML AST. The HTML AST has the advantage of preserving
-    // interpolated text as text nodes containing a mixture of interpolation tokens and text tokens,
-    // rather than turning them into `BoundText` nodes like the Ivy AST does. This allows us to
-    // easily get the text-only ranges without having to reconstruct the original text.
-    parsed = new HtmlParser().parse(template, '', {
-      // Allows for ICUs to be parsed.
-      tokenizeExpansionForms: true,
-      // Explicitly disable blocks so that their characters are treated as plain text.
-      tokenizeBlocks: true,
-      preserveLineEndings: true,
-    });
-
-    // Don't migrate invalid templates.
-    if (parsed.errors && parsed.errors.length > 0) {
-      const errors = parsed.errors.map((e) => ({type: 'parse', error: e}));
-      return {tree: undefined, errors};
-    }
-  } catch (e: any) {
-    return {tree: undefined, errors: [{type: 'parse', error: e}]};
-  }
-  return {tree: parsed, errors: []};
-}
-
 export function validateMigratedTemplate(migrated: string, fileName: string): MigrateError[] {
   const parsed = parseTemplate(migrated);
   let errors: MigrateError[] = [];
diff --git a/packages/core/schematics/migrations/output-migration/output-replacements.ts b/packages/core/schematics/migrations/output-migration/output-replacements.ts
@@ -8,7 +8,7 @@
 
 import ts from 'typescript';
 
-import {ImportManager, PartialEvaluator} from '@angular/compiler-cli/private/migrations';
+import {ImportManager} from '@angular/compiler-cli/private/migrations';
 import {
   ProgramInfo,
   ProjectFile,
diff --git a/packages/core/schematics/migrations/self-closing-tags-migration/to-self-closing-tags.ts b/packages/core/schematics/migrations/self-closing-tags-migration/to-self-closing-tags.ts
@@ -13,7 +13,7 @@ import {
   Text,
   visitAll,
 } from '@angular/compiler';
-import {parseTemplate} from './util';
+import {parseTemplate} from '../../utils/parse_html';
 
 export function migrateTemplateToSelfClosingTags(template: string): {
   replacementCount: number;
diff --git a/packages/core/schematics/migrations/self-closing-tags-migration/util.ts b/packages/core/schematics/migrations/self-closing-tags-migration/util.ts
diff --git a/packages/core/schematics/migrations/signal-queries-migration/migration.ts b/packages/core/schematics/migrations/signal-queries-migration/migration.ts
@@ -9,11 +9,9 @@
 import {ImportManager, PartialEvaluator} from '@angular/compiler-cli/private/migrations';
 import {getAngularDecorators, QueryFunctionName} from '@angular/compiler-cli/src/ngtsc/annotations';
 import {TypeScriptReflectionHost} from '@angular/compiler-cli/src/ngtsc/reflection';
-import assert from 'assert';
 import ts from 'typescript';
 import {
   confirmAsSerializable,
-  MigrationStats,
   ProgramInfo,
   projectFile,
   Replacement,
diff --git a/packages/core/schematics/utils/parse_html.ts b/packages/core/schematics/utils/parse_html.ts
@@ -6,7 +6,20 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import type {TmplAstNode} from '@angular/compiler';
+import {HtmlParser, ParseTreeResult, TmplAstNode} from '@angular/compiler';
+
+export interface ParseResult {
+  tree: ParseTreeResult | undefined;
+  errors: MigrateError[];
+}
+
+/**
+ * Represents an error that happened during migration
+ */
+export type MigrateError = {
+  type: string;
+  error: unknown;
+};
 
 /**
  * Parses the given HTML content using the Angular compiler. In case the parsing
@@ -26,3 +39,33 @@ export function parseHtmlGracefully(
     return null;
   }
 }
+
+/**
+ * parses the template string into the Html AST
+ */
+export function parseTemplate(template: string): ParseResult {
+  let parsed: ParseTreeResult;
+  try {
+    // Note: we use the HtmlParser here, instead of the `parseTemplate` function, because the
+    // latter returns an Ivy AST, not an HTML AST. The HTML AST has the advantage of preserving
+    // interpolated text as text nodes containing a mixture of interpolation tokens and text tokens,
+    // rather than turning them into `BoundText` nodes like the Ivy AST does. This allows us to
+    // easily get the text-only ranges without having to reconstruct the original text.
+    parsed = new HtmlParser().parse(template, '', {
+      // Allows for ICUs to be parsed.
+      tokenizeExpansionForms: true,
+      // Explicitly disable blocks so that their characters are treated as plain text.
+      tokenizeBlocks: true,
+      preserveLineEndings: true,
+    });
+
+    // Don't migrate invalid templates.
+    if (parsed.errors && parsed.errors.length > 0) {
+      const errors = parsed.errors.map((e) => ({type: 'parse', error: e}));
+      return {tree: undefined, errors};
+    }
+  } catch (e: any) {
+    return {tree: undefined, errors: [{type: 'parse', error: e}]};
+  }
+  return {tree: parsed, errors: []};
+}
