fix(core): do not remove used ng-template nodes in control flow migra…

…tion (#52186)

This fixes an issue where `ng-template` nodes were removed even when used in other places than control flow directives.

Template to migrate:
```html
<ng-template #blockUsedElsewhere><div>Block</div></ng-template>
<ng-container *ngTemplateOutlet="blockUsedElsewhere"></ng-container>
```

Before:
```html
<ng-container *ngTemplateOutlet="blockUsedElsewhere"></ng-container>
```

After:
```html
<ng-template #blockUsedElsewhere><div>Block</div></ng-template>
<ng-container *ngTemplateOutlet="blockUsedElsewhere"></ng-container>
```

PR Close #52186

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

@@ -175,7 +175,7 @@ export function migrateTemplate(template: string): {migrated: string|null, error
   }
 
   for (const [_, t] of visitor.templates) {
-    if (t.count === 2) {
+    if (t.count < 2) {
       result = result.replace(t.contents, '');
     }
   }
@@ -282,6 +282,9 @@ function buildIfElseBlock(
   offset = offset + etm.preOffset(startBlock.length) +
       etm.postOffset(mainBlock.length + postBlock.length);
 
+  // decrease usage count of elseTmpl
+  elseTmpl.count--;
+
   return {tmpl: updatedTmpl, offset};
 }
 
@@ -306,6 +309,10 @@ function buildIfThenElseBlock(
 
   offset = offset + etm.preOffset(startBlock.length) + etm.postOffset(postBlock.length);
 
+  // decrease usage count of thenTmpl and elseTmpl
+  thenTmpl.count--;
+  elseTmpl.count--;
+
   return {tmpl: updatedTmpl, offset};
 }
 

packages/core/schematics/test/control_flow_migration_spec.ts

@@ -336,6 +336,33 @@ describe('control flow migration', () => {
         `<ng-container *ngTemplateOutlet="elseBlock"></ng-container>`,
       ].join('\n'));
     });
+
+    it('should not remove ng-templates used by other directives', 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-template #blockUsedElsewhere><div>Block</div></ng-template>`,
+        `<ng-container *ngTemplateOutlet="blockUsedElsewhere"></ng-container>`,
+      ].join('\n'));
+
+      await runMigration();
+      const content = tree.readContent('/comp.html');
+
+      expect(content).toBe([
+        `<ng-template #blockUsedElsewhere><div>Block</div></ng-template>`,
+        `<ng-container *ngTemplateOutlet="blockUsedElsewhere"></ng-container>`,
+      ].join('\n'));
+    });
   });
 
   describe('ngFor', () => {