fix(core): fix removal of a container reference used in the component file (angular#60210)

During migration a container reference was deleted even though it was used in the component file.

PR Close angular#60210

Author: aparzi

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

@@ -49,7 +49,7 @@ export function migrateTemplate(
       return {migrated: template, errors: switchResult.errors};
     }
     const caseResult = migrateCase(switchResult.migrated);
-    const templateResult = processNgTemplates(caseResult.migrated);
+    const templateResult = processNgTemplates(caseResult.migrated, file.sourceFile);
     if (templateResult.err !== undefined) {
       return {migrated: template, errors: [{type: 'template', error: templateResult.err}]};
     }

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

@@ -466,7 +466,10 @@ function generatei18nContainer(
 /**
  * Counts, replaces, and removes any necessary ng-templates post control flow migration
  */
-export function processNgTemplates(template: string): {migrated: string; err: Error | undefined} {
+export function processNgTemplates(
+  template: string,
+  sourceFile: ts.SourceFile,
+): {migrated: string; err: Error | undefined} {
   // count usage
   try {
     const templates = getTemplates(template);
@@ -496,7 +499,17 @@ export function processNgTemplates(template: string): {migrated: string; err: Er
         }
         // the +1 accounts for the t.count's counting of the original template
         if (t.count === matches.length + 1 && safeToRemove) {
-          template = template.replace(t.contents, `${startMarker}${endMarker}`);
+          const refsInComponentFile = getViewChildOrViewChildrenNames(sourceFile);
+          if (refsInComponentFile?.length > 0) {
+            const templateRefs = getTemplateReferences(template);
+            for (const ref of refsInComponentFile) {
+              if (!templateRefs.includes(ref)) {
+                template = template.replace(t.contents, `${startMarker}${endMarker}`);
+              }
+            }
+          } else {
+            template = template.replace(t.contents, `${startMarker}${endMarker}`);
+          }
         }
         // templates may have changed structure from nested replaced templates
         // so we need to reprocess them before the next loop.
@@ -514,6 +527,53 @@ export function processNgTemplates(template: string): {migrated: string; err: Er
   }
 }
 
+function getViewChildOrViewChildrenNames(sourceFile: ts.SourceFile): Array<string> {
+  const names: Array<string> = [];
+
+  function visit(node: ts.Node) {
+    if (ts.isDecorator(node) && ts.isCallExpression(node.expression)) {
+      const expr = node.expression;
+      if (
+        ts.isIdentifier(expr.expression) &&
+        (expr.expression.text === 'ViewChild' || expr.expression.text === 'ViewChildren')
+      ) {
+        const firstArg = expr.arguments[0];
+        if (firstArg && ts.isStringLiteral(firstArg)) {
+          names.push(firstArg.text);
+        }
+        return;
+      }
+    }
+    ts.forEachChild(node, visit);
+  }
+
+  visit(sourceFile);
+  return names;
+}
+
+function getTemplateReferences(template: string): string[] {
+  const parsed = parseTemplate(template);
+  if (parsed.tree === undefined) {
+    return [];
+  }
+
+  const references: string[] = [];
+
+  function visitNodes(nodes: any) {
+    for (const node of nodes) {
+      if (node?.name === 'ng-template') {
+        references.push(...node.attrs?.map((ref: any) => ref?.name?.slice(1)));
+      }
+      if (node.children) {
+        visitNodes(node.children);
+      }
+    }
+  }
+
+  visitNodes(parsed.tree.rootNodes);
+  return references;
+}
+
 function replaceRemainingPlaceholders(template: string): string {
   const pattern = '.*';
   const placeholderPattern = getPlaceholder(pattern);

packages/core/schematics/test/control_flow_migration_spec.ts

@@ -6836,5 +6836,101 @@ describe('control flow migration', () => {
           `"ng-container". Please fix and re-run the migration.`,
       );
     });
+
+    it('should not remove component reference it is used in component file with viewChild', async () => {
+      writeFile(
+        '/comp.ts',
+        `
+        import {Component, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
+        import { NgIf } from '@angular/common';
+
+        @Component({
+          standalone: true
+          imports: [NgIf],
+          template: \`<h1>Hello from {{ name }}!</h1>
+                      <div *ngIf="showContent; then contentTemplate"></div>
+                      <ng-template #contentTemplate><div>test content</div></ng-template>\`
+        })
+        class Comp {
+            @ViewChild('contentTemplate') testContainer!: TemplateRef<unknown>;
+            name = 'Angular';
+            showContent = true;
+            options: { value: string; html: any }[] = [];
+
+            constructor(private viewContainerRef: ViewContainerRef) {}
+
+            ngAfterViewInit(): void {
+              this.viewContainerRef.createEmbeddedView(this.testContainer);
+            }
+        }
+      `,
+      );
+
+      await runMigration();
+      const content = tree.readContent('/comp.ts');
+      expect(content).toContain('<ng-template #contentTemplate>');
+    });
+
+    it('should not remove component reference it is used in component file with viewChildren', async () => {
+      writeFile(
+        '/comp.ts',
+        `
+        import {Component, TemplateRef, ViewChildren, ViewContainerRef, QueryList} from '@angular/core';
+        import { NgIf } from '@angular/common';
+
+        @Component({
+          standalone: true
+          imports: [NgIf],
+          template: \`<h1>Hello from {{ name }}!</h1>
+                      <div *ngIf="showContent; then contentTemplate"></div>
+                      <ng-template #contentTemplate><div>test content</div></ng-template>\`
+        })
+        class Comp {
+            @ViewChildren('contentTemplate') testContainer!: QueryList<TemplateRef<unknown>>;
+            name = 'Angular';
+            showContent = true;
+            options: { value: string; html: any }[] = [];
+
+            constructor(private viewContainerRef: ViewContainerRef) {}
+
+            ngAfterViewInit(): void {
+              this.viewContainerRef.createEmbeddedView(this.testContainer.last);
+            }
+        }
+      `,
+      );
+
+      await runMigration();
+      const content = tree.readContent('/comp.ts');
+      expect(content).toContain('<ng-template #contentTemplate>');
+    });
+
+    it('should remove component reference when viewChild is commented in component file', async () => {
+      writeFile(
+        '/comp.ts',
+        `
+        import {Component, TemplateRef, ViewChild} from '@angular/core';
+        import { NgIf } from '@angular/common';
+
+        @Component({
+          standalone: true
+          imports: [NgIf],
+          template: \`<h1>Hello from {{ name }}!</h1>
+                      <div *ngIf="showContent; then contentTemplate"></div>
+                      <ng-template #contentTemplate><div>test content</div></ng-template>\`
+        })
+        class Comp {
+            // @ViewChild('contentTemplate') testContainer!: TemplateRef<unknown>;
+            name = 'Angular';
+            showContent = true;
+            options: { value: string; html: any }[] = [];
+        }
+      `,
+      );
+
+      await runMigration();
+      const content = tree.readContent('/comp.ts');
+      expect(content).not.toContain('<ng-template #contentTemplate>');
+    });
   });
 });