fix(migrations): detect structural ngTemplateOutlet and ngComponentOutlet

tomer953 · kirjs · commit f394215b14d5 · 2025-11-24T12:41:01.000-05:00
the common-to-standalone migration only matched [ngTemplateOutlet] and [ngComponentOutlet] bindings and missed their structural forms (*ngTemplateOutlet and *ngComponentOutlet). This caused missing imports when removing CommonModule. This change adds structural directive patterns so the migration correctly identifies needed imports. (cherry picked from commit a4f50bd)
diff --git a/packages/core/schematics/migrations/common-to-standalone-migration/util.ts b/packages/core/schematics/migrations/common-to-standalone-migration/util.ts
@@ -36,8 +36,10 @@ const PATTERN_IMPORTS = [
   {pattern: /\[ngStyle\]/g, imports: ['NgStyle']},
   // Match ngSwitch as property binding [ngSwitch] or attribute ngSwitch="value"
   {pattern: /(\[ngSwitch\]|\s+ngSwitch\s*=)/g, imports: ['NgSwitch']},
-  {pattern: /\[ngTemplateOutlet\]/g, imports: ['NgTemplateOutlet']},
-  {pattern: /\[ngComponentOutlet\]/g, imports: ['NgComponentOutlet']},
+  // Match ngTemplateOutlet as structural (*ngTemplateOutlet) or property binding [ngTemplateOutlet]
+  {pattern: /(\*ngTemplateOutlet\b|\[ngTemplateOutlet\])/g, imports: ['NgTemplateOutlet']},
+  // Match ngComponentOutlet as structural (*ngComponentOutlet) or property binding [ngComponentOutlet]
+  {pattern: /(\*ngComponentOutlet\b|\[ngComponentOutlet\])/g, imports: ['NgComponentOutlet']},
 
   // Common pipes
   {pattern: /\|\s*async\b/g, imports: ['AsyncPipe']},
diff --git a/packages/core/schematics/test/common_to_standalone_migration_spec.ts b/packages/core/schematics/test/common_to_standalone_migration_spec.ts
@@ -495,6 +495,66 @@ describe('Common → standalone imports migration', () => {
       expect(content).not.toContain('CommonModule');
       expectImportDeclarationToContain(content, 'NgComponentOutlet');
     });
+
+    it('should migrate NgComponentOutlet with structural directive syntax', async () => {
+      writeFile(
+        '/comp.ts',
+        dedent`
+        import {Component} from '@angular/core';
+        import {CommonModule} from '@angular/common';
+
+        @Component({
+          selector: 'app-dynamic-structural',
+          imports: [CommonModule],
+          template: \`<ng-container *ngComponentOutlet="dynamicComponent"></ng-container>\`
+        })
+        export class DynamicStructuralComponent {
+          dynamicComponent: any;
+        }
+      `,
+      );
+
+      await runMigration();
+      const content = tree.readContent('/comp.ts');
+
+      expectImportsToContain(content, 'NgComponentOutlet');
+      expect(content).not.toContain('CommonModule');
+      expectImportDeclarationToContain(content, 'NgComponentOutlet');
+    });
+
+    it('should migrate both NgTemplateOutlet and NgComponentOutlet with mixed syntax', async () => {
+      writeFile(
+        '/comp.ts',
+        dedent`
+        import {Component} from '@angular/core';
+        import {CommonModule} from '@angular/common';
+
+        @Component({
+          selector: 'app-mixed-outlets',
+          imports: [CommonModule],
+          template: \`
+            <ng-container *ngTemplateOutlet="template1"></ng-container>
+            <ng-container [ngTemplateOutlet]="template2"></ng-container>
+            <ng-container *ngComponentOutlet="component1"></ng-container>
+            <ng-container [ngComponentOutlet]="component2"></ng-container>
+          \`
+        })
+        export class MixedOutletsComponent {
+          template1: any;
+          template2: any;
+          component1: any;
+          component2: any;
+        }
+      `,
+      );
+
+      await runMigration();
+      const content = tree.readContent('/comp.ts');
+
+      expectImportsToContain(content, 'NgTemplateOutlet', 'NgComponentOutlet');
+      expect(content).not.toContain('CommonModule');
+      expectImportDeclarationToContain(content, 'NgComponentOutlet', 'NgTemplateOutlet');
+    });
   });
 
   describe('Pipes', () => {
