fix(vite-plugin-angular): resolve non-standalone component scope in fastCompile (#2390)

brandonroberts · web-flow · commit f115390a36e4 · 2026-06-25T16:13:42.000-05:00
diff --git a/packages/vite-plugin-angular/src/lib/compiler/compile.ts b/packages/vite-plugin-angular/src/lib/compiler/compile.ts
@@ -631,6 +631,100 @@ export function compile(
             });
           }
 
+          // Non-standalone components get their directive/pipe scope from the
+          // @NgModule that declares them. Whole-program ngtsc resolves this; a
+          // per-file engine can't read the module from the component file, but the
+          // project-wide registry (populated at buildStart) records every module's
+          // declarations + imports. We resolve the owning module's transitive scope
+          // here and inline it into the component's own `dependencies` — matching
+          // ngtsc, and surviving tree-shaking (unlike a separate, droppable
+          // `ɵɵsetComponentScope` call).
+          //
+          // The real "non-standalone" signal is the owning-module lookup below:
+          // a component listed in an @NgModule's `declarations` is non-standalone
+          // by definition (Angular forbids declaring a standalone component). The
+          // `meta.standalone` flag can't be trusted to detect this — the metadata
+          // default is `true`, so an *omitted* flag (the common pre-v19 form,
+          // where it defaulted to false) is indistinguishable from explicit
+          // `true`. So gate cheaply: on v19+ a declared component must set
+          // `standalone: false`, so only run the lookup for those; pre-v19 the
+          // flag is unreliable, so run it for every component (the lookup itself
+          // filters out genuinely standalone ones — they aren't declared).
+          const mightBeNonStandalone =
+            meta.standalone === false || ANGULAR_MAJOR < 19;
+          if (!isPartial && mightBeNonStandalone && registry) {
+            let owningModule:
+              | { declarations?: string[]; imports?: string[] }
+              | undefined;
+            for (const entry of registry.values()) {
+              if (
+                entry.kind === 'ngmodule' &&
+                entry.declarations?.includes(className)
+              ) {
+                owningModule = entry;
+                break;
+              }
+            }
+            if (owningModule) {
+              // Transitive scope = the module's own declarations + the exported
+              // declarations of every imported module (recursively) + tuple members.
+              const scopeNames = new Set<string>();
+              const addExportsOf = (modName: string, visited: Set<string>) => {
+                if (visited.has(modName)) return;
+                visited.add(modName);
+                const e = registry.get(modName);
+                if (!e) return;
+                if (e.kind === 'ngmodule') {
+                  for (const exp of e.exports ?? []) addExportsOf(exp, visited);
+                } else if (e.kind === 'tuple') {
+                  for (const m of e.members ?? []) scopeNames.add(m);
+                } else {
+                  scopeNames.add(modName);
+                }
+              };
+              for (const d of owningModule.declarations ?? [])
+                scopeNames.add(d);
+              for (const imp of owningModule.imports ?? [])
+                addExportsOf(imp, new Set());
+
+              for (const name of scopeNames) {
+                if (seenDeclarationNames.has(name)) continue;
+                const entry = registry.get(name);
+                if (
+                  !entry ||
+                  entry.kind === 'ngmodule' ||
+                  entry.kind === 'tuple'
+                )
+                  continue;
+                if (!importedNames.has(name)) {
+                  const spec = resolveSyntheticImportSpecifier(
+                    fileName,
+                    entry,
+                    importSpecifierByName.get(name),
+                  );
+                  if (spec) syntheticImports.set(name, spec);
+                }
+                const kind = entry.kind === 'pipe' ? 1 : 0;
+                const decl: CompileDeclaration = {
+                  type: new o.WrappedNodeExpr(name),
+                  selector: entry.selector || `_unresolved-${name}`,
+                  kind,
+                  ...(kind === 1 ? { name: entry.pipeName } : {}),
+                };
+                if (entry.inputs) {
+                  decl.inputs = Object.values(entry.inputs).map(
+                    (i) => i.bindingPropertyName,
+                  );
+                }
+                if (entry.outputs) {
+                  decl.outputs = Object.values(entry.outputs) as string[];
+                }
+                seenDeclarationNames.add(name);
+                declarations.push(decl);
+              }
+            }
+          }
+
           let templateContent = meta.template || '';
           if (!templateContent && meta.templateUrl) {
             try {
diff --git a/packages/vite-plugin-angular/src/lib/compiler/dts-reader.ts b/packages/vite-plugin-angular/src/lib/compiler/dts-reader.ts
@@ -39,6 +39,7 @@ export function scanDtsFile(code: string, fileName: string): RegistryEntry[] {
 export function scanPackageDts(
   packageName: string,
   basePath: string,
+  visited?: Set<string>,
 ): RegistryEntry[] {
   // Walk up from basePath to find the nearest node_modules containing the package.
   // This handles monorepos where node_modules is at the workspace root,
@@ -67,6 +68,11 @@ export function scanPackageDts(
 
   const dtsFiles = collectDtsFiles(searchDir);
   const entries: RegistryEntry[] = [];
+  // Packages re-exported by this package's NgModule declarations. A library
+  // NgModule can re-export another package's module (e.g. BrowserModule exports
+  // CommonModule), so those packages must be scanned too or their directives
+  // (NgIf, NgForOf, …) never reach the registry.
+  const referencedPackages = new Set<string>();
 
   for (const file of dtsFiles) {
     try {
@@ -79,11 +85,31 @@ export function scanPackageDts(
           packageName;
       }
       entries.push(...fileEntries);
+      // Only follow cross-package imports of declaration files that actually
+      // contain an NgModule — those are the ones whose exports can pull in
+      // another package's directives/pipes. This keeps the walk bounded.
+      if (visited && fileEntries.some((e) => e.kind === 'ngmodule')) {
+        for (const p of collectImportedPackages(code, file)) {
+          referencedPackages.add(p);
+        }
+      }
     } catch {
       // Skip unreadable files
     }
   }
 
+  if (visited) {
+    for (const p of referencedPackages) {
+      if (p === packageName || visited.has(p)) continue;
+      visited.add(p);
+      try {
+        entries.push(...scanPackageDts(p, basePath, visited));
+      } catch {
+        // Package may not have .d.ts or not be Angular
+      }
+    }
+  }
+
   return entries;
 }
 
@@ -328,6 +354,35 @@ export function collectRelativeReExports(
   return result;
 }
 
+/**
+ * Parse a source file with OXC and return every module specifier it imports or
+ * re-exports from (relative AND bare), including `import`, `export * from`, and
+ * `export { … } from`. Used to walk the transitive import graph at startup so
+ * the registry contains components/directives/pipes/modules from files not
+ * directly listed in tsconfig `files`/`include` (transitively-imported app
+ * sources) or behind wildcard `paths` (workspace libraries).
+ */
+export function collectAllImports(code: string, fileName: string): string[] {
+  let program: any;
+  try {
+    program = parseSync(fileName, code).program;
+  } catch {
+    return [];
+  }
+  const result: string[] = [];
+  for (const stmt of program.body || []) {
+    if (
+      stmt.type === 'ImportDeclaration' ||
+      stmt.type === 'ExportAllDeclaration' ||
+      stmt.type === 'ExportNamedDeclaration'
+    ) {
+      const specifier: string | undefined = stmt.source?.value;
+      if (specifier) result.push(specifier);
+    }
+  }
+  return result;
+}
+
 // ---------------------------------------------------------------------------
 // Internal helpers
 // ---------------------------------------------------------------------------
diff --git a/packages/vite-plugin-angular/src/lib/compiler/index.ts b/packages/vite-plugin-angular/src/lib/compiler/index.ts
@@ -10,6 +10,7 @@ export {
   scanPackageDts,
   collectImportedPackages,
   collectRelativeReExports,
+  collectAllImports,
 } from './dts-reader.js';
 export { jitTransform, type JitTransformResult } from './jit-transform.js';
 export { generateHmrCode } from './hmr.js';
diff --git a/packages/vite-plugin-angular/src/lib/compiler/ngmodule.spec.ts b/packages/vite-plugin-angular/src/lib/compiler/ngmodule.spec.ts
@@ -1,6 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import { compileCode as compile } from './test-helpers';
 import { expectCompiles, buildRegistry } from './test-helpers';
+import { ANGULAR_MAJOR } from './angular-version';
 
 describe('@NgModule', () => {
   it('compiles a basic NgModule', () => {
@@ -448,3 +449,166 @@ describe('Dependency list deduplication', () => {
     expect(countRefs(deps, 'SelfCmp')).toBe(1);
   });
 });
+
+describe('NgModule scope for declared (non-standalone) components', () => {
+  function depsArrayFor(result: string): string {
+    const m = result.match(/dependencies:\s*\(\)\s*=>\s*\[([\s\S]*?)\]/);
+    expect(
+      m,
+      'compiled output should contain a dependencies array',
+    ).not.toBeNull();
+    return m![1];
+  }
+
+  it("inlines the declaring module's own declarations and transitive imported-module exports into a non-standalone component", () => {
+    const componentSrc = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-panel',
+        standalone: false,
+        template: '<div highlight shared>x</div>',
+      })
+      export class PanelComponent {}
+    `;
+    const highlightSrc = `
+      import { Directive } from '@angular/core';
+      @Directive({ selector: '[highlight]', standalone: false })
+      export class HighlightDirective {}
+    `;
+    const sharedDirectiveSrc = `
+      import { Directive } from '@angular/core';
+      @Directive({ selector: '[shared]' })
+      export class SharedDirective {}
+    `;
+    const sharedModuleSrc = `
+      import { NgModule } from '@angular/core';
+      import { SharedDirective } from './shared.directive';
+      @NgModule({ declarations: [SharedDirective], exports: [SharedDirective] })
+      export class SharedModule {}
+    `;
+    const moduleSrc = `
+      import { NgModule } from '@angular/core';
+      import { PanelComponent } from './panel.component';
+      import { HighlightDirective } from './highlight.directive';
+      import { SharedModule } from './shared.module';
+      @NgModule({
+        declarations: [PanelComponent, HighlightDirective],
+        imports: [SharedModule],
+      })
+      export class PanelModule {}
+    `;
+
+    const registry = buildRegistry({
+      'panel.component.ts': componentSrc,
+      'highlight.directive.ts': highlightSrc,
+      'shared.directive.ts': sharedDirectiveSrc,
+      'shared.module.ts': sharedModuleSrc,
+      'panel.module.ts': moduleSrc,
+    });
+
+    const result = compile(componentSrc, 'panel.component.ts', registry);
+    expectCompiles(result);
+
+    const deps = depsArrayFor(result);
+    // sibling declaration from the owning module
+    expect(deps).toContain('HighlightDirective');
+    // directive re-exported by an imported module (transitive scope)
+    expect(deps).toContain('SharedDirective');
+    // every dependency resolved to a real selector, none left unresolved
+    expect(result).not.toContain('_unresolved-');
+  });
+
+  it('resolves ModuleWithProviders (forRoot) imports in declared-component scope', () => {
+    const widgetSrc = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-widget',
+        standalone: false,
+        template: '<i config></i>',
+      })
+      export class WidgetComponent {}
+    `;
+    const configDirectiveSrc = `
+      import { Directive } from '@angular/core';
+      @Directive({ selector: '[config]' })
+      export class ConfigDirective {}
+    `;
+    const configModuleSrc = `
+      import { NgModule, ModuleWithProviders } from '@angular/core';
+      import { ConfigDirective } from './config.directive';
+      @NgModule({ declarations: [ConfigDirective], exports: [ConfigDirective] })
+      export class ConfigModule {
+        static forRoot(): ModuleWithProviders<ConfigModule> {
+          return { ngModule: ConfigModule };
+        }
+      }
+    `;
+    const widgetModuleSrc = `
+      import { NgModule } from '@angular/core';
+      import { WidgetComponent } from './widget.component';
+      import { ConfigModule } from './config.module';
+      @NgModule({
+        declarations: [WidgetComponent],
+        imports: [ConfigModule.forRoot()],
+      })
+      export class WidgetModule {}
+    `;
+
+    const registry = buildRegistry({
+      'widget.component.ts': widgetSrc,
+      'config.directive.ts': configDirectiveSrc,
+      'config.module.ts': configModuleSrc,
+      'widget.module.ts': widgetModuleSrc,
+    });
+
+    const result = compile(widgetSrc, 'widget.component.ts', registry);
+    expectCompiles(result);
+
+    const deps = depsArrayFor(result);
+    // directive exported by the module imported via `ConfigModule.forRoot()`
+    expect(deps).toContain('ConfigDirective');
+    expect(result).not.toContain('_unresolved-');
+  });
+
+  it('treats a declared component that omits `standalone` per the Angular version', () => {
+    // Angular 19+ defaults `standalone` to true, so a component must set
+    // `standalone: false` to be NgModule-declared. On v17/v18 the flag is
+    // usually omitted (it defaulted to false), so the owning-module scope must
+    // still apply there. This asserts both sides of that version gate.
+    const componentSrc = `
+      import { Component } from '@angular/core';
+      @Component({ selector: 'app-bare', template: '<div sibling></div>' })
+      export class BareComponent {}
+    `;
+    const siblingSrc = `
+      import { Directive } from '@angular/core';
+      @Directive({ selector: '[sibling]' })
+      export class SiblingDirective {}
+    `;
+    const moduleSrc = `
+      import { NgModule } from '@angular/core';
+      import { BareComponent } from './bare.component';
+      import { SiblingDirective } from './sibling.directive';
+      @NgModule({ declarations: [BareComponent, SiblingDirective] })
+      export class BareModule {}
+    `;
+
+    const registry = buildRegistry({
+      'bare.component.ts': componentSrc,
+      'sibling.directive.ts': siblingSrc,
+      'bare.module.ts': moduleSrc,
+    });
+
+    const result = compile(componentSrc, 'bare.component.ts', registry);
+    expectCompiles(result);
+    const deps = depsArrayFor(result);
+
+    if (ANGULAR_MAJOR < 19) {
+      // pre-v19: omitted flag means non-standalone, so module scope applies
+      expect(deps).toContain('SiblingDirective');
+    } else {
+      // v19+: omitted flag means standalone, so no module scope is forced
+      expect(deps).not.toContain('SiblingDirective');
+    }
+  });
+});
diff --git a/packages/vite-plugin-angular/src/lib/compiler/registry.ts b/packages/vite-plugin-angular/src/lib/compiler/registry.ts
diff --git a/packages/vite-plugin-angular/src/lib/fast-compile-plugin.ts b/packages/vite-plugin-angular/src/lib/fast-compile-plugin.ts
