From 4c1bc50da28ba64e573dbc05b4164af1a06e2deb Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 16:36:27 +0800
Subject: [PATCH 01/54] perf(vite): skip the resource URL parse when no URL is
 spelled

transform() called extractComponentUrls for every file with an Angular
decorator, a second full Rust parse of the file. Most files (services,
pipes, inline-template components) never spell `templateUrl` or
`styleUrl`, so they are now compiled with empty resources directly.

The compiler still reads keys the way the parser does, so a component can
name a resource through an escaped key (`styleUrls`) or a computed
key folded from a same-file constant. On that path the compiler reports
COMPONENT_RESOURCE_NOT_FOUND, so any error on the fast path reruns the
file through resolveResources. Without URLs resolveResources returned the
same empty resources and touched no state, so output is unchanged.

JIT mode now skips resolveResources entirely: the Rust JIT transform
never reads resources (it emits `angular:jit:*` imports that jitPlugin
loads) and registers no components for HMR, so the reads and the owner
bookkeeping were unused.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../test/plugin-fast-paths.test.ts            | 269 ++++++++++++++++++
 napi/angular-compiler/vite-plugin/index.ts    |  44 ++-
 2 files changed, 310 insertions(+), 3 deletions(-)
 create mode 100644 napi/angular-compiler/test/plugin-fast-paths.test.ts

diff --git a/napi/angular-compiler/test/plugin-fast-paths.test.ts b/napi/angular-compiler/test/plugin-fast-paths.test.ts
new file mode 100644
index 000000000..700599c81
--- /dev/null
+++ b/napi/angular-compiler/test/plugin-fast-paths.test.ts
@@ -0,0 +1,269 @@
+/**
+ * Tests for the plugin's fast paths and HMR option parity.
+ *
+ * - `transform` skips the `extractComponentUrls` parse for a file that never
+ *   spells `templateUrl`/`styleUrl`, and still compiles a file that names a
+ *   resource through an escaped key.
+ * - JIT `transform` never reads external resources: its output imports them.
+ * - The `@ng/component` endpoint compiles with the decorator's
+ *   `preserveWhitespaces`, like the full transform.
+ * - One stylesheet edit is preprocessed once per HMR cycle, not once by
+ *   `handleHotUpdate`, once by the endpoint, and once by the next transform.
+ */
+import { mkdirSync, mkdtempSync, realpathSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+
+import type { HmrContext, ModuleNode, Plugin } from 'vite'
+import { normalizePath, resolveConfig } from 'vite'
+import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { angular } from '../vite-plugin/index.js'
+
+// Spy on the binding call and on Vite's preprocessor, keeping their real
+// behavior, so the tests can count how often the plugin reaches them.
+const spies = vi.hoisted(() => ({
+  extractComponentUrls: undefined as unknown as ReturnType<typeof vi.fn>,
+  preprocessCSS: undefined as unknown as ReturnType<typeof vi.fn>,
+}))
+
+vi.mock('#binding', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('#binding')>()
+  spies.extractComponentUrls = vi.fn(actual.extractComponentUrls)
+  return { ...actual, extractComponentUrls: spies.extractComponentUrls }
+})
+
+vi.mock('vite', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('vite')>()
+  spies.preprocessCSS = vi.fn(actual.preprocessCSS)
+  return { ...actual, preprocessCSS: spies.preprocessCSS }
+})
+
+let tempDir: string
+let appDir: string
+
+beforeAll(() => {
+  // realpath: Sass canonicalizes loaded URLs (macOS /var -> /private/var).
+  tempDir = realpathSync(mkdtempSync(join(tmpdir(), 'plugin-fast-paths-test-')))
+  appDir = join(tempDir, 'src', 'app')
+  mkdirSync(appDir, { recursive: true })
+})
+
+afterAll(() => {
+  rmSync(tempDir, { recursive: true, force: true })
+})
+
+beforeEach(() => {
+  spies.extractComponentUrls.mockClear()
+  spies.preprocessCSS.mockClear()
+})
+
+function getAngularPlugin(options: Parameters<typeof angular>[0] = { liveReload: true }) {
+  const plugin = angular(options).find((candidate) => candidate.name === '@oxc-angular/vite')
+  if (!plugin) throw new Error('Failed to find @oxc-angular/vite plugin')
+  return plugin
+}
+
+function createMockServer() {
+  const wsMessages: any[] = []
+  return {
+    watcher: { add: vi.fn(), unwatch: vi.fn(), on: vi.fn(), emit: vi.fn() },
+    ws: {
+      send(msg: any) {
+        wsMessages.push(msg)
+      },
+      on: vi.fn(),
+    },
+    moduleGraph: { getModuleById: vi.fn(() => null), invalidateModule: vi.fn() },
+    middlewares: { use: vi.fn() },
+    config: { root: tempDir },
+    _wsMessages: wsMessages,
+  }
+}
+
+async function callPluginHook(hook: any, ...args: unknown[]) {
+  if (!hook) return undefined
+  if (typeof hook === 'function') return hook(...args)
+  return hook.handler(...args)
+}
+
+/** Run the plugin through `config`/`configResolved`/`configureServer`. */
+async function setupPlugin(plugin: Plugin, command: 'serve' | 'build' = 'serve') {
+  const mockServer = createMockServer()
+  await callPluginHook(plugin.config, {}, { command, mode: 'development' })
+  // A real resolved config: preprocessCSS needs one to run Sass.
+  const resolved = await resolveConfig(
+    { configFile: false, root: tempDir, logLevel: 'silent' },
+    command,
+  )
+  await callPluginHook(plugin.configResolved, resolved)
+  if (command === 'serve' && typeof plugin.configureServer === 'function') {
+    await (plugin.configureServer as Function)(mockServer)
+  }
+  return mockServer
+}
+
+async function transform(plugin: Plugin, source: string, path: string) {
+  if (!plugin.transform || typeof plugin.transform === 'function') {
+    throw new Error('Expected plugin transform handler')
+  }
+  const errors: string[] = []
+  const warnings: string[] = []
+  const result = (await plugin.transform.handler.call(
+    {
+      error(message: string) {
+        errors.push(message)
+      },
+      warn(message: string) {
+        warnings.push(message)
+      },
+      addWatchFile() {},
+    } as any,
+    source,
+    path,
+  )) as { code: string } | undefined
+  return { code: result?.code ?? '', errors, warnings }
+}
+
+function hotUpdate(plugin: Plugin, file: string, server: any) {
+  const ctx = {
+    file: normalizePath(file),
+    timestamp: Date.now(),
+    modules: [{ id: normalizePath(file) }] as unknown as ModuleNode[],
+    read: async () => '',
+    server,
+  } as HmrContext
+  return (plugin.handleHotUpdate as Function).call(plugin, ctx)
+}
+
+async function requestUpdateModule(server: any, componentId: string): Promise<string> {
+  const middleware = (server.middlewares.use as ReturnType<typeof vi.fn>).mock.calls[0]?.[0]
+  expect(middleware, 'expected the @ng/component middleware').toBeDefined()
+  const req = { url: `/@ng/component?c=${encodeURIComponent(componentId)}&t=${Date.now()}` }
+  return new Promise<string>((resolve) => {
+    middleware(
+      req,
+      {
+        statusCode: 200,
+        setHeader() {},
+        end(data: string = '') {
+          resolve(data ?? '')
+        },
+      },
+      () => resolve(''),
+    )
+  })
+}
+
+function preprocessCallsFor(path: string): number {
+  return spies.preprocessCSS.mock.calls.filter(
+    ([, filename]) => normalizePath(filename as string) === normalizePath(path),
+  ).length
+}
+
+describe('transform skips the resource URL parse when no URL is spelled', () => {
+  it('does not call extractComponentUrls for an inline-only component', async () => {
+    const plugin = getAngularPlugin()
+    await setupPlugin(plugin, 'build')
+
+    const { code, errors } = await transform(
+      plugin,
+      `
+        import { Component } from '@angular/core';
+        @Component({
+          selector: 'app-inline',
+          template: '<p>inline</p>',
+          styles: ['p { color: red; }'],
+        })
+        export class InlineComponent {}
+      `,
+      join(appDir, 'inline.component.ts'),
+    )
+
+    expect(errors).toEqual([])
+    expect(code).toContain('ɵɵdefineComponent')
+    expect(spies.extractComponentUrls).not.toHaveBeenCalled()
+  })
+
+  it('still calls extractComponentUrls for a component with a templateUrl', async () => {
+    const plugin = getAngularPlugin()
+    await setupPlugin(plugin, 'build')
+    writeFileSync(join(appDir, 'url.component.html'), '<p>URL_TEMPLATE_MARKER</p>')
+
+    const { code, errors } = await transform(
+      plugin,
+      `
+        import { Component } from '@angular/core';
+        @Component({ selector: 'app-url', templateUrl: './url.component.html' })
+        export class UrlComponent {}
+      `,
+      join(appDir, 'url.component.ts'),
+    )
+
+    expect(errors).toEqual([])
+    expect(code).toContain('URL_TEMPLATE_MARKER')
+    expect(spies.extractComponentUrls).toHaveBeenCalledTimes(1)
+  })
+
+  it('resolves resources named only through escaped keys', async () => {
+    const plugin = getAngularPlugin()
+    await setupPlugin(plugin, 'build')
+    writeFileSync(join(appDir, 'escaped.component.html'), '<p>ESCAPED_TEMPLATE_MARKER</p>')
+    writeFileSync(join(appDir, 'escaped.component.css'), '.ESCAPED_STYLE_MARKER { color: red; }')
+
+    // `templateUrl` IS `templateUrl` to the parser and to the compiler,
+    // but the text holds neither name, so this takes the fast path first.
+    const { code, errors } = await transform(
+      plugin,
+      `
+        import { Component } from '@angular/core';
+        @Component({
+          selector: 'app-escaped',
+          template\\u0055rl: './escaped.component.html',
+          'style\\u0055rls': ['./escaped.component.css'],
+        })
+        export class EscapedComponent {}
+      `,
+      join(appDir, 'escaped.component.ts'),
+    )
+
+    expect(errors).toEqual([])
+    expect(code).toContain('ESCAPED_TEMPLATE_MARKER')
+    expect(code).toContain('ESCAPED_STYLE_MARKER')
+  })
+})
+
+describe('JIT transform', () => {
+  it('does not read or parse external resources', async () => {
+    const plugin = getAngularPlugin({ jit: true, liveReload: true })
+    const server = await setupPlugin(plugin)
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    try {
+      // Neither file exists: AOT would warn that it cannot read them, JIT
+      // only imports them.
+      const { code, errors } = await transform(
+        plugin,
+        `
+          import { Component } from '@angular/core';
+          @Component({
+            selector: 'app-jit',
+            templateUrl: './missing-jit.component.html',
+            styleUrl: './missing-jit.component.scss',
+          })
+          export class JitComponent {}
+        `,
+        join(appDir, 'jit.component.ts'),
+      )
+
+      expect(errors).toEqual([])
+      expect(code).toContain('angular:jit:template:file;./missing-jit.component.html')
+      expect(code).toContain('angular:jit:style:file;./missing-jit.component.scss')
+      expect(spies.extractComponentUrls).not.toHaveBeenCalled()
+      expect(warn).not.toHaveBeenCalled()
+      expect(server.watcher.add).not.toHaveBeenCalled()
+    } finally {
+      warn.mockRestore()
+    }
+  })
+})
diff --git a/napi/angular-compiler/vite-plugin/index.ts b/napi/angular-compiler/vite-plugin/index.ts
index 3dfb9a0e0..4d927e491 100644
--- a/napi/angular-compiler/vite-plugin/index.ts
+++ b/napi/angular-compiler/vite-plugin/index.ts
@@ -525,6 +525,17 @@ export function angular(options: PluginOptions = {}): Plugin[] {
     return { resources: { templates, styles } as unknown as ResolvedResources, dependencies }
   }
 
+  /**
+   * What `resolveResources` returns for a file with no external template or
+   * stylesheet.
+   */
+  function emptyResources(): { resources: ResolvedResources; dependencies: string[] } {
+    return {
+      resources: { templates: {}, styles: {} } as unknown as ResolvedResources,
+      dependencies: [],
+    }
+  }
+
   /**
    * Main Angular plugin for file transformation.
    */
@@ -959,8 +970,21 @@ export function angular(options: PluginOptions = {}): Plugin[] {
           // Apply file replacements
           const actualId = pluginOptions.fileReplacements?.[id] ?? id
 
-          // Resolve external resources
-          const { resources, dependencies } = await resolveResources(code, actualId)
+          // Resolve external resources. JIT output never reads them: the Rust
+          // JIT transform turns `templateUrl`/`styleUrl(s)` into
+          // `angular:jit:*` imports that `jitPlugin` loads, and it registers
+          // no components for HMR, so nothing downstream uses the reads or
+          // the bookkeeping below.
+          //
+          // Outside JIT, `extractComponentUrls` is a second full parse of the
+          // file. A file that never spells `templateUrl` or `styleUrl` almost
+          // never has one, so it is compiled with no resources first; the
+          // retry after the transform covers the rare file that does.
+          const mayHaveResourceUrls =
+            !pluginOptions.jit && (code.includes('templateUrl') || code.includes('styleUrl'))
+          let { resources, dependencies } = mayHaveResourceUrls
+            ? await resolveResources(code, actualId)
+            : emptyResources()
 
           // Disable HMR for SSR transforms. SSR bundles must not contain HMR
           // initialization code that dynamically imports @ng/component virtual
@@ -986,7 +1010,21 @@ export function angular(options: PluginOptions = {}): Plugin[] {
             tsconfigPath: pluginOptions.tsconfig,
           }
 
-          const result = await transformAngularFile(code, actualId, transformOptions, resources)
+          let result = await transformAngularFile(code, actualId, transformOptions, resources)
+
+          // The compiler reads a key the way the parser does, so a component
+          // can still name a resource without the plain text: an escaped key
+          // (`style\u0055rls`) or a computed key folded from a same-file
+          // constant. It then reports the URL as COMPONENT_RESOURCE_NOT_FOUND,
+          // since resources were passed but held none. Any error on the fast
+          // path therefore reruns the file through the full resolution, which
+          // makes the fast path give exactly the old result: with no URL in
+          // the file, `resolveResources` would have passed these same empty
+          // resources.
+          if (!pluginOptions.jit && !mayHaveResourceUrls && result.errors.length > 0) {
+            ;({ resources, dependencies } = await resolveResources(code, actualId))
+            result = await transformAngularFile(code, actualId, transformOptions, resources)
+          }
 
           // Resource deps (templates/styles) plus files the compiler read to
           // resolve imported decorator-metadata values (`result.dependencies`).

From 490d0cc6691dda3d664bbd214782b405c28b3e73 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 16:36:36 +0800
Subject: [PATCH 02/54] fix(vite): pass preserveWhitespaces to the HMR template
 compile

The @ng/component endpoint compiled the new template without the
decorator's `preserveWhitespaces`, so compileForHmrSync always stripped
whitespace. For a component with `preserveWhitespaces: true` the update
module then built a different view than the full transform (missing
padding and inter-element text nodes), and text shifted after every HMR.

The endpoint already has the class's extracted metadata; pass its
`preserveWhitespaces` like `encapsulation`. The other template options
compileForHmrSync reads (i18nUseExternalIds, advancedOptimizations,
legacyOptionalChaining) are not set by the full transform either, so both
use the same defaults.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../test/plugin-fast-paths.test.ts            | 50 +++++++++++++++++++
 napi/angular-compiler/vite-plugin/index.ts    |  5 ++
 2 files changed, 55 insertions(+)

diff --git a/napi/angular-compiler/test/plugin-fast-paths.test.ts b/napi/angular-compiler/test/plugin-fast-paths.test.ts
index 700599c81..0bf777466 100644
--- a/napi/angular-compiler/test/plugin-fast-paths.test.ts
+++ b/napi/angular-compiler/test/plugin-fast-paths.test.ts
@@ -267,3 +267,53 @@ describe('JIT transform', () => {
     }
   })
 })
+
+describe('@ng/component endpoint template options', () => {
+  const TEMPLATE = '<p>  a  </p>   <span>b</span>'
+
+  async function hmrModuleFor(preserveWhitespaces: boolean) {
+    const name = preserveWhitespaces ? 'ws-keep' : 'ws-strip'
+    const templatePath = join(appDir, `${name}.component.html`)
+    const componentPath = join(appDir, `${name}.component.ts`)
+    const source = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-${name}',
+        templateUrl: './${name}.component.html',
+        preserveWhitespaces: ${preserveWhitespaces},
+      })
+      export class WsComponent {}
+    `
+    writeFileSync(templatePath, TEMPLATE)
+    writeFileSync(componentPath, source)
+
+    const plugin = getAngularPlugin()
+    const server = await setupPlugin(plugin)
+    const { code } = await transform(plugin, source, componentPath)
+
+    await hotUpdate(plugin, templatePath, server)
+    const body = await requestUpdateModule(server, `${componentPath}@WsComponent`)
+    return { code, body }
+  }
+
+  it('keeps whitespace when the decorator sets preserveWhitespaces', async () => {
+    const { code, body } = await hmrModuleFor(true)
+
+    // The full transform keeps the padding and the text node between the
+    // elements; the update module must build the same view.
+    expect(code).toMatch(/ɵɵtext\(\d+,\s*["'] {2}a {2}["']\)/)
+    expect(code).toMatch(/ɵɵtext\(\d+,\s*["'] {3}["']\)/)
+    expect(body).not.toBe('')
+    expect(body).toMatch(/ɵɵtext\(\d+,\s*["'] {2}a {2}["']\)/)
+    expect(body).toMatch(/ɵɵtext\(\d+,\s*["'] {3}["']\)/)
+  })
+
+  it('strips whitespace when the decorator does not preserve it', async () => {
+    const { code, body } = await hmrModuleFor(false)
+
+    expect(code).not.toMatch(/ɵɵtext\(\d+,\s*["'] {3}["']\)/)
+    expect(body).not.toBe('')
+    expect(body).toMatch(/ɵɵtext\(\d+,\s*["'] a ["']\)/)
+    expect(body).not.toMatch(/ɵɵtext\(\d+,\s*["'] {3}["']\)/)
+  })
+})
diff --git a/napi/angular-compiler/vite-plugin/index.ts b/napi/angular-compiler/vite-plugin/index.ts
index 4d927e491..4459e7023 100644
--- a/napi/angular-compiler/vite-plugin/index.ts
+++ b/napi/angular-compiler/vite-plugin/index.ts
@@ -862,9 +862,14 @@ export function angular(options: PluginOptions = {}): Plugin[] {
                     ? merged
                     : null
 
+                // Same template options as the full transform, which reads
+                // `preserveWhitespaces` from the decorator: without it the
+                // update module strips whitespace the compiled component
+                // keeps, and text nodes shift after every HMR.
                 const result = compileForHmrSync(templateContent, className, resolvedId, styles, {
                   angularVersion: pluginOptions.angularVersion,
                   encapsulation: classMetadata.encapsulation,
+                  preserveWhitespaces: classMetadata.preserveWhitespaces,
                   minifyComponentStyles: getMinifyComponentStyles(),
                 })
 

From e340aa5523152aac3f3d136760f0b326b3d6606f Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 16:36:49 +0800
Subject: [PATCH 03/54] perf(vite): preprocess an edited stylesheet once per
 HMR cycle

One stylesheet edit went through preprocessCSS up to three times:
refreshStyleDeps in handleHotUpdate, the @ng/component endpoint, and the
next transform of the invalidated component.

Add one compileStyle() helper that all three use. It keeps the output
per stylesheet, tagged with the source text it was built from, so a
file that changed again in between is rebuilt (the endpoint still reads
from disk every time). Entries only live for one HMR cycle:
handleHotUpdate clears the map on entry, and a generation counter keeps
a compile from an earlier cycle from storing into the new one. The
output can depend on files outside the reported deps (Tailwind scans
templates), so a later template edit still rebuilds the styles the
endpoint serves, as before. Builds keep no entries; resourceCache
already serves their repeat reads.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../test/plugin-fast-paths.test.ts            | 77 +++++++++++++++++++
 napi/angular-compiler/vite-plugin/index.ts    | 66 ++++++++++++++--
 2 files changed, 135 insertions(+), 8 deletions(-)

diff --git a/napi/angular-compiler/test/plugin-fast-paths.test.ts b/napi/angular-compiler/test/plugin-fast-paths.test.ts
index 0bf777466..e038ababd 100644
--- a/napi/angular-compiler/test/plugin-fast-paths.test.ts
+++ b/napi/angular-compiler/test/plugin-fast-paths.test.ts
@@ -317,3 +317,80 @@ describe('@ng/component endpoint template options', () => {
     expect(body).not.toMatch(/ɵɵtext\(\d+,\s*["'] {3}["']\)/)
   })
 })
+
+describe('stylesheet preprocessing during HMR', () => {
+  const componentSource = (name: string) => `
+    import { Component } from '@angular/core';
+    @Component({
+      selector: 'app-${name}',
+      template: '<h1>Hello</h1>',
+      styleUrl: './${name}.component.scss',
+    })
+    export class StyledComponent {}
+  `
+
+  async function setupStyled(name: string) {
+    const stylePath = join(appDir, `${name}.component.scss`)
+    const componentPath = join(appDir, `${name}.component.ts`)
+    const source = componentSource(name)
+    writeFileSync(stylePath, `$c: red; h1 { color: $c; }`)
+    writeFileSync(componentPath, source)
+
+    const plugin = getAngularPlugin()
+    const server = await setupPlugin(plugin)
+    await transform(plugin, source, componentPath)
+    return { plugin, server, stylePath, componentPath, source }
+  }
+
+  it('preprocesses an edited stylesheet once per HMR cycle', async () => {
+    const { plugin, server, stylePath, componentPath, source } = await setupStyled('once')
+    expect(preprocessCallsFor(stylePath)).toBe(1)
+    spies.preprocessCSS.mockClear()
+
+    writeFileSync(stylePath, `$c: green; h1 { color: $c; }`)
+    await hotUpdate(plugin, stylePath, server)
+    const body = await requestUpdateModule(server, `${componentPath}@StyledComponent`)
+    // The component module was invalidated, so the next request re-runs it.
+    const { code } = await transform(plugin, source, componentPath)
+
+    expect(body).toContain('color: green')
+    expect(code).toContain('color: green')
+    expect(preprocessCallsFor(stylePath)).toBe(1)
+  })
+
+  it('serves the stylesheet as it is on disk when it changed after the cycle started', async () => {
+    const { plugin, server, stylePath, componentPath } = await setupStyled('fresh')
+
+    writeFileSync(stylePath, `$c: green; h1 { color: $c; }`)
+    await hotUpdate(plugin, stylePath, server)
+    // A second write lands before the browser asks for the update.
+    writeFileSync(stylePath, `$c: blue; h1 { color: $c; }`)
+    const body = await requestUpdateModule(server, `${componentPath}@StyledComponent`)
+
+    expect(body).toContain('color: blue')
+    expect(body).not.toContain('color: green')
+  })
+
+  it('rebuilds the styles in a later cycle even when the stylesheet is unchanged', async () => {
+    const { plugin, server, stylePath, componentPath } = await setupStyled('cycle')
+
+    writeFileSync(stylePath, `$c: green; h1 { color: $c; }`)
+    await hotUpdate(plugin, stylePath, server)
+    await requestUpdateModule(server, `${componentPath}@StyledComponent`)
+    spies.preprocessCSS.mockClear()
+
+    // A new file event (here the component's inline template) starts a new
+    // cycle: preprocessor output can depend on files outside its reported
+    // deps (Tailwind scans templates), so the styles are built again.
+    writeFileSync(
+      componentPath,
+      componentSource('cycle').replace('<h1>Hello</h1>', '<h1>Hello again</h1>'),
+    )
+    await hotUpdate(plugin, componentPath, server)
+    const body = await requestUpdateModule(server, `${componentPath}@StyledComponent`)
+
+    expect(body).toContain('Hello again')
+    expect(body).toContain('color: green')
+    expect(preprocessCallsFor(stylePath)).toBe(1)
+  })
+})
diff --git a/napi/angular-compiler/vite-plugin/index.ts b/napi/angular-compiler/vite-plugin/index.ts
index 4459e7023..53075a8ee 100644
--- a/napi/angular-compiler/vite-plugin/index.ts
+++ b/napi/angular-compiler/vite-plugin/index.ts
@@ -196,6 +196,13 @@ function markModuleSelfAccepting(mod: ModuleNode): void {
   }
 }
 
+/** A component stylesheet after `preprocessCSS`, with the source it came from. */
+type CompiledStyle = {
+  source: string
+  code: string
+  deps: string[] | undefined
+}
+
 type InlineBuildMinifyOptions = {
   cssMinify?: boolean | string
   minify?: boolean | string
@@ -365,6 +372,47 @@ export function angular(options: PluginOptions = {}): Plugin[] {
     }
   }
 
+  // `preprocessCSS` output for each component stylesheet (normalized path),
+  // tagged with the source text it was built from. Without it one stylesheet
+  // edit is preprocessed up to three times: by `refreshStyleDeps` in
+  // `handleHotUpdate`, by the `@ng/component` endpoint, and by the next
+  // `transform` of the component.
+  //
+  // An entry only lives for one HMR cycle: `handleHotUpdate` clears the map
+  // as it starts. The output can depend on files that are not in the
+  // reported `deps` (Tailwind scans templates for class names), so a later
+  // template edit must still rebuild the styles the endpoint serves, as it
+  // always has.
+  const compiledStyles = new Map<string, CompiledStyle>()
+  // Bumped with every clear, so a compile that started in an earlier cycle
+  // cannot store its (possibly stale) output in the new one.
+  let styleCycle = 0
+
+  function startStyleCycle(): void {
+    styleCycle++
+    compiledStyles.clear()
+  }
+
+  // Preprocess a component stylesheet (SCSS, Less, PostCSS, ...), reusing the
+  // output built earlier in this HMR cycle from the same source text. Throws
+  // what `preprocessCSS` throws; failures are not cached.
+  async function compileStyle(stylePath: string, source: string): Promise<CompiledStyle> {
+    const key = normalizePath(stylePath)
+    const cached = compiledStyles.get(key)
+    if (cached && cached.source === source) return cached
+    const cycle = styleCycle
+    const processed = await preprocessCSS(source, stylePath, resolvedConfig as any)
+    const compiled: CompiledStyle = {
+      source,
+      code: processed.code,
+      deps: processed.deps ? Array.from(processed.deps) : undefined,
+    }
+    // Builds never start a cycle and `resourceCache` already serves their
+    // repeat reads, so only the dev server keeps entries.
+    if (watchMode && cycle === styleCycle) compiledStyles.set(key, compiled)
+    return compiled
+  }
+
   // Re-read and re-preprocess a style file so its dependency registration in
   // `styleDepsCache`/`styleDepOwners` reflects the current `@use`/`@import`
   // set. Without this, a partial added or switched via HMR would never be
@@ -382,7 +430,7 @@ export function angular(options: PluginOptions = {}): Plugin[] {
     }
     if (!content.trim()) return
     try {
-      const processed = await preprocessCSS(content, stylePath, resolvedConfig as any)
+      const processed = await compileStyle(stylePath, content)
       registerStyleDeps(stylePath, processed.deps)
       // A style edited via HMR can pick up new deps (possibly outside the
       // dev-server root); register them with the watcher so their edits reach
@@ -494,7 +542,7 @@ export function angular(options: PluginOptions = {}): Plugin[] {
           // Preprocess styles (SCSS, Less, etc.)
           if (resolvedConfig) {
             try {
-              const processed = await preprocessCSS(content, stylePath, resolvedConfig as any)
+              const processed = await compileStyle(stylePath, content)
               content = processed.code
               registerStyleDeps(stylePath, processed.deps)
             } catch (e) {
@@ -755,12 +803,10 @@ export function angular(options: PluginOptions = {}): Plugin[] {
                     try {
                       let styleContent = await readFile(stylePath, 'utf-8')
                       if (resolvedConfig) {
-                        const processed = await preprocessCSS(
-                          styleContent,
-                          stylePath,
-                          resolvedConfig as any,
-                        )
-                        styleContent = processed.code
+                        // Read from disk every time; only the preprocessing
+                        // is shared, and only for unchanged text built in
+                        // this HMR cycle (see `compileStyle`).
+                        styleContent = (await compileStyle(stylePath, styleContent)).code
                       }
                       contents.push(styleContent)
                     } catch {
@@ -1195,6 +1241,10 @@ export function angular(options: PluginOptions = {}): Plugin[] {
         },
       },
       async handleHotUpdate(ctx) {
+        // Every file event starts a new HMR cycle for compiled styles, before
+        // anything below can preprocess one (see `compiledStyles`).
+        startStyleCycle()
+
         if (!pluginOptions.liveReload) return
 
         debugHmr('handleHotUpdate file=%s', ctx.file)

From f64f27f3168fe905e913d05b64acc47846102f93 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 16:36:55 +0800
Subject: [PATCH 04/54] chore(vite): remove the unused styles plugin

`@oxc-angular/vite-styles` only transformed module ids carrying an
`ngcomp` query, and nothing creates such ids: neither the plugin, the
binding, nor the compiler emit `?ngcomp=`. HMR styles are encapsulated
inside compileForHmrSync. Drop the plugin and its encapsulateStyle
import; the binding export itself stays.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 napi/angular-compiler/vite-plugin/index.ts | 34 ----------------------
 1 file changed, 34 deletions(-)

diff --git a/napi/angular-compiler/vite-plugin/index.ts b/napi/angular-compiler/vite-plugin/index.ts
index 53075a8ee..b02cf3967 100644
--- a/napi/angular-compiler/vite-plugin/index.ts
+++ b/napi/angular-compiler/vite-plugin/index.ts
@@ -25,7 +25,6 @@ import {
   transformAngularFile,
   extractComponentMetadataSync,
   extractComponentUrls,
-  encapsulateStyle,
   compileForHmrSync,
   type TransformOptions,
   type ResolvedResources,
@@ -1537,9 +1536,6 @@ export function angular(options: PluginOptions = {}): Plugin[] {
     }
   }
 
-  /**
-   * Plugin to encapsulate component styles.
-   */
   /**
    * Augment library `.d.ts` files with Angular's Ivy type declarations.
    *
@@ -1606,38 +1602,8 @@ export function angular(options: PluginOptions = {}): Plugin[] {
     }
   }
 
-  function stylesPlugin(): Plugin {
-    return {
-      name: '@oxc-angular/vite-styles',
-      transform: {
-        filter: {
-          id: /ngcomp/,
-        },
-        handler(code, id) {
-          if (!pluginOptions.liveReload) return
-
-          const params = new URL(id, 'http://localhost').searchParams
-          const componentId = params.get('ngcomp')
-          const encapsulation = params.get('e')
-
-          // Only encapsulate for emulated encapsulation (e=0)
-          if (encapsulation === '0' && componentId) {
-            const encapsulated = encapsulateStyle(code, componentId)
-            return {
-              code: encapsulated,
-              map: null,
-            }
-          }
-
-          return undefined
-        },
-      },
-    }
-  }
-
   return [
     angularPlugin(),
-    stylesPlugin(),
     dtsPlugin(),
     angularLinkerPlugin({ angularVersion: pluginOptions.angularVersion }),
     pluginOptions.jit &&

From 23d2874360e9b73cb691417c9b7d6bcc4c648d77 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 16:49:23 +0800
Subject: [PATCH 05/54] fix(i18n): port parseI18nMeta 1:1 so i18n metadata is
 trimmed once

Angular's `parseI18nMeta` trims the whole `i18n` / `i18n-*` value once and
then splits it on `@@` and `|` without trimming the parts. We trimmed the
meaning and description separately, so `i18n="  m | d  "` gave meaning `m`
and description `d` where ngtsc gives `m ` and ` d`. These strings are
emitted in `$localize` (`:m | d:`) and JSDoc and feed the message id, so
the output differed from ngtsc.

Add `parse_i18n_meta`, a direct port: trim with `String.prototype.trim`
semantics, find `|` in the whole value (so a `|` after `@@` leaves the
description empty, as in Angular), and use it both for the message factory
input and for the r3 i18n metadata, replacing a second ad-hoc parser.

Pinned by unit tests, an integration test with ngtsc 22.2.2 output, and the
`i18n-meta-untrimmed-parts` compare fixture.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/transform/html_to_r3.rs               | 106 ++++++++++++------
 .../tests/integration_test.rs                 |  18 +++
 .../regressions/i18n-meta-trim.fixture.ts     |  35 ++++++
 3 files changed, 126 insertions(+), 33 deletions(-)
 create mode 100644 napi/angular-compiler/e2e/compare/fixtures/regressions/i18n-meta-trim.fixture.ts

diff --git a/crates/oxc_angular_compiler/src/transform/html_to_r3.rs b/crates/oxc_angular_compiler/src/transform/html_to_r3.rs
index c5437fbe9..e8ef492ae 100644
--- a/crates/oxc_angular_compiler/src/transform/html_to_r3.rs
+++ b/crates/oxc_angular_compiler/src/transform/html_to_r3.rs
@@ -497,30 +497,14 @@ impl<'a> HtmlToR3Transform<'a> {
                     self.source_text,
                     "<template>",
                 ));
-                let meaning = if attr.value.contains('|') {
-                    Some(attr.value.split('|').next().unwrap_or("").trim())
-                } else {
-                    None
-                };
-                let description = if attr.value.contains('|') {
-                    attr.value.split('|').nth(1).map(|s| {
-                        if let Some(pos) = s.find("@@") { s[..pos].trim() } else { s.trim() }
-                    })
-                } else if let Some(pos) = attr.value.find("@@") {
-                    Some(attr.value[..pos].trim())
-                } else if !attr.value.is_empty() {
-                    Some(attr.value.as_str())
-                } else {
-                    None
-                };
-                let custom_id = attr.value.find("@@").map(|pos| &attr.value.as_str()[pos + 2..]);
+                let meta = parse_i18n_meta(attr.value.as_str());
 
                 let message = factory.create_message(
                     &element.children,
                     Some(self.element_i18n_name(&resolved_name, host_tag.as_deref())),
-                    meaning,
-                    description,
-                    custom_id,
+                    Some(meta.meaning),
+                    Some(meta.description),
+                    Some(meta.custom_id),
                     None,
                     source_file,
                 );
@@ -5133,6 +5117,13 @@ fn collect_placeholder_names(
     }
 }
 
+/// The meaning, description and custom id of an `i18n` attribute value.
+struct ParsedI18nMeta<'s> {
+    meaning: &'s str,
+    description: &'s str,
+    custom_id: &'s str,
+}
+
 /// Parses i18n metadata from an attribute value.
 ///
 /// Format: `meaning|description@@customId`
@@ -5142,6 +5133,36 @@ fn collect_placeholder_names(
 /// - `"Click to save"` -> description: "Click to save"
 /// - `"@@SAVE_BTN"` -> customId: "SAVE_BTN"
 ///
+/// Ported from Angular's `parseI18nMeta` in `render3/view/i18n/meta.ts`: the value is trimmed
+/// once and the parts are not, so `"  m | d  "` has meaning `"m "` and description `" d"`.
+/// The parts are emitted in `$localize` and JSDoc and the meaning feeds the message id, so
+/// they must match exactly. Like Angular, the `|` is searched in the whole value, and a `|`
+/// after `@@` leaves the description empty.
+fn parse_i18n_meta(meta: &str) -> ParsedI18nMeta<'_> {
+    // `String.prototype.trim`: Unicode white space and line terminators, plus U+FEFF but not
+    // U+0085.
+    let meta = meta.trim_matches(|c: char| (c.is_whitespace() && c != '\u{85}') || c == '\u{FEFF}');
+    if meta.is_empty() {
+        return ParsedI18nMeta { meaning: "", description: "", custom_id: "" };
+    }
+    let desc_index = meta.find('|');
+    let (meaning_and_desc, custom_id) = match meta.find("@@") {
+        Some(id_index) => (&meta[..id_index], &meta[id_index + 2..]),
+        None => (meta, ""),
+    };
+    // `String.prototype.slice` clamps out-of-range indices.
+    let (meaning, description) = match desc_index {
+        Some(desc_index) => (
+            meaning_and_desc.get(..desc_index).unwrap_or(meaning_and_desc),
+            meaning_and_desc.get(desc_index + 1..).unwrap_or(""),
+        ),
+        None => ("", meaning_and_desc),
+    };
+    ParsedI18nMeta { meaning, description, custom_id }
+}
+
+/// Builds the i18n message metadata of an `i18n` / `i18n-*` attribute value.
+///
 /// The `message_string` parameter should contain the serialized i18n message text with
 /// placeholders like `"Your balance is {$interpolation}"`. This is generated by the
 /// `I18nMessageFactory` from the element's children.
@@ -5151,19 +5172,7 @@ fn parse_i18n_meta_with_message<'a>(
     instance_id: u32,
     message_string: &str,
 ) -> I18nMeta<'a> {
-    // Split on @@ first to get the custom ID
-    let (before_id, custom_id) = if let Some(pos) = value.find("@@") {
-        (&value[..pos], &value[pos + 2..])
-    } else {
-        (value, "")
-    };
-
-    // Split the remaining part on | to get meaning and description
-    let (meaning, description) = if let Some(pipe_pos) = before_id.find('|') {
-        (before_id[..pipe_pos].trim(), before_id[pipe_pos + 1..].trim())
-    } else {
-        ("", before_id.trim())
-    };
+    let ParsedI18nMeta { meaning, description, custom_id } = parse_i18n_meta(value);
 
     I18nMeta::Message(I18nMessage {
         instance_id,
@@ -5657,3 +5666,34 @@ mod security_tests {
         }
     }
 }
+
+#[cfg(test)]
+mod template_parser_tests {
+    use super::*;
+
+    fn meta(value: &str) -> (&str, &str, &str) {
+        let ParsedI18nMeta { meaning, description, custom_id } = parse_i18n_meta(value);
+        (meaning, description, custom_id)
+    }
+
+    #[test]
+    fn i18n_meta_trims_the_value_once() {
+        // Angular's `parseI18nMeta` trims the whole value and leaves the parts as they are.
+        assert_eq!(meta("  m | d  "), ("m ", " d", ""));
+        assert_eq!(meta("  only description  "), ("", "only description", ""));
+        assert_eq!(meta(" m | d @@ custom "), ("m ", " d ", " custom"));
+        assert_eq!(meta("@@id"), ("", "", "id"));
+        assert_eq!(meta("   "), ("", "", ""));
+        // `String.prototype.trim` strips U+FEFF but not U+0085.
+        assert_eq!(meta("\u{FEFF}d\u{FEFF}"), ("", "d", ""));
+        assert_eq!(meta("\u{85}d\u{85}"), ("", "\u{85}d\u{85}", ""));
+    }
+
+    #[test]
+    fn i18n_meta_finds_the_pipe_in_the_whole_value() {
+        // The `|` index comes from the whole value, so a `|` after `@@` slices past the end
+        // of the meaning-and-description part: meaning is all of it, description is empty.
+        assert_eq!(meta("d@@id|x"), ("d", "", "id|x"));
+        assert_eq!(meta("m|d@@id|x"), ("m", "d", "id|x"));
+    }
+}
diff --git a/crates/oxc_angular_compiler/tests/integration_test.rs b/crates/oxc_angular_compiler/tests/integration_test.rs
index e3ae0b37b..9f2faacbb 100644
--- a/crates/oxc_angular_compiler/tests/integration_test.rs
+++ b/crates/oxc_angular_compiler/tests/integration_test.rs
@@ -5650,6 +5650,24 @@ fn assert_contains(haystack: &str, needle: &str) {
     assert!(haystack.contains(needle), "Expected to find:\n{needle}\nin:\n{haystack}");
 }
 
+/// `i18n` metadata is trimmed once, as in Angular's `parseI18nMeta`, so the meaning and
+/// description keep their inner spaces. Angular 22.2.2 gives `<p i18n="  m | d  ">` meaning
+/// `"m "` and description `" d"`, and with a custom id `" m | d @@ custom "` keeps the space
+/// before the id:
+///   /** @desc  d @meaning m  */ ... $localize `:m | d:Hello`
+///   MSG_EXTERNAL__custom$$ ... $localize `:m | d @@ custom:Custom`
+#[test]
+fn test_i18n_meta_is_trimmed_once() {
+    let js = compile_i18n_component(
+        r#"<p i18n="  m | d  ">Hello</p><img i18n-alt="  m | d  " alt="Logo" /><p i18n=" m | d @@ custom ">Custom</p>"#,
+    );
+    assert_contains(&js, "/** @desc  d @meaning m  */");
+    assert_contains(&js, r#"__tpl([":m | d:Hello"], [":m | d:Hello"])"#);
+    assert_contains(&js, r#"__tpl([":m | d:Logo"], [":m | d:Logo"])"#);
+    assert_contains(&js, "/** @desc  d  @meaning m  */const MSG_EXTERNAL__custom$$");
+    assert_contains(&js, r#"__tpl([":m | d @@ custom:Custom"], [":m | d @@ custom:Custom"])"#);
+}
+
 /// An `i18n-<attr>` message takes the attribute's own value as its text.
 /// Expected output taken from Angular 22.1.5 `ngc`:
 ///   goog.getMsg("Close") / $localize `:@@close:Close`
diff --git a/napi/angular-compiler/e2e/compare/fixtures/regressions/i18n-meta-trim.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/regressions/i18n-meta-trim.fixture.ts
new file mode 100644
index 000000000..276063a98
--- /dev/null
+++ b/napi/angular-compiler/e2e/compare/fixtures/regressions/i18n-meta-trim.fixture.ts
@@ -0,0 +1,35 @@
+/**
+ * Regression: `i18n` metadata trimming.
+ *
+ * Issue: the `i18n` metadata parser trimmed the meaning and description
+ * separately; Angular's `parseI18nMeta` trims the whole value once, so the
+ * parts keep their inner spaces in `$localize` and JSDoc.
+ */
+import type { Fixture } from '../types.js'
+
+export const fixtures: Fixture[] = [
+  {
+    name: 'i18n-meta-untrimmed-parts',
+    category: 'regressions',
+    description: 'i18n meaning and description keep inner spaces after the value is trimmed',
+    className: 'I18nMetaUntrimmedPartsComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-i18n-meta-untrimmed-parts',
+  standalone: true,
+  template: \`
+      <p i18n="  m | d  ">Hello</p>
+      <p i18n="  only description  ">World</p>
+      <p i18n=" m | d @@ custom ">Custom</p>
+      <p i18n="d@@id|x">Pipe after id</p>
+      <img i18n-alt="  m | d  " alt="Logo" />
+    \`,
+})
+export class I18nMetaUntrimmedPartsComponent {}
+    `.trim(),
+    expectedFeatures: ['ɵɵi18n', 'ɵɵi18nAttributes'],
+  },
+]

From 601dcc99c6ea523fa2d451b9e39eb982acc7587f Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 16:51:30 +0800
Subject: [PATCH 06/54] fix(template): always run the interpolation parser, as
 Angular does
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`has_interpolation` pre-scanned text and attribute values and only ran the
interpolation parser when the first `{{` came before the first `}}`. Angular's
BindingParser always runs `parseInterpolation` and keeps the value static when
it finds no expression, so values such as `title="}} {{a}}"` or
`<p>&#125;&#125; {{a}}</p>` stayed static here but are bound by ngtsc
(`ɵɵinterpolate1("}} ", ctx.a)`).

Remove the pre-scan for text nodes, attribute values and ICU placeholders.
Attribute parsing is split from building the bound attribute so the
`i18n-*` metadata is only taken when the value really binds. The i18n
container of bound text is now built only for text that binds.

Also report Angular's `splitInterpolation` error "Blank expressions are not
allowed in interpolated strings at column N in [input]" for `{{ }}`, in both
the plain and the entity-token paths; ngtsc reports it at this point too.

Pinned by unit tests and three `interpolation-after-closing-braces-*`
compare fixtures checked against ngtsc 22.2.2.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/parser/expression/parser.rs           |  16 ++
 .../src/transform/html_to_r3.rs               | 262 ++++++++++++------
 .../template-parser-interpolation.fixture.ts  |  80 ++++++
 3 files changed, 274 insertions(+), 84 deletions(-)
 create mode 100644 napi/angular-compiler/e2e/compare/fixtures/regressions/template-parser-interpolation.fixture.ts

diff --git a/crates/oxc_angular_compiler/src/parser/expression/parser.rs b/crates/oxc_angular_compiler/src/parser/expression/parser.rs
index 52cd9d8d2..668fe7b5c 100644
--- a/crates/oxc_angular_compiler/src/parser/expression/parser.rs
+++ b/crates/oxc_angular_compiler/src/parser/expression/parser.rs
@@ -23,6 +23,14 @@ use crate::util::ParseError;
 use super::TemplateBindingParseResult;
 use super::lexer::{Lexer, Token};
 
+/// Angular's error for an interpolation with a blank expression (`{{ }}`), raised by
+/// `splitInterpolation`; `column` is the offset of the `{{` in `input`.
+pub fn blank_interpolation_error(column: usize, input: &str) -> String {
+    format!(
+        "Blank expressions are not allowed in interpolated strings at column {column} in [{input}]"
+    )
+}
+
 /// Helper to capitalize the first character of a string.
 fn capitalize_first(s: &str) -> String {
     let mut chars = s.chars();
@@ -999,6 +1007,14 @@ impl<'a> Parser<'a> {
                     strings.push(Ident::from_in(text, &self.allocator));
 
                     let expr_text = &self.source[expr_start..expr_start + end_idx];
+                    // Angular's `splitInterpolation` reports `{{ }}` and still parses it
+                    // (to an empty expression).
+                    if expr_text.trim().is_empty() {
+                        self.errors.push(ParseError::new(
+                            Default::default(),
+                            blank_interpolation_error(abs_start, self.source),
+                        ));
+                    }
 
                     // Parse the expression
                     let expr_parser = Parser::with_offset(
diff --git a/crates/oxc_angular_compiler/src/transform/html_to_r3.rs b/crates/oxc_angular_compiler/src/transform/html_to_r3.rs
index e8ef492ae..7613bd19a 100644
--- a/crates/oxc_angular_compiler/src/transform/html_to_r3.rs
+++ b/crates/oxc_angular_compiler/src/transform/html_to_r3.rs
@@ -28,7 +28,7 @@ use crate::ast::r3::{
 };
 use crate::i18n::parser::I18nMessageFactory;
 use crate::i18n::placeholder::PlaceholderRegistry;
-use crate::parser::expression::{BindingParser, find_comment_start};
+use crate::parser::expression::{BindingParser, blank_interpolation_error, find_comment_start};
 use crate::parser::html::{decode_entities_in_string, get_html_tag_definition, split_ns_name};
 use crate::schema::{
     element_security_context_for, is_known_element, is_trusted_types_sink_at,
@@ -1509,17 +1509,9 @@ impl<'a> HtmlToR3Transform<'a> {
             let span =
                 Span::new(placeholder.source_span.start.offset, placeholder.source_span.end.offset);
             let text = self.allocator.alloc_str(&placeholder.text);
-            let value = if self.has_interpolation(text) {
-                self.parse_interpolation(text, span).map(|value| {
-                    R3IcuPlaceholder::BoundText(R3BoundText {
-                        value,
-                        source_span: span,
-                        i18n: None,
-                    })
-                })
-            } else {
-                None
-            };
+            let value = self.parse_interpolation(text, span).map(|value| {
+                R3IcuPlaceholder::BoundText(R3BoundText { value, source_span: span, i18n: None })
+            });
             let value = value.unwrap_or_else(|| {
                 R3IcuPlaceholder::Text(R3Text { value: Ident::from(text), source_span: span })
             });
@@ -1698,8 +1690,9 @@ impl<'a> HtmlToR3Transform<'a> {
         let value_str = text.value.as_str();
         let has_ngsp = value_str.contains(NGSP_UNICODE);
 
-        // Check if text contains interpolation (only when not in ngNonBindable context)
-        if self.non_bindable_depth == 0 && self.has_interpolation(value_str) {
+        // Like Angular's `_visitTextWithInterpolation`, always run the interpolation parser
+        // (outside ngNonBindable) and keep the text static when it finds no interpolation.
+        if self.non_bindable_depth == 0 {
             // Check if there are HTML entities that could affect span calculations.
             // If so, use the tokens which have correct source spans.
             let has_entities = text
@@ -1707,43 +1700,42 @@ impl<'a> HtmlToR3Transform<'a> {
                 .iter()
                 .any(|t| matches!(t.token_type, InterpolatedTokenType::EncodedEntity));
 
-            // Create i18n metadata for bound text when inside an i18n block.
-            // This creates a Container with Text and Placeholder nodes that match
-            // the structure expected by the ingest phase.
-            // Ported from Angular's r3_template_transform.ts I18nMetaVisitor.visitText
-            let i18n_meta = if self.i18n_depth > 0 {
-                let processed_text = if has_ngsp {
-                    value_str.replace(NGSP_UNICODE, " ")
-                } else {
-                    value_str.to_string()
-                };
-                Some(self.create_i18n_meta_for_text_with_interpolation(&processed_text, text.span))
-            } else {
-                None
-            };
-
-            if has_entities {
+            let expr = if has_entities {
                 // Use tokens to parse interpolations with correct source spans
-                if let Some(expr) = self.parse_interpolation_from_tokens(text) {
-                    let bound_text =
-                        R3BoundText { value: expr, source_span: text.span, i18n: i18n_meta };
-                    return Some(R3Node::BoundText(Box::new_in(bound_text, &self.allocator)));
-                }
+                self.parse_interpolation_from_tokens(text)
             } else {
                 // No entities - use the simple path with decoded text
                 let interpolation_text = if has_ngsp {
                     let replaced = value_str.replace(NGSP_UNICODE, " ");
                     self.allocator.alloc_str(&replaced)
                 } else {
-                    self.allocator.alloc_str(value_str)
+                    value_str
                 };
+                self.parse_interpolation(interpolation_text, text.span)
+            };
 
-                // Create bound text with interpolation expression
-                if let Some(expr) = self.parse_interpolation(interpolation_text, text.span) {
-                    let bound_text =
-                        R3BoundText { value: expr, source_span: text.span, i18n: i18n_meta };
-                    return Some(R3Node::BoundText(Box::new_in(bound_text, &self.allocator)));
-                }
+            if let Some(expr) = expr {
+                // Create i18n metadata for bound text when inside an i18n block.
+                // This creates a Container with Text and Placeholder nodes that match
+                // the structure expected by the ingest phase.
+                // Ported from Angular's r3_template_transform.ts I18nMetaVisitor.visitText
+                let i18n_meta =
+                    if self.i18n_depth > 0 {
+                        let processed_text = if has_ngsp {
+                            value_str.replace(NGSP_UNICODE, " ")
+                        } else {
+                            value_str.to_string()
+                        };
+                        Some(self.create_i18n_meta_for_text_with_interpolation(
+                            &processed_text,
+                            text.span,
+                        ))
+                    } else {
+                        None
+                    };
+                let bound_text =
+                    R3BoundText { value: expr, source_span: text.span, i18n: i18n_meta };
+                return Some(R3Node::BoundText(Box::new_in(bound_text, &self.allocator)));
             }
         }
 
@@ -3435,17 +3427,20 @@ impl<'a> HtmlToR3Transform<'a> {
             // NOTE: animate.* without brackets is a TextAttribute, NOT a BoundAttribute.
             // Only [animate.xxx] or (animate.xxx) are special bindings.
 
-            // Check for interpolation in attribute value - convert to BoundAttribute
+            // An attribute value with interpolation becomes a BoundAttribute (Angular's
+            // `parsePropertyInterpolation`); without one it stays a text attribute.
             // Note: name is already normalized at the start of the loop
-            if self.has_interpolation(attr.value.as_str()) {
+            if let Some(expr) = self.parse_attribute_interpolation(attr) {
                 // Look up i18n metadata for this attribute (e.g., i18n-title for title="{{ name }}")
                 let i18n = i18n_attrs_meta.remove(name);
-                if let Some(bound_attr) =
-                    self.create_interpolated_bound_attribute(element_name, name, attr, i18n)
-                {
-                    inputs.push(bound_attr);
-                    continue;
-                }
+                inputs.push(self.create_interpolated_bound_attribute(
+                    element_name,
+                    name,
+                    attr,
+                    expr,
+                    i18n,
+                ));
+                continue;
             }
 
             // Static attribute - look up i18n metadata
@@ -4577,18 +4572,6 @@ impl<'a> HtmlToR3Transform<'a> {
         }
     }
 
-    /// Checks if text contains interpolation.
-    /// Ensures that `{{` appears before `}}` in the string.
-    fn has_interpolation(&self, text: &str) -> bool {
-        if let Some(open_pos) = text.find("{{")
-            && let Some(close_pos) = text.find("}}")
-        {
-            // Ensure the opening delimiter comes before the closing delimiter
-            return open_pos < close_pos;
-        }
-        false
-    }
-
     /// Creates i18n metadata (Container with Text and Placeholder nodes) for text with interpolation.
     /// This is used when bound text appears inside an i18n block.
     ///
@@ -4687,6 +4670,8 @@ impl<'a> HtmlToR3Transform<'a> {
         use crate::ast::expression::Interpolation;
         use crate::parser::html::NGSP_UNICODE;
 
+        let input = text.value.as_str();
+
         let mut strings = Vec::new_in(&self.allocator);
         let mut expressions = Vec::new_in(&self.allocator);
 
@@ -4695,6 +4680,8 @@ impl<'a> HtmlToR3Transform<'a> {
         // and strings.len() == expressions.len() + 1 after processing interpolation.
         // This ensures the final result has strings.len() == expressions.len() + 1.
         let mut current_string = String::new();
+        // Length of the decoded input before `current_string`, for error columns.
+        let mut committed_len = 0;
 
         for token in &text.tokens {
             match token.token_type {
@@ -4712,15 +4699,16 @@ impl<'a> HtmlToR3Transform<'a> {
                 InterpolatedTokenType::Interpolation => {
                     // Interpolation token has parts = [startMarker, expression, endMarker]
                     if token.parts.len() >= 3 {
+                        let start_marker = &token.parts[0];
+                        let expr_content = &token.parts[1];
+                        let end_marker = &token.parts[2];
+                        let column = committed_len + current_string.len();
+
                         // Before adding an expression, commit the current string buffer
                         // (even if empty, we need a string before each expression)
                         strings.push(Ident::from_in(current_string.as_str(), &self.allocator));
                         current_string.clear();
 
-                        let start_marker = &token.parts[0];
-                        let expr_content = &token.parts[1];
-                        let end_marker = &token.parts[2];
-
                         // Calculate the expression span from the token span
                         // Token span covers the whole interpolation: {{expr}}
                         // Expression span is token.span.start + start_marker.len() to
@@ -4733,6 +4721,15 @@ impl<'a> HtmlToR3Transform<'a> {
                         // expressions. This matches Angular's behavior where entities like
                         // &times; inside string literals in interpolations are decoded.
                         let decoded_expr = decode_entities_in_string(expr_content.as_str());
+                        committed_len =
+                            column + start_marker.len() + decoded_expr.len() + end_marker.len();
+                        // Angular's `splitInterpolation` reports `{{ }}` and still parses it.
+                        if decoded_expr.trim().is_empty() {
+                            self.report_error(
+                                &blank_interpolation_error(column, input),
+                                token.span,
+                            );
+                        }
                         let expr_str = self.allocator.alloc_str(&decoded_expr);
                         let parse_result = self.binding_parser.parse_binding(expr_str, expr_span);
 
@@ -4778,6 +4775,7 @@ impl<'a> HtmlToR3Transform<'a> {
         use crate::parser::html::NGSP_UNICODE;
 
         let tokens = attr.value_tokens.as_ref()?;
+        let input = attr.value.as_str();
 
         let mut strings = Vec::new_in(&self.allocator);
         let mut expressions = Vec::new_in(&self.allocator);
@@ -4787,6 +4785,8 @@ impl<'a> HtmlToR3Transform<'a> {
         // and strings.len() == expressions.len() + 1 after processing interpolation.
         // This ensures the final result has strings.len() == expressions.len() + 1.
         let mut current_string = String::new();
+        // Length of the decoded input before `current_string`, for error columns.
+        let mut committed_len = 0;
 
         for token in tokens {
             match token.token_type {
@@ -4804,15 +4804,16 @@ impl<'a> HtmlToR3Transform<'a> {
                 InterpolatedTokenType::Interpolation => {
                     // Interpolation token has parts = [startMarker, expression, endMarker]
                     if token.parts.len() >= 3 {
+                        let start_marker = &token.parts[0];
+                        let expr_content = &token.parts[1];
+                        let end_marker = &token.parts[2];
+                        let column = committed_len + current_string.len();
+
                         // Before adding an expression, commit the current string buffer
                         // (even if empty, we need a string before each expression)
                         strings.push(Ident::from_in(current_string.as_str(), &self.allocator));
                         current_string.clear();
 
-                        let start_marker = &token.parts[0];
-                        let expr_content = &token.parts[1];
-                        let end_marker = &token.parts[2];
-
                         // Calculate the expression span from the token span
                         let expr_start = token.span.start + start_marker.len() as u32;
                         let expr_end = token.span.end - end_marker.len() as u32;
@@ -4822,6 +4823,15 @@ impl<'a> HtmlToR3Transform<'a> {
                         // expressions. This matches Angular's behavior where entities like
                         // &times; inside string literals in interpolations are decoded.
                         let decoded_expr = decode_entities_in_string(expr_content.as_str());
+                        committed_len =
+                            column + start_marker.len() + decoded_expr.len() + end_marker.len();
+                        // Angular's `splitInterpolation` reports `{{ }}` and still parses it.
+                        if decoded_expr.trim().is_empty() {
+                            self.report_error(
+                                &blank_interpolation_error(column, input),
+                                token.span,
+                            );
+                        }
                         let expr_str = self.allocator.alloc_str(&decoded_expr);
                         let parse_result = self.binding_parser.parse_binding(expr_str, expr_span);
 
@@ -4856,16 +4866,12 @@ impl<'a> HtmlToR3Transform<'a> {
         Some(AngularExpression::Interpolation(Box::new_in(interpolation, &self.allocator)))
     }
 
-    /// Creates a bound attribute from an attribute with interpolation value.
-    /// Handles special prefixes like `attr.`, `class.`, `style.` similar to Angular's
-    /// `createBoundElementProperty` in binding_parser.ts.
-    fn create_interpolated_bound_attribute(
+    /// Parses the interpolation in an attribute value, or returns `None` when the value has
+    /// none.
+    fn parse_attribute_interpolation(
         &mut self,
-        element_name: &str,
-        name: &str,
         attr: &HtmlAttribute<'a>,
-        i18n: Option<I18nMeta<'a>>,
-    ) -> Option<R3BoundAttribute<'a>> {
+    ) -> Option<AngularExpression<'a>> {
         let value_span = attr.value_span.unwrap_or(attr.span);
 
         // Check if there are HTML entities in the attribute value that could affect span calculations.
@@ -4874,17 +4880,29 @@ impl<'a> HtmlToR3Transform<'a> {
             tokens.iter().any(|t| matches!(t.token_type, InterpolatedTokenType::EncodedEntity))
         });
 
-        let expr = if has_entities {
+        if has_entities {
             // Use tokens to parse interpolations with correct source spans
-            self.parse_interpolation_from_attr_tokens(attr, value_span)?
+            self.parse_interpolation_from_attr_tokens(attr, value_span)
         } else {
             // Use attr.value which has HTML entities already decoded by the HTML parser.
             // This matches Angular's behavior where the ml_parser decodes entities in interpolation
             // expressions for backward compatibility.
             // See: Angular's parser.ts _consumeAttr which decodes entities in ATTR_VALUE_INTERPOLATION.
-            self.parse_interpolation(attr.value.as_str(), value_span)?
-        };
+            self.parse_interpolation(attr.value.as_str(), value_span)
+        }
+    }
 
+    /// Creates a bound attribute from an attribute with interpolation value.
+    /// Handles special prefixes like `attr.`, `class.`, `style.` similar to Angular's
+    /// `createBoundElementProperty` in binding_parser.ts.
+    fn create_interpolated_bound_attribute(
+        &self,
+        element_name: &str,
+        name: &str,
+        attr: &HtmlAttribute<'a>,
+        expr: AngularExpression<'a>,
+        i18n: Option<I18nMeta<'a>>,
+    ) -> R3BoundAttribute<'a> {
         // Determine binding type, final name, and security context based on prefix
         // This matches Angular's binding_parser.ts createBoundElementProperty
         let (binding_type, final_name, unit, security_context) =
@@ -4911,7 +4929,7 @@ impl<'a> HtmlToR3Transform<'a> {
 
         let name_atom = Ident::from(self.allocator.alloc_str(final_name));
 
-        Some(R3BoundAttribute {
+        R3BoundAttribute {
             name: name_atom,
             binding_type,
             security_context,
@@ -4921,7 +4939,7 @@ impl<'a> HtmlToR3Transform<'a> {
             key_span: attr.name_span,
             value_span: attr.value_span,
             i18n,
-        })
+        }
     }
 
     /// Creates an empty expression placeholder.
@@ -5670,6 +5688,8 @@ mod security_tests {
 #[cfg(test)]
 mod template_parser_tests {
     use super::*;
+    use crate::parser::html::HtmlParser;
+    use oxc_allocator::Allocator;
 
     fn meta(value: &str) -> (&str, &str, &str) {
         let ParsedI18nMeta { meaning, description, custom_id } = parse_i18n_meta(value);
@@ -5696,4 +5716,78 @@ mod template_parser_tests {
         assert_eq!(meta("d@@id|x"), ("d", "", "id|x"));
         assert_eq!(meta("m|d@@id|x"), ("m", "d", "id|x"));
     }
+
+    /// Transforms `source` and returns a flat description of its nodes and the errors.
+    fn transform(source: &str) -> (std::vec::Vec<String>, std::vec::Vec<String>) {
+        let allocator = Allocator::default();
+        let parsed = HtmlParser::new(&allocator, source, "test.html").parse();
+        let result =
+            html_ast_to_r3_ast(&allocator, source, &parsed.nodes, TransformOptions::default());
+        fn describe(node: &R3Node<'_>, out: &mut std::vec::Vec<String>) {
+            match node {
+                R3Node::Text(text) => out.push(format!("text:{}", text.value.as_str())),
+                R3Node::BoundText(_) => out.push("bound-text".to_string()),
+                R3Node::Element(element) => {
+                    for attr in &element.attributes {
+                        out.push(format!("attr:{}", attr.name.as_str()));
+                    }
+                    for input in &element.inputs {
+                        out.push(format!("input:{}", input.name.as_str()));
+                    }
+                    for child in &element.children {
+                        describe(child, out);
+                    }
+                }
+                _ => {}
+            }
+        }
+        let mut nodes = std::vec::Vec::new();
+        for node in &result.nodes {
+            describe(node, &mut nodes);
+        }
+        let errors = result.errors.iter().map(|err| err.msg.clone()).collect();
+        (nodes, errors)
+    }
+
+    #[test]
+    fn closing_braces_before_an_interpolation_still_bind() {
+        // A bare `}` in text closes a block, so text spells `}}` with entities.
+        let (nodes, errors) = transform(r#"<div title="}} {{a}}" i18n-title></div>"#);
+        assert!(errors.is_empty(), "{errors:?}");
+        assert_eq!(nodes, ["input:title"]);
+
+        let (nodes, errors) = transform("<p>&#125;&#125; {{a}}</p>");
+        assert!(errors.is_empty(), "{errors:?}");
+        assert_eq!(nodes, ["bound-text"]);
+
+        let (nodes, errors) = transform("<p i18n>&#125;&#125; {{a}}</p>");
+        assert!(errors.is_empty(), "{errors:?}");
+        assert_eq!(nodes, ["bound-text"]);
+    }
+
+    #[test]
+    fn text_without_an_interpolation_stays_static() {
+        let (nodes, errors) = transform(
+            r#"<div title="{{ a" i18n-title></div><p title="{{ '}}' ">&#123;&#123; a</p>"#,
+        );
+        assert!(errors.is_empty(), "{errors:?}");
+        assert_eq!(nodes, ["attr:title", "attr:title", "text:{{ a"]);
+    }
+
+    #[test]
+    fn blank_interpolations_are_reported() {
+        for source in ["<p>a {{ }}</p>", r#"<p title="a {{}}"></p>"#, "<p>&amp; {{ }}</p>"] {
+            let (_, errors) = transform(source);
+            assert!(
+                errors.iter().any(|msg| msg
+                    .starts_with("Blank expressions are not allowed in interpolated strings")),
+                "{source}: {errors:?}"
+            );
+        }
+        let (_, errors) = transform("<p>a {{ }}</p>");
+        assert_eq!(
+            errors,
+            ["Blank expressions are not allowed in interpolated strings at column 2 in [a {{ }}]"]
+        );
+    }
 }
diff --git a/napi/angular-compiler/e2e/compare/fixtures/regressions/template-parser-interpolation.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/regressions/template-parser-interpolation.fixture.ts
new file mode 100644
index 000000000..77b77fdcf
--- /dev/null
+++ b/napi/angular-compiler/e2e/compare/fixtures/regressions/template-parser-interpolation.fixture.ts
@@ -0,0 +1,80 @@
+/**
+ * Regression: template parser interpolation detection.
+ *
+ * Issue: a pre-scan required `{{` before the first `}}`, so a value such as
+ * `}} {{a}}` stayed static where Angular's BindingParser binds it.
+ */
+import type { Fixture } from '../types.js'
+
+export const fixtures: Fixture[] = [
+  {
+    name: 'interpolation-after-closing-braces-attribute',
+    category: 'regressions',
+    description: 'Attribute with `}}` before its interpolation',
+    className: 'InterpolationAfterClosingBracesAttributeComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-interpolation-after-closing-braces-attribute',
+  standalone: true,
+  template: \`
+      <div title="}} {{a}}"></div>
+      <span attr.aria-label="}} {{a}} {{b}}"></span>
+    \`,
+})
+export class InterpolationAfterClosingBracesAttributeComponent {
+  a = 'a';
+  b = 'b';
+}
+    `.trim(),
+    expectedFeatures: ['ɵɵinterpolate1'],
+  },
+  {
+    name: 'interpolation-after-closing-braces-text',
+    category: 'regressions',
+    description: 'Text with encoded `}}` before its interpolation (a bare `}` closes a block)',
+    className: 'InterpolationAfterClosingBracesTextComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-interpolation-after-closing-braces-text',
+  standalone: true,
+  template: \`
+      <p>&#125;&#125; {{a}}</p>
+      <p>&#125; {{a}} &#125;&#125;</p>
+    \`,
+})
+export class InterpolationAfterClosingBracesTextComponent {
+  a = 'a';
+}
+    `.trim(),
+    expectedFeatures: ['ɵɵtextInterpolate1'],
+  },
+  {
+    name: 'interpolation-after-closing-braces-i18n',
+    category: 'regressions',
+    description: 'i18n text and attribute with `}}` before the interpolation',
+    className: 'InterpolationAfterClosingBracesI18nComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-interpolation-after-closing-braces-i18n',
+  standalone: true,
+  template: \`
+      <p i18n>&#125;&#125; {{a}}</p>
+      <div i18n-title title="}} {{a}}"></div>
+    \`,
+})
+export class InterpolationAfterClosingBracesI18nComponent {
+  a = 'a';
+}
+    `.trim(),
+    expectedFeatures: ['ɵɵi18n', 'ɵɵi18nAttributes'],
+  },
+]

From 0f00648ec153d201d8f34111d4fee39de1762092 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 16:53:26 +0800
Subject: [PATCH 07/54] perf(template): share the i18n source file and stop
 copying parser input

- `HtmlToR3Transform` built a new `ParseSourceFile` (a full copy of the
  template text) for every i18n element, ICU and translated attribute.
  Build it once per template on first use and share the `Arc`, which also
  shares its cached line table. Templates without i18n never build it.
- `Parser::new` copied every expression twice (`strip_comments` returned a
  `String`, then it was copied into the arena). The stripped source is a
  prefix of the input, so borrow the slice instead.
- `Parser::parse_interpolation` now returns early when the text has no
  `{{`. It runs on every text node and attribute value now that the
  pre-scan is gone, and this avoids copying static text into the arena.

No output change: cargo tests and the compare fixtures are unchanged.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/parser/expression/parser.rs           | 21 ++++++++++------
 .../src/transform/html_to_r3.rs               | 25 +++++++++++--------
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/parser/expression/parser.rs b/crates/oxc_angular_compiler/src/parser/expression/parser.rs
index 668fe7b5c..53075d135 100644
--- a/crates/oxc_angular_compiler/src/parser/expression/parser.rs
+++ b/crates/oxc_angular_compiler/src/parser/expression/parser.rs
@@ -115,11 +115,9 @@ pub struct Parser<'a> {
 impl<'a> Parser<'a> {
     /// Creates a new parser.
     pub fn new(allocator: &'a Allocator, source: &'a str) -> Self {
-        // Strip comments from the source before tokenizing
-        let stripped_source = Self::strip_comments(source);
-        // Allocate the stripped source in the allocator to get 'a lifetime
-        let stripped_ref: &'a str = allocator.alloc_str(&stripped_source);
-        let lexer = Lexer::new(allocator, stripped_ref);
+        // Strip comments from the source before tokenizing. The stripped source is a prefix
+        // of `source`, so it is borrowed rather than copied.
+        let lexer = Lexer::new(allocator, Self::strip_comments(source));
         let tokens = lexer.tokenize();
 
         // Collect error tokens from the lexer
@@ -177,9 +175,11 @@ impl<'a> Parser<'a> {
     ///
     /// Comments are only recognized outside of quoted strings.
     /// This matches Angular's behavior in `_stripComments`.
-    fn strip_comments(input: &str) -> String {
-        let comment_start = Self::find_comment_start(input);
-        if let Some(idx) = comment_start { input[..idx].to_string() } else { input.to_string() }
+    fn strip_comments(input: &str) -> &str {
+        match Self::find_comment_start(input) {
+            Some(idx) => &input[..idx],
+            None => input,
+        }
     }
 
     /// Finds the start index of a `//` comment, respecting quoted strings.
@@ -983,6 +983,11 @@ impl<'a> Parser<'a> {
         start_delimiter: &str,
         end_delimiter: &str,
     ) -> Option<ParseResult<'a>> {
+        // Text without a start delimiter has no interpolation.
+        if !self.source.contains(start_delimiter) {
+            return None;
+        }
+
         // Find interpolation boundaries
         let start_len = start_delimiter.len();
         let end_len = end_delimiter.len();
diff --git a/crates/oxc_angular_compiler/src/transform/html_to_r3.rs b/crates/oxc_angular_compiler/src/transform/html_to_r3.rs
index 7613bd19a..fcec9ada0 100644
--- a/crates/oxc_angular_compiler/src/transform/html_to_r3.rs
+++ b/crates/oxc_angular_compiler/src/transform/html_to_r3.rs
@@ -183,6 +183,9 @@ pub struct HtmlToR3Transform<'a> {
     icu_names: IcuPlaceholderNames,
     /// Full names (`:svg:svg`) of the enclosing elements, for i18n placeholder names.
     element_full_names: std::vec::Vec<String>,
+    /// The template as a source file for i18n messages, built on first use and shared by
+    /// every message so the template text is copied once.
+    i18n_source_file: std::cell::OnceCell<std::sync::Arc<crate::util::ParseSourceFile>>,
 }
 
 /// Placeholder names taken from an i18n message, keyed by source offset, so that the r3 AST
@@ -236,9 +239,17 @@ impl<'a> HtmlToR3Transform<'a> {
             message_names: MessagePlaceholderNames::default(),
             icu_names: IcuPlaceholderNames::default(),
             element_full_names: std::vec::Vec::new(),
+            i18n_source_file: std::cell::OnceCell::new(),
         }
     }
 
+    /// Returns the template source file that i18n messages point into.
+    fn i18n_source_file(&self) -> std::sync::Arc<crate::util::ParseSourceFile> {
+        std::sync::Arc::clone(self.i18n_source_file.get_or_init(|| {
+            std::sync::Arc::new(crate::util::ParseSourceFile::new(self.source_text, "<template>"))
+        }))
+    }
+
     fn security_context(&self, element: &str, property: &str) -> SecurityContext {
         // Element bindings go through `calcPossibleSecurityContexts` upstream,
         // which promotes a bare element missing from the DOM schema to its
@@ -493,10 +504,7 @@ impl<'a> HtmlToR3Transform<'a> {
             } else {
                 // Use I18nMessageFactory to convert children to i18n AST and serialize
                 let factory = I18nMessageFactory::new(false, true);
-                let source_file = std::sync::Arc::new(crate::util::ParseSourceFile::new(
-                    self.source_text,
-                    "<template>",
-                ));
+                let source_file = self.i18n_source_file();
                 let meta = parse_i18n_meta(attr.value.as_str());
 
                 let message = factory.create_message(
@@ -1419,8 +1427,7 @@ impl<'a> HtmlToR3Transform<'a> {
         // `_generateI18nMessage([expansion], currentMessage || meta)`). An ICU that is the only
         // child of an i18n element shares that element's message, so it is the message rather
         // than a sub-message of it.
-        let source_file =
-            std::sync::Arc::new(crate::util::ParseSourceFile::new(self.source_text, "<template>"));
+        let source_file = self.i18n_source_file();
         let icu_message = I18nMessageFactory::new(false, true).create_icu_message(
             expansion,
             self.element_full_names.last().map(String::as_str),
@@ -3460,10 +3467,8 @@ impl<'a> HtmlToR3Transform<'a> {
         &self,
         attr: &HtmlAttribute<'a>,
     ) -> (String, Vec<'a, I18nNode<'a>>) {
-        let source_file =
-            std::sync::Arc::new(crate::util::ParseSourceFile::new(self.source_text, "<template>"));
-        let message =
-            I18nMessageFactory::new(false, true).create_attribute_message(attr, source_file);
+        let message = I18nMessageFactory::new(false, true)
+            .create_attribute_message(attr, self.i18n_source_file());
         let span = |s: &crate::util::ParseSourceSpan| Span::new(s.start.offset, s.end.offset);
         let mut nodes = Vec::new_in(&self.allocator);
         let mut push = |node: &crate::i18n::ast::Node| match node {

From 09cf3ef26a6ff78c4a5de53cfa1ba765bce72714 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 16:56:19 +0800
Subject: [PATCH 08/54] perf(transform): compile the HMR template copy only
 when HMR is on

compile_component_full compiled every component template a second time
through compile_template_to_js to fill `template_js`, but only the HMR
`templateUpdates` map reads that string. Make it an Option and run the
second compile only when `options.hmr` is set. With HMR on, the
templateUpdates keys and values are unchanged.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/component/transform.rs                | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/component/transform.rs b/crates/oxc_angular_compiler/src/component/transform.rs
index 54d1ff031..8dc4db9ca 100644
--- a/crates/oxc_angular_compiler/src/component/transform.rs
+++ b/crates/oxc_angular_compiler/src/component/transform.rs
@@ -3605,7 +3605,7 @@ pub fn transform_angular_file(
                             if options.hmr {
                                 result.template_updates.insert(
                                     component_id.clone(),
-                                    compilation_result.template_js.clone(),
+                                    compilation_result.template_js.clone().unwrap_or_default(),
                                 );
                                 if let Some(decorator) = component_decorator {
                                     let callee = match &decorator.expression {
@@ -4715,8 +4715,9 @@ pub fn transform_angular_file(
 
 /// Result of full component compilation including ɵcmp/ɵfac.
 struct FullCompilationResult {
-    /// Compiled template function as JavaScript.
-    template_js: String,
+    /// Compiled template function as JavaScript, for HMR template updates.
+    /// `None` when HMR is off (nothing reads it then) and in partial mode.
+    template_js: Option<String>,
 
     /// ɵcmp definition as JavaScript.
     cmp_js: String,
@@ -4821,7 +4822,7 @@ fn compile_component_partial<'a>(
 
     let emitter = JsEmitter::new();
     FullCompilationResult {
-        template_js: String::new(),
+        template_js: None,
         cmp_js: emitter.emit_expression(&cmp_expr),
         fac_js: emitter.emit_expression(&fac_expr),
         declarations_js: String::new(),
@@ -5315,14 +5316,21 @@ fn compile_component_full<'a>(
     }
 
     // For HMR, we emit the template separately using compile_template_to_js
-    // The ɵcmp already contains the template function inline
-    let template_js =
-        compile_template_to_js(allocator, template, metadata.class_name.as_str(), file_path)
-            .map_err(|diags| {
-                let mut all_diags = diagnostics.clone();
-                all_diags.extend(diags);
-                all_diags
-            })?;
+    // The ɵcmp already contains the template function inline. Only the HMR
+    // `template_updates` map reads it, so skip the second template compile
+    // otherwise.
+    let template_js = if options.hmr {
+        Some(
+            compile_template_to_js(allocator, template, metadata.class_name.as_str(), file_path)
+                .map_err(|diags| {
+                    let mut all_diags = diagnostics.clone();
+                    all_diags.extend(diags);
+                    all_diags
+                })?,
+        )
+    } else {
+        None
+    };
 
     let cmp_js = emitter.emit_expression(&definitions.cmp_definition);
     let fac_js = emitter.emit_expression(&definitions.fac_definition);

From badf8c2712f7b83fbadcf34d733fd1e373a1bd91 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 16:58:55 +0800
Subject: [PATCH 09/54] fix(factory): give classes with no constructor and no
 superclass empty deps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A @Pipe, @NgModule or @Injectable class without a constructor was always
compiled to the inherited-factory form
(`ɵɵgetInheritedFactory(X)(t || X)`), even when it extends nothing.
ngtsc's getConstructorDependencies only returns null when the class has a
base class; otherwise it treats the class as having an implicit no-arg
constructor, so the factory is `new (t || X)()`.

The three extract_constructor_deps helpers now return empty deps when
the class has no `extends` clause, matching the directive and component
paths, which already did this.

Removes the now-passing FACTORY entries from the e2e known differences
and adds fixtures for a pipe and an injectable that extend a base class
without a constructor (inherited factory on both sides).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/injectable/decorator.rs               |  32 ++++-
 .../src/injectable/definition.rs              |  74 ++++++----
 .../src/ng_module/decorator.rs                |  13 +-
 .../src/pipe/decorator.rs                     |  38 +++++-
 .../e2e/compare/fixtures/known-differences.ts | 126 ++----------------
 .../pipe-compilation/basic.fixture.ts         |  20 +++
 .../fixtures/providers/basic.fixture.ts       |  21 +++
 7 files changed, 167 insertions(+), 157 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/injectable/decorator.rs b/crates/oxc_angular_compiler/src/injectable/decorator.rs
index b923593a9..d4ee39076 100644
--- a/crates/oxc_angular_compiler/src/injectable/decorator.rs
+++ b/crates/oxc_angular_compiler/src/injectable/decorator.rs
@@ -540,7 +540,9 @@ fn extract_dependency<'a>(
 /// Extract constructor dependencies from a class.
 ///
 /// Returns:
-/// - `None` if the class has no constructor (use inherited factory pattern)
+/// - `None` if the class has no constructor but extends another class (use
+///   inherited factory pattern)
+/// - `Some(empty)` if the class has neither a constructor nor a superclass
 /// - `Some(vec)` with the dependencies if constructor exists
 ///
 /// Handles parameter decorators like `@Inject()`, `@Optional()`, `@SkipSelf()`, `@Self()`, `@Host()`.
@@ -568,14 +570,19 @@ pub fn extract_constructor_deps<'a>(
     consts: Option<&StringConsts<'_>>,
 ) -> Option<Vec<'a, R3DependencyMetadata<'a>>> {
     // Find the constructor method
-    let constructor = class.body.body.iter().find_map(|element| {
+    let Some(constructor) = class.body.body.iter().find_map(|element| {
         if let ClassElement::MethodDefinition(method) = element {
             if method.kind == MethodDefinitionKind::Constructor {
                 return Some(method);
             }
         }
         None
-    })?;
+    }) else {
+        // No constructor: a class with a superclass inherits its factory
+        // (`None`), one without gets an implicit no-arg constructor.
+        // See: packages/compiler-cli/src/ngtsc/annotations/common/src/di.ts:47-52
+        return if class.heritage.is_some() { None } else { Some(Vec::new_in(&allocator)) };
+    };
 
     // Get the constructor's parameters
     let params = &constructor.value.params;
@@ -885,7 +892,7 @@ mod tests {
     // =========================================================================
 
     #[test]
-    fn test_injectable_without_constructor_has_no_deps() {
+    fn test_injectable_without_constructor_or_superclass_has_empty_deps() {
         let allocator = Allocator::default();
         let source = r#"
             @Injectable()
@@ -895,7 +902,22 @@ mod tests {
         let metadata = parse_and_extract(&allocator, source);
         assert!(metadata.is_some());
         let metadata = metadata.unwrap();
-        // No constructor = None deps (use inherited factory)
+        // No constructor and no superclass = implicit no-arg constructor
+        assert!(metadata.deps.as_ref().is_some_and(|deps| deps.is_empty()));
+    }
+
+    #[test]
+    fn test_injectable_without_constructor_with_superclass_has_no_deps() {
+        let allocator = Allocator::default();
+        let source = r#"
+            @Injectable()
+            class MyService extends BaseService {}
+        "#;
+
+        let metadata = parse_and_extract(&allocator, source);
+        assert!(metadata.is_some());
+        let metadata = metadata.unwrap();
+        // No constructor but a superclass = None deps (use inherited factory)
         assert!(metadata.deps.is_none());
     }
 
diff --git a/crates/oxc_angular_compiler/src/injectable/definition.rs b/crates/oxc_angular_compiler/src/injectable/definition.rs
index f12f86c3f..0c32d3dde 100644
--- a/crates/oxc_angular_compiler/src/injectable/definition.rs
+++ b/crates/oxc_angular_compiler/src/injectable/definition.rs
@@ -432,49 +432,65 @@ mod tests {
         assert!(js.contains("DOCUMENT"), "Factory should inject DOCUMENT token, got: {}", js);
     }
 
-    #[test]
-    fn test_injectable_without_constructor_uses_inherited_factory() {
+    /// Compile the `ɵfac` of the first `@Injectable` class in `code`.
+    fn injectable_fac_js(code: &str) -> String {
         use crate::injectable::decorator::extract_injectable_metadata;
         use oxc_ast::ast::Statement;
         use oxc_parser::Parser;
         use oxc_span::SourceType;
 
         let allocator = Allocator::default();
-        let code = r#"
-            @Injectable()
-            class MyService {}
-        "#;
-
-        let source_type = SourceType::tsx();
-        let parser_ret = Parser::new(&allocator, code, source_type).parse();
-
-        let class = parser_ret.program.body.iter().find_map(|stmt| match stmt {
-            Statement::ClassDeclaration(class) => Some(class.as_ref()),
-            _ => None,
-        });
-
-        let class = class.expect("Should find class declaration");
-        let metadata = extract_injectable_metadata(&allocator, class, Some(code));
-        let metadata = metadata.expect("Should extract Injectable metadata");
-
-        // Verify no deps (no constructor)
-        assert!(metadata.deps.is_none(), "Should not have constructor deps");
-
-        // Generate definition
+        let parser_ret = Parser::new(&allocator, code, SourceType::tsx()).parse();
+        let class = parser_ret
+            .program
+            .body
+            .iter()
+            .find_map(|stmt| match stmt {
+                Statement::ClassDeclaration(class) if !class.decorators.is_empty() => {
+                    Some(class.as_ref())
+                }
+                _ => None,
+            })
+            .expect("Should find class declaration");
+        let metadata = extract_injectable_metadata(&allocator, class, Some(code))
+            .expect("Should extract Injectable metadata");
         let definition = generate_injectable_definition_from_decorator(
             &allocator,
             "i0",
             &metadata,
             CompilationMode::Full,
-        );
-        let definition = definition.expect("Should generate definition");
+        )
+        .expect("Should generate definition");
+        JsEmitter::new().emit_expression(&definition.fac_definition)
+    }
 
-        let emitter = JsEmitter::new();
-        let js = emitter.emit_expression(&definition.fac_definition);
+    #[test]
+    fn test_injectable_without_constructor_or_superclass_calls_constructor() {
+        // ngtsc gives a class with neither a constructor nor a superclass an
+        // implicit no-arg constructor (di.ts getConstructorDependencies).
+        let js = injectable_fac_js(
+            r#"
+            @Injectable()
+            class MyService {}
+        "#,
+        );
+        assert_eq!(
+            js,
+            "function MyService_Factory(__ngFactoryType__) {\n  return new (__ngFactoryType__ || MyService)();\n}"
+        );
+    }
 
-        // Should use inherited factory pattern
+    #[test]
+    fn test_injectable_without_constructor_with_superclass_uses_inherited_factory() {
+        let js = injectable_fac_js(
+            r#"
+            class Base {}
+            @Injectable()
+            class MyService extends Base {}
+        "#,
+        );
         assert!(
-            js.contains("getInheritedFactory") || js.contains("ɵɵgetInheritedFactory"),
+            js.contains("ɵɵgetInheritedFactory(MyService)"),
             "Factory should use getInheritedFactory when no constructor, got: {}",
             js
         );
diff --git a/crates/oxc_angular_compiler/src/ng_module/decorator.rs b/crates/oxc_angular_compiler/src/ng_module/decorator.rs
index b62773803..59714cef2 100644
--- a/crates/oxc_angular_compiler/src/ng_module/decorator.rs
+++ b/crates/oxc_angular_compiler/src/ng_module/decorator.rs
@@ -425,7 +425,9 @@ fn extract_identifier_array<'a>(
 /// Extract constructor dependencies from a class.
 ///
 /// Returns:
-/// - `None` if the class has no constructor (use inherited factory pattern)
+/// - `None` if the class has no constructor but extends another class (use
+///   inherited factory pattern)
+/// - `Some(empty)` if the class has neither a constructor nor a superclass
 /// - `Some(vec)` with the dependencies if constructor exists
 ///
 /// Handles parameter decorators like `@Inject()`, `@Optional()`, `@SkipSelf()`,
@@ -445,14 +447,19 @@ pub fn extract_constructor_deps<'a>(
     consts: Option<&StringConsts<'_>>,
 ) -> Option<Vec<'a, R3DependencyMetadata<'a>>> {
     // Find the constructor method
-    let constructor = class.body.body.iter().find_map(|element| {
+    let Some(constructor) = class.body.body.iter().find_map(|element| {
         if let ClassElement::MethodDefinition(method) = element {
             if method.kind == MethodDefinitionKind::Constructor {
                 return Some(method);
             }
         }
         None
-    })?;
+    }) else {
+        // No constructor: a class with a superclass inherits its factory
+        // (`None`), one without gets an implicit no-arg constructor.
+        // See: packages/compiler-cli/src/ngtsc/annotations/common/src/di.ts:47-52
+        return if class.heritage.is_some() { None } else { Some(Vec::new_in(&allocator)) };
+    };
 
     // Get the constructor's parameters
     let params = &constructor.value.params;
diff --git a/crates/oxc_angular_compiler/src/pipe/decorator.rs b/crates/oxc_angular_compiler/src/pipe/decorator.rs
index 4ee13e739..3933574d9 100644
--- a/crates/oxc_angular_compiler/src/pipe/decorator.rs
+++ b/crates/oxc_angular_compiler/src/pipe/decorator.rs
@@ -259,8 +259,9 @@ fn extract_boolean_value(expr: &Expression<'_>) -> Option<bool> {
 
 /// Extract constructor dependencies from a pipe class.
 ///
-/// Returns `Some(Vec<deps>)` if the class has a constructor,
-/// or `None` if there is no constructor (will use inherited factory).
+/// Returns `Some(Vec<deps>)` if the class has a constructor, `Some(empty)` if it
+/// has neither a constructor nor a superclass, or `None` if it has no
+/// constructor but extends another class (will use inherited factory).
 fn extract_constructor_deps<'a>(
     allocator: &'a Allocator,
     class: &'a Class<'a>,
@@ -268,14 +269,19 @@ fn extract_constructor_deps<'a>(
     consts: Option<&StringConsts<'_>>,
 ) -> Option<Vec<'a, R3DependencyMetadata<'a>>> {
     // Find the constructor method
-    let constructor = class.body.body.iter().find_map(|element| {
+    let Some(constructor) = class.body.body.iter().find_map(|element| {
         if let ClassElement::MethodDefinition(method) = element {
             if method.kind == MethodDefinitionKind::Constructor {
                 return Some(method);
             }
         }
         None
-    })?;
+    }) else {
+        // No constructor: a class with a superclass inherits its factory
+        // (`None`), one without gets an implicit no-arg constructor.
+        // See: packages/compiler-cli/src/ngtsc/annotations/common/src/di.ts:47-52
+        return if class.heritage.is_some() { None } else { Some(Vec::new_in(&allocator)) };
+    };
 
     // Get the constructor's parameters
     let params = &constructor.value.params;
@@ -623,6 +629,30 @@ mod tests {
         });
     }
 
+    #[test]
+    fn test_pipe_without_constructor_or_superclass_has_empty_deps() {
+        // ngtsc gives such a class an implicit no-arg constructor, so its
+        // factory calls `new` instead of ɵɵgetInheritedFactory.
+        let code = r#"
+            @Pipe({ name: 'myPipe' })
+            class MyPipe {}
+        "#;
+        assert_metadata(code, |meta| {
+            assert!(meta.deps.as_ref().is_some_and(|deps| deps.is_empty()));
+        });
+    }
+
+    #[test]
+    fn test_pipe_without_constructor_with_superclass_has_no_deps() {
+        let code = r#"
+            @Pipe({ name: 'myPipe' })
+            class MyPipe extends BasePipe {}
+        "#;
+        assert_metadata(code, |meta| {
+            assert!(meta.deps.is_none(), "Should inherit the factory");
+        });
+    }
+
     // =========================================================================
     // Edge cases
     // =========================================================================
diff --git a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
index 73032f069..d95775007 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
@@ -19,8 +19,6 @@ interface KnownDifference {
   reasons: string[]
 }
 
-const FACTORY =
-  'ɵfac uses ɵɵgetInheritedFactory where Angular emits a factory that calls the constructor'
 const NG_MODULE_IMPORTS = 'ɵmod includes imports, which Angular omits in full compilation'
 const HOST_ATTRS_ORDER = 'hostAttrs are emitted in a different order'
 const CUSTOM_DECORATOR =
@@ -41,14 +39,6 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     fields: ['AnimationsWithOnPushComponent.ɵcmp'],
     reasons: [CHANGE_DETECTION_V22],
   },
-  'class-metadata/class-metadata-ngmodule': {
-    fields: ['TestableModule.ɵfac', 'TestableModule.ɵmod'],
-    reasons: [FACTORY, NG_MODULE_IMPORTS],
-  },
-  'class-metadata/class-metadata-pipe': {
-    fields: ['TestablePipe.ɵfac'],
-    reasons: [FACTORY],
-  },
   'class-metadata/class-metadata-injectable': {
     fields: [],
     importDiffs: [
@@ -61,6 +51,10 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     ],
     reasons: [SET_CLASS_METADATA_IMPORT],
   },
+  'class-metadata/class-metadata-ngmodule': {
+    fields: ['TestableModule.ɵmod'],
+    reasons: [NG_MODULE_IMPORTS],
+  },
   'class-metadata/class-metadata-with-inject': {
     fields: [],
     importDiffs: [
@@ -142,113 +136,17 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     fields: ['HostDirectivesOnPushComponent.ɵcmp'],
     reasons: [CHANGE_DETECTION_V22],
   },
-  'host-directives/host-directives-with-providers': {
-    fields: ['DataService.ɵfac'],
-    reasons: [FACTORY],
-  },
-  'i18n/i18n-compliance-element-attributes-should-correctly-bind-to-context-in-nested-template-interpolation-nested-context':
-    {
-      fields: ['UppercasePipe.ɵfac'],
-      reasons: [FACTORY],
-    },
-  'i18n/i18n-compliance-element-attributes-should-support-i18n-attributes-with-interpolations-on-explicit-ng-template-elements-with-structural-directives-ng-t':
-    {
-      fields: ['UppercasePipe.ɵfac'],
-      reasons: [FACTORY],
-    },
-  'i18n/i18n-compliance-element-attributes-should-support-interpolation-interpolation-basic': {
-    fields: ['UppercasePipe.ɵfac'],
-    reasons: [FACTORY],
-  },
-  'i18n/i18n-compliance-nested-nodes-should-handle-i18n-attributes-with-bindings-and-nested-elements-in-content-nested-elements':
-    {
-      fields: ['UppercasePipe.ɵfac'],
-      reasons: [FACTORY],
-    },
-  'i18n/i18n-compliance-nested-nodes-should-handle-i18n-attributes-with-bindings-in-content-and-element-attributes-nested-elements-with-i18n-attributes':
-    {
-      fields: ['UppercasePipe.ɵfac'],
-      reasons: [FACTORY],
-    },
-  'i18n/i18n-compliance-nested-nodes-should-handle-i18n-attributes-with-bindings-in-content-bindings-in-content':
-    {
-      fields: ['UppercasePipe.ɵfac'],
-      reasons: [FACTORY],
-    },
-  'i18n/i18n-compliance-nested-nodes-should-support-interpolations-with-complex-expressions-interpolation-complex-expressions':
-    {
-      fields: ['AsyncPipe.ɵfac'],
-      reasons: [FACTORY],
-    },
-  'i18n/i18n-compliance-ng-container-ng-template-should-be-able-to-act-as-child-elements-inside-i18n-block-child-elements':
-    {
-      fields: ['UppercasePipe.ɵfac'],
-      reasons: [FACTORY],
-    },
-  'i18n/i18n-compliance-ng-container-ng-template-should-handle-single-translation-message-using-ng-container-single-ng-container':
-    {
-      fields: ['UppercasePipe.ɵfac'],
-      reasons: [FACTORY],
-    },
-  'i18n/i18n-compliance-root-should-support-i18n-message-with-multiple-pipes-multiple-pipes': {
-    fields: ['PipeA.ɵfac', 'PipeB.ɵfac', 'PipeC.ɵfac'],
-    reasons: [FACTORY],
-  },
-  'i18n/i18n-ng-template-deeply-nested': {
-    fields: ['ActorTextPipe.ɵfac', 'UsernamePipe.ɵfac'],
-    reasons: [FACTORY],
-  },
-  'injector/basic-injector': {
-    fields: ['AppModule.ɵfac'],
-    reasons: [FACTORY],
-  },
   'injector/injector-with-both': {
-    fields: ['FullModule.ɵfac', 'FullModule.ɵmod'],
-    reasons: [FACTORY, NG_MODULE_IMPORTS],
+    fields: ['FullModule.ɵmod'],
+    reasons: [NG_MODULE_IMPORTS],
   },
   'injector/injector-with-imports': {
-    fields: ['FeatureModule.ɵfac', 'FeatureModule.ɵmod'],
-    reasons: [FACTORY, NG_MODULE_IMPORTS],
-  },
-  'injector/injector-with-providers': {
-    fields: ['ProvidersModule.ɵfac'],
-    reasons: [FACTORY],
-  },
-  'pipe-compilation/impure-pipe': {
-    fields: ['MyImpurePipe.ɵfac'],
-    reasons: [FACTORY],
-  },
-  'pipe-compilation/minimal-pipe': {
-    fields: ['MinimalPipe.ɵfac'],
-    reasons: [FACTORY],
-  },
-  'pipe-compilation/non-standalone-pipe': {
-    fields: ['LegacyPipe.ɵfac'],
-    reasons: [FACTORY],
-  },
-  'pipe-compilation/pure-pipe': {
-    fields: ['MyPurePipe.ɵfac'],
-    reasons: [FACTORY],
+    fields: ['FeatureModule.ɵmod'],
+    reasons: [NG_MODULE_IMPORTS],
   },
   'providers/object-members-injectable-use-factory': {
-    fields: ['ObjectMembersService.ɵfac', 'ObjectMembersService.ɵprov'],
-    reasons: [FACTORY, INJECTABLE_FACTORY_WRAPPER],
-  },
-  'providers/object-members-injectable-use-value': {
-    fields: ['ObjectMembersValueService.ɵfac'],
-    reasons: [FACTORY],
-  },
-  'providers/object-members-ng-module': {
-    fields: ['ObjectMembersModule.ɵfac'],
-    reasons: [FACTORY],
-  },
-  'providers/object-members-options-directive-pipe-module': {
-    fields: ['OptionsPipe.ɵfac', 'OptionsModule.ɵfac'],
-    reasons: [FACTORY],
-  },
-  'providers/object-members-options-injectable': {
-    fields: ['OptionsMethodService.ɵfac', 'OptionsGetterService.ɵfac'],
-    reasons: [FACTORY],
+    fields: ['ObjectMembersService.ɵprov'],
+    reasons: [INJECTABLE_FACTORY_WRAPPER],
   },
   'providers/providers-with-change-detection': {
     fields: ['ProvidersWithChangeDetectionComponent.ɵcmp'],
@@ -306,8 +204,4 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     fields: ['OnPushNoneStyleComponent.ɵcmp'],
     reasons: [CHANGE_DETECTION_V22],
   },
-  'templates/ng-arrow-function-pipe': {
-    fields: ['TestPipe.ɵfac'],
-    reasons: [FACTORY],
-  },
 }
diff --git a/napi/angular-compiler/e2e/compare/fixtures/pipe-compilation/basic.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/pipe-compilation/basic.fixture.ts
index 825b85cc5..eef1311ee 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/pipe-compilation/basic.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/pipe-compilation/basic.fixture.ts
@@ -89,4 +89,24 @@ export class MinimalPipe implements PipeTransform {
     `.trim(),
     expectedFeatures: ['definePipe'],
   },
+  {
+    type: 'full-transform',
+    name: 'pipe-extends-base-without-constructor',
+    category: 'pipe-compilation',
+    description: 'Pipe that extends a base class without a constructor inherits its factory',
+    className: 'DerivedPipe',
+    sourceCode: `
+import { Pipe, PipeTransform } from '@angular/core';
+
+class BasePipe {}
+
+@Pipe({ name: 'derived' })
+export class DerivedPipe extends BasePipe implements PipeTransform {
+  transform(value: any): any {
+    return value;
+  }
+}
+    `.trim(),
+    expectedFeatures: ['definePipe', 'ɵɵgetInheritedFactory'],
+  },
 ]
diff --git a/napi/angular-compiler/e2e/compare/fixtures/providers/basic.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/providers/basic.fixture.ts
index 84e10de78..34ad58954 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/providers/basic.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/providers/basic.fixture.ts
@@ -541,4 +541,25 @@ export class ForwardRefProviderComponent {}
     `.trim(),
     expectedFeatures: ['ɵɵdefineComponent', 'providers:'],
   },
+
+  {
+    name: 'injectable-factory-without-constructor',
+    category: 'providers',
+    description:
+      'Injectable without a constructor: a plain factory, or the inherited one when it extends a class',
+    className: 'PlainService',
+    type: 'full-transform',
+    sourceCode: `
+import { Injectable } from '@angular/core';
+
+class BaseService {}
+
+@Injectable({ providedIn: 'root' })
+export class PlainService {}
+
+@Injectable({ providedIn: 'root' })
+export class DerivedService extends BaseService {}
+    `.trim(),
+    expectedFeatures: ['ɵɵdefineInjectable', 'ɵɵgetInheritedFactory'],
+  },
 ]

From f48c44ca5d10552ec6b419766fddb0c5091cd6f7 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 16:58:58 +0800
Subject: [PATCH 10/54] perf(transform): build one oxc Semantic per file in the
 AOT transform

transform_angular_file built three oxc Semantic models of the same
parsed program: one inside ImportElisionAnalyzer::analyze, one inside
the initializer-API validation, and one for the TDZ hoist. The program
is never mutated after parsing (all changes are text edits applied to
the source), so one model built right after the parse serves all three.

- ImportElisionAnalyzer::analyze_with_semantic and
  validation::initializer_api_usage_errors_with_semantic take the
  caller's model; the old entry points stay as wrappers that build
  their own (used by the JIT path and unit tests).
- The validation reads the AST node store, so the shared model is
  built with nodes only when that rule will run
  (initializer_api_usage_needs_semantic, same check as before).
- The hoist keeps its cheap decorated-class gate but no longer builds
  a model of its own.

Output is unchanged: cargo snapshots and e2e compare fixtures match.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/component/import_elision.rs           | 10 +++-
 .../src/component/transform.rs                | 50 ++++++++++++-------
 crates/oxc_angular_compiler/src/validation.rs | 27 +++++++++-
 3 files changed, 66 insertions(+), 21 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/component/import_elision.rs b/crates/oxc_angular_compiler/src/component/import_elision.rs
index b46175196..7553487a1 100644
--- a/crates/oxc_angular_compiler/src/component/import_elision.rs
+++ b/crates/oxc_angular_compiler/src/component/import_elision.rs
@@ -90,8 +90,16 @@ impl<'a> ImportElisionAnalyzer<'a> {
     /// decorators are stripped outright and the imports can be dropped.
     pub fn analyze(program: &'a Program<'a>, emit_metadata: bool) -> Self {
         let semantic_ret = SemanticBuilder::new().build(program);
-        let semantic = &semantic_ret.semantic;
+        Self::analyze_with_semantic(program, &semantic_ret.semantic, emit_metadata)
+    }
 
+    /// [`Self::analyze`] with a semantic model the caller already built for
+    /// `program`, so one build can serve several passes.
+    pub fn analyze_with_semantic(
+        program: &'a Program<'a>,
+        semantic: &Semantic<'a>,
+        emit_metadata: bool,
+    ) -> Self {
         let mut type_only_specifiers = FxHashSet::default();
         let mut value_reference_counts = FxHashMap::default();
         let mut declaration_specifiers = Vec::new();
diff --git a/crates/oxc_angular_compiler/src/component/transform.rs b/crates/oxc_angular_compiler/src/component/transform.rs
index 8dc4db9ca..851c12e33 100644
--- a/crates/oxc_angular_compiler/src/component/transform.rs
+++ b/crates/oxc_angular_compiler/src/component/transform.rs
@@ -3036,6 +3036,25 @@ pub fn transform_angular_file(
         // Still continue to try to generate output for partial results
     }
 
+    // One semantic model of the source program, shared by import elision,
+    // the initializer-API validation and the TDZ hoist below. The program is
+    // never mutated after parsing (edits are applied to the source text), so
+    // it stays valid for all three. Only the validation reads the node store,
+    // so build it only when that rule will run.
+    //
+    // Semantic builder errors (redeclarations, etc.) are intentionally
+    // dropped: the parser already captured syntax errors into
+    // `result.diagnostics` above, and Semantic-level diagnostics aren't
+    // actionable for these passes — we treat the input as best-effort and
+    // rely on the host build to surface genuine errors. The JIT path (see
+    // `transform_angular_file_jit`) follows the same convention.
+    let semantic = oxc_semantic::SemanticBuilder::new()
+        .with_build_nodes(crate::validation::initializer_api_usage_needs_semantic(
+            &parser_ret.program,
+        ))
+        .build(&parser_ret.program)
+        .semantic;
+
     // Run import elision analysis on the original program.
     // This identifies type-only imports that can be removed.
     // Must run BEFORE transformation to capture correct type vs value references.
@@ -3043,8 +3062,9 @@ pub fn transform_angular_file(
     // `@Inject` tokens (`args: [TOKEN]`) and member decorators (`{type: Input}`)
     // by their imported names, so those imports must stay whenever metadata
     // will be emitted (ngtsc keeps them too).
-    let import_elision = ImportElisionAnalyzer::analyze(
+    let import_elision = ImportElisionAnalyzer::analyze_with_semantic(
         &parser_ret.program,
+        &semantic,
         options.emit_class_metadata && !options.advanced_optimizations,
     );
 
@@ -3200,9 +3220,10 @@ pub fn transform_angular_file(
 
     // ngtsc's source-file rules (validation/): initializer APIs used outside a
     // class member initializer (UNSUPPORTED_INITIALIZER_API_USAGE).
-    result.diagnostics.extend(crate::validation::initializer_api_usage_errors(
+    result.diagnostics.extend(crate::validation::initializer_api_usage_errors_with_semantic(
         &parser_ret.program,
         &string_consts,
+        &semantic,
     ));
 
     #[cfg(feature = "cross_file_elision")]
@@ -4643,28 +4664,19 @@ pub fn transform_angular_file(
     // reference at class-definition time and throw `ReferenceError`. See
     // issue #287.
     //
-    // The hoister resolves identifier references through `oxc_semantic` so
-    // a nested-scope shadow of a top-level name can't be mistaken for the
-    // top-level binding itself.
+    // The hoister resolves identifier references through `oxc_semantic` (the
+    // file-level model built after parsing) so a nested-scope shadow of a
+    // top-level name can't be mistaken for the top-level binding itself.
     //
-    // Gate the Semantic build behind a cheap top-level scan: a real Angular
-    // codebase contains plenty of plain `.ts` helpers, type-only modules, and
-    // services without `@Injectable` that we route through this function. For
-    // those, building a full symbol table just to discover there's nothing to
-    // hoist is pure overhead.
+    // Gate the hoist behind a cheap top-level scan: a real Angular codebase
+    // contains plenty of plain `.ts` helpers, type-only modules, and services
+    // without `@Injectable` that we route through this function, and for
+    // those there is nothing to hoist.
     if program_has_angular_decorated_class(&parser_ret.program, &import_map, &string_consts) {
-        // Semantic builder errors (redeclarations, etc.) are intentionally
-        // dropped: the parser already captured syntax errors into
-        // `result.diagnostics` upstream, and Semantic-level diagnostics here
-        // aren't actionable for the hoist pass — we treat the input as
-        // best-effort and rely on the host build to surface genuine errors.
-        // The JIT path (see ~line 1380) follows the same convention.
-        let hoist_semantic =
-            oxc_semantic::SemanticBuilder::new().build(&parser_ret.program).semantic;
         edits.extend(collect_hoist_edits(
             &parser_ret.program,
             source,
-            &hoist_semantic,
+            &semantic,
             &import_map,
             &string_consts,
         ));
diff --git a/crates/oxc_angular_compiler/src/validation.rs b/crates/oxc_angular_compiler/src/validation.rs
index 21716e427..9abf82fa7 100644
--- a/crates/oxc_angular_compiler/src/validation.rs
+++ b/crates/oxc_angular_compiler/src/validation.rs
@@ -267,9 +267,34 @@ pub fn initializer_api_usage_errors<'a>(
     // `with_build_nodes` keeps the node store for the declaration kinds and
     // their `ImportDeclaration` parents; resolution doesn't need it.
     let semantic_ret = SemanticBuilder::new().with_build_nodes(true).build(program);
+    initializer_api_usage_errors_with_semantic(program, consts, &semantic_ret.semantic)
+}
+
+/// Whether [`initializer_api_usage_errors_with_semantic`] reads the semantic
+/// model at all, so a caller building one to share knows if it needs the
+/// node store (`SemanticBuilder::with_build_nodes`).
+pub fn initializer_api_usage_needs_semantic(program: &Program<'_>) -> bool {
+    should_check(program)
+}
+
+/// [`initializer_api_usage_errors`] with a semantic model the caller already
+/// built for `program`. When [`initializer_api_usage_needs_semantic`] holds,
+/// it must have been built `with_build_nodes(true)`.
+pub fn initializer_api_usage_errors_with_semantic<'a>(
+    program: &'a Program<'a>,
+    consts: &StringConsts<'a>,
+    semantic: &Semantic<'a>,
+) -> std::vec::Vec<OxcDiagnostic> {
+    if !should_check(program) {
+        return std::vec::Vec::new();
+    }
+    debug_assert!(
+        !semantic.nodes().is_empty(),
+        "initializer API validation needs a semantic model built with nodes"
+    );
     let mut rule = InitializerApiUsage {
         consts,
-        semantic: &semantic_ret.semantic,
+        semantic,
         ancestors: std::vec::Vec::new(),
         diagnostics: std::vec::Vec::new(),
     };

From b1d497a576333a3d391cbd9eb062cb2b9e94ab63 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 16:58:58 +0800
Subject: [PATCH 11/54] test(transform): pin HMR templateUpdates content

With HMR on, each component's templateUpdates entry must equal the
template compiled on its own by compile_template_to_js; without HMR
the map is empty. Guards the HMR-only second template compile.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../tests/hmr_template_updates_test.rs        | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 crates/oxc_angular_compiler/tests/hmr_template_updates_test.rs

diff --git a/crates/oxc_angular_compiler/tests/hmr_template_updates_test.rs b/crates/oxc_angular_compiler/tests/hmr_template_updates_test.rs
new file mode 100644
index 000000000..a3ae7c0eb
--- /dev/null
+++ b/crates/oxc_angular_compiler/tests/hmr_template_updates_test.rs
@@ -0,0 +1,47 @@
+//! `TransformResult::template_updates` carries each component's template
+//! function compiled on its own (`compile_template_to_js`) for HMR. The
+//! transform only does that extra compile when HMR is on.
+
+use oxc_allocator::Allocator;
+use oxc_angular_compiler::{TransformOptions, compile_template_to_js, transform_angular_file};
+
+const TEMPLATE: &str = "<div>{{ name }}</div>@if (show) {<span>x</span>}";
+
+fn source() -> String {
+    format!(
+        "import {{Component}} from '@angular/core';\n\
+         @Component({{selector: 'a-c', template: `{TEMPLATE}`}})\n\
+         export class A {{ name = 'a'; show = true; }}\n\
+         @Component({{selector: 'b-c', template: ''}})\n\
+         export class B {{}}\n"
+    )
+}
+
+#[test]
+fn hmr_reports_each_template_compiled_on_its_own() {
+    let allocator = Allocator::default();
+    let source = source();
+    let options = TransformOptions { hmr: true, ..TransformOptions::default() };
+    let result = transform_angular_file(&allocator, "test.ts", &source, Some(&options), None);
+    assert!(result.diagnostics.is_empty(), "{:?}", result.diagnostics);
+
+    let mut keys: Vec<&str> = result.template_updates.keys().map(String::as_str).collect();
+    keys.sort_unstable();
+    assert_eq!(keys, ["test.ts@A", "test.ts@B"]);
+
+    let template_allocator = Allocator::default();
+    let expected = compile_template_to_js(&template_allocator, TEMPLATE, "A", "test.ts").unwrap();
+    assert_eq!(result.template_updates["test.ts@A"], expected);
+    let expected = compile_template_to_js(&template_allocator, "", "B", "test.ts").unwrap();
+    assert_eq!(result.template_updates["test.ts@B"], expected);
+}
+
+#[test]
+fn no_template_updates_without_hmr() {
+    let allocator = Allocator::default();
+    let source = source();
+    let result = transform_angular_file(&allocator, "test.ts", &source, None, None);
+    assert!(result.diagnostics.is_empty(), "{:?}", result.diagnostics);
+    assert!(result.template_updates.is_empty());
+    assert!(result.code.contains("A_Template"), "{}", result.code);
+}

From 78e2d237040f642a939809ecbfdf5594a318da2d Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:00:19 +0800
Subject: [PATCH 12/54] fix(linker): annotate linked define calls with
 /*@__PURE__*/
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Angular's babel linker emits every `ɵɵdefine*` call it builds
(defineInjectable, defineService, defineInjector, defineNgModule,
definePipe, defineDirective, defineComponent) with a leading
`/* @__PURE__ */` comment, because the compiler marks those invocations
pure. The OXC linker left them bare, so bundlers could not drop unused
linked classes from library code.

Add the annotation to each define call, in the `/*@__PURE__*/ ` form
the OXC emitter already uses. Factories and `ɵsetClassMetadata` stay
unannotated, and in the NgModule `registerNgModuleType` IIFE only the
inner define call is pure, matching the real linker output
(@angular/compiler-cli 22.2.3 linker/babel).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 crates/oxc_angular_compiler/src/linker/mod.rs | 30 +++++-----
 .../oxc_angular_compiler/tests/linker_test.rs | 60 +++++++++++++++++++
 ...ntrol_feature_null_pass_through_input.snap |  2 +-
 ...nk_control_feature_pass_through_input.snap |  2 +-
 ...__link_inputs_array_format_dotted_key.snap |  3 +-
 ..._array_format_with_transform_function.snap |  2 +-
 .../linker_test__link_inputs_dotted_key.snap  |  3 +-
 ...nker_test__link_inputs_hyphenated_key.snap |  3 +-
 ..._link_inputs_object_format_dotted_key.snap |  3 +-
 ...r_test__link_inputs_simple_identifier.snap |  3 +-
 .../linker_test__link_outputs_dotted_key.snap |  3 +-
 ...ker_test__link_outputs_hyphenated_key.snap |  3 +-
 ..._test__link_outputs_simple_identifier.snap |  3 +-
 13 files changed, 87 insertions(+), 33 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/linker/mod.rs b/crates/oxc_angular_compiler/src/linker/mod.rs
index d85c51762..eaa21076c 100644
--- a/crates/oxc_angular_compiler/src/linker/mod.rs
+++ b/crates/oxc_angular_compiler/src/linker/mod.rs
@@ -1091,19 +1091,19 @@ fn link_injectable(
             let factory =
                 format_conditional_factory(type_name, "__ngFactoryType__", &non_ctor_expr);
             return Some(format!(
-                "{ns}.\u{0275}\u{0275}defineInjectable({{ token: {type_name}, factory: {factory}{provided_in_suffix} }})"
+                "/*@__PURE__*/ {ns}.\u{0275}\u{0275}defineInjectable({{ token: {type_name}, factory: {factory}{provided_in_suffix} }})"
             ));
         }
         // useClass without deps: delegate to useClass's own factory
         if use_class != type_name {
             // Case 7: useClass !== type without deps — already correct
             return Some(format!(
-                "{ns}.\u{0275}\u{0275}defineInjectable({{ token: {type_name}, factory: function {type_name}_Factory(__ngFactoryType__) {{ return {use_class}.\u{0275}fac(__ngFactoryType__); }}{provided_in_suffix} }})"
+                "/*@__PURE__*/ {ns}.\u{0275}\u{0275}defineInjectable({{ token: {type_name}, factory: function {type_name}_Factory(__ngFactoryType__) {{ return {use_class}.\u{0275}fac(__ngFactoryType__); }}{provided_in_suffix} }})"
             ));
         }
         // Case 6: useClass === type without deps — simple factory with __ngFactoryType__ fallback
         return Some(format!(
-            "{ns}.\u{0275}\u{0275}defineInjectable({{ token: {type_name}, factory: function {type_name}_Factory(__ngFactoryType__) {{ return new (__ngFactoryType__ || {type_name})(); }}{provided_in_suffix} }})"
+            "/*@__PURE__*/ {ns}.\u{0275}\u{0275}defineInjectable({{ token: {type_name}, factory: function {type_name}_Factory(__ngFactoryType__) {{ return new (__ngFactoryType__ || {type_name})(); }}{provided_in_suffix} }})"
         ));
     }
 
@@ -1116,12 +1116,12 @@ fn link_injectable(
             let factory =
                 format_conditional_factory(type_name, "__ngFactoryType__", &non_ctor_expr);
             return Some(format!(
-                "{ns}.\u{0275}\u{0275}defineInjectable({{ token: {type_name}, factory: {factory}{provided_in_suffix} }})"
+                "/*@__PURE__*/ {ns}.\u{0275}\u{0275}defineInjectable({{ token: {type_name}, factory: {factory}{provided_in_suffix} }})"
             ));
         }
         // Case 3: useFactory without deps — wrap in arrow function
         return Some(format!(
-            "{ns}.\u{0275}\u{0275}defineInjectable({{ token: {type_name}, factory: () => ({use_factory})(){provided_in_suffix} }})"
+            "/*@__PURE__*/ {ns}.\u{0275}\u{0275}defineInjectable({{ token: {type_name}, factory: () => ({use_factory})(){provided_in_suffix} }})"
         ));
     }
 
@@ -1134,7 +1134,7 @@ fn link_injectable(
         let ctor_type = format!("__ngFactoryType__ || {type_name}");
         let factory = format_conditional_factory(type_name, &ctor_type, &non_ctor_expr);
         return Some(format!(
-            "{ns}.\u{0275}\u{0275}defineInjectable({{ token: {type_name}, factory: {factory}{provided_in_suffix} }})"
+            "/*@__PURE__*/ {ns}.\u{0275}\u{0275}defineInjectable({{ token: {type_name}, factory: {factory}{provided_in_suffix} }})"
         ));
     }
 
@@ -1146,13 +1146,13 @@ fn link_injectable(
         let ctor_type = format!("__ngFactoryType__ || {type_name}");
         let factory = format_conditional_factory(type_name, &ctor_type, use_value);
         return Some(format!(
-            "{ns}.\u{0275}\u{0275}defineInjectable({{ token: {type_name}, factory: {factory}{provided_in_suffix} }})"
+            "/*@__PURE__*/ {ns}.\u{0275}\u{0275}defineInjectable({{ token: {type_name}, factory: {factory}{provided_in_suffix} }})"
         ));
     }
 
     // Default: use the class factory
     Some(format!(
-        "{ns}.\u{0275}\u{0275}defineInjectable({{ token: {type_name}, factory: {type_name}.\u{0275}fac{provided_in_suffix} }})"
+        "/*@__PURE__*/ {ns}.\u{0275}\u{0275}defineInjectable({{ token: {type_name}, factory: {type_name}.\u{0275}fac{provided_in_suffix} }})"
     ))
 }
 
@@ -1184,7 +1184,7 @@ fn link_service(
         if is_property_false(meta, "autoProvided") { ", autoProvided: false" } else { "" };
 
     Some(format!(
-        "{ns}.\u{0275}\u{0275}defineService({{ token: {type_name}, factory: {factory}{auto_provided_suffix} }})"
+        "/*@__PURE__*/ {ns}.\u{0275}\u{0275}defineService({{ token: {type_name}, factory: {factory}{auto_provided_suffix} }})"
     ))
 }
 
@@ -1204,7 +1204,7 @@ fn link_injector(
         parts.push(format!("imports: {imports}"));
     }
 
-    Some(format!("{ns}.\u{0275}\u{0275}defineInjector({{ {} }})", parts.join(", ")))
+    Some(format!("/*@__PURE__*/ {ns}.\u{0275}\u{0275}defineInjector({{ {} }})", parts.join(", ")))
 }
 
 /// Link ɵɵngDeclareNgModule → ɵɵdefineNgModule.
@@ -1268,7 +1268,8 @@ fn link_ng_module(
         parts.push(format!("id: {id}"));
     }
 
-    let define_call = format!("{ns}.\u{0275}\u{0275}defineNgModule({{ {} }})", parts.join(", "));
+    let define_call =
+        format!("/*@__PURE__*/ {ns}.\u{0275}\u{0275}defineNgModule({{ {} }})", parts.join(", "));
     if let Some(id) = id_source {
         Some(format!(
             "(() => {{ {ns}.\u{0275}\u{0275}registerNgModuleType({type_name}, {id}); return {define_call}; }})()"
@@ -1294,7 +1295,7 @@ fn link_pipe(
         if standalone { String::new() } else { ", standalone: false".to_string() };
 
     Some(format!(
-        "{ns}.\u{0275}\u{0275}definePipe({{ name: \"{pipe_name}\", type: {type_name}, pure: {pure}{standalone_part} }})"
+        "/*@__PURE__*/ {ns}.\u{0275}\u{0275}definePipe({{ name: \"{pipe_name}\", type: {type_name}, pure: {pure}{standalone_part} }})"
     ))
 }
 
@@ -1601,7 +1602,8 @@ fn link_directive(
         }
     }
 
-    let define_call = format!("{ns}.\u{0275}\u{0275}defineDirective({{ {} }})", parts.join(", "));
+    let define_call =
+        format!("/*@__PURE__*/ {ns}.\u{0275}\u{0275}defineDirective({{ {} }})", parts.join(", "));
     if host_binding_declarations_js.is_empty() {
         Some(define_call)
     } else {
@@ -2206,7 +2208,7 @@ fn link_component(
     }
 
     let define_component =
-        format!("{ns}.\u{0275}\u{0275}defineComponent({{ {} }})", parts.join(", "));
+        format!("/*@__PURE__*/ {ns}.\u{0275}\u{0275}defineComponent({{ {} }})", parts.join(", "));
 
     // Wrap in IIFE with template and host binding declarations
     let mut declarations = template_output.declarations_js;
diff --git a/crates/oxc_angular_compiler/tests/linker_test.rs b/crates/oxc_angular_compiler/tests/linker_test.rs
index b0598c00b..02dffb84f 100644
--- a/crates/oxc_angular_compiler/tests/linker_test.rs
+++ b/crates/oxc_angular_compiler/tests/linker_test.rs
@@ -408,3 +408,63 @@ MyDir.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0
         result.code
     );
 }
+
+/// Every `ɵɵdefine*` call carries `/*@__PURE__*/`, like the output of Angular's
+/// babel linker (`@angular/compiler-cli/linker/babel` 22.2.3) on these declarations.
+/// Factories (function expressions) and `ɵsetClassMetadata` get no annotation.
+#[test]
+fn test_link_define_calls_are_pure() {
+    let allocator = Allocator::default();
+    let code = r#"import * as i0 from "@angular/core";
+class Svc {
+  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: Svc, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: Svc, providedIn: "root" });
+}
+class Auto {
+  static ɵprov = i0.ɵɵngDeclareService({ minVersion: "21.0.0", version: "21.0.0", ngImport: i0, type: Auto });
+}
+class Mod {
+  static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: Mod, id: "foo" });
+  static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: Mod });
+}
+class P {
+  static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: P, isStandalone: true, name: "p" });
+}
+class D {
+  static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: D, isStandalone: true, selector: "[d]", ngImport: i0 });
+}
+class C {
+  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: C, isStandalone: true, selector: "c", ngImport: i0, template: "<b>{{x}}</b>" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: C, decorators: [{ type: i0.Component, args: [{ selector: "c" }] }] });
+"#;
+    let result = link(&allocator, code, "test.mjs");
+    for define in [
+        "defineInjectable",
+        "defineService",
+        "defineNgModule",
+        "defineInjector",
+        "definePipe",
+        "defineDirective",
+        "defineComponent",
+    ] {
+        let pure = format!("/*@__PURE__*/ i0.ɵɵ{define}(");
+        assert!(result.code.contains(&pure), "missing `{pure}`:\n{}", result.code);
+        assert_eq!(
+            result.code.matches(&format!("ɵɵ{define}(")).count(),
+            1,
+            "unexpected `{define}` calls:\n{}",
+            result.code
+        );
+    }
+    // `registerNgModuleType` is a side effect: only the define call inside the IIFE is pure.
+    assert!(
+        result.code.contains(
+            r#"(() => { i0.ɵɵregisterNgModuleType(Mod, "foo"); return /*@__PURE__*/ i0.ɵɵdefineNgModule("#
+        ),
+        "{}",
+        result.code
+    );
+    assert!(result.code.contains("static ɵfac = function Svc_Factory("), "{}", result.code);
+    assert!(result.code.contains("ngDevMode) && i0.ɵsetClassMetadata(C,"), "{}", result.code);
+}
diff --git a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_control_feature_null_pass_through_input.snap b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_control_feature_null_pass_through_input.snap
index f6c2673ff..26b7a90eb 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_control_feature_null_pass_through_input.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_control_feature_null_pass_through_input.snap
@@ -4,4 +4,4 @@ expression: result.code
 ---
 import * as i0 from "@angular/core";
 export class MyControl {}
-MyControl.ɵdir = i0.ɵɵdefineDirective({ type: MyControl, selectors: [["", "myControl", ""]], signals: true, features: [i0.ɵɵControlFeature(null)] });
+MyControl.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MyControl, selectors: [["", "myControl", ""]], signals: true, features: [i0.ɵɵControlFeature(null)] });
diff --git a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_control_feature_pass_through_input.snap b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_control_feature_pass_through_input.snap
index c4cb396e4..74c913d7e 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_control_feature_pass_through_input.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_control_feature_pass_through_input.snap
@@ -4,4 +4,4 @@ expression: result.code
 ---
 import * as i0 from "@angular/core";
 export class FormField {}
-FormField.ɵdir = i0.ɵɵdefineDirective({ type: FormField, selectors: [["", "formField", ""]], inputs: { field: [1, "formField", "field"] }, signals: true, features: [i0.ɵɵControlFeature("formField")] });
+FormField.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: FormField, selectors: [["", "formField", ""]], inputs: { field: [1, "formField", "field"] }, signals: true, features: [i0.ɵɵControlFeature("formField")] });
diff --git a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_array_format_dotted_key.snap b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_array_format_dotted_key.snap
index 1faf061f5..f0b7b432d 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_array_format_dotted_key.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_array_format_dotted_key.snap
@@ -1,8 +1,7 @@
 ---
 source: crates/oxc_angular_compiler/tests/linker_test.rs
-assertion_line: 54
 expression: result.code
 ---
 import * as i0 from "@angular/core";
 export class MyDir {}
-MyDir.ɵdir = i0.ɵɵdefineDirective({ type: MyDir, selectors: [["", "myDir", ""]], inputs: { "fxFlexAlign.xs": [0, "fxFlexAlign.xs", "fxFlexAlignXs"] }, standalone: false });
+MyDir.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MyDir, selectors: [["", "myDir", ""]], inputs: { "fxFlexAlign.xs": [0, "fxFlexAlign.xs", "fxFlexAlignXs"] }, standalone: false });
diff --git a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_array_format_with_transform_function.snap b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_array_format_with_transform_function.snap
index 5dde160d7..0c1076e3c 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_array_format_with_transform_function.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_array_format_with_transform_function.snap
@@ -4,4 +4,4 @@ expression: result.code
 ---
 import * as i0 from "@angular/core";
 export class MyDir {}
-MyDir.ɵdir = i0.ɵɵdefineDirective({ type: MyDir, selectors: [["", "myDir", ""]], inputs: { push: [2, "cdkConnectedOverlayPush", "push", i0.booleanAttribute] }, standalone: false });
+MyDir.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MyDir, selectors: [["", "myDir", ""]], inputs: { push: [2, "cdkConnectedOverlayPush", "push", i0.booleanAttribute] }, standalone: false });
diff --git a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_dotted_key.snap b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_dotted_key.snap
index ecca7ee45..d46fb4000 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_dotted_key.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_dotted_key.snap
@@ -1,8 +1,7 @@
 ---
 source: crates/oxc_angular_compiler/tests/linker_test.rs
-assertion_line: 20
 expression: result.code
 ---
 import * as i0 from "@angular/core";
 export class MyDir {}
-MyDir.ɵdir = i0.ɵɵdefineDirective({ type: MyDir, selectors: [["", "myDir", ""]], inputs: { "fxFlexAlign.xs": "fxFlexAlignXs" }, standalone: false });
+MyDir.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MyDir, selectors: [["", "myDir", ""]], inputs: { "fxFlexAlign.xs": "fxFlexAlignXs" }, standalone: false });
diff --git a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_hyphenated_key.snap b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_hyphenated_key.snap
index 11ae157d7..374518c7c 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_hyphenated_key.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_hyphenated_key.snap
@@ -1,8 +1,7 @@
 ---
 source: crates/oxc_angular_compiler/tests/linker_test.rs
-assertion_line: 28
 expression: result.code
 ---
 import * as i0 from "@angular/core";
 export class MyDir {}
-MyDir.ɵdir = i0.ɵɵdefineDirective({ type: MyDir, selectors: [["", "myDir", ""]], inputs: { "fxFlexAlign.lt-sm": "fxFlexAlignLtSm" }, standalone: false });
+MyDir.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MyDir, selectors: [["", "myDir", ""]], inputs: { "fxFlexAlign.lt-sm": "fxFlexAlignLtSm" }, standalone: false });
diff --git a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_object_format_dotted_key.snap b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_object_format_dotted_key.snap
index 74a3b2506..f0b7b432d 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_object_format_dotted_key.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_object_format_dotted_key.snap
@@ -1,8 +1,7 @@
 ---
 source: crates/oxc_angular_compiler/tests/linker_test.rs
-assertion_line: 46
 expression: result.code
 ---
 import * as i0 from "@angular/core";
 export class MyDir {}
-MyDir.ɵdir = i0.ɵɵdefineDirective({ type: MyDir, selectors: [["", "myDir", ""]], inputs: { "fxFlexAlign.xs": [0, "fxFlexAlign.xs", "fxFlexAlignXs"] }, standalone: false });
+MyDir.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MyDir, selectors: [["", "myDir", ""]], inputs: { "fxFlexAlign.xs": [0, "fxFlexAlign.xs", "fxFlexAlignXs"] }, standalone: false });
diff --git a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_simple_identifier.snap b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_simple_identifier.snap
index 80a67c13e..59f676854 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_simple_identifier.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_inputs_simple_identifier.snap
@@ -1,8 +1,7 @@
 ---
 source: crates/oxc_angular_compiler/tests/linker_test.rs
-assertion_line: 36
 expression: result.code
 ---
 import * as i0 from "@angular/core";
 export class MyDir {}
-MyDir.ɵdir = i0.ɵɵdefineDirective({ type: MyDir, selectors: [["", "myDir", ""]], inputs: { fxFlexAlign: "fxFlexAlign" }, standalone: false });
+MyDir.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MyDir, selectors: [["", "myDir", ""]], inputs: { fxFlexAlign: "fxFlexAlign" }, standalone: false });
diff --git a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_outputs_dotted_key.snap b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_outputs_dotted_key.snap
index 3ae23f85e..bf107a931 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_outputs_dotted_key.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_outputs_dotted_key.snap
@@ -1,8 +1,7 @@
 ---
 source: crates/oxc_angular_compiler/tests/linker_test.rs
-assertion_line: 71
 expression: result.code
 ---
 import * as i0 from "@angular/core";
 export class MyDir {}
-MyDir.ɵdir = i0.ɵɵdefineDirective({ type: MyDir, selectors: [["", "myDir", ""]], outputs: { "activate.xs": "activateXs" }, standalone: false });
+MyDir.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MyDir, selectors: [["", "myDir", ""]], outputs: { "activate.xs": "activateXs" }, standalone: false });
diff --git a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_outputs_hyphenated_key.snap b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_outputs_hyphenated_key.snap
index bb1959b31..28959f3c2 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_outputs_hyphenated_key.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_outputs_hyphenated_key.snap
@@ -1,8 +1,7 @@
 ---
 source: crates/oxc_angular_compiler/tests/linker_test.rs
-assertion_line: 79
 expression: result.code
 ---
 import * as i0 from "@angular/core";
 export class MyDir {}
-MyDir.ɵdir = i0.ɵɵdefineDirective({ type: MyDir, selectors: [["", "myDir", ""]], outputs: { "activate.lt-sm": "activateLtSm" }, standalone: false });
+MyDir.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MyDir, selectors: [["", "myDir", ""]], outputs: { "activate.lt-sm": "activateLtSm" }, standalone: false });
diff --git a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_outputs_simple_identifier.snap b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_outputs_simple_identifier.snap
index 2912e8be6..d353f84d4 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_outputs_simple_identifier.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/linker_test__link_outputs_simple_identifier.snap
@@ -1,8 +1,7 @@
 ---
 source: crates/oxc_angular_compiler/tests/linker_test.rs
-assertion_line: 87
 expression: result.code
 ---
 import * as i0 from "@angular/core";
 export class MyDir {}
-MyDir.ɵdir = i0.ɵɵdefineDirective({ type: MyDir, selectors: [["", "myDir", ""]], outputs: { activate: "activate" }, standalone: false });
+MyDir.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MyDir, selectors: [["", "myDir", ""]], outputs: { activate: "activate" }, standalone: false });

From 0ea670e92eec55c9d434c08c10acdec1169cf9ab Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:01:57 +0800
Subject: [PATCH 13/54] fix(output): emit $localize as a native tagged template
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ngtsc emits a localized message as a native tagged template for ES2015+
targets (and Angular's own AbstractEmitterVisitor does the same):

  $localize `:meaning\:x|desc@@id:Hello ${"�0�"}:INTERPOLATION:`

Oxc printed the ES5 downlevel form instead, a call through an inline
__makeTemplateObject polyfill with the cooked and raw strings as array
literals. Vite never targets ES5 here, so emit the tagged template and
drop the polyfill.

Only the raw strings are printed; the engine derives the cooked strings
from them. The raw strings already carry Angular's createCookedRawString
escapes (backslashes doubled, backticks and `${` escaped, colons escaped
in the metadata block), and they are printed verbatim like the
TypeScript printer prints rawText, line terminators included. A stored
lone surrogate, which UTF-8 output cannot hold, is printed as its
\uXXXX escape so the cooked string still holds that code unit.

The i18n integration tests now assert the native form, and a compare
fixture pins backticks, `${`, backslashes, colons and line terminators
against ngtsc.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/output/emitter.rs                     | 106 ++++++++++++------
 .../tests/integration_test.rs                 |  67 ++++-------
 .../i18n/i18n-localize-raw-text.fixture.ts    |  51 +++++++++
 3 files changed, 145 insertions(+), 79 deletions(-)
 create mode 100644 napi/angular-compiler/e2e/compare/fixtures/i18n/i18n-localize-raw-text.fixture.ts

diff --git a/crates/oxc_angular_compiler/src/output/emitter.rs b/crates/oxc_angular_compiler/src/output/emitter.rs
index edf5a5bd3..b4d8084ff 100644
--- a/crates/oxc_angular_compiler/src/output/emitter.rs
+++ b/crates/oxc_angular_compiler/src/output/emitter.rs
@@ -13,6 +13,7 @@
 //!
 //! See: `packages/compiler/src/output/abstract_emitter.ts:126-184`
 
+use std::borrow::Cow;
 use std::sync::Arc;
 
 use oxc_diagnostics::OxcDiagnostic;
@@ -1047,39 +1048,21 @@ impl JsEmitter {
         expr: &super::ast::LocalizedStringExpr<'_>,
         ctx: &mut EmitterContext,
     ) {
-        // $localize`...` becomes $localize(__makeTemplateObject(cooked, raw), expr1, expr2, ...)
-        const MAKE_TEMPLATE_OBJECT_POLYFILL: &str = "(this&&this.__makeTemplateObject||function(e,t){return Object.defineProperty?Object.defineProperty(e,\"raw\",{value:t}):e.raw=t,e})";
-
-        ctx.print("$localize(");
-        ctx.print(MAKE_TEMPLATE_OBJECT_POLYFILL);
-        ctx.print("(");
-
-        // Cooked strings (message parts)
-        ctx.print("[");
-        for (i, part) in expr.message_parts.iter().enumerate() {
+        // Emitted natively, as Angular's `AbstractEmitterVisitor.visitLocalizedString` and
+        // ngtsc (for ES2015+ targets) do: $localize `raw0${expr0}raw1...`. Only the raw
+        // strings are printed; the engine derives the cooked strings from them.
+        ctx.print("$localize `");
+        for (i, raw) in expr.raw_message_parts.iter().enumerate() {
             if i > 0 {
-                ctx.print(", ");
-            }
-            ctx.print(&escape_string(part, false));
-        }
-        ctx.print("], ");
-
-        // Raw strings
-        ctx.print("[");
-        for (i, part) in expr.raw_message_parts.iter().enumerate() {
-            if i > 0 {
-                ctx.print(", ");
+                ctx.print("${");
+                if let Some(expression) = expr.expressions.get(i - 1) {
+                    self.visit_expression(expression, ctx);
+                }
+                ctx.print("}");
             }
-            ctx.print(&escape_string(part, false));
-        }
-        ctx.print("])");
-
-        // Expressions
-        for expression in &expr.expressions {
-            ctx.print(", ");
-            self.visit_expression(expression, ctx);
+            ctx.print(&template_raw_text(raw));
         }
-        ctx.print(")");
+        ctx.print("`");
     }
 
     fn visit_params(&self, params: &[FnParam<'_>], ctx: &mut EmitterContext) {
@@ -1317,6 +1300,24 @@ pub(crate) fn escape_string(input: &str, escape_dollar: bool) -> String {
     result
 }
 
+/// The raw text of a template literal part, printed verbatim like the TypeScript printer
+/// prints a template's `rawText`. The raw text is already escaped for a template literal
+/// (backslashes, backticks and `${`); a stored lone surrogate, which UTF-8 output can't hold,
+/// is printed as its `\uXXXX` escape so the cooked string still holds that code unit.
+fn template_raw_text(raw: &str) -> Cow<'_, str> {
+    if !has_lone_surrogate(raw) {
+        return Cow::Borrowed(raw);
+    }
+    let mut result = String::with_capacity(raw.len() + 4);
+    for piece in pieces(raw) {
+        match piece {
+            Piece::Lone(unit) => push_unicode_escape(&mut result, u32::from(unit)),
+            Piece::Char(c) => result.push(c),
+        }
+    }
+    Cow::Owned(result)
+}
+
 /// Push a `\uXXXX` escape sequence for a 16-bit code unit.
 fn push_unicode_escape(buf: &mut String, code: u32) {
     const HEX: &[u8; 16] = b"0123456789ABCDEF";
@@ -2499,7 +2500,7 @@ mod tests {
     }
 
     #[test]
-    fn test_emit_localized_string_has_space_before_paren() {
+    fn test_emit_localized_string_as_tagged_template() {
         use crate::output::ast::LocalizedStringExpr;
 
         let emitter = JsEmitter::new();
@@ -2531,8 +2532,8 @@ mod tests {
         ));
 
         let output = emitter.emit_expression(&expr);
-        // Must emit "$localize(" without a space before the opening paren
-        assert!(output.starts_with("$localize("), "Expected '$localize(' but got: {output}");
+        // A native tagged template, as ngtsc emits for ES2015+ targets
+        assert_eq!(output, "$localize `Hello`");
     }
 
     #[test]
@@ -2575,9 +2576,42 @@ mod tests {
         ));
 
         let output = emitter.emit_expression(&expr);
-        // Must not have space before paren and include the expression
-        assert!(output.starts_with("$localize("), "Expected '$localize(' but got: {output}");
-        assert!(output.contains(", name)"), "Expected expression argument but got: {output}");
+        assert_eq!(output, "$localize `Hello ${name}!`");
+    }
+
+    #[test]
+    fn test_emit_localized_string_prints_raw_text_verbatim() {
+        use crate::output::ast::LocalizedStringExpr;
+
+        let emitter = JsEmitter::new();
+        let alloc = Allocator::default();
+
+        // Cooked `:m|d:x@@id:a ` ${ \` + lone U+D800 + `\nb`, with its raw text escaped as
+        // Angular's `createCookedRawString` does. The lone surrogate is stored as U+FDD0
+        // followed by U+10F800 (see `util::lone_surrogate`).
+        let mut message_parts = oxc_allocator::Vec::new_in(&&alloc);
+        message_parts.push(Ident::from(":m|d:x@@id:a ` ${ \\\u{FDD0}\u{10F800}\nb"));
+        let mut raw_message_parts = oxc_allocator::Vec::new_in(&&alloc);
+        raw_message_parts.push(Ident::from(":m|d\\:x@@id:a \\` $\\{ \\\\\u{FDD0}\u{10F800}\nb"));
+
+        let expr = OutputExpression::LocalizedString(Box::new_in(
+            LocalizedStringExpr {
+                description: None,
+                meaning: None,
+                custom_id: None,
+                message_parts,
+                raw_message_parts,
+                placeholder_names: oxc_allocator::Vec::new_in(&&alloc),
+                expressions: oxc_allocator::Vec::new_in(&&alloc),
+                source_span: None,
+            },
+            &&alloc,
+        ));
+
+        let output = emitter.emit_expression(&expr);
+        // The raw text is printed as is, line terminators included, like the TypeScript
+        // printer prints `rawText`; only the lone surrogate becomes its escape.
+        assert_eq!(output, "$localize `:m|d\\:x@@id:a \\` $\\{ \\\\\\uD800\nb`");
     }
 
     // ========================================================================
diff --git a/crates/oxc_angular_compiler/tests/integration_test.rs b/crates/oxc_angular_compiler/tests/integration_test.rs
index e3ae0b37b..375461ba3 100644
--- a/crates/oxc_angular_compiler/tests/integration_test.rs
+++ b/crates/oxc_angular_compiler/tests/integration_test.rs
@@ -5620,8 +5620,8 @@ fn test_i18n_expression_ordering_icu_plural_with_pipe() {
 }
 
 /// Compiles a component with the given template and returns its `consts` function and
-/// template function, with line breaks collapsed and the `__makeTemplateObject` helper
-/// shortened to `__tpl`, so assertions do not depend on the emitter's line wrapping.
+/// template function, with line breaks collapsed, so assertions do not depend on the
+/// emitter's line wrapping.
 fn compile_i18n_component(template: &str) -> String {
     let allocator = Allocator::default();
     let source = format!(
@@ -5631,10 +5631,7 @@ fn compile_i18n_component(template: &str) -> String {
     );
     let result = transform_angular_file(&allocator, "repro.ts", &source, None, None);
     assert!(!result.has_errors(), "Should not have errors: {:?}", result.diagnostics);
-    let code = result.code.replace(
-        r#"(this&&this.__makeTemplateObject||function(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e})"#,
-        "__tpl",
-    );
+    let code = result.code;
     let start = code.find("consts:").expect("component should have consts");
     let end = code[start..].find("encapsulation").map_or(code.len(), |e| start + e);
     let mut out = String::new();
@@ -5657,7 +5654,7 @@ fn assert_contains(haystack: &str, needle: &str) {
 fn test_i18n_attribute_message_uses_attribute_value() {
     let js = compile_i18n_component(r#"<div i18n-title="@@close" title="Close"></div>"#);
     assert_contains(&js, r#"goog.getMsg("Close")"#);
-    assert_contains(&js, r#"__tpl([":@@close:Close"], [":@@close:Close"])"#);
+    assert_contains(&js, "$localize `:@@close:Close`");
     assert_contains(&js, r#"return [["title",i18n_0]]"#);
 }
 
@@ -5671,10 +5668,7 @@ fn test_i18n_interpolated_attribute_message_uses_attribute_value() {
         &js,
         "goog.getMsg(\"Hi {$interpolation}!\",{\"interpolation\":\"\u{FFFD}0\u{FFFD}\"}",
     );
-    assert_contains(
-        &js,
-        "__tpl([\":@@hi:Hi \", \":INTERPOLATION:!\"], [\":@@hi:Hi \", \":INTERPOLATION:!\"]), \"\u{FFFD}0\u{FFFD}\")",
-    );
+    assert_contains(&js, "$localize `:@@hi:Hi ${\"\u{FFFD}0\u{FFFD}\"}:INTERPOLATION:!`");
 }
 
 /// `i18n-<attr>` alongside an `i18n` element body: both messages keep their text.
@@ -5686,9 +5680,9 @@ fn test_i18n_attribute_and_element_body_on_same_element() {
         r#"<div i18n="@@body" i18n-title="@@ttl" title="Close">Body text</div>"#,
     );
     assert_contains(&js, r#"goog.getMsg("Close")"#);
-    assert_contains(&js, r#"__tpl([":@@ttl:Close"], [":@@ttl:Close"])"#);
+    assert_contains(&js, "$localize `:@@ttl:Close`");
     assert_contains(&js, r#"goog.getMsg("Body text")"#);
-    assert_contains(&js, r#"__tpl([":@@body:Body text"], [":@@body:Body text"])"#);
+    assert_contains(&js, "$localize `:@@body:Body text`");
     assert_contains(&js, r#"return [i18n_1,["title",i18n_0]]"#);
 }
 
@@ -5709,7 +5703,7 @@ fn test_i18n_sole_icu_is_the_message() {
     );
     assert_contains(
         &js,
-        r#"__tpl([":@@items:{VAR_PLURAL, plural, =1 {one item} other {{INTERPOLATION} items}}"], [":@@items:{VAR_PLURAL, plural, =1 {one item} other {{INTERPOLATION} items}}"]))"#,
+        "$localize `:@@items:{VAR_PLURAL, plural, =1 {one item} other {{INTERPOLATION} items}}`",
     );
     // Post-processing runs after the Closure/$localize branch, for both modes.
     assert_contains(
@@ -5733,7 +5727,7 @@ fn test_i18n_sole_select_icu_is_the_message() {
         &js,
         r#"goog.getMsg("{VAR_SELECT, select, male {he} female {she} other {they}}")"#,
     );
-    assert_contains(&js, r#"__tpl(["{VAR_SELECT, select, male {he} female {she} other {they}}"]"#);
+    assert_contains(&js, "$localize `{VAR_SELECT, select, male {he} female {she} other {they}}`");
     assert_contains(
         &js,
         "}(i18n_0 = i0.ɵɵi18nPostprocess(i18n_0,{\"VAR_SELECT\":\"\u{FFFD}0\u{FFFD}\"}));",
@@ -5801,7 +5795,7 @@ fn test_i18n_icu_with_sibling_content_is_sub_message() {
     );
     assert_contains(
         &js,
-        r#"__tpl(["{VAR_PLURAL, plural, =1 {one item} other {{INTERPOLATION} items}}"]"#,
+        "$localize `{VAR_PLURAL, plural, =1 {one item} other {{INTERPOLATION} items}}`",
     );
     assert_contains(
         &js,
@@ -5813,7 +5807,7 @@ fn test_i18n_icu_with_sibling_content_is_sub_message() {
     );
     assert_contains(
         &js,
-        "__tpl([\"Hello \", \":INTERPOLATION:! \", \":ICU@@3633748910064245637:\"], [\"Hello \", \":INTERPOLATION:! \", \":ICU@@3633748910064245637:\"]), \"\u{FFFD}0\u{FFFD}\", i18n_0)",
+        "$localize `Hello ${\"\u{FFFD}0\u{FFFD}\"}:INTERPOLATION:! ${i18n_0}:ICU@@3633748910064245637:`",
     );
     assert_contains(&js, "return [i18n_1]");
     assert_contains(&js, "i0.ɵɵi18nExp(ctx.name)(ctx.count)(ctx.count);");
@@ -5842,7 +5836,7 @@ fn test_i18n_two_icus_in_one_message() {
     assert_contains(&js, r#"goog.getMsg("{$icu} and {$icu_1}",{"icu":i18n_0,"icu_1":i18n_1}"#);
     assert_contains(
         &js,
-        r#"__tpl(["", ":ICU@@3286071892512017447: and ", ":ICU_1@@8078998681144872872:"], ["", ":ICU@@3286071892512017447: and ", ":ICU_1@@8078998681144872872:"]), i18n_0, i18n_1)"#,
+        "$localize `${i18n_0}:ICU@@3286071892512017447: and ${i18n_1}:ICU_1@@8078998681144872872:`",
     );
     assert!(!js.contains("i18nPostprocess(i18n_2"), "Root message needs no post-processing:\n{js}");
     assert_contains(&js, "return [i18n_2]");
@@ -5860,7 +5854,7 @@ fn test_i18n_localize_placeholder_names_keep_underscores() {
     );
     assert_contains(
         &js,
-        "__tpl([\"Hello \", \":START_BOLD_TEXT:world\", \":CLOSE_BOLD_TEXT:!\"], [\"Hello \", \":START_BOLD_TEXT:world\", \":CLOSE_BOLD_TEXT:!\"]), \"\u{FFFD}#2\u{FFFD}\", \"\u{FFFD}/#2\u{FFFD}\")",
+        "$localize `Hello ${\"\u{FFFD}#2\u{FFFD}\"}:START_BOLD_TEXT:world${\"\u{FFFD}/#2\u{FFFD}\"}:CLOSE_BOLD_TEXT:!`",
     );
 }
 
@@ -5880,10 +5874,7 @@ fn test_i18n_attribute_with_empty_value_has_no_message() {
 fn test_i18n_custom_interpolation_placeholder_name() {
     let js = compile_i18n_component(r#"<span i18n>Hello {{ name // i18n(ph="PH") }}</span>"#);
     assert_contains(&js, "goog.getMsg(\"Hello {$ph}\",{\"ph\":\"\u{FFFD}0\u{FFFD}\"})");
-    assert_contains(
-        &js,
-        "__tpl([\"Hello \", \":PH:\"], [\"Hello \", \":PH:\"]), \"\u{FFFD}0\u{FFFD}\")",
-    );
+    assert_contains(&js, "$localize `Hello ${\"\u{FFFD}0\u{FFFD}\"}:PH:`");
 }
 
 /// Whitespace next to an ICU is part of the message. Angular 22.1.5:
@@ -5899,7 +5890,7 @@ fn test_i18n_keeps_whitespace_next_to_icu() {
     assert_contains(&js, r#"goog.getMsg("{$icu} {$startBoldText}x{$closeBoldText}","#);
     assert_contains(
         &js,
-        r#"__tpl(["", ":ICU@@8078998681144872872: ", ":START_BOLD_TEXT:x", ":CLOSE_BOLD_TEXT:"]"#,
+        "$localize `${i18n_0}:ICU@@8078998681144872872: ${\"\u{FFFD}#2\u{FFFD}\"}:START_BOLD_TEXT:x${\"\u{FFFD}/#2\u{FFFD}\"}:CLOSE_BOLD_TEXT:`",
     );
 }
 
@@ -5929,7 +5920,7 @@ fn test_i18n_if_else_block_placeholders() {
     );
     assert_contains(
         &js,
-        r#"__tpl(["", ":START_BLOCK_IF:", ":START_TAG_SPAN:yes", ":CLOSE_TAG_SPAN:", ":CLOSE_BLOCK_IF:", ":START_BLOCK_ELSE:no", ":CLOSE_BLOCK_ELSE:"]"#,
+        "`${\"\u{FFFD}*2:1\u{FFFD}\"}:START_BLOCK_IF:${\"\u{FFFD}#1:1\u{FFFD}\"}:START_TAG_SPAN:yes${\"\u{FFFD}/#1:1\u{FFFD}\"}:CLOSE_TAG_SPAN:${\"\u{FFFD}/*2:1\u{FFFD}\"}:CLOSE_BLOCK_IF:${\"\u{FFFD}*3:2\u{FFFD}\"}:START_BLOCK_ELSE:no${\"\u{FFFD}/*3:2\u{FFFD}\"}:CLOSE_BLOCK_ELSE:`",
     );
     assert!(!js.contains("i18nPostprocess"), "No post-processing expected:\n{js}");
 }
@@ -5942,11 +5933,8 @@ fn test_i18n_meta_block_escapes_colons() {
     let js = compile_i18n_component(
         r#"<div i18n="meaning:A|descA@@idA">Content A</div><div i18n-title="d: x@@t2" title="T">x</div>"#,
     );
-    assert_contains(
-        &js,
-        "__tpl([\":meaning:A|descA@@idA:Content A\"], [\":meaning\\\\:A|descA@@idA:Content A\"])",
-    );
-    assert_contains(&js, "__tpl([\":d: x@@t2:T\"], [\":d\\\\: x@@t2:T\"])");
+    assert_contains(&js, "$localize `:meaning\\:A|descA@@idA:Content A`");
+    assert_contains(&js, "$localize `:d\\: x@@t2:T`");
 }
 
 /// An ICU outside any i18n block still gets a message and is wrapped in its own i18n block.
@@ -6055,7 +6043,7 @@ fn test_i18n_ng_content_placeholder_values() {
 fn test_i18n_custom_placeholder_name_with_spaces() {
     let js = compile_i18n_component(r#"<div i18n>Hi {{ name // i18n(ph = "who") }}</div>"#);
     assert_contains(&js, "goog.getMsg(\"Hi {$who}\",{\"who\":\"\u{FFFD}0\u{FFFD}\"})");
-    assert_contains(&js, "__tpl([\"Hi \", \":WHO:\"]");
+    assert_contains(&js, "$localize `Hi ${\"\u{FFFD}0\u{FFFD}\"}:WHO:`");
 }
 
 /// An i18n element with a structural directive keeps its interpolation value. Angular 22.1.5:
@@ -6095,7 +6083,7 @@ fn test_i18n_namespaced_element_placeholders() {
         r#"<svg xmlns="http://www.w3.org/2000/svg"><foreignObject><xhtml:div xmlns="http://www.w3.org/1999/xhtml" i18n>Count: <span>5</span></xhtml:div></foreignObject></svg>"#,
     );
     assert_contains(&js, "goog.getMsg(\"Count: {$startTagXhtmlSpan}5{$closeTagXhtmlSpan}\"");
-    assert_contains(&js, "\":START_TAG__XHTML_SPAN:5\"");
+    assert_contains(&js, "}:START_TAG__XHTML_SPAN:5${");
 }
 
 /// SVG elements in an i18n message are named with their namespace. Angular 22.1.5:
@@ -6106,7 +6094,7 @@ fn test_i18n_svg_element_placeholders() {
         compile_i18n_component(r#"<div i18n>Save <svg><circle r="1"></circle></svg> now</div>"#);
     assert_contains(
         &js,
-        r#"__tpl(["Save ", ":START_TAG__SVG_SVG:", ":START_TAG__SVG_CIRCLE:", ":CLOSE_TAG__SVG_CIRCLE:", ":CLOSE_TAG__SVG_SVG: now"]"#,
+        "$localize `Save ${\"\u{FFFD}#2\u{FFFD}\"}:START_TAG__SVG_SVG:${\"\u{FFFD}#3\u{FFFD}\"}:START_TAG__SVG_CIRCLE:${\"\u{FFFD}/#3\u{FFFD}\"}:CLOSE_TAG__SVG_CIRCLE:${\"\u{FFFD}/#2\u{FFFD}\"}:CLOSE_TAG__SVG_SVG: now`",
     );
 }
 
@@ -6136,10 +6124,7 @@ fn test_i18n_message_keeps_ngsp() {
 fn test_i18n_icu_placeholder_has_associated_message_id() {
     let js =
         compile_i18n_component(r#"<span i18n>a {count, plural, =1 {one} other {more}} b</span>"#);
-    assert_contains(
-        &js,
-        r#"__tpl(["a ", ":ICU@@911278603808503436: b"], ["a ", ":ICU@@911278603808503436: b"]), i18n_0)"#,
-    );
+    assert_contains(&js, "$localize `a ${i18n_0}:ICU@@911278603808503436: b`");
 }
 
 /// Text expressions of an i18n block are applied at the block's last slot, so Angular advances
@@ -6171,8 +6156,7 @@ fn test_i18n_attribute_on_ng_template_uses_bindings_marker() {
 /// Text that looks like a placeholder marker stays literal text. Angular 22.1.5 for
 /// `&#123;\\path and &#123;$x&#125; {{ name }}`:
 ///   goog.getMsg("{\\\\path and {$x} {$interpolation}", { "interpolation": "\\uFFFD0\\uFFFD" })
-///   __makeTemplateObject(["{\\\\path and {$x} ", ":INTERPOLATION:"],
-///                        ["{\\\\\\\\path and {$x} ", ":INTERPOLATION:"])
+///   $localize `{\\\\path and {$x} ${"\\uFFFD0\\uFFFD"}:INTERPOLATION:`
 #[test]
 fn test_i18n_literal_placeholder_like_text() {
     let js = compile_i18n_component(r"<div i18n>&#123;\\path and &#123;$x&#125; {{ name }}</div>");
@@ -6180,10 +6164,7 @@ fn test_i18n_literal_placeholder_like_text() {
         &js,
         "goog.getMsg(\"{\\\\path and {$x} {$interpolation}\",{\"interpolation\":\"\u{FFFD}0\u{FFFD}\"})",
     );
-    assert_contains(
-        &js,
-        "__tpl([\"{\\\\path and {$x} \", \":INTERPOLATION:\"], [\"{\\\\\\\\path and {$x} \", \":INTERPOLATION:\"]), \"\u{FFFD}0\u{FFFD}\")",
-    );
+    assert_contains(&js, "$localize `{\\\\path and {$x} ${\"\u{FFFD}0\u{FFFD}\"}:INTERPOLATION:`");
 }
 
 #[test]
diff --git a/napi/angular-compiler/e2e/compare/fixtures/i18n/i18n-localize-raw-text.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/i18n/i18n-localize-raw-text.fixture.ts
new file mode 100644
index 000000000..02d311dfd
--- /dev/null
+++ b/napi/angular-compiler/e2e/compare/fixtures/i18n/i18n-localize-raw-text.fixture.ts
@@ -0,0 +1,51 @@
+/**
+ * $localize raw text.
+ *
+ * ngtsc emits `$localize` as a native tagged template for ES2015+ targets and prints each
+ * part's raw text as Angular's `createCookedRawString` escapes it: backslashes doubled,
+ * backticks and `${` escaped, colons escaped in the metadata block (and a leading colon of a
+ * part without one), and line terminators kept as they are.
+ */
+import type { Fixture } from '../types.js'
+
+export const fixtures: Fixture[] = [
+  {
+    name: 'i18n-localize-raw-text-escapes',
+    category: 'i18n',
+    description: 'Backticks, ${, backslashes and colons in $localize raw text',
+    className: 'LocalizeRawTextComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-localize-raw-text',
+  standalone: true,
+  template: '<div i18n="mean:ing|desc:ription@@raw-id">a \` b $&#123; c &#125; d \\\\ e : {{ name }} f \\\\\` g</div><span i18n>:starts with a colon</span><p i18n-title title="x \` y \\\\ z">t</p>',
+})
+export class LocalizeRawTextComponent {
+  name = 'n';
+}
+    `.trim(),
+    expectedFeatures: ['ɵɵi18n', '$localize'],
+  },
+  {
+    name: 'i18n-localize-raw-text-line-terminators',
+    category: 'i18n',
+    description: 'Line feeds and LS/PS stay as they are in $localize raw text',
+    className: 'LocalizeLineTerminatorsComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-localize-line-terminators',
+  standalone: true,
+  preserveWhitespaces: true,
+  template: '<div i18n>one\\ntwo\\u2028three\\u2029four</div>',
+})
+export class LocalizeLineTerminatorsComponent {}
+    `.trim(),
+    expectedFeatures: ['ɵɵi18n', '$localize'],
+  },
+]

From 2b6e28d7309297b1e136d1038265bff9e03ef6ac Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:03:06 +0800
Subject: [PATCH 14/54] fix(component): emit consts with initializers as an
 arrow function

When a template's consts need prepare statements (the i18n Closure /
$localize branches), Angular's compiler wraps them in
`o.arrowFn([], [...statements, return consts])`, which ngtsc prints as

  consts: () => { let i18n_0; ...; return [...]; }

Oxc emitted an anonymous `function () { ... }`. Build an arrow function
with a block body instead, in the component definition and in the HMR
and linker template outputs, which build the same consts expression.
Without initializers consts stays a plain array, as in Angular.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/component/definition.rs               | 17 +++++-----
 .../src/component/transform.rs                | 25 +++++++--------
 .../tests/integration_test.rs                 | 32 +++++++++++++++++++
 3 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/component/definition.rs b/crates/oxc_angular_compiler/src/component/definition.rs
index ea4f317a5..da6323385 100644
--- a/crates/oxc_angular_compiler/src/component/definition.rs
+++ b/crates/oxc_angular_compiler/src/component/definition.rs
@@ -29,9 +29,9 @@ use crate::directive::{
 };
 use crate::factory::create_invalid_factory_call;
 use crate::output::ast::{
-    FnParam, FunctionExpr, InstantiateExpr, InvokeFunctionExpr, LiteralArrayExpr, LiteralExpr,
-    LiteralMapEntry, LiteralMapExpr, LiteralValue, OutputExpression, OutputStatement, ReadPropExpr,
-    ReadVarExpr, ReturnStatement,
+    ArrowFunctionBody, ArrowFunctionExpr, FnParam, FunctionExpr, InstantiateExpr,
+    InvokeFunctionExpr, LiteralArrayExpr, LiteralExpr, LiteralMapEntry, LiteralMapExpr,
+    LiteralValue, OutputExpression, OutputStatement, ReadPropExpr, ReadVarExpr, ReturnStatement,
 };
 use crate::pipeline::compilation::{ComponentCompilationJob, ConstValue};
 use crate::pipeline::emit::HostBindingCompilationResult;
@@ -322,7 +322,7 @@ fn generate_cmp_definition<'a>(
         false,
     ));
 
-    // 18. consts: [...] or consts: function() { ...initializers...; return [...]; }
+    // 18. consts: [...] or consts: () => { ...initializers...; return [...]; }
     // Per Angular compiler.ts lines 260-268:
     // - If there are const initializers (e.g., for i18n dual-mode), wrap in arrow function
     // - Otherwise, emit as plain literal array
@@ -334,7 +334,7 @@ fn generate_cmp_definition<'a>(
 
         let consts_value = if !job.consts_initializers.is_empty() {
             // Wrap consts in an arrow function that runs initializers first
-            // function() { ...initializers...; return [...consts...]; }
+            // () => { ...initializers...; return [...consts...]; }
             let mut fn_stmts: OxcVec<'a, OutputStatement<'a>> =
                 OxcVec::with_capacity_in(job.consts_initializers.len() + 1, &allocator);
 
@@ -355,11 +355,10 @@ fn generate_cmp_definition<'a>(
                 &allocator,
             )));
 
-            OutputExpression::Function(Box::new_in(
-                FunctionExpr {
-                    name: None,
+            OutputExpression::ArrowFunction(Box::new_in(
+                ArrowFunctionExpr {
                     params: OxcVec::new_in(&allocator),
-                    statements: fn_stmts,
+                    body: ArrowFunctionBody::Statements(fn_stmts),
                     source_span: None,
                 },
                 &allocator,
diff --git a/crates/oxc_angular_compiler/src/component/transform.rs b/crates/oxc_angular_compiler/src/component/transform.rs
index 54d1ff031..54b6193f8 100644
--- a/crates/oxc_angular_compiler/src/component/transform.rs
+++ b/crates/oxc_angular_compiler/src/component/transform.rs
@@ -56,8 +56,8 @@ use crate::ng_module::{
     extract_ng_module_metadata_in, find_ng_module_decorator, generate_full_ng_module_definition,
 };
 use crate::output::ast::{
-    DeclareFunctionStmt, FunctionExpr, OutputExpression, OutputStatement, ReadPropExpr,
-    ReadVarExpr, StmtModifier,
+    ArrowFunctionBody, ArrowFunctionExpr, DeclareFunctionStmt, FunctionExpr, OutputExpression,
+    OutputStatement, ReadPropExpr, ReadVarExpr, StmtModifier,
 };
 use crate::output::emitter::JsEmitter;
 use crate::parser::ParseTemplateOptions;
@@ -5924,7 +5924,8 @@ pub fn compile_template_for_hmr<'a>(
     // which has a different consts array, causing index out of bounds errors.
     let consts_js = if !job.consts.is_empty() {
         use crate::output::ast::{
-            FunctionExpr, LiteralArrayExpr, OutputExpression, OutputStatement, ReturnStatement,
+            ArrowFunctionBody, ArrowFunctionExpr, LiteralArrayExpr, OutputExpression,
+            OutputStatement, ReturnStatement,
         };
 
         let mut const_entries: OxcVec<'a, OutputExpression<'a>> = OxcVec::new_in(&allocator);
@@ -5938,7 +5939,7 @@ pub fn compile_template_for_hmr<'a>(
 
         let consts_expr = if !job.consts_initializers.is_empty() {
             // When there are initializers (e.g., i18n variable declarations), wrap consts
-            // in a function that runs initializers first and returns the array.
+            // in an arrow function that runs initializers first and returns the array.
             // This matches what definition.rs does for the initial component definition.
             let mut fn_stmts: OxcVec<'a, OutputStatement<'a>> =
                 OxcVec::with_capacity_in(job.consts_initializers.len() + 1, &allocator);
@@ -5958,11 +5959,10 @@ pub fn compile_template_for_hmr<'a>(
                 &allocator,
             )));
 
-            OutputExpression::Function(oxc_allocator::Box::new_in(
-                FunctionExpr {
-                    name: None,
+            OutputExpression::ArrowFunction(oxc_allocator::Box::new_in(
+                ArrowFunctionExpr {
                     params: OxcVec::new_in(&allocator),
-                    statements: fn_stmts,
+                    body: ArrowFunctionBody::Statements(fn_stmts),
                     source_span: None,
                 },
                 &allocator,
@@ -6641,7 +6641,7 @@ pub fn compile_template_for_linker<'a>(
         }
 
         let consts_expr = if !job.consts_initializers.is_empty() {
-            // Wrap in function with initializers
+            // Wrap in an arrow function with initializers, as Angular does
             let mut fn_stmts: OxcVec<'a, OutputStatement<'a>> =
                 OxcVec::with_capacity_in(job.consts_initializers.len() + 1, &allocator);
             for stmt in job.consts_initializers.drain(..) {
@@ -6660,11 +6660,10 @@ pub fn compile_template_for_linker<'a>(
                 },
                 &allocator,
             )));
-            OutputExpression::Function(oxc_allocator::Box::new_in(
-                FunctionExpr {
-                    name: None,
+            OutputExpression::ArrowFunction(oxc_allocator::Box::new_in(
+                ArrowFunctionExpr {
                     params: OxcVec::new_in(&allocator),
-                    statements: fn_stmts,
+                    body: ArrowFunctionBody::Statements(fn_stmts),
                     source_span: None,
                 },
                 &allocator,
diff --git a/crates/oxc_angular_compiler/tests/integration_test.rs b/crates/oxc_angular_compiler/tests/integration_test.rs
index 375461ba3..0a61b6f36 100644
--- a/crates/oxc_angular_compiler/tests/integration_test.rs
+++ b/crates/oxc_angular_compiler/tests/integration_test.rs
@@ -5647,6 +5647,38 @@ fn assert_contains(haystack: &str, needle: &str) {
     assert!(haystack.contains(needle), "Expected to find:\n{needle}\nin:\n{haystack}");
 }
 
+/// `consts` with i18n initializers is an arrow function with a block body, and a message is
+/// a native `$localize` tagged template. Angular 22.2 `ngc` (ES2022):
+///   consts: () => { let i18n_0; ... i18n_0 = $localize `:@@close:Close`; } return [...]; }
+/// Without initializers `consts` stays a plain array.
+#[test]
+fn test_i18n_consts_is_arrow_function_with_native_localize() {
+    let js = compile_i18n_component(r#"<div i18n-title="@@close" title="Close"></div>"#);
+    assert_contains(&js, "consts:() =>{let i18n_0;");
+    assert_contains(&js, "(i18n_0 = $localize `:@@close:Close`);");
+    assert!(!js.contains("makeTemplateObject"), "No template object helper expected:\n{js}");
+
+    let js = compile_i18n_component(r#"<div title="Close"></div>"#);
+    assert_contains(&js, r#"consts:[["title","Close"]]"#);
+}
+
+/// The HMR update's `consts` takes the same arrow form as the component definition.
+#[test]
+fn test_hmr_i18n_consts_is_arrow_function() {
+    let allocator = Allocator::default();
+    let output = oxc_angular_compiler::compile_template_for_hmr(
+        &allocator,
+        r#"<div i18n-title="@@close" title="Close"></div>"#,
+        "Repro",
+        "repro.ts",
+        &ComponentTransformOptions::default(),
+    )
+    .expect("HMR template should compile");
+    let consts = output.consts_js.expect("template should have consts");
+    assert!(consts.starts_with("() =>{"), "Expected an arrow function, got:\n{consts}");
+    assert!(consts.contains("$localize `:@@close:Close`"), "got:\n{consts}");
+}
+
 /// An `i18n-<attr>` message takes the attribute's own value as its text.
 /// Expected output taken from Angular 22.1.5 `ngc`:
 ///   goog.getMsg("Close") / $localize `:@@close:Close`

From c9ca4a75b54d8026f1375f5507b2ee1783245d57 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:03:16 +0800
Subject: [PATCH 15/54] fix(injectable): use expression-body arrow factories
 like ngtsc
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ngtsc's compileInjectable builds two factory wrappers with o.arrowFn and
an expression body:

- useFactory without deps:   factory: () => makeIt()
- useClass without deps:     factory: __ngFactoryType__ => Other.ɵfac(__ngFactoryType__)

Oxc emitted `function () { return makeIt(); }` for the first. For
useClass it emitted `Other.ɵfac` directly, or, for a forwardRef,
`function (t) { return i0.resolveForwardRef(Other).ɵfac(t); }`.

ngtsc delegates directly (`Type.ɵfac`) only when the useClass is the
same node as the decorated class, which never happens for a written
useClass, and full compilation passes resolveForwardRefs: false, so a
forwardRef(() => Other) is unwrapped and gets the same arrow as a plain
useClass: Other. The arrow also reads the class lazily, so a useClass
declared later in the file no longer hits the TDZ when ɵprov is built.

The compare fixture object-members-injectable-use-factory now matches
ngtsc's ɵprov; its known difference keeps only the unrelated ɵfac entry.
New fixtures pin useFactory, useClass and useClass with forwardRef.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/injectable/compiler.rs                | 161 +++++++++---------
 .../e2e/compare/fixtures/known-differences.ts |  18 +-
 .../injectable-factory-forms.fixture.ts       |  62 +++++++
 3 files changed, 160 insertions(+), 81 deletions(-)
 create mode 100644 napi/angular-compiler/e2e/compare/fixtures/providers/injectable-factory-forms.fixture.ts

diff --git a/crates/oxc_angular_compiler/src/injectable/compiler.rs b/crates/oxc_angular_compiler/src/injectable/compiler.rs
index 1edd863b1..e93373e14 100644
--- a/crates/oxc_angular_compiler/src/injectable/compiler.rs
+++ b/crates/oxc_angular_compiler/src/injectable/compiler.rs
@@ -21,8 +21,9 @@ use crate::factory::{
     R3FactoryMetadata, compile_factory_function,
 };
 use crate::output::ast::{
-    FnParam, FunctionExpr, InvokeFunctionExpr, LiteralExpr, LiteralMapEntry, LiteralMapExpr,
-    LiteralValue, OutputExpression, OutputStatement, ReadPropExpr, ReadVarExpr, ReturnStatement,
+    ArrowFunctionBody, ArrowFunctionExpr, FnParam, InvokeFunctionExpr, LiteralExpr,
+    LiteralMapEntry, LiteralMapExpr, LiteralValue, OutputExpression, OutputStatement, ReadPropExpr,
+    ReadVarExpr,
 };
 use crate::r3::Identifiers;
 
@@ -96,7 +97,7 @@ fn build_factory_expression<'a>(
             create_factory_delegation(allocator, &metadata.r#type)
         }
 
-        InjectableProvider::UseClass { class_expr, is_forward_ref, deps } => {
+        InjectableProvider::UseClass { class_expr, deps, .. } => {
             match deps {
                 Some(deps) if !deps.is_empty() => {
                     // useClass with deps: use delegated factory with conditional pattern
@@ -118,13 +119,14 @@ fn build_factory_expression<'a>(
                     );
                     result.expression
                 }
-                _ if *is_forward_ref => {
-                    // Forward reference: wrap in arrow function
-                    create_forward_ref_factory(allocator, core_namespace, class_expr)
-                }
                 _ => {
-                    // useClass without deps: delegate to the alternative class's factory
-                    create_factory_delegation(allocator, class_expr)
+                    // useClass without deps: delegate to the class's factory from an arrow,
+                    // `(__ngFactoryType__) => UseClass.ɵfac(__ngFactoryType__)`. ngtsc's
+                    // `delegateToFactory` only delegates directly when both are the same
+                    // node, which a `useClass` never is, and full compilation passes
+                    // `resolveForwardRefs: false`: a `forwardRef(() => X)` is unwrapped to
+                    // `X`, and the arrow body reads it lazily.
+                    create_factory_function(allocator, class_expr)
                 }
             }
         }
@@ -300,59 +302,19 @@ fn create_factory_delegation<'a>(
     ))
 }
 
-/// Creates a forward reference factory: `(t) => resolveForwardRef(Type).ɵfac(t)`
-fn create_forward_ref_factory<'a>(
+/// Creates a factory that delegates to `type_expr`'s factory:
+/// `(__ngFactoryType__) => Type.ɵfac(__ngFactoryType__)`.
+///
+/// See: `createFactoryFunction` in `packages/compiler/src/injectable_compiler_2.ts`
+fn create_factory_function<'a>(
     allocator: &'a Allocator,
-    core_namespace: &'a str,
     type_expr: &OutputExpression<'a>,
 ) -> OutputExpression<'a> {
-    let param_name = Ident::from("t");
+    let param_name = Ident::from("__ngFactoryType__");
     let mut params = Vec::new_in(&allocator);
-    params.push(FnParam { name: param_name.clone() });
-
-    // resolveForwardRef(Type)
-    let resolve_fn = OutputExpression::ReadProp(Box::new_in(
-        ReadPropExpr {
-            receiver: Box::new_in(
-                OutputExpression::ReadVar(Box::new_in(
-                    ReadVarExpr { name: Ident::from(core_namespace), source_span: None },
-                    &allocator,
-                )),
-                &allocator,
-            ),
-            name: Ident::from(Identifiers::RESOLVE_FORWARD_REF),
-            optional: false,
-            source_span: None,
-        },
-        &allocator,
-    ));
-
-    let mut resolve_args = Vec::new_in(&allocator);
-    resolve_args.push(type_expr.clone_in(allocator));
-
-    let resolved_type = OutputExpression::InvokeFunction(Box::new_in(
-        InvokeFunctionExpr {
-            fn_expr: Box::new_in(resolve_fn, &allocator),
-            args: resolve_args,
-            pure: false,
-            optional: false,
-            source_span: None,
-        },
-        &allocator,
-    ));
-
-    // resolveForwardRef(Type).ɵfac
-    let fac_access = OutputExpression::ReadProp(Box::new_in(
-        ReadPropExpr {
-            receiver: Box::new_in(resolved_type, &allocator),
-            name: Ident::from("ɵfac"),
-            optional: false,
-            source_span: None,
-        },
-        &allocator,
-    ));
+    params.push(FnParam { name: param_name });
 
-    // resolveForwardRef(Type).ɵfac(t)
+    // Type.ɵfac(__ngFactoryType__)
     let mut call_args = Vec::new_in(&allocator);
     call_args.push(OutputExpression::ReadVar(Box::new_in(
         ReadVarExpr { name: param_name, source_span: None },
@@ -361,7 +323,7 @@ fn create_forward_ref_factory<'a>(
 
     let fac_call = OutputExpression::InvokeFunction(Box::new_in(
         InvokeFunctionExpr {
-            fn_expr: Box::new_in(fac_access, &allocator),
+            fn_expr: Box::new_in(create_factory_delegation(allocator, type_expr), &allocator),
             args: call_args,
             pure: false,
             optional: false,
@@ -370,15 +332,12 @@ fn create_forward_ref_factory<'a>(
         &allocator,
     ));
 
-    // Create the arrow function
-    let mut body = Vec::new_in(&allocator);
-    body.push(OutputStatement::Return(Box::new_in(
-        ReturnStatement { value: fac_call, source_span: None },
-        &allocator,
-    )));
-
-    OutputExpression::Function(Box::new_in(
-        FunctionExpr { name: None, params, statements: body, source_span: None },
+    OutputExpression::ArrowFunction(Box::new_in(
+        ArrowFunctionExpr {
+            params,
+            body: ArrowFunctionBody::Expression(Box::new_in(fac_call, &allocator)),
+            source_span: None,
+        },
         &allocator,
     ))
 }
@@ -388,8 +347,6 @@ fn create_use_factory_wrapper<'a>(
     allocator: &'a Allocator,
     factory: &OutputExpression<'a>,
 ) -> OutputExpression<'a> {
-    let params = Vec::new_in(&allocator);
-
     // factory()
     let factory_call = OutputExpression::InvokeFunction(Box::new_in(
         InvokeFunctionExpr {
@@ -402,14 +359,12 @@ fn create_use_factory_wrapper<'a>(
         &allocator,
     ));
 
-    let mut body = Vec::new_in(&allocator);
-    body.push(OutputStatement::Return(Box::new_in(
-        ReturnStatement { value: factory_call, source_span: None },
-        &allocator,
-    )));
-
-    OutputExpression::Function(Box::new_in(
-        FunctionExpr { name: None, params, statements: body, source_span: None },
+    OutputExpression::ArrowFunction(Box::new_in(
+        ArrowFunctionExpr {
+            params: Vec::new_in(&allocator),
+            body: ArrowFunctionBody::Expression(Box::new_in(factory_call, &allocator)),
+            source_span: None,
+        },
         &allocator,
     ))
 }
@@ -770,4 +725,56 @@ mod tests {
         assert!(output.contains("new ConcreteService"), "Should instantiate the delegate class");
         assert!(output.contains("inject"), "Should inject dependencies");
     }
+
+    fn read_var<'a>(allocator: &'a Allocator, name: &'a str) -> OutputExpression<'a> {
+        OutputExpression::ReadVar(Box::new_in(
+            ReadVarExpr { name: Ident::from(name), source_span: None },
+            &allocator,
+        ))
+    }
+
+    fn compile_to_js<'a>(allocator: &'a Allocator, metadata: &R3InjectableMetadata<'a>) -> String {
+        let result = compile_injectable(allocator, "i0", metadata);
+        JsEmitter::new().emit_expression(&result.expression)
+    }
+
+    #[test]
+    fn test_compile_injectable_use_factory_without_deps_is_expression_arrow() {
+        // ngtsc 22.2: factory: () => makeIt()
+        let allocator = Allocator::default();
+        let metadata = R3InjectableMetadataBuilder::new()
+            .name(Ident::from("A"))
+            .r#type(read_var(&allocator, "A"))
+            .use_factory(read_var(&allocator, "makeIt"), None)
+            .provided_in_root()
+            .build()
+            .unwrap();
+
+        let output = compile_to_js(&allocator, &metadata);
+        assert!(output.contains("factory:() =>makeIt(),"), "got: {output}");
+    }
+
+    #[test]
+    fn test_compile_injectable_use_class_without_deps_delegates_from_arrow() {
+        // ngtsc 22.2 emits the same factory for `useClass: Other` and
+        // `useClass: forwardRef(() => Other)`:
+        //   factory: __ngFactoryType__ => Other.ɵfac(__ngFactoryType__)
+        for is_forward_ref in [false, true] {
+            let allocator = Allocator::default();
+            let metadata = R3InjectableMetadataBuilder::new()
+                .name(Ident::from("B"))
+                .r#type(read_var(&allocator, "B"))
+                .use_class(read_var(&allocator, "Other"), is_forward_ref, None)
+                .provided_in_root()
+                .build()
+                .unwrap();
+
+            let output = compile_to_js(&allocator, &metadata);
+            assert!(
+                output.contains("factory:(__ngFactoryType__) =>Other.ɵfac(__ngFactoryType__),"),
+                "got: {output}"
+            );
+            assert!(!output.contains("resolveForwardRef"), "got: {output}");
+        }
+    }
 }
diff --git a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
index 73032f069..f49eedb4d 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
@@ -29,8 +29,6 @@ const CHANGE_DETECTION_V22 =
   'changeDetection is omitted for OnPush, which is the runtime default from v22, where Angular emits it explicitly'
 const SELECTOR_WHITESPACE =
   'runs of whitespace inside shimmed selectors are collapsed where Angular keeps them'
-const INJECTABLE_FACTORY_WRAPPER =
-  'an @Injectable useFactory is wrapped in a function expression where Angular emits an arrow function'
 const SET_CLASS_METADATA_IMPORT =
   'Oxc keeps the @Inject import because its setClassMetadata references it; ngtsc emits the same reference but TypeScript elision still drops the import (upstream emit bug)'
 const ALIASED_INJECTABLE =
@@ -230,9 +228,21 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     fields: ['MyPurePipe.ɵfac'],
     reasons: [FACTORY],
   },
+  'providers/injectable-use-class-forward-ref': {
+    fields: ['EarlyService.ɵfac'],
+    reasons: [FACTORY],
+  },
+  'providers/injectable-use-class-other': {
+    fields: ['AbstractLogger.ɵfac'],
+    reasons: [FACTORY],
+  },
+  'providers/injectable-use-factory-named-function': {
+    fields: ['FactoryService.ɵfac'],
+    reasons: [FACTORY],
+  },
   'providers/object-members-injectable-use-factory': {
-    fields: ['ObjectMembersService.ɵfac', 'ObjectMembersService.ɵprov'],
-    reasons: [FACTORY, INJECTABLE_FACTORY_WRAPPER],
+    fields: ['ObjectMembersService.ɵfac'],
+    reasons: [FACTORY],
   },
   'providers/object-members-injectable-use-value': {
     fields: ['ObjectMembersValueService.ɵfac'],
diff --git a/napi/angular-compiler/e2e/compare/fixtures/providers/injectable-factory-forms.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/providers/injectable-factory-forms.fixture.ts
new file mode 100644
index 000000000..c06dfc67d
--- /dev/null
+++ b/napi/angular-compiler/e2e/compare/fixtures/providers/injectable-factory-forms.fixture.ts
@@ -0,0 +1,62 @@
+/**
+ * @Injectable factory forms.
+ *
+ * ngtsc (full compilation) wraps a `useFactory` without `deps` in an expression-body arrow,
+ * `() => factory()`, and delegates a `useClass` without `deps` from an arrow,
+ * `__ngFactoryType__ => UseClass.ɵfac(__ngFactoryType__)`, whether or not the class is
+ * wrapped in `forwardRef()` (it is unwrapped, and the arrow reads it lazily).
+ */
+import type { Fixture } from '../types.js'
+
+export const fixtures: Fixture[] = [
+  {
+    name: 'injectable-use-factory-named-function',
+    category: 'providers',
+    description: 'Injectable useFactory without deps wraps the factory in an arrow',
+    className: 'FactoryService',
+    type: 'full-transform',
+    sourceCode: `
+import { Injectable } from '@angular/core';
+
+export function createFactoryService() {
+  return {};
+}
+
+@Injectable({ providedIn: 'root', useFactory: createFactoryService })
+export class FactoryService {}
+    `.trim(),
+    expectedFeatures: ['ɵɵdefineInjectable'],
+  },
+  {
+    name: 'injectable-use-class-other',
+    category: 'providers',
+    description: 'Injectable useClass without deps delegates to the class factory from an arrow',
+    className: 'AbstractLogger',
+    type: 'full-transform',
+    sourceCode: `
+import { Injectable } from '@angular/core';
+
+export class ConsoleLogger {}
+
+@Injectable({ providedIn: 'root', useClass: ConsoleLogger })
+export class AbstractLogger {}
+    `.trim(),
+    expectedFeatures: ['ɵɵdefineInjectable'],
+  },
+  {
+    name: 'injectable-use-class-forward-ref',
+    category: 'providers',
+    description: 'Injectable useClass with forwardRef to a class declared later',
+    className: 'EarlyService',
+    type: 'full-transform',
+    sourceCode: `
+import { Injectable, forwardRef } from '@angular/core';
+
+@Injectable({ providedIn: 'root', useClass: forwardRef(() => LateService) })
+export class EarlyService {}
+
+export class LateService {}
+    `.trim(),
+    expectedFeatures: ['ɵɵdefineInjectable'],
+  },
+]

From 8625afb62e56384d54da479562cf7e336c466365 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:03:31 +0800
Subject: [PATCH 16/54] fix(compare): make the ngtsc fixture comparison honest
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The fixture compare reported 100% while hiding real differences:

- compareFullFileSemantically rewrote the whole source text before
  comparing (replaceAll(',}'), (',]'), (' }'), regex-based @Inject,
  nullish, numeric and object-literal rewrites) and accepted static
  fields whose whitespace-squashed text matched, so whitespace changes
  inside CSS and template strings counted as matches.
- extractClasses skipped exported classes, so class members (for example
  signal fields) were never compared; top-level constants were never
  compared either, and their name mapping stripped whitespace inside
  strings.
- A fixture listed in known-differences.ts only failed on undocumented
  static fields, imports and metadata calls; class, function, export
  and parse-error differences were ignored, and class-metadata fixtures
  dropped most diff kinds before the check.
- Factory fixtures compared Oxc's output with itself and passed.

Now every part is compared on the oxc-parser AST (formatting, quotes,
trailing commas, parentheses and plain template literals do not matter;
string contents do), Oxc's _cN constants are renamed to Angular's by AST
value, exported classes and functions are unwrapped, classes are compared
without their static ɵ fields (compared on their own), and top-level
constants are compared. The ɵcmp input/output sub-diffs parsed with
regexes are dropped; the ɵcmp diff itself is still reported. Unused
compareJsSemantically and normalize-template-literals.ts are removed.

The runner checks every reported difference of a listed fixture against
its entry (new classes/functions/exports lists) and fails on any listed
difference that no longer occurs. Factory fixtures are reported as
skipped (or oxc-error).

Fixtures can set ngtscMode: 'full' to compile the reference in full
mode instead of experimental-local. The change-detection and
custom-decorator fixtures use it: local mode keeps changeDetection
symbolic and leaves a class with a non-Angular decorator uncompiled,
which a real build does not. In full mode their changeDetection,
ɵfac and setClassMetadata match.

Newly exposed differences are listed in known-differences.ts with tags:
CSS_WS (29 fixtures), DEBUG_NAME (43). The full-mode fixtures now carry
DOM_ONLY (14) and COMPONENT_DEPS (3) instead of the local-mode
CHANGE_DETECTION_V22 / CUSTOM_DECORATOR reasons.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 napi/angular-compiler/e2e/compare/README.md   |   47 +-
 .../animations/animation-metadata.fixture.ts  |    1 +
 .../change-detection.fixture.ts               |    2 +
 .../edge-cases/custom-decorators.fixture.ts   |    2 +
 .../fixtures/full-transform/basic.fixture.ts  |    2 +
 .../full-transform/transform-api.fixture.ts   |    1 +
 .../fixtures/host-directives/basic.fixture.ts |    1 +
 .../e2e/compare/fixtures/known-differences.ts |  403 +++-
 .../fixtures/providers/basic.fixture.ts       |    1 +
 .../regressions/class-debug-info.fixture.ts   |    1 +
 .../regressions/formfield-alias.fixture.ts    |    1 +
 .../e2e/compare/fixtures/runner.ts            |  282 +--
 .../compare/fixtures/schemas/basic.fixture.ts |    1 +
 .../fixtures/styles/encapsulation.fixture.ts  |    2 +
 .../e2e/compare/fixtures/types.ts             |   13 +-
 .../e2e/compare/src/compare.test.ts           |   61 +
 .../e2e/compare/src/compare.ts                | 2126 ++---------------
 .../compare/src/compilers/angular-ngtsc.ts    |   54 +-
 .../src/normalize-template-literals.ts        |  141 --
 19 files changed, 799 insertions(+), 2343 deletions(-)
 create mode 100644 napi/angular-compiler/e2e/compare/src/compare.test.ts
 delete mode 100644 napi/angular-compiler/e2e/compare/src/normalize-template-literals.ts

diff --git a/napi/angular-compiler/e2e/compare/README.md b/napi/angular-compiler/e2e/compare/README.md
index 2810a2d04..3e3ffe0ce 100644
--- a/napi/angular-compiler/e2e/compare/README.md
+++ b/napi/angular-compiler/e2e/compare/README.md
@@ -114,31 +114,32 @@ e2e/compare/
 1. Discover components (glob patterns, metadata extraction)
 2. Compile with OXC (NAPI bindings)
 3. Compile with Angular (NgtscProgram or template compiler)
-4. Normalize both outputs:
-   ├── Format with oxfmt
-   ├── Normalize PURE comments
-   ├── Normalize template literals
-   ├── Normalize nullish coalescing
-   ├── Remap const references (_c0, _c1, etc.)
-   └── Normalize @Inject parameter types
-5. Compare normalized outputs
+4. Parse both outputs and rename Oxc's const pool (_c0, _c1, etc.) to Angular's names by value
+5. Compare the ASTs: imports, exports, classes, static fields, setClassMetadata calls,
+   top-level functions and constants
 6. For mismatches: Extract function-level diffs
 ```
 
 ## Semantic Comparison
 
-The framework handles known differences between compilers:
+Outputs are compared on their ASTs; the source text is never rewritten to make them line up,
+so any change inside a string literal (CSS, template text, i18n messages) is a difference.
 
 ### Handled Automatically
 
-| Difference             | Description                                    |
-| ---------------------- | ---------------------------------------------- |
-| **Formatting**         | Whitespace, indentation normalized via `oxfmt` |
-| **Const ordering**     | Const pool indices remapped by value           |
-| **Variable naming**    | `_r45` vs `_r46` counters (scoped, equivalent) |
-| **PURE comments**      | `/* @__PURE__ */` spacing normalized           |
-| **Nullish coalescing** | `a ?? b` transpilation normalized              |
-| **Parentheses**        | Extra parens removed where equivalent          |
+| Difference            | Description                                                        |
+| --------------------- | ------------------------------------------------------------------ |
+| **Formatting**        | Whitespace, indentation, quotes, trailing commas (not in the AST)  |
+| **Const ordering**    | Const pool indices remapped by value                               |
+| **Parentheses**       | `(expr)` compared as `expr`                                        |
+| **Template literals** | An untagged template literal without substitutions equals a string |
+| **Static fields**     | The documented equivalences in `staticFieldValuesEquivalent`       |
+
+### ngtsc Compilation Mode
+
+The reference is compiled in `experimental-local` mode by default, which compiles each file on
+its own like Oxc does. Where that differs from a real build (for example `changeDetection`, or a
+class that also has a non-Angular decorator), a fixture sets `ngtscMode: 'full'`.
 
 ### Known Differences (Not Bugs)
 
@@ -181,10 +182,14 @@ pnpm compare --fixtures --category control-flow --category animations
 ### Known Differences
 
 `fixtures/known-differences.ts` lists fixtures whose output differs from Angular's in
-documented ways, with the static fields that differ and the reasons. They are reported as known
-differences instead of failures, but only while the differences stay inside the listed fields:
-a difference in any other field of the same fixture is still a failure. A listed fixture that
-matches Angular fails too, so remove its entry once the difference is fixed.
+documented ways, with every difference (static fields, classes, top-level functions and
+constants, exports, imports, setClassMetadata calls) and the reasons. They are reported as known
+differences instead of failures, but only while the fixture differs in exactly what is listed:
+a difference anywhere else in the same fixture is still a failure, and so is a listed difference
+that no longer occurs, so remove an entry once the difference is fixed.
+
+Factory fixtures have no ngtsc baseline; they only check that Oxc compiles them and are
+reported as skipped.
 
 ### Generated i18n Fixtures
 
diff --git a/napi/angular-compiler/e2e/compare/fixtures/animations/animation-metadata.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/animations/animation-metadata.fixture.ts
index bbb8c9d1b..ba469a49e 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/animations/animation-metadata.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/animations/animation-metadata.fixture.ts
@@ -533,6 +533,7 @@ export class AnimationsWithEncapsulationComponent {
 
   {
     name: 'animation-metadata-with-change-detection',
+    ngtscMode: 'full',
     category: 'animations',
     description: 'Animations with OnPush change detection',
     className: 'AnimationsWithOnPushComponent',
diff --git a/napi/angular-compiler/e2e/compare/fixtures/component-meta/change-detection.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/component-meta/change-detection.fixture.ts
index 3ec7e570a..c18a438d0 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/component-meta/change-detection.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/component-meta/change-detection.fixture.ts
@@ -10,6 +10,7 @@ import type { Fixture } from '../types.js'
 export const fixtures: Fixture[] = [
   {
     name: 'change-detection-default',
+    ngtscMode: 'full',
     category: 'component-meta',
     description: 'ChangeDetectionStrategy.Default - check on every cycle',
     className: 'ChangeDetectionDefaultComponent',
@@ -29,6 +30,7 @@ export class ChangeDetectionDefaultComponent {}
   },
   {
     name: 'change-detection-onpush',
+    ngtscMode: 'full',
     category: 'component-meta',
     description: 'ChangeDetectionStrategy.OnPush - check only on input changes',
     className: 'ChangeDetectionOnPushComponent',
diff --git a/napi/angular-compiler/e2e/compare/fixtures/edge-cases/custom-decorators.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/edge-cases/custom-decorators.fixture.ts
index 6f9cfe073..acda93537 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/edge-cases/custom-decorators.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/edge-cases/custom-decorators.fixture.ts
@@ -11,6 +11,7 @@ import type { Fixture } from '../types.js'
 export const fixtures: Fixture[] = [
   {
     name: 'single-custom-decorator',
+    ngtscMode: 'full',
     category: 'edge-cases',
     description: 'Component with a single custom class decorator',
     className: 'MyComponent',
@@ -36,6 +37,7 @@ export class MyComponent {}
   },
   {
     name: 'multiple-custom-decorators',
+    ngtscMode: 'full',
     category: 'edge-cases',
     description: 'Component with multiple custom class decorators',
     className: 'MultiDecoratorComponent',
diff --git a/napi/angular-compiler/e2e/compare/fixtures/full-transform/basic.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/full-transform/basic.fixture.ts
index 9e2c9a0ff..ff6e1a5d5 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/full-transform/basic.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/full-transform/basic.fixture.ts
@@ -174,6 +174,7 @@ export class ShadowDomComponent {}
   {
     type: 'component',
     name: 'full-transform-onpush',
+    ngtscMode: 'full',
     category: 'full-transform',
     description: 'Component with OnPush change detection',
     className: 'OnPushComponent',
@@ -724,6 +725,7 @@ export class PreserveWhitespaceComponent {}
   {
     type: 'component',
     name: 'full-transform-complex',
+    ngtscMode: 'full',
     category: 'full-transform',
     description: 'Complex component with multiple features',
     className: 'ComplexComponent',
diff --git a/napi/angular-compiler/e2e/compare/fixtures/full-transform/transform-api.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/full-transform/transform-api.fixture.ts
index e4825e0af..174974e46 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/full-transform/transform-api.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/full-transform/transform-api.fixture.ts
@@ -143,6 +143,7 @@ export class NoEncapsulationComponent {}
   {
     type: 'full-transform',
     name: 'transform-api-onpush',
+    ngtscMode: 'full',
     category: 'full-transform',
     description: 'Full file transformation with OnPush change detection',
     className: 'OnPushComponent',
diff --git a/napi/angular-compiler/e2e/compare/fixtures/host-directives/basic.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/host-directives/basic.fixture.ts
index 0950059e5..9eeb32f33 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/host-directives/basic.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/host-directives/basic.fixture.ts
@@ -471,6 +471,7 @@ export class HostDirectivesEncapsulationComponent {}
   {
     type: 'full-transform',
     name: 'host-directives-with-change-detection',
+    ngtscMode: 'full',
     category: 'host-directives',
     description: 'Host directives with OnPush change detection',
     className: 'HostDirectivesOnPushComponent',
diff --git a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
index 73032f069..4d6abb19a 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
@@ -1,16 +1,23 @@
 /**
  * Fixtures whose output differs from Angular's in documented ways, keyed by
- * `category/name`. Each entry lists the static fields that differ and why.
+ * `category/name`. Each entry lists every difference and why it exists.
  *
- * A listed fixture is reported as a known difference only while its differences stay inside
- * `fields`, so a new difference elsewhere in the same fixture still fails. A listed fixture
- * that matches Angular fails too, so fixed entries get removed.
+ * A listed fixture is reported as a known difference only while it differs in exactly what the
+ * entry lists: a difference anywhere else (another static field, class, top-level function or
+ * constant, export, import or metadata call) still fails, and so does a listed difference that
+ * no longer occurs, so fixed entries get removed.
  */
 import type { ImportDiff } from '../src/compare.js'
 
-interface KnownDifference {
+export interface KnownDifference {
   /** `Class.field` of every static field that differs, e.g. `MyComponent.ɵcmp`. */
   fields: string[]
+  /** Every class whose declaration (apart from its `static ɵxxx` fields) differs. */
+  classes?: string[]
+  /** Every top-level function or constant that differs, is missing or is extra. */
+  functions?: string[]
+  /** Every export that is missing or extra. */
+  exports?: string[]
   /** Every import difference, exactly as `compareImports` reports it. */
   importDiffs?: ImportDiff[]
   /** Every setClassMetadata difference, as `Class.field`, e.g. `MyComponent.setClassMetadata`. */
@@ -23,12 +30,13 @@ const FACTORY =
   'ɵfac uses ɵɵgetInheritedFactory where Angular emits a factory that calls the constructor'
 const NG_MODULE_IMPORTS = 'ɵmod includes imports, which Angular omits in full compilation'
 const HOST_ATTRS_ORDER = 'hostAttrs are emitted in a different order'
-const CUSTOM_DECORATOR =
-  'the reference ngtsc compile leaves a class with a non-Angular decorator uncompiled, so only Oxc emits ɵfac/ɵcmp'
-const CHANGE_DETECTION_V22 =
-  'changeDetection is omitted for OnPush, which is the runtime default from v22, where Angular emits it explicitly'
-const SELECTOR_WHITESPACE =
-  'runs of whitespace inside shimmed selectors are collapsed where Angular keeps them'
+const CSS_WS = 'runs of whitespace inside shimmed selectors are collapsed where Angular keeps them'
+const DEBUG_NAME =
+  'signal(), input() and the other signal APIs lack the ngDevMode `debugName` argument ngtsc adds to class fields'
+const DOM_ONLY =
+  'templates use ɵɵelementStart/ɵɵlistener where a full ngtsc build of a standalone component without directive dependencies emits the DOM-only ɵɵdomElementStart/ɵɵdomListener'
+const COMPONENT_DEPS =
+  'dependencies use the local-compilation ɵɵgetComponentDepsFactory(Cmp, imports) where a full ngtsc build lists the resolved dependencies'
 const INJECTABLE_FACTORY_WRAPPER =
   'an @Injectable useFactory is wrapped in a function expression where Angular emits an arrow function'
 const SET_CLASS_METADATA_IMPORT =
@@ -39,7 +47,7 @@ const ALIASED_INJECTABLE =
 export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
   'animations/animation-metadata-with-change-detection': {
     fields: ['AnimationsWithOnPushComponent.ɵcmp'],
-    reasons: [CHANGE_DETECTION_V22],
+    reasons: [DOM_ONLY, COMPONENT_DEPS],
   },
   'class-metadata/class-metadata-ngmodule': {
     fields: ['TestableModule.ɵfac', 'TestableModule.ɵmod'],
@@ -87,11 +95,11 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
   },
   'component-meta/change-detection-default': {
     fields: ['ChangeDetectionDefaultComponent.ɵcmp'],
-    reasons: ['changeDetection is omitted where Angular emits it'],
+    reasons: [DOM_ONLY],
   },
   'component-meta/change-detection-onpush': {
     fields: ['ChangeDetectionOnPushComponent.ɵcmp'],
-    reasons: [CHANGE_DETECTION_V22],
+    reasons: [DOM_ONLY],
   },
   'edge-cases/aliased-injectable': {
     fields: ['AliasedService.ɵfac'],
@@ -99,22 +107,24 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     reasons: [ALIASED_INJECTABLE],
   },
   'edge-cases/multiple-custom-decorators': {
-    fields: ['MultiDecoratorComponent.ɵcmp', 'MultiDecoratorComponent.ɵfac'],
-    metadataDiffs: ['MultiDecoratorComponent.setClassMetadata'],
-    reasons: [CUSTOM_DECORATOR],
+    fields: ['MultiDecoratorComponent.ɵcmp'],
+    reasons: [DOM_ONLY],
   },
   'edge-cases/single-custom-decorator': {
-    fields: ['MyComponent.ɵcmp', 'MyComponent.ɵfac'],
-    metadataDiffs: ['MyComponent.setClassMetadata'],
-    reasons: [CUSTOM_DECORATOR],
+    fields: ['MyComponent.ɵcmp'],
+    reasons: [DOM_ONLY],
   },
   'full-file/component-with-pipes': {
     fields: ['ComponentWithPipes.ɵcmp'],
     reasons: ['component styles keep a leading newline'],
   },
   'full-transform/full-transform-complex': {
-    fields: ['ComplexComponent.ɵcmp'],
-    reasons: [CHANGE_DETECTION_V22],
+    fields: [],
+    functions: [
+      'ComplexComponent_Conditional_0_Template',
+      'ComplexComponent_Conditional_1_For_1_Template',
+    ],
+    reasons: [DOM_ONLY],
   },
   'full-transform/full-transform-host-attribute': {
     fields: ['HostAttributeComponent.ɵcmp'],
@@ -122,11 +132,11 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
   },
   'full-transform/full-transform-onpush': {
     fields: ['OnPushComponent.ɵcmp'],
-    reasons: [CHANGE_DETECTION_V22],
+    reasons: [DOM_ONLY],
   },
   'full-transform/transform-api-onpush': {
     fields: ['OnPushComponent.ɵcmp'],
-    reasons: [CHANGE_DETECTION_V22],
+    reasons: [DOM_ONLY],
   },
   'host-bindings/host-attribute': {
     fields: ['HostAttributeComponent.ɵcmp'],
@@ -140,7 +150,7 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
   },
   'host-directives/host-directives-with-change-detection': {
     fields: ['HostDirectivesOnPushComponent.ɵcmp'],
-    reasons: [CHANGE_DETECTION_V22],
+    reasons: [DOM_ONLY, COMPONENT_DEPS],
   },
   'host-directives/host-directives-with-providers': {
     fields: ['DataService.ɵfac'],
@@ -252,19 +262,88 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
   },
   'providers/providers-with-change-detection': {
     fields: ['ProvidersWithChangeDetectionComponent.ɵcmp'],
-    reasons: [CHANGE_DETECTION_V22],
+    reasons: [DOM_ONLY],
   },
   'regressions/class-debug-info-change-detection': {
     fields: ['OnPushDebugInfoComponent.ɵcmp'],
-    reasons: [CHANGE_DETECTION_V22],
+    reasons: [DOM_ONLY],
   },
   'regressions/formfield-alias-repro': {
     fields: ['AppComponent.ɵcmp'],
-    reasons: [CHANGE_DETECTION_V22],
+    classes: ['AppComponent'],
+    reasons: [COMPONENT_DEPS, DEBUG_NAME],
   },
   'schemas/schemas-with-change-detection': {
     fields: ['SchemasWithOnPushComponent.ɵcmp'],
-    reasons: [CHANGE_DETECTION_V22],
+    reasons: [DOM_ONLY],
+  },
+  'styles/shadow-css-child-combinator': {
+    fields: ['ChildCombinatorComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-deep-combinator': {
+    fields: ['DeepCombinatorComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-descendant-selectors': {
+    fields: ['DescendantSelectorComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-double-where-host-context': {
+    fields: ['DoubleWhereHostContextComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-has-basic': {
+    fields: ['HasBasicComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-has-with-host': {
+    fields: ['HasWithHostComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-host-context-attribute': {
+    fields: ['HostContextAttributeComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-host-context-basic': {
+    fields: ['HostContextBasicComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-host-context-comma-child': {
+    fields: ['HostContextCommaChildComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-host-context-comma-list': {
+    fields: ['HostContextCommaListComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-host-context-double': {
+    fields: ['HostContextDoubleComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-host-context-host-different': {
+    fields: ['HostContextHostDifferentComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-host-context-host-same-element': {
+    fields: ['HostContextHostSameComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-host-context-nested-pseudo': {
+    fields: ['HostContextNestedPseudoComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-host-context-no-selector': {
+    fields: ['HostContextNoSelectorComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-host-context-pseudo-not': {
+    fields: ['HostContextPseudoNotComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-host-context-tag': {
+    fields: ['HostContextTagComponent.ɵcmp'],
+    reasons: [CSS_WS],
   },
   'styles/shadow-css-host-context-triple': {
     fields: ['HostContextTripleComponent.ɵcmp'],
@@ -272,16 +351,40 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
   },
   'styles/shadow-css-host-context-with-descendant': {
     fields: ['HostContextDescendantComponent.ɵcmp'],
-    reasons: [SELECTOR_WHITESPACE],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-host-host-context': {
+    fields: ['HostHostContextComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-host-with-descendant': {
+    fields: ['HostDescendantComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-is-with-host': {
+    fields: ['IsWithHostComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-mixed-host-in-where': {
+    fields: ['MixedHostWhereComponent.ɵcmp'],
+    reasons: [CSS_WS],
   },
   'styles/shadow-css-multiline-selector': {
     fields: ['MultilineSelectorComponent.ɵcmp'],
     reasons: ['the newline between selectors in a list is dropped'],
   },
+  'styles/shadow-css-ng-deep-after-selector': {
+    fields: ['NgDeepAfterSelectorComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
   'styles/shadow-css-ng-deep-basic': {
     fields: ['NgDeepBasicComponent.ɵcmp'],
     reasons: ['a leading space is kept before a ::ng-deep selector'],
   },
+  'styles/shadow-css-ng-deep-with-host': {
+    fields: ['NgDeepWithHostComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
   'styles/shadow-css-polyfill-next-selector': {
     fields: ['PolyfillNextSelectorComponent.ɵcmp'],
     reasons: ['a space is added before an empty rule body'],
@@ -294,17 +397,251 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     fields: ['PolyfillUnscopedComponent.ɵcmp'],
     reasons: ['polyfill-unscoped-rule is not scoped and rewritten as Angular does'],
   },
+  'styles/shadow-css-shadow-piercing': {
+    fields: ['ShadowPiercingComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-sibling-combinators': {
+    fields: ['SiblingCombinatorComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-where-basic': {
+    fields: ['WhereBasicComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-where-host-context': {
+    fields: ['WhereHostContextComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'styles/shadow-css-where-nested': {
+    fields: ['WhereNestedComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
   'styles/shadow-css-where-with-host': {
     fields: ['WhereWithHostComponent.ɵcmp'],
-    reasons: [SELECTOR_WHITESPACE],
+    reasons: [CSS_WS],
   },
   'styles/style-onpush-encapsulation': {
     fields: ['OnPushStyleComponent.ɵcmp'],
-    reasons: [CHANGE_DETECTION_V22],
+    reasons: [DOM_ONLY],
   },
   'styles/style-onpush-none': {
     fields: ['OnPushNoneStyleComponent.ɵcmp'],
-    reasons: [CHANGE_DETECTION_V22],
+    reasons: [DOM_ONLY],
+  },
+  'templates/arrow-control-flow-expressions': {
+    fields: [],
+    classes: ['ArrowControlFlowExpressionsComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-hoisted-i18n': {
+    fields: [],
+    classes: ['ArrowHoistedI18nComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-hoisted-if-alias': {
+    fields: [],
+    classes: ['ArrowHoistedIfAliasComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-hoisted-nested-views': {
+    fields: [],
+    classes: ['ArrowHoistedNestedViewsComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-hoisted-ng-template-variables': {
+    fields: [],
+    classes: ['ArrowHoistedNgTemplateVariablesComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-hoisted-order': {
+    fields: [],
+    classes: ['ArrowHoistedOrderComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-hoisted-root-reference': {
+    fields: [],
+    classes: ['ArrowHoistedRootReferenceComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-hoisted-same-arrow-in-two-views': {
+    fields: [],
+    classes: ['ArrowHoistedSameArrowInTwoViewsComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-hoisted-two-in-one-view': {
+    fields: [],
+    classes: ['ArrowHoistedTwoInOneViewComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-interpolation-identical-arrows': {
+    fields: [],
+    classes: ['ArrowInterpolationIdenticalArrowsComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-interpolation-multiple-params': {
+    fields: [],
+    classes: ['ArrowInterpolationMultipleParamsComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-interpolation-no-param': {
+    fields: [],
+    classes: ['ArrowInterpolationNoParamComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-interpolation-one-param': {
+    fields: [],
+    classes: ['ArrowInterpolationOneParamComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-interpolation-param-and-property': {
+    fields: [],
+    classes: ['ArrowInterpolationParamAndPropertyComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-let-chain': {
+    fields: [],
+    classes: ['ArrowLetChainComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-let-in-for': {
+    fields: [],
+    classes: ['ArrowLetInForComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-let-reading-let': {
+    fields: [],
+    classes: ['ArrowLetReadingLetComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-listener-multiple-params': {
+    fields: [],
+    classes: ['ArrowListenerMultipleParamsComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-listener-nested': {
+    fields: [],
+    classes: ['ArrowListenerNestedComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-listener-no-param': {
+    fields: [],
+    classes: ['ArrowListenerNoParamComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-listener-one-param': {
+    fields: [],
+    classes: ['ArrowListenerOneParamComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-listener-param-and-property': {
+    fields: [],
+    classes: ['ArrowListenerParamAndPropertyComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-listener-param-shadows-for-item': {
+    fields: [],
+    classes: ['ArrowListenerParamShadowsForItemComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-listener-param-shadows-let': {
+    fields: [],
+    classes: ['ArrowListenerParamShadowsLetComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-listener-param-shadows-property': {
+    fields: [],
+    classes: ['ArrowListenerParamShadowsPropertyComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-listener-param-shadows-ref': {
+    fields: [],
+    classes: ['ArrowListenerParamShadowsRefComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-listener-reads-template-variables': {
+    fields: [],
+    classes: ['ArrowListenerReadsTemplateVariablesComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-property-nested': {
+    fields: [],
+    classes: ['ArrowPropertyNestedComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-property-no-param': {
+    fields: [],
+    classes: ['ArrowPropertyNoParamComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-property-one-param': {
+    fields: [],
+    classes: ['ArrowPropertyOneParamComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-property-param-and-property': {
+    fields: [],
+    classes: ['ArrowPropertyParamAndPropertyComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-property-param-shadows-for-item': {
+    fields: [],
+    classes: ['ArrowPropertyParamShadowsForItemComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-property-param-shadows-let': {
+    fields: [],
+    classes: ['ArrowPropertyParamShadowsLetComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-property-param-shadows-property': {
+    fields: [],
+    classes: ['ArrowPropertyParamShadowsPropertyComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-property-param-shadows-ref': {
+    fields: [],
+    classes: ['ArrowPropertyParamShadowsRefComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-property-reads-template-variables': {
+    fields: [],
+    classes: ['ArrowPropertyReadsTemplateVariablesComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/arrow-property-several-bindings': {
+    fields: [],
+    classes: ['ArrowPropertySeveralBindingsComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/case-matches-component': {
+    fields: [],
+    classes: ['ViewCmp'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/case-raw-text': {
+    fields: ['CaseRawTextComponent.ɵcmp'],
+    reasons: [CSS_WS],
+  },
+  'templates/ng-arrow-function-dollar-event': {
+    fields: [],
+    classes: ['NgArrowFunctionDollarEventComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/ng-arrow-function-host-listener': {
+    fields: [],
+    classes: ['TestDir'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/ng-arrow-function-nested-listeners': {
+    fields: [],
+    classes: ['NgArrowFunctionNestedListenersComponent'],
+    reasons: [DEBUG_NAME],
+  },
+  'templates/ng-arrow-function-no-context': {
+    fields: [],
+    classes: ['NgArrowFunctionNoContextComponent'],
+    reasons: [DEBUG_NAME],
   },
   'templates/ng-arrow-function-pipe': {
     fields: ['TestPipe.ɵfac'],
diff --git a/napi/angular-compiler/e2e/compare/fixtures/providers/basic.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/providers/basic.fixture.ts
index 84e10de78..68b1e1f14 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/providers/basic.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/providers/basic.fixture.ts
@@ -409,6 +409,7 @@ export class ProvidersWithEncapsulationComponent {}
 
   {
     name: 'providers-with-change-detection',
+    ngtscMode: 'full',
     category: 'providers',
     description: 'Providers with OnPush change detection',
     className: 'ProvidersWithChangeDetectionComponent',
diff --git a/napi/angular-compiler/e2e/compare/fixtures/regressions/class-debug-info.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/regressions/class-debug-info.fixture.ts
index 88c94ed6d..f44157b94 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/regressions/class-debug-info.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/regressions/class-debug-info.fixture.ts
@@ -63,6 +63,7 @@ export class InputDebugInfoComponent {
   {
     type: 'full-transform',
     name: 'class-debug-info-change-detection',
+    ngtscMode: 'full',
     category: 'regressions',
     description: 'Component with OnPush should emit setClassDebugInfo',
     className: 'OnPushDebugInfoComponent',
diff --git a/napi/angular-compiler/e2e/compare/fixtures/regressions/formfield-alias.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/regressions/formfield-alias.fixture.ts
index 747c2442a..c34cfa743 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/regressions/formfield-alias.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/regressions/formfield-alias.fixture.ts
@@ -3,6 +3,7 @@ import type { Fixture } from '../types.js'
 export const fixtures: Fixture[] = [
   {
     name: 'formfield-alias-repro',
+    ngtscMode: 'full',
     category: 'regressions',
     description: 'Issue #229 repro: [formField] binding with aliased field input',
     className: 'AppComponent',
diff --git a/napi/angular-compiler/e2e/compare/fixtures/runner.ts b/napi/angular-compiler/e2e/compare/fixtures/runner.ts
index 1b6856e71..5221f274f 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/runner.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/runner.ts
@@ -14,7 +14,7 @@ import { VERSION as ANGULAR_VERSION } from '@angular/compiler'
 import { compileFactory, Severity } from '@oxc-angular/vite/api'
 import pLimit from 'p-limit'
 
-import { compareJsSemantically, compareFullFileSemantically } from '../src/compare.js'
+import { compareFullFileSemantically, type ImportDiff } from '../src/compare.js'
 import {
   compileWithNgtsc,
   generateComponentSource,
@@ -22,7 +22,7 @@ import {
 } from '../src/compilers/angular-ngtsc.js'
 import { compileWithOxcFullFile } from '../src/compilers/oxc.js'
 import { discoverFixtures } from './index.js'
-import { KNOWN_DIFFERENCES } from './known-differences.js'
+import { KNOWN_DIFFERENCES, type KnownDifference } from './known-differences.js'
 
 /**
  * Path to the tsconfig.json used for fixture compilation.
@@ -125,9 +125,10 @@ export async function runFixtures(options: FixtureRunnerOptions = {}): Promise<F
 
 /**
  * Test a single fixture, applying its documented known differences: a listed fixture that
- * differs only in the fields the entry documents is reported as a known difference, one that
- * differs elsewhere still fails, and one that now matches fails so that the stale entry is
- * removed.
+ * differs only in what the entry documents is reported as a known difference, one that
+ * differs anywhere else (another static field, class, function, export, import or metadata
+ * call, or a parse error) still fails, and one where a documented difference no longer occurs
+ * fails so that the stale entry is removed.
  */
 async function testFixture(fixture: Fixture, verbose?: boolean): Promise<FixtureResult> {
   const result = await compareFixture(fixture, verbose)
@@ -137,52 +138,17 @@ async function testFixture(fixture: Fixture, verbose?: boolean): Promise<Fixture
   }
   const knownDifferences = known.reasons
   if (result.status === 'mismatch') {
-    const undocumented = (result.staticFieldDiffs ?? [])
-      .map((diff) => `${diff.className}.${diff.fieldName}`)
-      .filter((field) => !known.fields.includes(field))
-    const undocumentedImports = (result.importDiffs ?? [])
-      .filter(
-        (diff) =>
-          !(known.importDiffs ?? []).some(
-            (k) =>
-              k.type === diff.type &&
-              k.moduleSource === diff.moduleSource &&
-              JSON.stringify(k.expected ?? []) === JSON.stringify(diff.expected ?? []) &&
-              JSON.stringify(k.actual ?? []) === JSON.stringify(diff.actual ?? []),
-          ),
-      )
-      .map(
-        (diff) =>
-          `import ${diff.moduleSource} expected { ${(diff.expected ?? []).join(', ')} } ` +
-          `got { ${(diff.actual ?? []).join(', ')} }`,
-      )
-    const undocumentedMetadata = (result.classMetadataDiffs ?? [])
-      .map((diff) => `${diff.className}.${diff.field}`)
-      .filter((field) => !(known.metadataDiffs ?? []).includes(field))
-    const observedMetadata = new Set(
-      (result.classMetadataDiffs ?? []).map((diff) => `${diff.className}.${diff.field}`),
-    )
-    const unobservedMetadata = (known.metadataDiffs ?? []).filter(
-      (field) => !observedMetadata.has(field),
-    )
-    const allUndocumented = [...undocumented, ...undocumentedImports, ...undocumentedMetadata]
-    if (allUndocumented.length > 0) {
-      return {
-        ...result,
-        knownDifferences,
-        undocumentedFields: [...new Set(allUndocumented)],
-      }
-    }
-    // A declared metadata diff that was not observed means the bug was fixed
-    // (or moved) — surface it like a stale entry so the exemption cannot
-    // silently re-allow a regression.
-    if (unobservedMetadata.length > 0) {
-      return {
-        ...result,
-        status: 'mismatch',
-        knownDifferences,
-        staleMetadataFields: unobservedMetadata,
-      }
+    const observed = observedDifferences(result)
+    const documented = documentedDifferences(known)
+    const undocumented = [...observed].filter((entry) => !documented.has(entry))
+    if (undocumented.length > 0) {
+      return { ...result, knownDifferences, undocumentedFields: undocumented }
+    }
+    // A documented difference that was not observed means the bug was fixed (or moved) —
+    // surface it like a stale entry so the exemption cannot silently re-allow a regression.
+    const unobserved = [...documented].filter((entry) => !observed.has(entry))
+    if (unobserved.length > 0) {
+      return { ...result, status: 'mismatch', knownDifferences, staleEntries: unobserved }
     }
     return { ...result, status: 'known-difference', knownDifferences }
   }
@@ -192,6 +158,46 @@ async function testFixture(fixture: Fixture, verbose?: boolean): Promise<Fixture
   return result
 }
 
+function importDiffLabel(diff: ImportDiff): string {
+  return (
+    `import ${diff.type} ${diff.moduleSource} expected { ${(diff.expected ?? []).join(', ')} } ` +
+    `got { ${(diff.actual ?? []).join(', ')} }`
+  )
+}
+
+/**
+ * Every difference a mismatching fixture reports, labelled the way `known-differences.ts`
+ * names them: `Class.ɵfield`, `class Name`, `function name`, `export name`, an import label
+ * and `Class.setClassMetadata...`. Parse errors can never be documented.
+ */
+function observedDifferences(result: FixtureResult): Set<string> {
+  const fc = result.functionComparison
+  return new Set([
+    ...(result.staticFieldDiffs ?? []).map((diff) => `${diff.className}.${diff.fieldName}`),
+    ...(result.classDiffs ?? []).map((diff) => `class ${diff.className}`),
+    ...[
+      ...(fc?.missingFunctions ?? []),
+      ...(fc?.extraFunctions ?? []),
+      ...(fc?.functionDiffs ?? []).map((diff) => diff.name),
+    ].map((name) => `function ${name}`),
+    ...(result.exportDiffs ?? []).map((diff) => `export ${diff.exportName}`),
+    ...(result.importDiffs ?? []).map(importDiffLabel),
+    ...(result.classMetadataDiffs ?? []).map((diff) => `${diff.className}.${diff.field}`),
+    ...(result.parseErrors ?? []).map((error) => `parse error: ${error}`),
+  ])
+}
+
+function documentedDifferences(known: KnownDifference): Set<string> {
+  return new Set([
+    ...known.fields,
+    ...(known.classes ?? []).map((name) => `class ${name}`),
+    ...(known.functions ?? []).map((name) => `function ${name}`),
+    ...(known.exports ?? []).map((name) => `export ${name}`),
+    ...(known.importDiffs ?? []).map(importDiffLabel),
+    ...(known.metadataDiffs ?? []),
+  ])
+}
+
 /**
  * Compare a single fixture's output from both compilers.
  */
@@ -210,7 +216,7 @@ async function compareFixture(fixture: Fixture, verbose?: boolean): Promise<Fixt
 
   switch (fixtureType) {
     case 'factory':
-      return testFactoryFixture(fixture, verbose)
+      return testFactoryFixture(fixture)
     case 'full-transform':
       return testFullTransformFixture(fixture, verbose)
     case 'class-metadata':
@@ -284,7 +290,10 @@ async function testComponentFixture(fixture: Fixture, verbose?: boolean): Promis
   let tsOutput: FixtureCompilerOutput
   const tsStart = performance.now()
   try {
-    const result = await compileWithNgtsc(source, filePath, { tsconfigPath: FIXTURE_TSCONFIG_PATH })
+    const result = await compileWithNgtsc(source, filePath, {
+      tsconfigPath: FIXTURE_TSCONFIG_PATH,
+      mode: fixture.ngtscMode,
+    })
     tsOutput = {
       code: result.code,
       error: result.error,
@@ -389,8 +398,11 @@ async function testComponentFixture(fixture: Fixture, verbose?: boolean): Promis
 
 /**
  * Test a factory fixture (factory function compilation).
+ *
+ * There is no ngtsc baseline for a factory compiled from bare metadata, so the fixture is only
+ * checked to compile with Oxc and is otherwise reported as skipped, never as a match.
  */
-async function testFactoryFixture(fixture: Fixture, verbose?: boolean): Promise<FixtureResult> {
+async function testFactoryFixture(fixture: Fixture): Promise<FixtureResult> {
   // Compile with Oxc NAPI
   let oxcOutput: FixtureCompilerOutput
   const oxcStart = performance.now()
@@ -429,13 +441,15 @@ async function testFactoryFixture(fixture: Fixture, verbose?: boolean): Promise<
     }
   }
 
-  // For now, use Oxc output as baseline
-  const tsOutput: FixtureCompilerOutput = {
-    code: oxcOutput.code,
-    compilationTimeMs: 0,
+  if (oxcOutput.error) {
+    return { fixture, status: 'oxc-error', oxcOutput }
+  }
+  return {
+    fixture,
+    status: 'skipped',
+    skipReason: 'no ngtsc baseline for a factory compiled from bare metadata',
+    oxcOutput,
   }
-
-  return await processCompilationResults(fixture, oxcOutput, tsOutput, verbose)
 }
 
 /**
@@ -485,6 +499,7 @@ async function testFullTransformFixture(
   const tsStart = performance.now()
   try {
     const result = await compileWithNgtsc(fixture.sourceCode, filePath, {
+      mode: fixture.ngtscMode,
       tsconfigPath: FIXTURE_TSCONFIG_PATH,
     })
     tsOutput = {
@@ -655,6 +670,7 @@ async function testClassMetadataFixture(
   const tsStart = performance.now()
   try {
     const result = await compileWithNgtsc(fixture.sourceCode, filePath, {
+      mode: fixture.ngtscMode,
       tsconfigPath: FIXTURE_TSCONFIG_PATH,
     })
     tsOutput = {
@@ -721,138 +737,12 @@ async function testClassMetadataFixture(
     oxcOutput,
     tsOutput,
     functionComparison: comparison.functionComparison,
+    importDiffs: comparison.importDiffs,
+    exportDiffs: comparison.exportDiffs,
+    classDiffs: comparison.classDiffs,
+    staticFieldDiffs: comparison.staticFieldDiffs,
     classMetadataDiffs: comparison.classMetadataDiffs,
-  }
-}
-
-/**
- * Process compilation results and generate fixture result.
- */
-async function processCompilationResults(
-  fixture: Fixture,
-  oxcOutput: FixtureCompilerOutput,
-  tsOutput: FixtureCompilerOutput,
-  verbose?: boolean,
-): Promise<FixtureResult> {
-  // Determine status
-  const oxcFailed = Boolean(oxcOutput.error)
-  const tsFailed = Boolean(tsOutput.error)
-
-  if (oxcFailed && tsFailed) {
-    return {
-      fixture,
-      status: 'both-error',
-      oxcOutput,
-      tsOutput,
-    }
-  }
-
-  if (oxcFailed) {
-    return {
-      fixture,
-      status: 'oxc-error',
-      oxcOutput,
-      tsOutput,
-    }
-  }
-
-  if (tsFailed) {
-    return {
-      fixture,
-      status: 'ts-error',
-      oxcOutput,
-      tsOutput,
-    }
-  }
-
-  // Compare outputs
-  const comparison = await compareJsSemantically(oxcOutput.code, tsOutput.code)
-
-  // Check expected features if specified - stricter check for regressions
-  let oxcFeatures: string[] | undefined
-  let tsFeatures: string[] | undefined
-  let asymmetricFeatures: string[] | undefined
-  let missingFromBoth: string[] | undefined
-
-  if (fixture.expectedFeatures && fixture.expectedFeatures.length > 0) {
-    oxcFeatures = []
-    tsFeatures = []
-    asymmetricFeatures = []
-    missingFromBoth = []
-
-    for (const feature of fixture.expectedFeatures) {
-      const inOxc = oxcOutput.code.includes(feature)
-      const inTs = tsOutput.code.includes(feature)
-
-      if (inOxc) {
-        oxcFeatures.push(feature)
-      }
-      if (inTs) {
-        tsFeatures.push(feature)
-      }
-
-      // Track asymmetric features (present in one but not both)
-      if (inOxc !== inTs) {
-        asymmetricFeatures.push(feature)
-      }
-
-      // Track features missing from both (test configuration issue)
-      if (!inOxc && !inTs) {
-        missingFromBoth.push(feature)
-      }
-    }
-  }
-
-  if (verbose && !comparison.match) {
-    console.log(`\n  MISMATCH: ${fixture.category}/${fixture.name}`)
-    if (comparison.functionComparison) {
-      const fc = comparison.functionComparison
-      if (fc.missingFunctions.length > 0) {
-        console.log(`    Missing functions: ${fc.missingFunctions.join(', ')}`)
-      }
-      if (fc.extraFunctions.length > 0) {
-        console.log(`    Extra functions: ${fc.extraFunctions.join(', ')}`)
-      }
-      if (fc.functionDiffs.length > 0) {
-        console.log(`    Differing functions: ${fc.functionDiffs.map((d) => d.name).join(', ')}`)
-      }
-    }
-  }
-
-  // Warn about feature asymmetries (potential regressions)
-  if (verbose && asymmetricFeatures && asymmetricFeatures.length > 0) {
-    console.log(`\n  FEATURE ASYMMETRY: ${fixture.category}/${fixture.name}`)
-    for (const feature of asymmetricFeatures) {
-      const inOxc = oxcFeatures?.includes(feature)
-      const inTs = tsFeatures?.includes(feature)
-      if (inOxc && !inTs) {
-        console.log(`    ${feature}: Oxc only (not in Angular)`)
-      } else if (!inOxc && inTs) {
-        console.log(`    ${feature}: Angular only (not in Oxc)`)
-      }
-    }
-  }
-
-  // Warn about features missing from both outputs (test configuration issue)
-  if (verbose && missingFromBoth && missingFromBoth.length > 0) {
-    console.log(`\n  MISSING FEATURES: ${fixture.category}/${fixture.name}`)
-    console.log(`    Not in either output: ${missingFromBoth.join(', ')}`)
-  }
-
-  // Determine final status
-  const status: FixtureResult['status'] = comparison.match ? 'match' : 'mismatch'
-
-  return {
-    fixture,
-    status,
-    oxcOutput,
-    tsOutput,
-    functionComparison: comparison.functionComparison,
-    diff: comparison.diff,
-    oxcFeatures,
-    tsFeatures,
-    asymmetricFeatures,
-    missingFromBoth,
+    parseErrors: comparison.parseErrors,
   }
 }
 
@@ -1014,15 +904,15 @@ export function printFixtureSummary(report: FixtureReport): void {
       console.log(`  ${result.fixture.category}/${result.fixture.name}`)
     }
   }
-  const staleMetadataFixtures = report.fixtures.filter((r) => r.staleMetadataFields)
-  if (staleMetadataFixtures.length > 0) {
+  const staleEntryFixtures = report.fixtures.filter((r) => r.staleEntries)
+  if (staleEntryFixtures.length > 0) {
     console.log(
-      '\nStale Metadata Allowlist Entries (declared in known-differences.ts but no longer observed):',
+      '\nStale Known Difference Entries (declared in known-differences.ts but no longer observed):',
     )
     console.log('-'.repeat(50))
-    for (const result of staleMetadataFixtures) {
+    for (const result of staleEntryFixtures) {
       console.log(
-        `  ${result.fixture.category}/${result.fixture.name}: ${result.staleMetadataFields!.join(', ')}`,
+        `  ${result.fixture.category}/${result.fixture.name}: ${result.staleEntries!.join(', ')}`,
       )
     }
   }
diff --git a/napi/angular-compiler/e2e/compare/fixtures/schemas/basic.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/schemas/basic.fixture.ts
index 3f40c6708..c56de9898 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/schemas/basic.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/schemas/basic.fixture.ts
@@ -400,6 +400,7 @@ export class SchemasWithShadowDomComponent {}
 
   {
     name: 'schemas-with-change-detection',
+    ngtscMode: 'full',
     category: 'schemas',
     description: 'Schemas with OnPush change detection',
     className: 'SchemasWithOnPushComponent',
diff --git a/napi/angular-compiler/e2e/compare/fixtures/styles/encapsulation.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/styles/encapsulation.fixture.ts
index 5c6c86315..df86b35ff 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/styles/encapsulation.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/styles/encapsulation.fixture.ts
@@ -465,6 +465,7 @@ export class AttributeSelectorComponent {}
 
   {
     name: 'style-onpush-encapsulation',
+    ngtscMode: 'full',
     category: 'styles',
     description: 'OnPush change detection with Emulated encapsulation',
     className: 'OnPushStyleComponent',
@@ -486,6 +487,7 @@ export class OnPushStyleComponent {}
 
   {
     name: 'style-onpush-none',
+    ngtscMode: 'full',
     category: 'styles',
     description: 'OnPush change detection with None encapsulation',
     className: 'OnPushNoneStyleComponent',
diff --git a/napi/angular-compiler/e2e/compare/fixtures/types.ts b/napi/angular-compiler/e2e/compare/fixtures/types.ts
index cff2e908b..736541361 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/types.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/types.ts
@@ -8,6 +8,7 @@
 import type { TransformOptions } from '@oxc-angular/vite/api'
 
 import type { ImportDiff, ExportDiff, ClassDiff, StaticFieldDiff } from '../src/compare.js'
+import type { NgtscMode } from '../src/compilers/angular-ngtsc.js'
 import type { FunctionLevelComparison, AstDiff, ClassMetadataDiff } from '../src/types.js'
 
 /**
@@ -194,6 +195,14 @@ export interface Fixture {
   /** Optional file path override (generated from category/name if not provided) */
   filePath?: string
 
+  /**
+   * ngtsc compilation mode for the reference output (default: 'local').
+   *
+   * 'local' (`experimental-local`) is fast, but it differs from a real build wherever ngtsc
+   * needs more than the file itself; use 'full' for fixtures that depend on that.
+   */
+  ngtscMode?: NgtscMode
+
   // Component metadata for full compilation testing
 
   /** The CSS selector that identifies this component in a template */
@@ -288,8 +297,8 @@ export interface FixtureResult {
   /** Fields that differ in a fixture listed in known-differences.ts but are not documented there */
   undocumentedFields?: string[]
 
-  /** `metadataDiffs` entries declared in known-differences.ts that no longer occur */
-  staleMetadataFields?: string[]
+  /** Entries declared in known-differences.ts whose difference no longer occurs */
+  staleEntries?: string[]
 
   /** Oxc compiler output */
   oxcOutput?: FixtureCompilerOutput
diff --git a/napi/angular-compiler/e2e/compare/src/compare.test.ts b/napi/angular-compiler/e2e/compare/src/compare.test.ts
new file mode 100644
index 000000000..385b0504d
--- /dev/null
+++ b/napi/angular-compiler/e2e/compare/src/compare.test.ts
@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest'
+
+import { compareFullFileSemantically } from './compare.js'
+
+const component = (styles: string, extra = '') => `
+import * as i0 from "@angular/core";
+export class MyComponent {
+  ${extra}
+  static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-cmp"]], decls: 0, vars: 0, template: function MyComponent_Template(rf, ctx) {}, styles: [${styles}], encapsulation: 0 });
+}
+`
+
+describe('compareFullFileSemantically', () => {
+  it('ignores formatting, quotes, trailing commas and plain template literals', async () => {
+    const tsCode = component('"a[_ngcontent-%COMP%] {color: red;}"')
+    const oxcCode = component('\n  `a[_ngcontent-%COMP%] {color: red;}`,\n')
+    expect((await compareFullFileSemantically(oxcCode, tsCode)).match).toBe(true)
+  })
+
+  it('reports whitespace differences inside string literals', async () => {
+    const result = await compareFullFileSemantically(
+      component('"one[_ngcontent-%COMP%] > two {}"'),
+      component('"one[_ngcontent-%COMP%]    > two {}"'),
+    )
+    expect(result.match).toBe(false)
+    expect(result.staticFieldDiffs?.map((d) => `${d.className}.${d.fieldName}`)).toEqual([
+      'MyComponent.ɵcmp',
+    ])
+  })
+
+  it('does not rewrite ", }" or " }" inside strings', async () => {
+    const result = await compareFullFileSemantically(component('"a {}"'), component('"a { }"'))
+    expect(result.match).toBe(false)
+  })
+
+  it('compares exported class members other than the static ɵ fields', async () => {
+    const result = await compareFullFileSemantically(
+      component('""', 'open = signal(false);'),
+      component('""', 'open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));'),
+    )
+    expect(result.match).toBe(false)
+    expect(result.classDiffs?.map((d) => d.className)).toEqual(['MyComponent'])
+    expect(result.staticFieldDiffs).toBeUndefined()
+  })
+
+  it('compares exported functions and hoisted constants by value', async () => {
+    const tsCode = `const _c0 = ["*"];\nexport function f() { return _c0; }\n`
+    expect((await compareFullFileSemantically(tsCode, tsCode.replace('"*"', "'*'"))).match).toBe(
+      true,
+    )
+    const result = await compareFullFileSemantically(tsCode.replace('"*"', '"a"'), tsCode)
+    expect(result.match).toBe(false)
+    expect(result.functionComparison?.functionDiffs.map((d) => d.name)).toEqual(['_c0'])
+  })
+
+  it('pairs hoisted constants emitted in a different order', async () => {
+    const tsCode = `const _c0 = ["a"];\nconst _c1 = ["b"];\nexport function f() { return [_c0, _c1]; }\n`
+    const oxcCode = `const _c0 = ["b"];\nconst _c1 = ["a"];\nexport function f() { return [_c1, _c0]; }\n`
+    expect((await compareFullFileSemantically(oxcCode, tsCode)).match).toBe(true)
+  })
+})
diff --git a/napi/angular-compiler/e2e/compare/src/compare.ts b/napi/angular-compiler/e2e/compare/src/compare.ts
index e44dd152f..7cf1594d7 100644
--- a/napi/angular-compiler/e2e/compare/src/compare.ts
+++ b/napi/angular-compiler/e2e/compare/src/compare.ts
@@ -2,21 +2,8 @@ import { diffLines } from 'diff'
 import { parseSync, type StaticImport, type StaticExport } from 'oxc-parser'
 import { format as formatWithOxfmt, type FormatOptions } from 'oxfmt'
 
-import { normalizeTemplateLiterals } from './normalize-template-literals.js'
 import type { FunctionLevelComparison, FunctionDiff, AstDiff, ClassMetadataDiff } from './types.js'
 
-/**
- * Result of comparing two pieces of JavaScript code semantically.
- */
-export interface CompareResult {
-  /** Whether the two pieces of code are semantically equivalent */
-  match: boolean
-  /** Function-level comparison details */
-  functionComparison?: FunctionLevelComparison
-  /** Legacy differences found (deprecated) */
-  diff?: AstDiff[]
-}
-
 /**
  * Result of comparing full-file outputs semantically.
  */
@@ -114,10 +101,13 @@ const IGNORED_PROPERTIES = new Set([
 ])
 
 /**
- * Unwrap ParenthesizedExpression nodes since they don't affect semantics.
- * This normalizes `(expr)` to just `expr`.
+ * Rewrite syntax that has the same meaning into one form:
+ *
+ * - `(expr)` becomes `expr`
+ * - an untagged template literal without substitutions (`\`a\``) becomes the string literal
+ *   with the same value (`"a"`). Tagged templates keep their form: the tag sees the raw strings.
  */
-function unwrapParenthesized(node: unknown): unknown {
+function unwrapParenthesized(node: unknown, tagged = false): unknown {
   if (node === null || typeof node !== 'object') {
     return node
   }
@@ -129,22 +119,36 @@ function unwrapParenthesized(node: unknown): unknown {
     return unwrapParenthesized(obj.expression)
   }
 
+  const quasis = obj.quasis as Array<{ value: { cooked: unknown } }> | undefined
+  if (
+    !tagged &&
+    obj.type === 'TemplateLiteral' &&
+    quasis?.length === 1 &&
+    (obj.expressions as unknown[]).length === 0
+  ) {
+    return { type: 'Literal', value: quasis[0].value.cooked }
+  }
+
   // Recursively process arrays
   if (Array.isArray(node)) {
-    return node.map(unwrapParenthesized)
+    return node.map((item) => unwrapParenthesized(item))
   }
 
   // Recursively process object properties
   const result: Record<string, unknown> = {}
   for (const [key, value] of Object.entries(obj)) {
-    result[key] = unwrapParenthesized(value)
+    result[key] = unwrapParenthesized(
+      value,
+      obj.type === 'TaggedTemplateExpression' && key === 'quasi',
+    )
   }
   return result
 }
 
 /**
  * Normalize AST to a canonical JSON string representation.
- * This excludes location and cosmetic properties, and unwraps parenthesized expressions.
+ * This excludes location and cosmetic properties, and rewrites equivalent syntax into one form
+ * (see `unwrapParenthesized`).
  */
 function normalizeAst(node: unknown): string {
   // First unwrap parenthesized expressions
@@ -158,69 +162,23 @@ function normalizeAst(node: unknown): string {
 }
 
 /**
- * Build a mapping from const names (_c0, _c1, etc.) to their normalized values.
- * This allows us to compare consts by value rather than by name.
- *
- * Handles both array constants and function constants:
- * - Array: const _c0 = ["value"];
- * - Function: const _c1 = (a0) => ({...});
+ * Map each top-level `const _cN = ...` (the constants the template compiler hoists) to its
+ * normalized AST, so constants can be paired by value rather than by name.
  */
-function buildConstValueMap(code: string): Map<string, string> {
+function buildConstValueMap(program: Program): Map<string, string> {
   const constMap = new Map<string, string>()
-  const constNamePattern = /^_c\d+$/
-
-  // Parse the code using AST
-  const ast = parseSync('file.js', code, { sourceType: 'module' })
-
-  for (const stmt of ast.program.body) {
-    // Only process const declarations
-    if (
-      stmt.type !== 'VariableDeclaration' ||
-      stmt.kind !== 'const' ||
-      stmt.declarations.length !== 1
-    ) {
+  for (const stmt of program.body as unknown as NormAstNode[]) {
+    const declarations = (stmt.declarations ?? []) as NormAstNode[]
+    if (stmt.type !== 'VariableDeclaration' || stmt.kind !== 'const' || declarations.length !== 1) {
       continue
     }
-
-    const decl = stmt.declarations[0]
-
-    // Check if identifier matches _c\d+ pattern
-    if (decl.id.type !== 'Identifier' || !constNamePattern.test(decl.id.name)) {
-      continue
-    }
-
-    const constName = decl.id.name
-    const init = decl.init
-
-    if (!init) {
-      continue
-    }
-
-    // Handle ArrayExpression: const _c0 = ["value"];
-    if (init.type === 'ArrayExpression') {
-      const constValue = code.slice(init.start, init.end)
-      // Normalize the value by removing ALL whitespace for canonical comparison
-      // This handles formatting differences (Oxc uses newlines/tabs, NG uses inline)
-      const normalizedValue = constValue
-        .replace(/\s+/g, '') // Remove ALL whitespace
-        .trim()
-      constMap.set(constName, normalizedValue)
-    }
-    // Handle ArrowFunctionExpression: const _c1 = (a0) => ({...});
-    else if (init.type === 'ArrowFunctionExpression') {
-      const constValue = code.slice(init.start, init.end)
-      // Normalize the value for comparison:
-      // 1. Remove all whitespace to get a canonical form
-      // 2. Normalize arrow function syntax variations
-      const normalizedValue = constValue
-        .replace(/\s+/g, '') // Remove ALL whitespace
-        // Normalize single param without parens: "a0=>" to "(a0)=>"
-        .replace(/^([a-zA-Z_]\w*)=>/g, '($1)=>')
-        .trim()
-      constMap.set(constName, normalizedValue)
+    const id = declarations[0].id as NormAstNode
+    const name = id.name
+    if (id.type !== 'Identifier' || typeof name !== 'string' || !/^_c\d+$/.test(name)) continue
+    if (declarations[0].init) {
+      constMap.set(name, normalizeAst(declarations[0].init))
     }
   }
-
   return constMap
 }
 
@@ -379,1265 +337,60 @@ function replaceConstReferences(code: string, constMapping: Map<string, string>)
   return result
 }
 
-/**
- * Check if a const value is component metadata that Oxc's template compiler doesn't emit.
- *
- * These patterns are generated by Angular's full compiler for component metadata,
- * but Oxc's template-only compiler doesn't emit them:
- *
- * 1. Attrs arrays: ["selectorName", ""] - for component selectors/inputs
- *    Example: ["matButton", ""], ["bitPrefix", ""]
- *
- * 2. View query predicates: ["refName"] - single-element arrays for view/content queries
- *    Used by @ViewChild("refName"), @ViewChildren("refName"), @ContentChild, @ContentChildren
- *    Example: ["chipSelectButton"], ["prefixContainer"]
- *
- * Both are component metadata that only appears in TypeScript Angular's full-file output.
- */
-function isAttrsConst(value: string): boolean {
-  // Parse the value as an expression using oxc-parser
-  const parseResult = parseSync('expr.js', value, { sourceType: 'script' })
-
-  // Check if parsing succeeded and we have exactly one statement
-  const program = parseResult.program
-  if (program.body.length !== 1) {
-    return false
-  }
-
-  const stmt = program.body[0]
-  if (stmt.type !== 'ExpressionStatement') {
-    return false
-  }
-
-  const expr = stmt.expression
-  if (expr.type !== 'ArrayExpression') {
-    return false
-  }
-
-  const elements = expr.elements
-
-  // Helper to check if an element is a string literal
-  const isStringLiteral = (el: unknown): boolean => {
-    if (el && typeof el === 'object' && 'type' in el && 'value' in el) {
-      return el.type === 'Literal' && typeof el.value === 'string'
-    }
-    return false
-  }
-
-  // Helper to get string value from a literal element
-  const getStringValue = (el: unknown): string | undefined => {
-    if (el && typeof el === 'object' && 'type' in el && 'value' in el) {
-      if (el.type === 'Literal' && typeof el.value === 'string') {
-        return el.value
-      }
-    }
-    return undefined
-  }
-
-  // Attrs arrays: ["matButton", ""] or ["mat-fab", ""]
-  // Pattern: 2 elements, both string Literals, second one is empty string
-  if (elements.length === 2) {
-    const first = elements[0]
-    const second = elements[1]
-    if (isStringLiteral(first) && isStringLiteral(second) && getStringValue(second) === '') {
-      return true
-    }
-  }
-
-  // View query predicates: ["refName"] - single-element string arrays
-  // Used for @ViewChild("refName"), @ViewChildren("refName"), @ContentChild, @ContentChildren
-  // These are NOT emitted by Oxc's template compiler because queries are class-level metadata
-  // Pattern: 1 element which is a string Literal
-  if (elements.length === 1) {
-    const first = elements[0]
-    if (isStringLiteral(first)) {
-      return true
-    }
-  }
-
-  return false
-}
-
-/**
- * Remove attrs/query consts from TS code that are NOT present in Oxc output.
- *
- * This function removes component metadata consts (like view query predicates) that only
- * appear in TypeScript Angular's full-file output because Oxc's template compiler doesn't
- * emit them.
- *
- * IMPORTANT: Only removes consts that are in TS but NOT in Oxc. If both outputs have the
- * same const value (e.g., selector arrays that Oxc also emits), it is NOT removed.
- *
- * After removal, remaining constants are renumbered to start from _c0 to align
- * with Oxc's numbering.
- *
- * Uses AST-based removal for correctness with nested structures.
- */
-function removeAttrsConstsNotInOxc(
-  tsCode: string,
-  tsConstMap: Map<string, string>,
-  oxcConstMap: Map<string, string>,
-): string {
-  // Build set of const VALUES present in Oxc output
-  const oxcConstValues = new Set(oxcConstMap.values())
-
-  // Find attrs consts in TS that are NOT in Oxc
-  const attrsConstsToRemove = new Set<string>()
-  for (const [name, value] of tsConstMap) {
-    // Only remove if:
-    // 1. The const looks like attrs/query metadata
-    // 2. The same value does NOT exist in Oxc output
-    if (isAttrsConst(value) && !oxcConstValues.has(value)) {
-      attrsConstsToRemove.add(name)
-    }
-  }
-
-  if (attrsConstsToRemove.size === 0) {
-    return tsCode
-  }
-
-  // Remove the const declarations using AST
-  let result = removeConstDeclarations(tsCode, attrsConstsToRemove)
-
-  // Renumber remaining constants to start from _c0
-  // This ensures Angular's output matches Oxc's constant numbering
-  const remainingConsts: string[] = []
-  for (const name of tsConstMap.keys()) {
-    if (!attrsConstsToRemove.has(name)) {
-      remainingConsts.push(name)
-    }
-  }
-
-  // Sort remaining constants by their numeric suffix
-  remainingConsts.sort((a, b) => {
-    const numA = parseInt(a.replace('_c', ''), 10)
-    const numB = parseInt(b.replace('_c', ''), 10)
-    return numA - numB
-  })
-
-  // Build rename map: old name -> new name (starting from _c0)
-  const renameMap = new Map<string, string>()
-  for (let i = 0; i < remainingConsts.length; i++) {
-    const oldName = remainingConsts[i]
-    const newName = `_c${i}`
-    if (oldName !== newName) {
-      renameMap.set(oldName, newName)
-    }
-  }
-
-  // Replace const references using the rename map
-  if (renameMap.size > 0) {
-    result = replaceConstReferences(result, renameMap)
-  }
-
-  return result
-}
-
-/**
- * Remove const declarations by name using AST-based approach.
- * This correctly handles any const value structure including nested arrays/objects.
- */
-function removeConstDeclarations(code: string, constNamesToRemove: Set<string>): string {
-  const ast = parseSync('file.js', code, { sourceType: 'module' })
-
-  // Collect spans to remove (sorted by start position descending for safe removal)
-  const spansToRemove: Array<{ start: number; end: number }> = []
-
-  for (const stmt of ast.program.body) {
-    if (
-      stmt.type === 'VariableDeclaration' &&
-      stmt.kind === 'const' &&
-      stmt.declarations.length === 1
-    ) {
-      const decl = stmt.declarations[0]
-      if (decl.id.type === 'Identifier' && constNamesToRemove.has(decl.id.name)) {
-        spansToRemove.push({ start: stmt.start, end: stmt.end })
-      }
-    }
-  }
-
-  if (spansToRemove.length === 0) {
-    return code
-  }
-
-  // Sort by start position descending so we can remove from end to start
-  // without affecting earlier positions
-  spansToRemove.sort((a, b) => b.start - a.start)
-
-  let result = code
-  for (const span of spansToRemove) {
-    // Also remove trailing whitespace/newline after the statement
-    let end = span.end
-    while (end < result.length && (result[end] === ' ' || result[end] === '\n')) {
-      end++
-    }
-    result = result.slice(0, span.start) + result.slice(end)
-  }
-
-  return result
-}
-
-/**
- * Remove provider const declarations from code.
- * Providers are component metadata, not template output, and may contain
- * expressions the Angular TS compiler can't handle (showing as "/* unknown * /").
- *
- * Uses AST-based removal for correctness.
- */
-function removeProvidersConst(code: string): string {
-  return removeConstDeclarations(code, new Set(['_providers']))
-}
-
-/**
- * Create a byte-offset to character-index mapping for a string.
- * This pre-computes the mapping once for efficient lookups.
- */
-function createByteToCharMap(str: string): number[] {
-  // For ASCII-only strings, byte offset === char index
-  // Quick check: if all chars are < 128, return empty map as sentinel
-  let hasNonAscii = false
-  for (let i = 0; i < str.length; i++) {
-    if (str.charCodeAt(i) >= 128) {
-      hasNonAscii = true
-      break
-    }
-  }
-  if (!hasNonAscii) {
-    return [] // Empty sentinel means use identity mapping
-  }
-
-  const encoder = new TextEncoder()
-  const map: number[] = [0] // byte 0 -> char 0
-  let byteCount = 0
-
-  for (let i = 0; i < str.length; i++) {
-    const code = str.charCodeAt(i)
-    // Handle surrogate pairs (characters outside BMP)
-    // High surrogate: 0xD800-0xDBFF, Low surrogate: 0xDC00-0xDFFF
-    // Only treat as a pair if followed by a valid low surrogate
-    const isHighSurrogate = code >= 0xd800 && code <= 0xdbff
-    const nextCode = i + 1 < str.length ? str.charCodeAt(i + 1) : 0
-    const isValidPair = isHighSurrogate && nextCode >= 0xdc00 && nextCode <= 0xdfff
-
-    if (isValidPair) {
-      const pair = str.slice(i, i + 2)
-      const bytes = encoder.encode(pair).length
-      for (let b = 0; b < bytes; b++) {
-        byteCount++
-        map[byteCount] = i + 2 // Next char after the pair
-      }
-      i++ // Skip the low surrogate
-    } else {
-      // Single character (including unpaired surrogates)
-      const bytes = encoder.encode(str[i]).length
-      for (let b = 0; b < bytes; b++) {
-        byteCount++
-        map[byteCount] = i + 1 // Next char
-      }
-    }
-  }
-
-  return map
-}
-
-/**
- * Convert a byte offset to a string character index using a pre-computed map.
- */
-function byteOffsetToCharIndex(
-  byteToCharMap: number[],
-  byteOffset: number,
-  strLength: number,
-): number {
-  // Empty map means ASCII-only, use identity mapping
-  if (byteToCharMap.length === 0) {
-    return Math.min(byteOffset, strLength)
-  }
-  if (byteOffset >= byteToCharMap.length) {
-    return strLength
-  }
-  return byteToCharMap[byteOffset] ?? strLength
-}
-
-/**
- * Extract a single function's code from the source by its AST bounds.
- * Handles byte offset to character index conversion for non-ASCII support.
- */
-function extractFunctionCode(code: string, funcAst: FunctionAst, byteToCharMap: number[]): string {
-  // oxc-parser uses 'start' and 'end' directly on nodes (not nested in 'span')
-  // Try both patterns for compatibility
-  let start: number | undefined
-  let end: number | undefined
-
-  if (
-    funcAst.span &&
-    typeof funcAst.span.start === 'number' &&
-    typeof funcAst.span.end === 'number'
-  ) {
-    start = funcAst.span.start
-    end = funcAst.span.end
-  } else if (typeof funcAst.start === 'number' && typeof funcAst.end === 'number') {
-    start = funcAst.start
-    end = funcAst.end
-  }
-
-  if (start !== undefined && end !== undefined) {
-    const startIdx = byteOffsetToCharIndex(byteToCharMap, start, code.length)
-    const endIdx = byteOffsetToCharIndex(byteToCharMap, end, code.length)
-    return code.slice(startIdx, endIdx)
-  }
-
-  // Fallback: re-stringify the AST (less accurate but works)
-  return JSON.stringify(funcAst)
-}
-
-interface FunctionAst {
-  type: 'FunctionDeclaration' | 'FunctionExpression' | 'ArrowFunctionExpression'
-  id?: { name: string } | null
-  span?: { start: number; end: number }
-  start?: number
-  end?: number
-  [key: string]: unknown
-}
-
-interface VariableDeclaration {
-  type: 'VariableDeclaration'
-  declarations: Array<{
-    type: 'VariableDeclarator'
-    id: { type: string; name?: string } | null
-    init: { type: string; [key: string]: unknown } | null
-    span?: { start: number; end: number }
-    start?: number
-    end?: number
-  }>
-  span?: { start: number; end: number }
-  start?: number
-  end?: number
-  [key: string]: unknown
-}
-
 interface Statement {
   type: string
   id?: { name: string } | null
   span?: { start: number; end: number }
   [key: string]: unknown
-}
-
-interface Program {
-  body: Statement[]
-  [key: string]: unknown
-}
-
-/**
- * Normalize constructor parameter types for @Inject decorated parameters.
- *
- * When a constructor parameter has an @Inject decorator with an injection token
- * (like DOCUMENT), the Angular compiler outputs `{type:undefined}` because the
- * token is not a type. Oxc may preserve the actual type annotation (e.g., Document).
- *
- * This normalizes both outputs to use `type:undefined` for @Inject parameters,
- * which is the canonical form used by Angular's setClassMetadata.
- *
- * Example:
- *   Input:  {type:Document,decorators:[{type:Inject,args:[DOCUMENT]}]}
- *   Output: {type:undefined,decorators:[{type:Inject,args:[DOCUMENT]}]}
- */
-function normalizeInjectParameterTypes(code: string): string {
-  // Match patterns like: {type:SomeType,decorators:[{type:Inject, or {type:Inject,args:
-  // and replace the type with undefined if it has an @Inject decorator
-  //
-  // Pattern matches: {type:IDENTIFIER,decorators:[{type:Inject
-  // Captures the identifier and replaces with undefined
-  return code.replace(
-    /\{type:([A-Z][A-Za-z0-9]*),decorators:\[\{type:Inject/g,
-    '{type:undefined,decorators:[{type:Inject',
-  )
-}
-
-// AST node types for nullish coalescing pattern matching
-interface NullishAstNode {
-  type: string
-  start: number
-  end: number
-  [key: string]: unknown
-}
-
-interface NullishConditionalExpressionNode extends NullishAstNode {
-  type: 'ConditionalExpression'
-  test: NullishAstNode
-  consequent: NullishAstNode
-  alternate: NullishAstNode
-}
-
-interface NullishLogicalExpressionNode extends NullishAstNode {
-  type: 'LogicalExpression'
-  operator: string
-  left: NullishAstNode
-  right: NullishAstNode
-}
-
-interface NullishBinaryExpressionNode extends NullishAstNode {
-  type: 'BinaryExpression'
-  operator: string
-  left: NullishAstNode
-  right: NullishAstNode
-}
-
-interface NullishAssignmentExpressionNode extends NullishAstNode {
-  type: 'AssignmentExpression'
-  operator: string
-  left: NullishAstNode
-  right: NullishAstNode
-}
-
-interface NullishIdentifierNode extends NullishAstNode {
-  type: 'Identifier'
-  name: string
-}
-
-interface NullishUnaryExpressionNode extends NullishAstNode {
-  type: 'UnaryExpression'
-  operator: string
-  argument: NullishAstNode
-}
-
-interface NullishLiteralNode extends NullishAstNode {
-  type: 'Literal'
-  value: unknown
-}
-
-interface NullishParenthesizedExpressionNode extends NullishAstNode {
-  type: 'ParenthesizedExpression'
-  expression: NullishAstNode
-}
-
-interface NullishVariableDeclarationNode extends NullishAstNode {
-  type: 'VariableDeclaration'
-  kind: string
-  declarations: NullishVariableDeclaratorNode[]
-}
-
-interface NullishVariableDeclaratorNode extends NullishAstNode {
-  type: 'VariableDeclarator'
-  id: NullishAstNode
-}
-
-/**
- * Check if an AST node is a nullish coalescing pattern:
- *   Pattern 1: (_a = expr) !== null && _a !== void 0 ? _a : fallback
- *   Pattern 2: expr !== null && expr !== void 0 ? expr : fallback
- *
- * Returns the extracted parts if it matches, null otherwise.
- */
-function matchNullishCoalescingPattern(
-  node: NullishAstNode,
-  code: string,
-): { leftExpr: string; rightExpr: string; tempVarName: string } | null {
-  // Must be a ConditionalExpression
-  if (node.type !== 'ConditionalExpression') return null
-  const conditional = node as NullishConditionalExpressionNode
-
-  // test must be a LogicalExpression with && operator
-  if (conditional.test.type !== 'LogicalExpression') return null
-  const testLogical = conditional.test as NullishLogicalExpressionNode
-  if (testLogical.operator !== '&&') return null
-
-  // Left side of &&: (_a = expr) !== null  OR  expr !== null
-  // This should be a BinaryExpression with !== operator
-  if (testLogical.left.type !== 'BinaryExpression') return null
-  const leftBinary = testLogical.left as NullishBinaryExpressionNode
-  if (leftBinary.operator !== '!==' && leftBinary.operator !== '!=') return null
-
-  // Right side of !== should be null (Literal with value: null in oxc-parser)
-  if (leftBinary.right.type !== 'Literal') return null
-  const nullLiteral = leftBinary.right as NullishLiteralNode
-  if (nullLiteral.value !== null) return null
-
-  // Left side of !== could be:
-  // 1. ParenthesizedExpression containing AssignmentExpression (temp var pattern)
-  // 2. Just an Identifier or other expression (simple pattern)
-  let leftOfBinary = leftBinary.left
-
-  // Unwrap parentheses if needed
-  if (leftOfBinary.type === 'ParenthesizedExpression') {
-    leftOfBinary = (leftOfBinary as NullishParenthesizedExpressionNode).expression
-  }
-
-  // Right side of &&: _a !== void 0  OR  expr !== void 0
-  if (testLogical.right.type !== 'BinaryExpression') return null
-  const rightBinary = testLogical.right as NullishBinaryExpressionNode
-  if (rightBinary.operator !== '!==' && rightBinary.operator !== '!=') return null
-
-  // Right side should be "void 0"
-  if (rightBinary.right.type !== 'UnaryExpression') return null
-  const voidExpr = rightBinary.right as NullishUnaryExpressionNode
-  if (voidExpr.operator !== 'void') return null
-  // In oxc-parser, numeric literals are "Literal" with numeric value
-  if (voidExpr.argument.type !== 'Literal') return null
-  const voidArg = voidExpr.argument as NullishLiteralNode
-  if (voidArg.value !== 0) return null
-
-  // Try to match Pattern 1: (_a = expr) !== null && _a !== void 0 ? _a : fallback
-  if (leftOfBinary.type === 'AssignmentExpression') {
-    const assignmentExpr = leftOfBinary as NullishAssignmentExpressionNode
-
-    // Assignment should be to a temp variable like _a, _b, etc.
-    if (assignmentExpr.left.type !== 'Identifier') return null
-    const tempVar = assignmentExpr.left as NullishIdentifierNode
-    const tempVarName = tempVar.name
-
-    // Check that it's a temp variable pattern (starts with _)
-    if (!tempVarName.startsWith('_')) return null
-
-    // Left side of !== void 0 should be the same temp variable
-    if (rightBinary.left.type !== 'Identifier') return null
-    const rightVarRef = rightBinary.left as NullishIdentifierNode
-    if (rightVarRef.name !== tempVarName) return null
-
-    // consequent should be the same temp variable
-    let consequent = conditional.consequent
-    if (consequent.type === 'ParenthesizedExpression') {
-      consequent = (consequent as NullishParenthesizedExpressionNode).expression
-    }
-    if (consequent.type !== 'Identifier') return null
-    const consequentVar = consequent as NullishIdentifierNode
-    if (consequentVar.name !== tempVarName) return null
-
-    // Extract the left expression (the actual value being null-checked)
-    const leftExpr = code.slice(assignmentExpr.right.start, assignmentExpr.right.end)
-
-    // Extract the right expression (the fallback)
-    const rightExpr = code.slice(conditional.alternate.start, conditional.alternate.end)
-
-    return { leftExpr, rightExpr, tempVarName }
-  }
-
-  // Try to match Pattern 2: expr !== null && expr !== void 0 ? expr : fallback
-  // Both sides of && compare the same expression
-  const leftExprStr = code.slice(leftBinary.left.start, leftBinary.left.end)
-  const rightExprStr = code.slice(rightBinary.left.start, rightBinary.left.end)
-
-  // The expressions must be the same
-  if (leftExprStr !== rightExprStr) return null
-
-  // The consequent must also be the same expression
-  let consequent = conditional.consequent
-  if (consequent.type === 'ParenthesizedExpression') {
-    consequent = (consequent as NullishParenthesizedExpressionNode).expression
-  }
-  const consequentStr = code.slice(consequent.start, consequent.end)
-  if (consequentStr !== leftExprStr) return null
-
-  // Extract the right expression (the fallback)
-  const rightExpr = code.slice(conditional.alternate.start, conditional.alternate.end)
-
-  return { leftExpr: leftExprStr, rightExpr, tempVarName: '' }
-}
-
-/**
- * Recursively walk an AST and collect all nullish coalescing patterns.
- * Returns them sorted by start position descending for safe replacement.
- */
-function collectNullishPatterns(
-  node: NullishAstNode,
-  code: string,
-  patterns: Array<{ start: number; end: number; leftExpr: string; rightExpr: string }>,
-): void {
-  // Try to match this node as a nullish coalescing pattern
-  const match = matchNullishCoalescingPattern(node, code)
-  if (match) {
-    patterns.push({
-      start: node.start,
-      end: node.end,
-      leftExpr: match.leftExpr,
-      rightExpr: match.rightExpr,
-    })
-    // Don't recurse into children of matched patterns - nested patterns
-    // within leftExpr/rightExpr are handled by recursive normalization
-    // in the replacement loop. Collecting them here would cause position
-    // conflicts since the outer pattern's span contains the inner pattern.
-    return
-  }
-
-  // Recursively walk all child nodes (only for non-matched nodes)
-  for (const key of Object.keys(node)) {
-    const value = node[key]
-    if (value && typeof value === 'object') {
-      if (Array.isArray(value)) {
-        for (const item of value) {
-          if (item && typeof item === 'object' && 'type' in item) {
-            collectNullishPatterns(item as NullishAstNode, code, patterns)
-          }
-        }
-      } else if ('type' in value) {
-        collectNullishPatterns(value as NullishAstNode, code, patterns)
-      }
-    }
-  }
-}
-
-/**
- * Collect all "var _a, _b, ...;" declarations (temp variables for nullish coalescing).
- * Returns spans sorted by start position descending for safe removal.
- */
-function collectTempVarDeclarations(
-  ast: { program: { body: unknown[] } },
-  code: string,
-): Array<{ start: number; end: number }> {
-  const spans: Array<{ start: number; end: number }> = []
-
-  for (const stmt of ast.program.body) {
-    const stmtNode = stmt as NullishAstNode
-    if (stmtNode.type === 'VariableDeclaration') {
-      const varDecl = stmtNode as NullishVariableDeclarationNode
-      if (varDecl.kind === 'var') {
-        // Check if ALL declarators are temp variables for nullish coalescing.
-        // TypeScript generates temp vars like _a, _b, _c (single underscore + letter/number).
-        // We must NOT remove helpers like __awaiter, __generator (double underscore).
-        const isTempVar = (name: string): boolean => {
-          // Match _a, _b, ..., _z, _1, _2, etc. but NOT __awaiter, __generator, etc.
-          return /^_[a-z0-9]$/i.test(name)
-        }
-        const allTempVars = varDecl.declarations.every((decl) => {
-          if (decl.id.type === 'Identifier') {
-            const id = decl.id as NullishIdentifierNode
-            return isTempVar(id.name)
-          }
-          return false
-        })
-
-        if (allTempVars && varDecl.declarations.length > 0) {
-          // Include trailing whitespace/newline in removal
-          let end = stmtNode.end
-          while (end < code.length && (code[end] === ' ' || code[end] === '\n')) {
-            end++
-          }
-          spans.push({ start: stmtNode.start, end })
-        }
-      }
-    }
-  }
-
-  return spans
-}
-
-/**
- * Check if an expression contains a logical operator (|| or &&) at ANY level.
- * This helps determine if the expression needs parentheses when used with ??.
- *
- * For example, `x === null || x === void 0 ? void 0 : x.y` has a ConditionalExpression
- * at the top level, but contains a LogicalExpression inside. Mixing this with ??
- * would produce invalid code, so we need to detect logical operators at any depth.
- */
-function containsLogicalOperator(expr: string): boolean {
-  try {
-    const ast = parseSync('expr.js', expr, { sourceType: 'module' })
-    const program = ast.program
-    if (program.body.length !== 1) return false
-    const stmt = program.body[0]
-    if (stmt.type !== 'ExpressionStatement') return false
-    const stmtExpr = (stmt as unknown as { expression: NullishAstNode }).expression
-    return hasLogicalOperatorRecursive(stmtExpr)
-  } catch {
-    // Fallback to string check if parsing fails
-    return expr.includes('||') || expr.includes('&&')
-  }
-}
-
-/**
- * Recursively traverse an AST node to find any LogicalExpression with || or &&.
- */
-function hasLogicalOperatorRecursive(node: NullishAstNode): boolean {
-  if (!node || typeof node !== 'object') return false
-
-  // Check if this node is a LogicalExpression with || or &&
-  if (node.type === 'LogicalExpression') {
-    const op = (node as unknown as { operator: string }).operator
-    if (op === '||' || op === '&&') {
-      return true
-    }
-  }
-
-  // Recursively check all child nodes
-  for (const key of Object.keys(node)) {
-    if (key === 'type' || key === 'start' || key === 'end' || key === 'span') continue
-    const value = (node as Record<string, unknown>)[key]
-    if (Array.isArray(value)) {
-      for (const item of value) {
-        if (
-          item &&
-          typeof item === 'object' &&
-          hasLogicalOperatorRecursive(item as NullishAstNode)
-        ) {
-          return true
-        }
-      }
-    } else if (value && typeof value === 'object') {
-      if (hasLogicalOperatorRecursive(value as NullishAstNode)) {
-        return true
-      }
-    }
-  }
-
-  return false
-}
-
-/**
- * Normalize nullish coalescing operator differences using AST-based transformation.
- *
- * Oxc preserves the ?? operator while TypeScript transpiles it to:
- *   (_a = expr) !== null && _a !== void 0 ? _a : fallback
- *
- * This function converts the TypeScript transpiled pattern back to ?? syntax
- * so both can be compared equivalently.
- *
- * Example:
- *   Input:  (_a = expr) !== null && _a !== void 0 ? _a : fallback
- *   Output: expr ?? fallback
- *
- * The pattern handles:
- * - Variable names like _a, _b, _c, etc.
- * - Nested expressions as the left operand (including property access and function calls)
- * - Various fallback expressions (including function calls)
- * - Nested nullish coalescing patterns
- */
-function normalizeNullishCoalescing(code: string): string {
-  // Parse the code to get AST
-  let ast
-  try {
-    ast = parseSync('nullish.js', code, { sourceType: 'module' })
-  } catch {
-    // If parsing fails, return code unchanged
-    return code
-  }
-
-  // Collect all temp var declarations to remove
-  const tempVarSpans = collectTempVarDeclarations(ast, code)
-
-  // Collect all nullish coalescing patterns
-  const patterns: Array<{ start: number; end: number; leftExpr: string; rightExpr: string }> = []
-  collectNullishPatterns(ast.program as unknown as NullishAstNode, code, patterns)
-
-  // If nothing to transform, return as-is
-  if (patterns.length === 0 && tempVarSpans.length === 0) {
-    return code
-  }
-
-  // Combine all spans and sort by start position descending for safe replacement
-  const allReplacements: Array<{
-    start: number
-    end: number
-    replacement: string
-  }> = []
-
-  // Add pattern replacements
-  for (const pattern of patterns) {
-    // Handle nested patterns by recursively normalizing leftExpr
-    let normalizedLeft = pattern.leftExpr
-    if (normalizedLeft.includes('!== null') && normalizedLeft.includes('!== void 0')) {
-      normalizedLeft = normalizeNullishCoalescing(normalizedLeft)
-    }
-
-    // Also normalize the rightExpr in case it has nested patterns
-    let normalizedRight = pattern.rightExpr
-    if (normalizedRight.includes('!== null') && normalizedRight.includes('!== void 0')) {
-      normalizedRight = normalizeNullishCoalescing(normalizedRight)
-    }
-
-    // Determine if we need parentheses around the left expression
-    // Parse leftExpr to check if it contains || or &&
-    const leftNeedsParens = containsLogicalOperator(normalizedLeft)
-    const formattedLeft = leftNeedsParens ? `(${normalizedLeft})` : normalizedLeft
-
-    // Also check if right expression needs parentheses
-    // This handles cases like: x ?? y?.prop where y?.prop is transpiled as (y === null || ...)
-    // Also check for yield/await which have low precedence and need parens when on RHS of ??
-    const rightNeedsParens =
-      containsLogicalOperator(normalizedRight) || /^(yield|await)\b/.test(normalizedRight.trim())
-    const formattedRight = rightNeedsParens ? `(${normalizedRight})` : normalizedRight
-
-    // Check if the surrounding context has && or || operators
-    // If so, we need to wrap the entire ?? expression in parentheses
-    const contextNeedsParens = hasMixedLogicalInContext(code, pattern.start, pattern.end)
-    const replacement = `${formattedLeft} ?? ${formattedRight}`
-    const finalReplacement = contextNeedsParens ? `(${replacement})` : replacement
-
-    allReplacements.push({
-      start: pattern.start,
-      end: pattern.end,
-      replacement: finalReplacement,
-    })
-  }
-
-  // Add temp var removal (empty replacement)
-  for (const span of tempVarSpans) {
-    allReplacements.push({
-      start: span.start,
-      end: span.end,
-      replacement: '',
-    })
-  }
-
-  // Sort by start position descending
-  allReplacements.sort((a, b) => b.start - a.start)
-
-  // Apply replacements from end to start
-  let result = code
-  for (const rep of allReplacements) {
-    result = result.slice(0, rep.start) + rep.replacement + result.slice(rep.end)
-  }
-
-  return result
-}
-
-/**
- * Remove parentheses around nullish coalescing expressions for normalization.
- *
- * Oxc wraps nullish coalescing in parens: (expr ?? fallback)
- * After TS normalization, it becomes: expr ?? fallback
- *
- * This function removes the outer parens from Oxc's output to match.
- * It is CONSERVATIVE - only removes parens when it's provably safe.
- */
-function removeNullishCoalescingParens(code: string): string {
-  // Use a manual approach to handle balanced parentheses
-  // Look for patterns like (expr ?? expr) and remove the outer parens
-  let output = ''
-  let i = 0
-
-  while (i < code.length) {
-    if (code[i] === '(') {
-      // Try to match a nullish coalescing expression wrapped in parens
-      const matchResult = tryRemoveNullishParens(code, i)
-      if (matchResult) {
-        output += matchResult.replacement
-        i = matchResult.endIndex
-        continue
-      }
-    }
-    output += code[i]
-    i++
-  }
-
-  return output
-}
-
-/**
- * Try to remove outer parens from a nullish coalescing expression starting at position `start`.
- * Returns { replacement, endIndex } if matched, null otherwise.
- *
- * This function is CONSERVATIVE - it only removes parentheses when:
- * 1. The inner content parses as a single BinaryExpression with `??` operator
- * 2. There are no commas at the top level (would indicate function args)
- * 3. There are no `&&` or `||` operators ANYWHERE in the surrounding statement context
- * 4. The parentheses are truly just wrapping a standalone `??` expression
- */
-function tryRemoveNullishParens(
-  code: string,
-  start: number,
-): { replacement: string; endIndex: number } | null {
-  // We're at a '(' - find the matching ')' and check if it contains ' ?? '
-  let depth = 0
-  let nullishCount = 0
-  let hasTopLevelComma = false
-  let end = -1
-
-  for (let j = start; j < code.length; j++) {
-    const ch = code[j]
-    if (ch === '(') depth++
-    else if (ch === ')') {
-      depth--
-      if (depth === 0) {
-        end = j
-        break
-      }
-    }
-    // Check for ' ?? ' at depth 1 (inside our parens but not nested deeper)
-    if (depth === 1 && code.slice(j, j + 4) === ' ?? ') {
-      nullishCount++
-    }
-    // Check for comma at depth 1 - indicates function arguments, not wrapping parens
-    if (depth === 1 && ch === ',') {
-      hasTopLevelComma = true
-    }
-  }
-
-  // Must have found closing paren, exactly one ?? at top level, and no commas
-  if (end === -1 || nullishCount !== 1 || hasTopLevelComma) return null
-
-  // Extract the inner content (between the outer parens)
-  const inner = code.slice(start + 1, end)
-
-  // Use AST parsing to verify the inner content is a single BinaryExpression with ??
-  if (!isValidNullishExpressionForParenRemoval(inner)) {
-    return null
-  }
-
-  // Check surrounding context for && or || operators
-  // We need to look at the broader statement context, not just immediately adjacent
-  if (hasMixedLogicalInContext(code, start, end)) {
-    return null
-  }
-
-  return {
-    replacement: inner,
-    endIndex: end + 1,
-  }
-}
-
-/**
- * Use AST parsing to verify the expression is a single BinaryExpression with ?? operator.
- * This ensures we're not accidentally mangling complex expressions.
- */
-function isValidNullishExpressionForParenRemoval(expr: string): boolean {
-  try {
-    // Wrap in a minimal expression context for parsing
-    const wrappedCode = `(${expr})`
-    const result = parseSync('temp.js', wrappedCode, { sourceType: 'module' })
-
-    if (result.errors.length > 0) {
-      return false
-    }
-
-    const program = result.program
-    if (program.body.length !== 1) return false
-
-    const stmt = program.body[0]
-    if (stmt.type !== 'ExpressionStatement') return false
-
-    const expression = (stmt as unknown as { expression: NullishAstNode }).expression
-
-    // Must be a BinaryExpression with ?? operator
-    if (expression.type !== 'BinaryExpression') return false
-    const binExpr = expression as unknown as {
-      operator: string
-      left: NullishAstNode
-      right: NullishAstNode
-    }
-    if (binExpr.operator !== '??') return false
-
-    // Check that neither side contains && or || at any level
-    // This prevents issues like (a && b ?? c) which would be invalid without parens
-    if (hasLogicalOperatorRecursive(binExpr.left) || hasLogicalOperatorRecursive(binExpr.right)) {
-      return false
-    }
-
-    return true
-  } catch {
-    // If parsing fails, be conservative and don't remove parens
-    return false
-  }
-}
-
-/**
- * Check if the surrounding context contains && or || that would mix with ??.
- *
- * JavaScript doesn't allow mixing ?? with && or || without explicit parentheses.
- * So if there's any && or || in the same statement/expression context,
- * we must keep the parentheses.
- *
- * This function looks at the broader context by finding the statement boundaries.
- */
-function hasMixedLogicalInContext(code: string, parenStart: number, parenEnd: number): boolean {
-  // Find the start of the current statement/expression context
-  // Look backwards for statement terminators or expression boundaries
-  let contextStart = parenStart
-  let depth = 0
-
-  for (let i = parenStart - 1; i >= 0; i--) {
-    const ch = code[i]
-    if (ch === ')') depth++
-    else if (ch === '(') {
-      if (depth > 0) depth--
-      else {
-        // We're inside another paren group - this defines our context
-        contextStart = i + 1
-        break
-      }
-    } else if (ch === ';' || ch === '{' || ch === '}' || ch === '?' || ch === ':') {
-      contextStart = i + 1
-      break
-    }
-    if (i === 0) contextStart = 0
-  }
-
-  // Find the end of the current statement/expression context
-  let contextEnd = parenEnd
-  depth = 0
-
-  for (let i = parenEnd + 1; i < code.length; i++) {
-    const ch = code[i]
-    if (ch === '(') depth++
-    else if (ch === ')') {
-      if (depth > 0) depth--
-      else {
-        // We're closing a paren that was opened before us
-        contextEnd = i
-        break
-      }
-    } else if (ch === ';' || ch === '{' || ch === '}' || ch === '?' || ch === ':') {
-      contextEnd = i
-      break
-    }
-    if (i === code.length - 1) contextEnd = code.length
-  }
-
-  // Now check for && or || in this context (excluding the content inside our parens)
-  const beforeParen = code.slice(contextStart, parenStart)
-  const afterParen = code.slice(parenEnd + 1, contextEnd)
-
-  // Check for && or || in the surrounding context (not inside our parens)
-  // We need to be careful about && and || that might be inside nested parens
-  if (containsLogicalOperatorInString(beforeParen) || containsLogicalOperatorInString(afterParen)) {
-    return true
-  }
-
-  return false
-}
-
-/**
- * Check if a code string contains && or || at its top level (not inside nested parens).
- */
-function containsLogicalOperatorInString(code: string): boolean {
-  let depth = 0
-
-  for (let i = 0; i < code.length; i++) {
-    const ch = code[i]
-    if (ch === '(' || ch === '[' || ch === '{') depth++
-    else if (ch === ')' || ch === ']' || ch === '}') depth--
-    else if (depth === 0) {
-      // Check for && or ||
-      if (i + 1 < code.length) {
-        const twoChar = code.slice(i, i + 2)
-        if (twoChar === '&&' || twoChar === '||') {
-          return true
-        }
-      }
-    }
-  }
-
-  return false
-}
-
-/**
- * Compare two JavaScript code strings semantically using normalized string comparison.
- *
- * This parses both strings with oxc-parser, normalizes the ASTs (removing location info),
- * and compares the resulting canonical strings.
- *
- * It also normalizes const references (_c0, _c1, etc.) by value, so that const name
- * differences due to different ordering/numbering don't cause false mismatches.
- */
-export async function compareJsSemantically(
-  oxcCode: string,
-  tsCode: string,
-): Promise<CompareResult> {
-  // Fast path: if code strings are identical, they're semantically equivalent
-  if (oxcCode === tsCode) {
-    return { match: true }
-  }
-
-  try {
-    // Format both with oxfmt to normalize formatting
-    const [formattedOxc, formattedTs] = await Promise.all([
-      formatCodeForComparison(oxcCode),
-      formatCodeForComparison(tsCode),
-    ])
-
-    // Fast path after formatting normalization
-    if (formattedOxc === formattedTs) {
-      return { match: true }
-    }
-
-    // Normalize template literals to regular strings (semantically equivalent)
-    let workingOxcCode = normalizeTemplateLiterals(formattedOxc)
-    let workingTsCode = normalizeTemplateLiterals(formattedTs)
-
-    // Normalize PURE comments (oxfmt adds spaces: /* @__PURE__ */ -> /*@__PURE__*/)
-    workingOxcCode = workingOxcCode.replaceAll('/* @__PURE__ */', '/*@__PURE__*/')
-    workingTsCode = workingTsCode.replaceAll('/* @__PURE__ */', '/*@__PURE__*/')
-
-    // Remove trailing commas in objects: ",}" -> "}"
-    workingOxcCode = workingOxcCode.replaceAll(',}', '}')
-    workingTsCode = workingTsCode.replaceAll(',}', '}')
-
-    // Remove trailing commas in arrays: ",]" -> "]"
-    workingOxcCode = workingOxcCode.replaceAll(',]', ']')
-    workingTsCode = workingTsCode.replaceAll(',]', ']')
-
-    // Normalize space before closing brace: " }" -> "}"
-    workingOxcCode = workingOxcCode.replaceAll(' }', '}')
-    workingTsCode = workingTsCode.replaceAll(' }', '}')
-
-    // Normalize @Inject parameter types (Oxc preserves type, Angular uses undefined)
-    workingOxcCode = normalizeInjectParameterTypes(workingOxcCode)
-    workingTsCode = normalizeInjectParameterTypes(workingTsCode)
-
-    // Normalize nullish coalescing (Oxc preserves ??, TS transpiles to ternary)
-    // Apply to TS: convert ternary check to ??
-    // Apply to Oxc: remove outer parens around ?? expression
-    workingTsCode = normalizeNullishCoalescing(workingTsCode)
-    workingOxcCode = removeNullishCoalescingParens(workingOxcCode)
-
-    // Normalize numeric literals: 1e3 → 1000 (OXC emits scientific notation)
-    workingOxcCode = normalizeNumericLiterals(workingOxcCode)
-    workingTsCode = normalizeNumericLiterals(workingTsCode)
-
-    // Normalize inline object literal formatting: collapse multi-line simple objects
-    workingOxcCode = collapseInlineObjectLiterals(workingOxcCode)
-    workingTsCode = collapseInlineObjectLiterals(workingTsCode)
-
-    // Fast path after template/inject/nullish/format normalization
-    if (workingOxcCode === workingTsCode) {
-      return { match: true }
-    }
-
-    // Build const value maps for both to identify metadata consts
-    const tsConstMap = buildConstValueMap(workingTsCode)
-    const oxcConstMapInitial = buildConstValueMap(workingOxcCode)
-
-    // Remove attrs/query consts from TS code that are NOT present in Oxc output.
-    // These are component metadata consts (like view query predicates) that only appear
-    // in TypeScript Angular's full-file output because Oxc's template compiler doesn't emit them.
-    // If both outputs have the same const (e.g., selector arrays), don't remove it.
-    let normalizedTsCode = removeAttrsConstsNotInOxc(workingTsCode, tsConstMap, oxcConstMapInitial)
-
-    // Remove provider consts from both (component metadata, not template output)
-    // TS compiler may output "/* unknown */" for complex provider expressions
-    let normalizedOxcCode = removeProvidersConst(workingOxcCode)
-    normalizedTsCode = removeProvidersConst(normalizedTsCode)
-
-    // Build const value maps AFTER attrs/providers removal
-    const oxcConstMap = buildConstValueMap(normalizedOxcCode)
-    const normalizedTsConstMap = buildConstValueMap(normalizedTsCode)
-
-    // Create mapping from Oxc const names to TS const names based on value equivalence
-    const constMapping = buildConstNameMapping(oxcConstMap, normalizedTsConstMap)
-
-    // Normalize Oxc code by replacing const references to match TS naming
-    normalizedOxcCode = replaceConstReferences(normalizedOxcCode, constMapping)
-
-    // Fast path after const normalization
-    if (normalizedOxcCode === normalizedTsCode) {
-      return { match: true }
-    }
-
-    // Parse both with oxc-parser
-    const oxcResult = parseSync('oxc.js', normalizedOxcCode, { sourceType: 'module' })
-    const tsResult = parseSync('ts.js', normalizedTsCode, { sourceType: 'module' })
-
-    // Check for parse errors
-    if (oxcResult.errors.length > 0 || tsResult.errors.length > 0) {
-      return {
-        match: false,
-        diff: [
-          {
-            path: 'root',
-            type: 'different',
-            expected: tsResult.errors.length > 0 ? 'parse error' : 'valid',
-            actual: oxcResult.errors.length > 0 ? 'parse error' : 'valid',
-          },
-        ],
-      }
-    }
-
-    // Normalize both ASTs and compare as strings
-    const normalizedOxc = normalizeAst(oxcResult.program)
-    const normalizedTs = normalizeAst(tsResult.program)
-
-    if (normalizedOxc === normalizedTs) {
-      return { match: true }
-    }
-
-    // If they don't match, extract function-level details for reporting
-    const oxcFunctions = extractFunctions(
-      oxcResult.program as unknown as Program,
-      normalizedOxcCode,
-    )
-    const tsFunctions = extractFunctions(tsResult.program as unknown as Program, normalizedTsCode)
-
-    // Pass constMapping so that const arrow functions (_c0, _c1, etc.) can be matched
-    // even when they have different indices but equivalent values
-    const functionComparison = compareFunctions(oxcFunctions, tsFunctions, constMapping)
-
-    // IMPORTANT: If all template functions match (no missing, no extra, no diffs),
-    // consider it a match even if there are differences in non-function code like consts.
-    // This handles cases where:
-    // - Const indices differ (_c2 vs _c5) but values/functions are equivalent
-    // - Non-template consts (CSS styles, metadata) differ
-    const hasNoFunctionDifferences =
-      functionComparison.missingFunctions.length === 0 &&
-      functionComparison.extraFunctions.length === 0 &&
-      functionComparison.functionDiffs.length === 0
-
-    if (hasNoFunctionDifferences) {
-      return { match: true, functionComparison }
-    }
+}
 
-    return {
-      match: false,
-      functionComparison,
-    }
-  } catch (e) {
-    return {
-      match: false,
-      diff: [
-        {
-          path: 'root',
-          type: 'different',
-          expected: 'parseable',
-          actual: `error: ${e as Error}`,
-        },
-      ],
-    }
-  }
+interface Program {
+  body: Statement[]
+  [key: string]: unknown
 }
 
 interface ExtractedFunction {
-  ast: FunctionAst
   code: string
   normalized: string
 }
 
 /**
- * Extract all named function declarations from a program.
- * Returns a map of function name to its AST, code, and normalized representation.
+ * Extract every named top-level function and variable declaration, exported or not.
+ * Returns a map of name to its code and normalized representation.
  *
  * Handles:
- * - FunctionDeclaration: `function foo() { ... }`
- * - VariableDeclaration with FunctionExpression: `const foo = function() { ... }`
- * - VariableDeclaration with ArrowFunctionExpression: `const foo = () => { ... }`
+ * - FunctionDeclaration: `function foo() { ... }`, `export function foo() { ... }`,
+ *   `export default function foo() { ... }`
+ * - VariableDeclaration: `const foo = function() { ... }`, `const _forTrack0 = (item) => item.id`,
+ *   and non-function values such as the hoisted `const _c0 = ["*"]`, whose values are compared too
  */
 function extractFunctions(program: Program, sourceCode: string): Map<string, ExtractedFunction> {
   const functions = new Map<string, ExtractedFunction>()
 
-  // Pre-compute byte-to-char mapping once for all functions
-  const byteToCharMap = createByteToCharMap(sourceCode)
+  // oxc-parser's JS API reports UTF-16 offsets, so they index the string directly.
+  const add = (name: string, node: NormAstNode) => {
+    const code = sourceCode.slice(node.start, node.end)
+    functions.set(name, { code, normalized: normalizeAst(node) })
+  }
+
+  for (const topLevel of program.body as unknown as NormAstNode[]) {
+    const statement =
+      topLevel.type === 'ExportNamedDeclaration' || topLevel.type === 'ExportDefaultDeclaration'
+        ? (topLevel.declaration as NormAstNode | null | undefined)
+        : topLevel
+    if (!statement) continue
 
-  for (const statement of program.body) {
-    // Handle FunctionDeclaration: `function foo() { ... }`
-    if (statement.type === 'FunctionDeclaration' && statement.id?.name) {
-      const funcAst = statement as FunctionAst
-      const code = extractFunctionCode(sourceCode, funcAst, byteToCharMap)
-      const normalized = normalizeAst(funcAst)
-      functions.set(statement.id.name, { ast: funcAst, code, normalized })
+    const id = statement.id as NormAstNode | null | undefined
+    if (statement.type === 'FunctionDeclaration' && typeof id?.name === 'string') {
+      add(id.name, statement)
     }
 
-    // Handle VariableDeclaration with function expressions or arrow functions
-    // Examples: `const _c0 = function() { ... }` or `const _forTrack = (item) => item.id`
     if (statement.type === 'VariableDeclaration') {
-      const varDecl = statement as unknown as VariableDeclaration
-      for (const decl of varDecl.declarations) {
-        if (
-          decl.id?.type === 'Identifier' &&
-          decl.id.name &&
-          decl.init &&
-          (decl.init.type === 'FunctionExpression' || decl.init.type === 'ArrowFunctionExpression')
-        ) {
-          const varName = decl.id.name
-          const funcAst = decl.init as unknown as FunctionAst
-          const code = extractFunctionCode(sourceCode, funcAst, byteToCharMap)
-          const normalized = normalizeAst(funcAst)
-          functions.set(varName, { ast: funcAst, code, normalized })
+      for (const decl of statement.declarations as NormAstNode[]) {
+        const declId = decl.id as NormAstNode
+        const init = decl.init as NormAstNode | null
+        if (declId.type === 'Identifier' && typeof declId.name === 'string' && init) {
+          add(declId.name, init)
         }
       }
     }
@@ -1691,63 +444,35 @@ function computeLineDiff(oxcCode: string, tsCode: string): LineDiff[] {
 }
 
 /**
- * Compare functions from both outputs using normalized string comparison.
+ * Compare top-level declarations from both outputs by name, using normalized ASTs.
+ *
+ * Oxc's `_cN` constants are already renamed to Angular's names (see `replaceConstReferences`),
+ * so names pair up directly.
  *
- * @param oxcFunctions - Functions extracted from Oxc output
- * @param tsFunctions - Functions extracted from TS output
- * @param constMapping - Mapping from Oxc const names to TS const names (based on value equivalence)
+ * @param oxcFunctions - Declarations extracted from Oxc output
+ * @param tsFunctions - Declarations extracted from TS output
  */
 function compareFunctions(
   oxcFunctions: Map<string, ExtractedFunction>,
   tsFunctions: Map<string, ExtractedFunction>,
-  constMapping?: Map<string, string>,
 ): FunctionLevelComparison {
   const missingFunctions: string[] = []
   const extraFunctions: string[] = []
   const functionDiffs: FunctionDiff[] = []
   const matchingFunctions: string[] = []
 
-  // Build a mapping from Oxc function names to their corresponding TS names
-  // This handles const arrow functions like _c5 -> _c2 when they have the same value
-  //
-  // IMPORTANT: Only include mappings where both the Oxc name exists in oxcFunctions
-  // AND the TS name exists in tsFunctions. This prevents array const mappings
-  // (like _c3 -> _c1 for ["animatedContainer"]) from interfering with function matching
-  // after code has been normalized via replaceConstReferences.
-  const oxcNameToTsName = new Map<string, string>()
-  const tsNameToOxcName = new Map<string, string>()
-
-  if (constMapping) {
-    for (const [oxcName, tsName] of constMapping) {
-      // Only apply mapping for _c{N} const FUNCTIONS (not arrays)
-      // Verify that both names actually exist as functions in their respective maps
-      if (
-        /^_c\d+$/.test(oxcName) &&
-        /^_c\d+$/.test(tsName) &&
-        oxcFunctions.has(oxcName) &&
-        tsFunctions.has(tsName)
-      ) {
-        oxcNameToTsName.set(oxcName, tsName)
-        tsNameToOxcName.set(tsName, oxcName)
-      }
-    }
-  }
-
-  // Find functions that match via the const mapping
   const matchedTsFunctions = new Set<string>()
   const matchedOxcFunctions = new Set<string>()
 
-  // First, match functions by their mapped names
-  for (const [oxcName, oxcFunc] of oxcFunctions) {
-    const mappedTsName = oxcNameToTsName.get(oxcName) || oxcName
-    const tsFunc = tsFunctions.get(mappedTsName)
+  for (const [name, oxcFunc] of oxcFunctions) {
+    const tsFunc = tsFunctions.get(name)
 
     if (tsFunc) {
-      matchedOxcFunctions.add(oxcName)
-      matchedTsFunctions.add(mappedTsName)
+      matchedOxcFunctions.add(name)
+      matchedTsFunctions.add(name)
 
       if (oxcFunc.normalized === tsFunc.normalized) {
-        matchingFunctions.push(mappedTsName)
+        matchingFunctions.push(name)
       } else {
         // Compute line diff for reporting
         const lineDiffs = computeLineDiff(oxcFunc.code, tsFunc.code)
@@ -1760,7 +485,7 @@ function compareFunctions(
         }))
         // Store actual code strings for display
         functionDiffs.push({
-          name: mappedTsName,
+          name: name,
           oxcCode: oxcFunc.code,
           tsCode: tsFunc.code,
           diffs,
@@ -1929,8 +654,10 @@ interface StaticFieldAssignment {
   className: string
   /** Field name (e.g., "ɵcmp", "ɵfac") */
   fieldName: string
-  /** Assignment value (normalized) */
+  /** Assignment value source text (for reporting) */
   value: string
+  /** Assignment value AST (for comparison) */
+  node: NormAstNode
 }
 
 /**
@@ -2141,109 +868,64 @@ function compareExports(
   return diffs
 }
 
+/** Whether a class member is a `static ɵxxx = ...` field, which is compared on its own. */
+function isAngularStaticField(member: NormAstNode): boolean {
+  const key = member.key as NormAstNode | undefined
+  return (
+    member.type === 'PropertyDefinition' &&
+    member.static === true &&
+    key?.type === 'Identifier' &&
+    typeof key.name === 'string' &&
+    key.name.startsWith('ɵ')
+  )
+}
+
 /**
- * Extract static field assignments from code (e.g., ClassName.ɵcmp = ...).
- */
-/**
- * Extract `static ɵxxx = ...` class fields (e.g. `static ɵcmp = i0.ɵɵdefineComponent(...)`),
- * which the `ClassName.ɵxxx = ...` pattern in extractStaticFieldAssignments does not match.
+ * Extract Angular static fields, both the `static ɵxxx = ...` class fields current Angular and
+ * Oxc emit (e.g. `static ɵcmp = i0.ɵɵdefineComponent(...)`) and top-level
+ * `ClassName.ɵxxx = ...` assignments.
  */
 function extractClassStaticFields(program: Program, sourceCode: string): StaticFieldAssignment[] {
   const fields: StaticFieldAssignment[] = []
+  // oxc-parser's JS API reports UTF-16 offsets, so they index the string directly.
+  const push = (className: string, fieldName: string, node: NormAstNode) => {
+    const value = sourceCode.slice(node.start, node.end).trim()
+    fields.push({ className, fieldName, value, node })
+  }
   for (const statement of program.body as unknown as NormAstNode[]) {
+    if (statement.type === 'ExpressionStatement') {
+      const assignment = statement.expression as NormAstNode
+      const target = assignment.left as NormAstNode | undefined
+      const object = target?.object as NormAstNode | undefined
+      const property = target?.property as NormAstNode | undefined
+      if (
+        assignment.type === 'AssignmentExpression' &&
+        assignment.operator === '=' &&
+        target?.type === 'MemberExpression' &&
+        target.computed !== true &&
+        object?.type === 'Identifier' &&
+        typeof object.name === 'string' &&
+        typeof property?.name === 'string' &&
+        property.name.startsWith('ɵ')
+      ) {
+        push(object.name, property.name, assignment.right as NormAstNode)
+      }
+      continue
+    }
     const exported =
       statement.type === 'ExportNamedDeclaration' || statement.type === 'ExportDefaultDeclaration'
     const cls = (exported ? statement.declaration : statement) as NormAstNode | undefined
     const className = (cls?.id as NormAstNode | undefined)?.name
     if (cls?.type !== 'ClassDeclaration' || typeof className !== 'string') continue
     for (const member of (cls.body as NormAstNode).body as NormAstNode[]) {
-      const key = member.key as NormAstNode | undefined
-      const value = member.value as NormAstNode | undefined
-      if (
-        member.type !== 'PropertyDefinition' ||
-        !member.static ||
-        key?.type !== 'Identifier' ||
-        typeof key.name !== 'string' ||
-        !key.name.startsWith('ɵ') ||
-        value?.start === undefined ||
-        value.end === undefined
-      ) {
-        continue
+      if (isAngularStaticField(member) && member.value) {
+        push(className, (member.key as NormAstNode).name as string, member.value as NormAstNode)
       }
-      // oxc-parser's JS API reports UTF-16 offsets, so they index the string directly. Keep
-      // whitespace: collapsing it would also change multi-line template literals.
-      const text = sourceCode.slice(value.start, value.end).trim()
-      fields.push({ className, fieldName: key.name, value: text })
     }
   }
   return fields
 }
 
-function extractStaticFieldAssignments(code: string): StaticFieldAssignment[] {
-  const assignments: StaticFieldAssignment[] = []
-
-  // Match patterns like: ClassName.ɵcmp = ... or ClassName.ɵfac = ...
-  // The assignment value extends until the next semicolon (handling nested structures)
-  const pattern = /([A-Z][A-Za-z0-9_]*)\.(ɵ[a-z]+)\s*=/g
-  let match
-
-  while ((match = pattern.exec(code)) !== null) {
-    const className = match[1]
-    const fieldName = match[2]
-    const assignStart = match.index + match[0].length
-
-    // Find the end of the assignment (matching braces/parens)
-    let depth = 0
-    let inString: string | null = null
-    let escaped = false
-    let assignEnd = -1
-
-    for (let i = assignStart; i < code.length; i++) {
-      const char = code[i]
-
-      if (escaped) {
-        escaped = false
-        continue
-      }
-
-      if (char === '\\') {
-        escaped = true
-        continue
-      }
-
-      if (inString) {
-        if (char === inString) {
-          inString = null
-        }
-        continue
-      }
-
-      if (char === '"' || char === "'" || char === '`') {
-        inString = char
-        continue
-      }
-
-      if (char === '(' || char === '{' || char === '[') {
-        depth++
-      } else if (char === ')' || char === '}' || char === ']') {
-        depth--
-      } else if (char === ';' && depth === 0) {
-        assignEnd = i
-        break
-      }
-    }
-
-    if (assignEnd > assignStart) {
-      const value = code.slice(assignStart, assignEnd).trim()
-      // Normalize the value (remove whitespace variations)
-      const normalizedValue = value.replace(/\s+/g, ' ').replace(/,\s+/g, ',')
-      assignments.push({ className, fieldName, value: normalizedValue })
-    }
-  }
-
-  return assignments
-}
-
 // ============================================================================
 // Class metadata (setClassMetadata) extraction and comparison
 // ============================================================================
@@ -2696,15 +1378,14 @@ export function extractClassMetadataCalls(program: unknown, code: string): Class
  * The argument is an expression fragment (`[...]`, `{...}`, `null`, ...), so
  * parse it and compare normalized ASTs: quote style, indentation, trailing
  * commas and key ordering noise don't matter semantically for these
- * structures. Falls back to whitespace-collapsed text when the fragment
- * can't be parsed.
+ * structures. A fragment that can't be parsed is compared as exact text.
  */
 function normalizeMetadataString(s: string | null): string {
   if (!s) return 'null'
   const parsed = parseSync('metadata.js', `(${s}\n)`, { sourceType: 'module' })
   const stmt = parsed.program.body[0]
   if (parsed.errors.length > 0 || !stmt || stmt.type !== 'ExpressionStatement') {
-    return s.replace(/\s+/g, ' ').trim()
+    return `unparsed:${s}`
   }
   return normalizeAst(stmt.expression)
 }
@@ -2885,233 +1566,6 @@ export function compareClassMetadata(
   return diffs
 }
 
-/**
- * Input metadata extracted from defineComponent's inputs object.
- */
-interface InputMetadata {
-  /** Input index in the inputs array */
-  index: number
-  /** Binding property name (may differ from public name via alias) */
-  bindingName: string
-  /** Whether this input has a transform function */
-  hasTransform: boolean
-  /** Whether this input is required */
-  required: boolean
-  /** Whether this is a signal-based input */
-  isSignal: boolean
-}
-
-/**
- * Extract inputs metadata from defineComponent's inputs object.
- *
- * Input format in compiled output:
- * ```javascript
- * inputs: {
- *   "publicName": [inputIndex, "bindingName"],
- *   "publicName2": [inputIndex, "bindingName", transformFn],
- *   "publicName3": [inputIndex, "bindingName", transformFn, required, isSignal],
- * }
- * ```
- */
-function extractInputsFromDefineComponent(inputsObject: string): Map<string, InputMetadata> {
-  const inputs = new Map<string, InputMetadata>()
-  // Match patterns like: "name": [0, "name"] or "name": [1, "name", transformFn]
-  const pattern = /"([^"]+)"\s*:\s*\[([^\]]+)\]/g
-  let match
-  while ((match = pattern.exec(inputsObject)) !== null) {
-    const publicName = match[1]
-    const valueArray = match[2].split(',').map((s) => s.trim())
-    inputs.set(publicName, {
-      index: parseInt(valueArray[0], 10),
-      bindingName: valueArray[1]?.replace(/"/g, '') || publicName,
-      hasTransform:
-        valueArray[2] !== undefined && valueArray[2] !== 'undefined' && valueArray[2] !== 'null',
-      required: valueArray[3] === 'true',
-      isSignal: valueArray[4] === 'true',
-    })
-  }
-  return inputs
-}
-
-/**
- * Extract outputs metadata from defineComponent's outputs object.
- *
- * Output format in compiled output:
- * ```javascript
- * outputs: {
- *   "publicName": "internalName",
- *   "aliasedName": "propertyName"
- * }
- * ```
- */
-function extractOutputsFromDefineComponent(outputsObject: string): Map<string, string> {
-  const outputs = new Map<string, string>()
-  // Match patterns like: "clicked": "clicked" or "valueChanged": "changed"
-  const pattern = /"([^"]+)"\s*:\s*"([^"]+)"/g
-  let match
-  while ((match = pattern.exec(outputsObject)) !== null) {
-    outputs.set(match[1], match[2])
-  }
-  return outputs
-}
-
-/**
- * Extract inputs and outputs from the ɵcmp defineComponent value.
- *
- * Parses the defineComponent({...}) call to extract the inputs and outputs
- * objects for comparison.
- */
-function extractInputsOutputsFromCmpDefinition(cmpValue: string): {
-  inputs?: Map<string, InputMetadata>
-  outputs?: Map<string, string>
-} {
-  const result: { inputs?: Map<string, InputMetadata>; outputs?: Map<string, string> } = {}
-
-  // Extract inputs object - match inputs: { ... }
-  const inputsMatch = /inputs\s*:\s*\{([^}]*)\}/s.exec(cmpValue)
-  if (inputsMatch) {
-    result.inputs = extractInputsFromDefineComponent(inputsMatch[1])
-  }
-
-  // Extract outputs object - match outputs: { ... }
-  const outputsMatch = /outputs\s*:\s*\{([^}]*)\}/s.exec(cmpValue)
-  if (outputsMatch) {
-    result.outputs = extractOutputsFromDefineComponent(outputsMatch[1])
-  }
-
-  return result
-}
-
-/**
- * Compare input metadata between Oxc and TS outputs.
- * Returns differences found in input declarations.
- */
-function compareInputMetadata(
-  oxcInputs: Map<string, InputMetadata>,
-  tsInputs: Map<string, InputMetadata>,
-  className: string,
-): StaticFieldDiff[] {
-  const diffs: StaticFieldDiff[] = []
-
-  // Check inputs in TS that should be in Oxc
-  for (const [name, metadata] of tsInputs) {
-    const oxcMetadata = oxcInputs.get(name)
-    if (!oxcMetadata) {
-      diffs.push({
-        type: 'missing',
-        className,
-        fieldName: `ɵcmp.inputs.${name}`,
-        expected: JSON.stringify(metadata),
-      })
-    } else {
-      // Compare required flag
-      if (oxcMetadata.required !== metadata.required) {
-        diffs.push({
-          type: 'different',
-          className,
-          fieldName: `ɵcmp.inputs.${name}.required`,
-          expected: String(metadata.required),
-          actual: String(oxcMetadata.required),
-        })
-      }
-      // Compare isSignal flag
-      if (oxcMetadata.isSignal !== metadata.isSignal) {
-        diffs.push({
-          type: 'different',
-          className,
-          fieldName: `ɵcmp.inputs.${name}.isSignal`,
-          expected: String(metadata.isSignal),
-          actual: String(oxcMetadata.isSignal),
-        })
-      }
-      // Compare binding name
-      if (oxcMetadata.bindingName !== metadata.bindingName) {
-        diffs.push({
-          type: 'different',
-          className,
-          fieldName: `ɵcmp.inputs.${name}.bindingName`,
-          expected: metadata.bindingName,
-          actual: oxcMetadata.bindingName,
-        })
-      }
-      // Compare hasTransform flag
-      if (oxcMetadata.hasTransform !== metadata.hasTransform) {
-        diffs.push({
-          type: 'different',
-          className,
-          fieldName: `ɵcmp.inputs.${name}.hasTransform`,
-          expected: String(metadata.hasTransform),
-          actual: String(oxcMetadata.hasTransform),
-        })
-      }
-    }
-  }
-
-  // Check for extra inputs in Oxc not in TS
-  for (const name of oxcInputs.keys()) {
-    if (!tsInputs.has(name)) {
-      diffs.push({
-        type: 'extra',
-        className,
-        fieldName: `ɵcmp.inputs.${name}`,
-        actual: JSON.stringify(oxcInputs.get(name)),
-      })
-    }
-  }
-
-  return diffs
-}
-
-/**
- * Compare output metadata between Oxc and TS outputs.
- * Returns differences found in output declarations.
- */
-function compareOutputMetadata(
-  oxcOutputs: Map<string, string>,
-  tsOutputs: Map<string, string>,
-  className: string,
-): StaticFieldDiff[] {
-  const diffs: StaticFieldDiff[] = []
-
-  // Check outputs in TS that should be in Oxc
-  for (const [publicName, internalName] of tsOutputs) {
-    const oxcInternalName = oxcOutputs.get(publicName)
-    if (!oxcInternalName) {
-      diffs.push({
-        type: 'missing',
-        className,
-        fieldName: `ɵcmp.outputs.${publicName}`,
-        expected: internalName,
-      })
-    } else if (oxcInternalName !== internalName) {
-      diffs.push({
-        type: 'different',
-        className,
-        fieldName: `ɵcmp.outputs.${publicName}`,
-        expected: internalName,
-        actual: oxcInternalName,
-      })
-    }
-  }
-
-  // Check for extra outputs in Oxc not in TS
-  for (const [publicName, internalName] of oxcOutputs) {
-    if (!tsOutputs.has(publicName)) {
-      diffs.push({
-        type: 'extra',
-        className,
-        fieldName: `ɵcmp.outputs.${publicName}`,
-        actual: internalName,
-      })
-    }
-  }
-
-  return diffs
-}
-
-/**
- * Compare static field assignments between Oxc and TS outputs.
- */
 /**
  * Compare two static field values (e.g. the `i0.ɵɵdefineComponent({...})` of `ɵcmp`) by AST,
  * ignoring differences that do not change behaviour:
@@ -3123,19 +1577,15 @@ function compareOutputMetadata(
  * - `pure: true` in `ɵɵdefinePipe`, which is the default
  * - Closure-only i18n metadata that Oxc does not emit: the `goog.getMsg` variable names
  *   (`MSG_EXTERNAL_<id>$$<file>` in Angular) and the `original_code` argument of `goog.getMsg`
+ *
+ * String contents, including whitespace inside them, must match exactly.
  */
-function staticFieldValuesEquivalent(oxcValue: string, tsValue: string): boolean {
-  const oxcKey = canonicalStaticFieldValue(oxcValue)
-  return oxcKey !== null && oxcKey === canonicalStaticFieldValue(tsValue)
+function staticFieldValuesEquivalent(oxcValue: NormAstNode, tsValue: NormAstNode): boolean {
+  return canonicalStaticFieldValue(oxcValue) === canonicalStaticFieldValue(tsValue)
 }
 
-function canonicalStaticFieldValue(value: string): string | null {
-  const result = parseSync('field.js', `(${value});`, { sourceType: 'module' })
-  if (result.errors.length > 0) {
-    return null
-  }
-  const statement = result.program.body[0] as NormAstNode
-  return normalizeAst(canonicalizeNode(statement.expression, new Map()))
+function canonicalStaticFieldValue(value: NormAstNode): string {
+  return normalizeAst(canonicalizeNode(value, new Map()))
 }
 
 /** The string values of an array of string literals, or null if it is not one. */
@@ -3239,7 +1689,6 @@ function canonicalizeNode(node: unknown, closureNames: Map<string, string>): unk
 function compareStaticFields(
   oxcFields: StaticFieldAssignment[],
   tsFields: StaticFieldAssignment[],
-  constMapping: Map<string, string>,
 ): StaticFieldDiff[] {
   const diffs: StaticFieldDiff[] = []
 
@@ -3267,80 +1716,14 @@ function compareStaticFields(
         fieldName: tsField.fieldName,
         expected: tsField.value,
       })
-    } else {
-      // Compare values after applying const mapping
-      let normalizedOxcValue = oxcField.value
-      for (const [from, to] of constMapping) {
-        normalizedOxcValue = normalizedOxcValue.replace(new RegExp(`\\b${from}\\b`, 'g'), to)
-      }
-
-      // Normalize both values for comparison
-      const normalizedTs = tsField.value
-        .replace(/\s+/g, ' ')
-        .replace(/,\s+/g, ',')
-        // Remove trailing commas in objects
-        .replaceAll(',}', '}')
-        // Remove trailing commas in arrays
-        .replaceAll(',]', ']')
-      const normalizedOxc = normalizedOxcValue
-        .replace(/\s+/g, ' ')
-        .replace(/,\s+/g, ',')
-        // Remove trailing commas in objects
-        .replaceAll(',}', '}')
-        // Remove trailing commas in arrays
-        .replaceAll(',]', ']')
-
-      if (
-        normalizedOxc !== normalizedTs &&
-        // Also try the unmapped value: when both sides already use the same const names, the
-        // name mapping can only introduce differences.
-        !staticFieldValuesEquivalent(normalizedOxcValue, tsField.value) &&
-        !staticFieldValuesEquivalent(oxcField.value, tsField.value)
-      ) {
-        // For ɵcmp fields, perform granular input/output comparison
-        if (tsField.fieldName === 'ɵcmp') {
-          const tsInputsOutputs = extractInputsOutputsFromCmpDefinition(tsField.value)
-          const oxcInputsOutputs = extractInputsOutputsFromCmpDefinition(oxcField.value)
-
-          // Compare inputs if present in either
-          if (tsInputsOutputs.inputs || oxcInputsOutputs.inputs) {
-            const inputDiffs = compareInputMetadata(
-              oxcInputsOutputs.inputs || new Map(),
-              tsInputsOutputs.inputs || new Map(),
-              tsField.className,
-            )
-            diffs.push(...inputDiffs)
-          }
-
-          // Compare outputs if present in either
-          if (tsInputsOutputs.outputs || oxcInputsOutputs.outputs) {
-            const outputDiffs = compareOutputMetadata(
-              oxcInputsOutputs.outputs || new Map(),
-              tsInputsOutputs.outputs || new Map(),
-              tsField.className,
-            )
-            diffs.push(...outputDiffs)
-          }
-
-          // Still report the overall difference if there are other differences
-          // beyond inputs/outputs (e.g., template, selectors, etc.)
-          diffs.push({
-            type: 'different',
-            className: tsField.className,
-            fieldName: tsField.fieldName,
-            expected: tsField.value,
-            actual: oxcField.value,
-          })
-        } else {
-          diffs.push({
-            type: 'different',
-            className: tsField.className,
-            fieldName: tsField.fieldName,
-            expected: tsField.value,
-            actual: oxcField.value,
-          })
-        }
-      }
+    } else if (!staticFieldValuesEquivalent(oxcField.node, tsField.node)) {
+      diffs.push({
+        type: 'different',
+        className: tsField.className,
+        fieldName: tsField.fieldName,
+        expected: tsField.value,
+        actual: oxcField.value,
+      })
     }
   }
 
@@ -3368,16 +1751,23 @@ interface ClassInfo {
 }
 
 /**
- * Extract class declarations from the program.
+ * Extract class declarations from the program, exported or not. The `static ɵxxx` fields are
+ * left out: they are compared on their own by `compareStaticFields`.
  */
 function extractClasses(program: Program): Map<string, ClassInfo> {
   const classes = new Map<string, ClassInfo>()
 
-  for (const statement of program.body) {
-    if (statement.type === 'ClassDeclaration' && statement.id?.name) {
-      const normalized = normalizeAst(statement)
-      classes.set(statement.id.name, { name: statement.id.name, normalized })
-    }
+  for (const topLevel of program.body as unknown as NormAstNode[]) {
+    const statement =
+      topLevel.type === 'ExportNamedDeclaration' || topLevel.type === 'ExportDefaultDeclaration'
+        ? (topLevel.declaration as NormAstNode | null | undefined)
+        : topLevel
+    const name = (statement?.id as NormAstNode | null | undefined)?.name
+    if (statement?.type !== 'ClassDeclaration' || typeof name !== 'string') continue
+    const body = statement.body as NormAstNode
+    const members = (body.body as NormAstNode[]).filter((member) => !isAngularStaticField(member))
+    const normalized = normalizeAst({ ...statement, body: { ...body, body: members } })
+    classes.set(name, { name, normalized })
   }
 
   return classes
@@ -3432,8 +1822,10 @@ function compareClasses(
  * - Export statements (using module.staticExports)
  * - Class definitions
  * - Static field assignments (ClassName.ɵcmp, ClassName.ɵfac, etc.)
- * - Template functions and other functions
+ * - Top-level functions and constants (template functions, hoisted `_cN` constants, etc.)
  *
+ * Every part is compared on its AST, so formatting does not matter but any change inside a
+ * string literal does; the source text is never rewritten to make the outputs line up.
  * Uses `showSemanticErrors: true` for additional validation.
  *
  * @param oxcCode - The Oxc-generated JavaScript code
@@ -3450,7 +1842,8 @@ export async function compareFullFileSemantically(
   }
 
   try {
-    // Format both with oxfmt to normalize formatting
+    // Format both with oxfmt. This does not change what is compared (the ASTs), but it lines
+    // the reported source text up for readable diffs.
     const [formattedOxc, formattedTs] = await Promise.all([
       formatCodeForComparison(oxcCode),
       formatCodeForComparison(tsCode),
@@ -3461,92 +1854,17 @@ export async function compareFullFileSemantically(
       return { match: true }
     }
 
-    // Normalize template literals to regular strings (semantically equivalent)
-    let workingOxcCode = normalizeTemplateLiterals(formattedOxc)
-    let workingTsCode = normalizeTemplateLiterals(formattedTs)
-
-    // Normalize PURE comments (oxfmt adds spaces: /* @__PURE__ */ -> /*@__PURE__*/)
-    workingOxcCode = workingOxcCode.replaceAll('/* @__PURE__ */', '/*@__PURE__*/')
-    workingTsCode = workingTsCode.replaceAll('/* @__PURE__ */', '/*@__PURE__*/')
-
-    // Remove trailing commas in objects: ",}" -> "}"
-    workingOxcCode = workingOxcCode.replaceAll(',}', '}')
-    workingTsCode = workingTsCode.replaceAll(',}', '}')
-
-    // Remove trailing commas in arrays: ",]" -> "]"
-    workingOxcCode = workingOxcCode.replaceAll(',]', ']')
-    workingTsCode = workingTsCode.replaceAll(',]', ']')
-
-    // Normalize space before closing brace: " }" -> "}"
-    workingOxcCode = workingOxcCode.replaceAll(' }', '}')
-    workingTsCode = workingTsCode.replaceAll(' }', '}')
-
-    // Normalize @Inject parameter types
-    workingOxcCode = normalizeInjectParameterTypes(workingOxcCode)
-    workingTsCode = normalizeInjectParameterTypes(workingTsCode)
-
-    // Normalize nullish coalescing (Oxc preserves ??, TS transpiles to ternary)
-    // Apply to TS: convert ternary check to ??
-    // Apply to Oxc: remove outer parens around ?? expression
-    workingTsCode = normalizeNullishCoalescing(workingTsCode)
-    workingOxcCode = removeNullishCoalescingParens(workingOxcCode)
-
-    // Normalize numeric literals: 1e3 → 1000 (OXC emits scientific notation)
-    workingOxcCode = normalizeNumericLiterals(workingOxcCode)
-    workingTsCode = normalizeNumericLiterals(workingTsCode)
-
-    // Normalize inline object literal formatting: collapse multi-line simple objects
-    workingOxcCode = collapseInlineObjectLiterals(workingOxcCode)
-    workingTsCode = collapseInlineObjectLiterals(workingTsCode)
-
-    // Fast path after template/inject/nullish/format normalization
-    if (workingOxcCode === workingTsCode) {
-      return { match: true }
-    }
-
-    // Build const value maps for both to identify metadata consts
-    const tsConstMap = buildConstValueMap(workingTsCode)
-    const oxcConstMapInitial = buildConstValueMap(workingOxcCode)
-
-    // Remove attrs/query consts from TS code that are NOT present in Oxc output
-    let normalizedTsCode = removeAttrsConstsNotInOxc(workingTsCode, tsConstMap, oxcConstMapInitial)
-
-    // Remove provider consts from both
-    let normalizedOxcCode = removeProvidersConst(workingOxcCode)
-    normalizedTsCode = removeProvidersConst(normalizedTsCode)
-
-    // Build const value maps after cleanup
-    const oxcConstMap = buildConstValueMap(normalizedOxcCode)
-    const normalizedTsConstMap = buildConstValueMap(normalizedTsCode)
-
-    // Create mapping from Oxc const names to TS const names based on value equivalence
-    const constMapping = buildConstNameMapping(oxcConstMap, normalizedTsConstMap)
-
-    // Normalize Oxc code by replacing const references to match TS naming
-    normalizedOxcCode = replaceConstReferences(normalizedOxcCode, constMapping)
-
-    // Fast path after const normalization
-    if (normalizedOxcCode === normalizedTsCode) {
-      return { match: true }
-    }
-
-    // Parse both with oxc-parser using enhanced options
-    const oxcResult = parseSync('oxc.js', normalizedOxcCode, {
-      sourceType: 'module',
-      showSemanticErrors: true,
-    })
-    const tsResult = parseSync('ts.js', normalizedTsCode, {
-      sourceType: 'module',
-      showSemanticErrors: true,
-    })
+    const parseOptions = { sourceType: 'module', showSemanticErrors: true } as const
+    const oxcParsed = parseSync('oxc.js', formattedOxc, parseOptions)
+    const tsParsed = parseSync('ts.js', formattedTs, parseOptions)
 
     // Check for parse errors
     const parseErrors: string[] = []
-    if (oxcResult.errors.length > 0) {
-      parseErrors.push(...oxcResult.errors.map((e) => `Oxc: ${e.message}`))
+    if (oxcParsed.errors.length > 0) {
+      parseErrors.push(...oxcParsed.errors.map((e) => `Oxc: ${e.message}`))
     }
-    if (tsResult.errors.length > 0) {
-      parseErrors.push(...tsResult.errors.map((e) => `TS: ${e.message}`))
+    if (tsParsed.errors.length > 0) {
+      parseErrors.push(...tsParsed.errors.map((e) => `TS: ${e.message}`))
     }
 
     if (parseErrors.length > 0) {
@@ -3556,6 +1874,27 @@ export async function compareFullFileSemantically(
       }
     }
 
+    // Rename Oxc's hoisted `_cN` constants to the Angular name of the constant with the same
+    // value, so that both outputs use the same names when they hoist the same constants in a
+    // different order. The constants themselves are still compared by name below.
+    const constMapping = buildConstNameMapping(
+      buildConstValueMap(oxcParsed.program as unknown as Program),
+      buildConstValueMap(tsParsed.program as unknown as Program),
+    )
+    const normalizedOxcCode = replaceConstReferences(formattedOxc, constMapping)
+    const normalizedTsCode = formattedTs
+
+    // Fast path after const normalization
+    if (normalizedOxcCode === normalizedTsCode) {
+      return { match: true }
+    }
+
+    const oxcResult =
+      normalizedOxcCode === formattedOxc
+        ? oxcParsed
+        : parseSync('oxc.js', normalizedOxcCode, parseOptions)
+    const tsResult = tsParsed
+
     // Extract and compare imports using module.staticImports
     const oxcImports = extractNormalizedImports(oxcResult.module.staticImports)
     const tsImports = extractNormalizedImports(tsResult.module.staticImports)
@@ -3571,31 +1910,30 @@ export async function compareFullFileSemantically(
     const tsClasses = extractClasses(tsResult.program as unknown as Program)
     const classDiffs = compareClasses(oxcClasses, tsClasses)
 
-    // Extract and compare static field assignments, both `ClassName.ɵcmp = ...` and the
+    // Extract and compare the Angular static fields, both `ClassName.ɵcmp = ...` and the
     // `static ɵcmp = ...` class fields that current Angular and Oxc emit.
-    const oxcFields = [
-      ...extractStaticFieldAssignments(normalizedOxcCode),
-      ...extractClassStaticFields(oxcResult.program as unknown as Program, normalizedOxcCode),
-    ]
-    const tsFields = [
-      ...extractStaticFieldAssignments(normalizedTsCode),
-      ...extractClassStaticFields(tsResult.program as unknown as Program, normalizedTsCode),
-    ]
-    const staticFieldDiffs = compareStaticFields(oxcFields, tsFields, constMapping)
+    const oxcFields = extractClassStaticFields(
+      oxcResult.program as unknown as Program,
+      normalizedOxcCode,
+    )
+    const tsFields = extractClassStaticFields(
+      tsResult.program as unknown as Program,
+      normalizedTsCode,
+    )
+    const staticFieldDiffs = compareStaticFields(oxcFields, tsFields)
 
     // Extract and compare class metadata (setClassMetadata calls)
     const oxcClassMetadata = extractClassMetadataCalls(oxcResult.program, normalizedOxcCode)
     const tsClassMetadata = extractClassMetadataCalls(tsResult.program, normalizedTsCode)
     const classMetadataDiffs = compareClassMetadata(oxcClassMetadata, tsClassMetadata)
 
-    // Extract and compare functions (template functions, etc.)
+    // Extract and compare top-level functions and constants (template functions, etc.)
     const oxcFunctions = extractFunctions(
       oxcResult.program as unknown as Program,
       normalizedOxcCode,
     )
     const tsFunctions = extractFunctions(tsResult.program as unknown as Program, normalizedTsCode)
-    // Pass constMapping so that const arrow functions (_c0, _c1, etc.) can be matched
-    const functionComparison = compareFunctions(oxcFunctions, tsFunctions, constMapping)
+    const functionComparison = compareFunctions(oxcFunctions, tsFunctions)
 
     // Determine if there are any differences
     const hasImportDiffs = importDiffs.length > 0
@@ -3842,79 +2180,3 @@ function walkAst(node: unknown, visitor: (n: NormAstNode) => void): void {
     }
   }
 }
-
-/**
- * Normalize numeric scientific notation to decimal form using oxc-parser.
- * Finds Literal nodes (ESTree format) whose source text contains scientific notation
- * (e.g. `1e3`) and replaces them with their decimal representation (`1000`).
- */
-function normalizeNumericLiterals(code: string): string {
-  let ast
-  try {
-    ast = parseSync('numeric.js', code, { sourceType: 'module' })
-  } catch {
-    return code
-  }
-
-  const replacements: Array<{ start: number; end: number; replacement: string }> = []
-
-  // oxc-parser returns character offsets (not byte offsets), so use start/end directly
-  walkAst(ast.program, (node) => {
-    if (node.type === 'Literal' && typeof node.value === 'number') {
-      if (typeof node.start !== 'number' || typeof node.end !== 'number') return
-      const originalText = code.slice(node.start as number, node.end as number)
-      // Check if the source text uses scientific notation (exclude hex/octal/binary prefixes)
-      if (/e\+?\d/i.test(originalText) && !/^0[xob]/i.test(originalText)) {
-        const num = node.value as number
-        if (Number.isFinite(num) && Number.isSafeInteger(num)) {
-          replacements.push({
-            start: node.start as number,
-            end: node.end as number,
-            replacement: String(num),
-          })
-        }
-      }
-    }
-  })
-
-  if (replacements.length === 0) return code
-
-  // Apply replacements from end to start
-  replacements.sort((a, b) => b.start - a.start)
-  let result = code
-  for (const { start, end, replacement } of replacements) {
-    result = result.slice(0, start) + replacement + result.slice(end)
-  }
-  return result
-}
-
-/**
- * Collapse multi-line simple object literals in function call arguments to single lines.
- *
- * Matches patterns like:
- *   .emit({
- *     content: $event,
- *     format: item_r3.format,
- *     type: item_r3.id,
- *   })
- *
- * And collapses to:
- *   .emit({ content: $event, format: item_r3.format, type: item_r3.id})
- *
- * Only targets objects where every property value is a simple expression
- * (identifiers, member access, $event) — no strings, nested objects, or calls.
- */
-const COLLAPSE_OBJ_RE = /\(\{\s*\n((?:\s*\w+:\s*[\w.$]+,?\s*\n)+)\s*\}\)/g
-
-function collapseInlineObjectLiterals(code: string): string {
-  return code.replace(COLLAPSE_OBJ_RE, (_match, propsBlock: string) => {
-    const lines = propsBlock.trim().split('\n')
-    const props = lines.map((l) => l.trim()).filter(Boolean)
-    // Remove trailing comma from last property
-    const last = props.length - 1
-    if (last >= 0 && props[last].endsWith(',')) {
-      props[last] = props[last].slice(0, -1)
-    }
-    return '({ ' + props.join(' ') + '})'
-  })
-}
diff --git a/napi/angular-compiler/e2e/compare/src/compilers/angular-ngtsc.ts b/napi/angular-compiler/e2e/compare/src/compilers/angular-ngtsc.ts
index 369a1c72b..0a838114f 100644
--- a/napi/angular-compiler/e2e/compare/src/compilers/angular-ngtsc.ts
+++ b/napi/angular-compiler/e2e/compare/src/compilers/angular-ngtsc.ts
@@ -61,11 +61,11 @@ const programConfigCache = new Map<string, CachedProgramEntry>()
 const VIRTUAL_MODE_CACHE_KEY = '__virtual_mode__'
 
 /**
- * Cached virtual mode configuration.
+ * Cached virtual mode configurations, one per ngtsc compilation mode.
  * Reused across all virtual mode compilations to avoid re-creating
  * the host and compiler options for each file.
  */
-let virtualModeConfig: CachedProgramEntry | null = null
+const virtualModeConfigs = new Map<NgtscMode, CachedProgramEntry>()
 
 /** Maximum age for cache entries (5 minutes) */
 const CACHE_MAX_AGE_MS = 5 * 60 * 1000
@@ -416,12 +416,15 @@ function createHybridResolveHost(
  * @param tsconfigPath - Path to the tsconfig.json file
  * @returns Cached or newly created program configuration
  */
-function getOrCreateCachedConfig(tsconfigPath: string): CachedProgramEntry {
+function getOrCreateCachedConfig(tsconfigPath: string, mode: NgtscMode): CachedProgramEntry {
   // Run cleanup periodically
   cleanupCache()
 
+  // Full and local compilations need separate options, hosts and old programs.
+  const cacheKey = `${tsconfigPath}#${mode}`
+
   // Check if we have a valid cached entry
-  const cached = programConfigCache.get(tsconfigPath)
+  const cached = programConfigCache.get(cacheKey)
   if (cached) {
     // Verify the tsconfig hasn't changed by checking the hash
     const currentRawConfig = ts.sys.readFile(tsconfigPath) ?? ''
@@ -434,7 +437,7 @@ function getOrCreateCachedConfig(tsconfigPath: string): CachedProgramEntry {
     }
 
     // Tsconfig changed - invalidate this entry
-    programConfigCache.delete(tsconfigPath)
+    programConfigCache.delete(cacheKey)
   }
 
   // Evict if needed before adding new entry
@@ -445,9 +448,7 @@ function getOrCreateCachedConfig(tsconfigPath: string): CachedProgramEntry {
   const tsconfigHash = hashString(rawConfig)
 
   // Merge with Angular options first (needed for host creation)
-  // Use skipTypeChecking=true to get experimental-local compilation mode,
-  // which matches OXC's single-file compilation behavior (always Full template mode).
-  const angularOptions = createAngularOptions(true)
+  const angularOptions = createAngularOptions(true, mode)
   const mergedOptions = {
     ...compilerOptions,
     ...angularOptions,
@@ -479,7 +480,7 @@ function getOrCreateCachedConfig(tsconfigPath: string): CachedProgramEntry {
     lastAccessedAt: Date.now(),
   }
 
-  programConfigCache.set(tsconfigPath, entry)
+  programConfigCache.set(cacheKey, entry)
   return entry
 }
 
@@ -532,8 +533,20 @@ function createFileOverrideHost(
 export interface NgtscOptions {
   /** Path to tsconfig.json for real project context */
   tsconfigPath?: string
+  /** ngtsc compilation mode (default: 'local') */
+  mode?: NgtscMode
 }
 
+/**
+ * ngtsc compilation mode.
+ *
+ * - `local`: `experimental-local`, which compiles each file on its own like Oxc does. It is
+ *   fast, but where ngtsc needs information it cannot get from the file alone, its output
+ *   differs from a real build.
+ * - `full`: the `full` compilation mode of a real application build.
+ */
+export type NgtscMode = 'full' | 'local'
+
 /**
  * Create minimal tsconfig options for Angular compilation.
  */
@@ -571,18 +584,22 @@ function createCompilerOptions(rootDir: string): ts.CompilerOptions {
 /**
  * Create Angular compiler options.
  * @param skipTypeChecking - If true, disable expensive type checking (for batch/comparison mode)
+ * @param mode - Compilation mode used when type checking is skipped
  */
-function createAngularOptions(skipTypeChecking = false): Record<string, unknown> {
+function createAngularOptions(
+  skipTypeChecking = false,
+  mode: NgtscMode = 'local',
+): Record<string, unknown> {
   if (skipTypeChecking) {
     // Skip all expensive type checking - we only need the emitted template code
-    // Use 'experimental-local' mode for fast compilation (1.6s vs 23+ min for full mode)
+    // Default to 'experimental-local' mode for fast compilation (1.6s vs 23+ min for full mode)
     // Note: experimental-local produces slightly different output than full mode
     return {
       strictTemplates: false, // Skip template type checking
       strictInjectionParameters: false,
       strictInputAccessModifiers: false,
       enableI18nLegacyMessageIdFormat: false,
-      compilationMode: 'experimental-local', // Fast mode for comparison
+      compilationMode: mode === 'full' ? 'full' : 'experimental-local',
       // Additional options to skip expensive checks
       extendedDiagnostics: undefined, // Skip extended diagnostics
     }
@@ -667,10 +684,11 @@ export async function compileWithNgtsc(
   let host: ts.CompilerHost
   let mergedOptions: CompilerOptions
   let cachedConfig: CachedProgramEntry | undefined
+  const mode = options?.mode ?? 'local'
 
   if (options?.tsconfigPath) {
     // Real project mode: use cached tsconfig and host
-    cachedConfig = getOrCreateCachedConfig(options.tsconfigPath)
+    cachedConfig = getOrCreateCachedConfig(options.tsconfigPath, mode)
 
     // Use the actual file path directly (it should already be absolute)
     absolutePath = path.isAbsolute(filePath)
@@ -692,12 +710,11 @@ export async function compileWithNgtsc(
     const rootDir = compareToolDir
 
     // Get or create the shared virtual mode config
+    let virtualModeConfig = virtualModeConfigs.get(mode)
     if (!virtualModeConfig) {
-      // Create compiler options (only once)
+      // Create compiler options (only once per mode)
       const compilerOptions = createCompilerOptions(rootDir)
-      // Use skipTypeChecking=true to get experimental-local compilation mode,
-      // which matches OXC's single-file compilation behavior (always Full template mode).
-      const angularOptions = createAngularOptions(true)
+      const angularOptions = createAngularOptions(true, mode)
       const mergedCompilerOptions = {
         ...compilerOptions,
         ...angularOptions,
@@ -720,7 +737,8 @@ export async function compileWithNgtsc(
       }
 
       // Also add to program cache for visibility in stats
-      programConfigCache.set(VIRTUAL_MODE_CACHE_KEY, virtualModeConfig)
+      programConfigCache.set(`${VIRTUAL_MODE_CACHE_KEY}#${mode}`, virtualModeConfig)
+      virtualModeConfigs.set(mode, virtualModeConfig)
     }
 
     // Update access time
diff --git a/napi/angular-compiler/e2e/compare/src/normalize-template-literals.ts b/napi/angular-compiler/e2e/compare/src/normalize-template-literals.ts
deleted file mode 100644
index 7ee78550a..000000000
--- a/napi/angular-compiler/e2e/compare/src/normalize-template-literals.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import { parseSync } from 'oxc-parser'
-
-/**
- * Represents a simple template literal that can be normalized to a string.
- * Only template literals without expressions (interpolations) are eligible.
- */
-interface TemplateLiteralLocation {
-  /** Start position in source (includes the opening backtick) */
-  start: number
-  /** End position in source (includes the closing backtick) */
-  end: number
-  /** The raw content inside the template literal */
-  content: string
-}
-
-/**
- * AST node types we care about for finding template literals
- */
-interface AstNode {
-  type: string
-  start: number
-  end: number
-  key?: AstNode
-  value?: AstNode
-  quasis?: Array<{ value: { raw: string; cooked: string } }>
-  expressions?: AstNode[]
-  name?: string
-  [key: string]: unknown
-}
-
-/**
- * Find all template literals that are values of object properties.
- * Only returns template literals without expressions (simple templates).
- */
-function findPropertyTemplateLiterals(node: AstNode): TemplateLiteralLocation[] {
-  const results: TemplateLiteralLocation[] = []
-
-  function visit(node: AstNode): void {
-    if (!node || typeof node !== 'object') return
-
-    // Check if this is a Property or ObjectProperty with a TemplateLiteral value
-    if (
-      (node.type === 'Property' || node.type === 'ObjectProperty') &&
-      node.value &&
-      (node.value as AstNode).type === 'TemplateLiteral'
-    ) {
-      const templateLiteral = node.value as AstNode
-
-      // Only process template literals without expressions (simple templates)
-      if (
-        templateLiteral.expressions &&
-        (templateLiteral.expressions as AstNode[]).length === 0 &&
-        templateLiteral.quasis &&
-        templateLiteral.quasis.length === 1
-      ) {
-        results.push({
-          start: templateLiteral.start,
-          end: templateLiteral.end,
-          content: templateLiteral.quasis[0].value.cooked,
-        })
-      }
-    }
-
-    // Recursively visit all properties
-    for (const key of Object.keys(node)) {
-      const value = node[key]
-      if (Array.isArray(value)) {
-        for (const item of value) {
-          if (item && typeof item === 'object') {
-            visit(item as AstNode)
-          }
-        }
-      } else if (value && typeof value === 'object') {
-        visit(value as AstNode)
-      }
-    }
-  }
-
-  visit(node)
-  return results
-}
-
-/**
- * Escape a string for use in a double-quoted string literal.
- */
-function escapeForStringLiteral(content: string): string {
-  return content
-    .replace(/\\/g, '\\\\') // Escape backslashes first
-    .replace(/"/g, '\\"') // Escape double quotes
-    .replace(/\n/g, '\\n') // Escape actual newlines
-    .replace(/\r/g, '\\r') // Escape carriage returns
-    .replace(/\t/g, '\\t') // Escape tabs
-}
-
-/**
- * Normalize template literals to regular strings for semantic comparison.
- *
- * Uses AST parsing to precisely identify template literals that are object
- * property values (like `template:\`...\``) and converts them to equivalent
- * string literals (like `template:"..."`).
- *
- * This approach is more precise than regex because it:
- * - Only matches template literals that are actually property values
- * - Correctly handles template literals inside tagged templates (like $localize)
- * - Avoids false positives from patterns like `:INTERPOLATION:` in i18n messages
- *
- * @param code - The JavaScript/TypeScript code to normalize
- * @returns The code with property template literals converted to strings
- */
-export function normalizeTemplateLiterals(code: string): string {
-  // Parse the code to get the AST
-  const parseResult = parseSync('input.js', code, { sourceType: 'module' })
-
-  // If there are parse errors, fall back to returning the original code
-  // The comparison will catch parse errors later
-  if (parseResult.errors.length > 0) {
-    return code
-  }
-
-  // Find all template literals that are property values
-  const locations = findPropertyTemplateLiterals(parseResult.program as unknown as AstNode)
-
-  // If no template literals found, return original code
-  if (locations.length === 0) {
-    return code
-  }
-
-  // Sort by position (descending) so we can replace from end to start
-  // This prevents position shifts from affecting subsequent replacements
-  locations.sort((a, b) => b.start - a.start)
-
-  // Perform replacements
-  let result = code
-  for (const loc of locations) {
-    const escaped = escapeForStringLiteral(loc.content)
-    const replacement = `"${escaped}"`
-    result = result.slice(0, loc.start) + replacement + result.slice(loc.end)
-  }
-
-  return result
-}

From 26c977f4fe458acb0a4a23390d402f27bb6e4286 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:05:21 +0800
Subject: [PATCH 17/54] fix(linker): parse host styleAttribute like the
 template pipeline

The linker split `host.styleAttribute` on every `;` and the first `:`,
so a value such as `background: url('a;b')` was cut inside the quotes
and produced broken `hostAttrs`. Values were also wrapped in quotes
without escaping, so a `"` inside a value broke the emitted string.

Angular's linker feeds the attribute through the template pipeline's
`parse_extracted_styles` parser, which ignores `;` and `:` inside quotes
and parentheses and hyphenates property names. Reuse the existing port
of that parser (`parse_style_string`, now reachable from the linker)
and escape keys and values with the emitter's string escaper. The test
pins Angular 22.2.3's babel linker output for the same declaration.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 crates/oxc_angular_compiler/src/linker/mod.rs | 20 +++++++-----------
 .../src/pipeline/phases/mod.rs                |  2 +-
 .../pipeline/phases/parse_extracted_styles.rs |  2 +-
 .../oxc_angular_compiler/tests/linker_test.rs | 21 +++++++++++++++++++
 4 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/linker/mod.rs b/crates/oxc_angular_compiler/src/linker/mod.rs
index eaa21076c..9fd1b107b 100644
--- a/crates/oxc_angular_compiler/src/linker/mod.rs
+++ b/crates/oxc_angular_compiler/src/linker/mod.rs
@@ -43,6 +43,7 @@ use oxc_span::{GetSpan, SourceType};
 
 use crate::AngularVersion;
 use crate::optimizer::Edit;
+use crate::pipeline::phases::parse_extracted_styles::parse_style_string;
 use crate::pipeline::selector::{R3SelectorElement, parse_selector_to_r3_selector};
 
 /// Check if an object property key needs quoting because it contains unsafe characters.
@@ -889,7 +890,7 @@ fn parse_selector(selector: &str) -> String {
 /// The `host` object in partial declarations has sub-properties:
 /// - `attributes`: `{ "role": "tree", "tabindex": "-1" }` → `["role", "tree", "tabindex", "-1"]`
 /// - `classAttribute`: `"cdk-tree"` → `[1, "cdk-tree"]` (1 = AttributeMarker.Classes)
-/// - `styleAttribute`: `"display: block"` → `[2, "display: block"]` (2 = AttributeMarker.Styles)
+/// - `styleAttribute`: `"display: block"` → `[2, "display", "block"]` (2 = AttributeMarker.Styles)
 ///
 /// Properties and listeners go into `hostBindings`, not `hostAttrs`.
 fn build_host_attrs(host_obj: &ObjectExpression<'_>, source: &str) -> String {
@@ -940,18 +941,11 @@ fn build_host_attrs(host_obj: &ObjectExpression<'_>, source: &str) -> String {
     // AttributeMarker.Styles = 2
     if let Some(style_attr) = get_string_property(host_obj, "styleAttribute") {
         attrs.push("2".to_string()); // AttributeMarker.Styles
-        // Parse style string into key-value pairs
-        for declaration in style_attr.split(';') {
-            let declaration = declaration.trim();
-            if declaration.is_empty() {
-                continue;
-            }
-            if let Some(colon_pos) = declaration.find(':') {
-                let prop = declaration[..colon_pos].trim();
-                let val = declaration[colon_pos + 1..].trim();
-                attrs.push(format!("\"{prop}\""));
-                attrs.push(format!("\"{val}\""));
-            }
+        // Parse like the template pipeline's `parse_extracted_styles` phase, which
+        // skips `;` and `:` inside quotes and parentheses (`url('a;b')`).
+        for (prop, val) in parse_style_string(style_attr) {
+            attrs.push(crate::output::emitter::escape_string(&prop, false));
+            attrs.push(crate::output::emitter::escape_string(&val, false));
         }
     }
 
diff --git a/crates/oxc_angular_compiler/src/pipeline/phases/mod.rs b/crates/oxc_angular_compiler/src/pipeline/phases/mod.rs
index d326e0c50..a404395d2 100644
--- a/crates/oxc_angular_compiler/src/pipeline/phases/mod.rs
+++ b/crates/oxc_angular_compiler/src/pipeline/phases/mod.rs
@@ -47,7 +47,7 @@ mod next_context_merging;
 mod ng_container;
 mod nonbindable;
 mod ordering;
-mod parse_extracted_styles;
+pub(crate) mod parse_extracted_styles;
 mod phase_remove_content_selectors;
 mod pipe_creation;
 mod pipe_variadic;
diff --git a/crates/oxc_angular_compiler/src/pipeline/phases/parse_extracted_styles.rs b/crates/oxc_angular_compiler/src/pipeline/phases/parse_extracted_styles.rs
index 6f70535e5..63a140097 100644
--- a/crates/oxc_angular_compiler/src/pipeline/phases/parse_extracted_styles.rs
+++ b/crates/oxc_angular_compiler/src/pipeline/phases/parse_extracted_styles.rs
@@ -204,7 +204,7 @@ pub fn parse_extracted_styles(job: &mut ComponentCompilationJob<'_>) {
 /// - Basic syntax: "color: red; height: auto"
 /// - Parentheses: "background: url(foo.png)"
 /// - Quoted values: "content: 'hello'"
-fn parse_style_string(value: &str) -> std::vec::Vec<(String, String)> {
+pub fn parse_style_string(value: &str) -> std::vec::Vec<(String, String)> {
     let mut styles = std::vec::Vec::new();
     let mut chars = value.chars().peekable();
 
diff --git a/crates/oxc_angular_compiler/tests/linker_test.rs b/crates/oxc_angular_compiler/tests/linker_test.rs
index 02dffb84f..4059e3f08 100644
--- a/crates/oxc_angular_compiler/tests/linker_test.rs
+++ b/crates/oxc_angular_compiler/tests/linker_test.rs
@@ -468,3 +468,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
     assert!(result.code.contains("static ɵfac = function Svc_Factory("), "{}", result.code);
     assert!(result.code.contains("ngDevMode) && i0.ɵsetClassMetadata(C,"), "{}", result.code);
 }
+
+/// `styleAttribute` is parsed like Angular's `parse_extracted_styles` phase: `;` and `:`
+/// inside quotes or parentheses do not split, and property names are hyphenated. The
+/// expected `hostAttrs` are Angular 22.2.3's babel linker output for the same declaration.
+#[test]
+fn test_link_host_style_attribute_respects_quotes_and_parens() {
+    let allocator = Allocator::default();
+    let code = r#"import * as i0 from "@angular/core";
+class D {
+  static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: D, isStandalone: true, selector: "[d]", host: { styleAttribute: "background: url('a;b'); font-family: \"Foo;Bar\", serif; backgroundColor: blue" }, ngImport: i0 });
+}
+"#;
+    let result = link(&allocator, code, "test.mjs");
+    assert!(
+        result.code.contains(
+            r#"hostAttrs: [2, "background", "url('a;b')", "font-family", "\"Foo;Bar\", serif", "background-color", "blue"]"#
+        ),
+        "{}",
+        result.code
+    );
+}

From aa5c69cdd654ee26503611f897ab42bc8ee75e59 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:06:22 +0800
Subject: [PATCH 18/54] fix(defer): port Angular's OnTriggerParser for @defer
 triggers

Replace the find/rfind/split(',') string scanning of `on`, `prefetch on`
and `hydrate on` triggers with a port of Angular's OnTriggerParser
(r3_deferred_triggers.ts), built on the expression lexer's tokens.

What changes:
- Trigger lists are split on top-level comma tokens only; commas in
  strings, arrays, object literals and calls stay inside the argument.
- Stray tokens are reported like Angular ("Unexpected token", "Unexpected
  end of expression"), e.g. `on timer(1s) idle`, `on hover(a) foo`.
- Error messages are Angular's verbatim (`Duplicate "idle" trigger is not
  allowed`, `Could not parse time value of trigger "timer"`, `Unrecognized
  trigger`, the viewport option errors incl. the dynamic node class name,
  ...) and carry Angular's spans instead of the whole block span.
- Trigger source/name spans follow Angular.
- `when` conditions and `viewport` options now report expression parse
  errors, like Angular's BindingParser.
- `viewport({trigger: this.a})` is rejected like in Angular.
- Keyword patterns (`^on\s`, `^when\s`, ...) account for the trailing
  whitespace the HTML lexer trims, so `@defer (on)` / `@defer (when)` are
  "Unrecognized trigger" while `@defer (on )` stays accepted.

`@defer (when )` keeps adding no trigger: Angular builds an empty `when`
trigger there that ngtsc then fails to compile.

tests/fixtures/defer_triggers_ngtsc.json snapshots @angular/compiler
22.2.2 parseTemplate results (errors with spans, triggers) for 99
templates, including the Angular spec's trigger error cases.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/transform/control_flow.rs             | 1349 ++++++++---------
 .../src/transform/html_to_r3.rs               |   40 +-
 .../tests/defer_trigger_parsing_test.rs       |  175 +++
 .../tests/fixtures/defer_triggers_ngtsc.json  |  718 +++++++++
 .../defer/defer-trigger-lists.fixture.ts      |   87 ++
 5 files changed, 1641 insertions(+), 728 deletions(-)
 create mode 100644 crates/oxc_angular_compiler/tests/defer_trigger_parsing_test.rs
 create mode 100644 crates/oxc_angular_compiler/tests/fixtures/defer_triggers_ngtsc.json
 create mode 100644 napi/angular-compiler/e2e/compare/fixtures/defer/defer-trigger-lists.fixture.ts

diff --git a/crates/oxc_angular_compiler/src/transform/control_flow.rs b/crates/oxc_angular_compiler/src/transform/control_flow.rs
index cb46ab945..8a1ac5949 100644
--- a/crates/oxc_angular_compiler/src/transform/control_flow.rs
+++ b/crates/oxc_angular_compiler/src/transform/control_flow.rs
@@ -775,6 +775,8 @@ use crate::ast::r3::{
     R3ImmediateDeferredTrigger, R3InteractionDeferredTrigger, R3NeverDeferredTrigger,
     R3TimerDeferredTrigger, R3ViewportDeferredTrigger,
 };
+use crate::parser::expression::{Lexer, Token, TokenType};
+use crate::util::ParseError;
 
 /// Result of parsing defer block triggers.
 pub struct DeferTriggerParseResult<'a> {
@@ -784,88 +786,72 @@ pub struct DeferTriggerParseResult<'a> {
     pub prefetch_triggers: R3DeferredBlockTriggers<'a>,
     /// Hydrate triggers.
     pub hydrate_triggers: R3DeferredBlockTriggers<'a>,
-    /// Parse errors.
-    pub errors: std::vec::Vec<String>,
-}
-
-// Pattern matching functions for Angular's r3_deferred_blocks.ts
-// These handle whitespace/newlines between keywords correctly
-
-/// Check if string starts with a keyword followed by whitespace, then another keyword followed by whitespace.
-fn starts_with_keyword_pair(s: &str, first: &str, second: &str) -> bool {
-    if !s.starts_with(first) {
-        return false;
-    }
-    let after_first = &s[first.len()..];
-    // Must have at least one whitespace
-    let trimmed = after_first.trim_start();
-    if trimmed.len() == after_first.len() {
-        return false; // No whitespace after first keyword
-    }
-    if !trimmed.starts_with(second) {
-        return false;
-    }
-    let after_second = &trimmed[second.len()..];
-    // Must have at least one whitespace after second keyword (or be at end for "never")
-    !after_second.is_empty() && after_second.chars().next().map_or(false, |c| c.is_whitespace())
+    /// Parse errors, in the order Angular reports them.
+    pub errors: std::vec::Vec<DeferTriggerError>,
 }
 
-/// Pattern to identify a `prefetch when` trigger.
-fn is_prefetch_when_pattern(s: &str) -> bool {
-    starts_with_keyword_pair(s, "prefetch", "when")
+/// An error produced while parsing `@defer` triggers.
+pub enum DeferTriggerError {
+    /// A trigger error.
+    Trigger {
+        /// Where the error is reported (an absolute template span).
+        span: Span,
+        /// The error message.
+        msg: String,
+    },
+    /// An error from parsing a trigger expression (`when` condition or `viewport` options).
+    Expression(ParseError),
 }
 
-/// Pattern to identify a `prefetch on` trigger.
-fn is_prefetch_on_pattern(s: &str) -> bool {
-    starts_with_keyword_pair(s, "prefetch", "on")
+impl DeferTriggerError {
+    fn new(span: Span, msg: impl Into<String>) -> Self {
+        Self::Trigger { span, msg: msg.into() }
+    }
 }
 
-/// Pattern to identify a `hydrate when` trigger.
-fn is_hydrate_when_pattern(s: &str) -> bool {
-    starts_with_keyword_pair(s, "hydrate", "when")
+// Pattern matching functions for Angular's r3_deferred_blocks.ts
+// These handle whitespace/newlines between keywords correctly.
+//
+// The HTML lexer trims block parameters, while Angular matches its patterns
+// against the untrimmed text. `has_trailing_ws` restores the trimmed trailing
+// whitespace, so that e.g. `on ` matches `^on\s` but `on` does not.
+
+/// Pattern `^keyword\s`.
+fn starts_with_keyword(s: &str, keyword: &str, has_trailing_ws: bool) -> bool {
+    s.strip_prefix(keyword)
+        .is_some_and(|rest| rest.chars().next().map_or(has_trailing_ws, char::is_whitespace))
 }
 
-/// Pattern to identify a `hydrate on` trigger.
-fn is_hydrate_on_pattern(s: &str) -> bool {
-    starts_with_keyword_pair(s, "hydrate", "on")
+/// Pattern `^first\s+second\s`.
+fn starts_with_keyword_pair(s: &str, first: &str, second: &str, has_trailing_ws: bool) -> bool {
+    let Some(after_first) = s.strip_prefix(first) else {
+        return false;
+    };
+    let trimmed = after_first.trim_start();
+    // Must have at least one whitespace after the first keyword
+    trimmed.len() != after_first.len() && starts_with_keyword(trimmed, second, has_trailing_ws)
 }
 
-/// Pattern to identify a `hydrate never` trigger.
+/// Pattern to identify a `hydrate never` trigger: `^hydrate\s+never(\s*)$`.
 fn is_hydrate_never_pattern(s: &str) -> bool {
-    if !s.starts_with("hydrate") {
+    let Some(after_hydrate) = s.strip_prefix("hydrate") else {
         return false;
-    }
-    let after_hydrate = &s["hydrate".len()..];
+    };
     let trimmed = after_hydrate.trim_start();
     if trimmed.len() == after_hydrate.len() {
         return false; // No whitespace after "hydrate"
     }
-    // Check for "never" followed by optional whitespace to end
-    trimmed.strip_prefix("never").map_or(false, |rest| rest.trim().is_empty())
-}
-
-/// Pattern to identify a `when` parameter in a block.
-/// Matches "when" followed by whitespace, or bare "when" (which can occur after trimming).
-fn is_when_pattern(s: &str) -> bool {
-    s.starts_with("when")
-        && (s.len() == 4 || (s.len() > 4 && s.as_bytes()[4].is_ascii_whitespace()))
-}
-
-/// Pattern to identify an `on` parameter in a block.
-/// Matches "on" followed by whitespace, or bare "on" (which can occur after trimming).
-fn is_on_pattern(s: &str) -> bool {
-    s.starts_with("on") && (s.len() == 2 || (s.len() > 2 && s.as_bytes()[2].is_ascii_whitespace()))
+    trimmed.strip_prefix("never").is_some_and(|rest| rest.trim().is_empty())
 }
 
 /// Gets the index within an expression at which the trigger parameters start.
-/// After finding the keyword (e.g., "when", "on"), this function skips any
-/// separator characters (whitespace/newlines) to find where the actual content begins.
+/// Starting at `start_position`, skips to the first non-whitespace character that
+/// follows at least one whitespace character.
 fn get_trigger_parameters_start(value: &str, start_position: usize) -> Option<usize> {
-    let chars: std::vec::Vec<char> = value.chars().collect();
     let mut has_found_separator = false;
 
-    for i in start_position..chars.len() {
-        if chars[i].is_whitespace() {
+    for (i, ch) in value.char_indices().skip_while(|(i, _)| *i < start_position) {
+        if ch.is_whitespace() {
             has_found_separator = true;
         } else if has_found_separator {
             return Some(i);
@@ -876,11 +862,12 @@ fn get_trigger_parameters_start(value: &str, start_position: usize) -> Option<us
 }
 
 /// Parses all triggers from @defer block parameters.
-/// Reference: Angular's r3_deferred_blocks.ts parseTriggers function
+/// Reference: Angular's r3_deferred_blocks.ts parsePrimaryTriggers function
 pub fn parse_defer_triggers<'a>(
     allocator: &'a Allocator,
     parameters: &[HtmlBlockParameter<'a>],
     binding_parser: &BindingParser<'a>,
+    block_start_span: Span,
 ) -> DeferTriggerParseResult<'a> {
     let mut triggers = R3DeferredBlockTriggers::default();
     let mut prefetch_triggers = R3DeferredBlockTriggers::default();
@@ -890,93 +877,43 @@ pub fn parse_defer_triggers<'a>(
     for param in parameters {
         let expr = param.expression.as_str();
         let span = param.span;
+        // The parameter span still covers the whitespace trimmed off the expression.
+        let has_trailing_ws = span.size() as usize > expr.len();
+        let param = TriggerParameter { expression: expr, span };
 
         // Match against patterns in the same order as Angular's TypeScript implementation
-        // Reference: r3_deferred_blocks.ts lines 279-295
-        if is_when_pattern(expr) {
-            parse_when_trigger_from_expr(
-                &allocator,
-                binding_parser,
-                expr,
-                span,
-                None,
-                None,
-                &mut triggers,
-                &mut errors,
-            );
-        } else if is_on_pattern(expr) {
-            parse_on_trigger_from_expr(
-                &allocator,
-                expr,
-                span,
-                None,
-                None,
-                &mut triggers,
-                &mut errors,
+        // Reference: r3_deferred_blocks.ts parsePrimaryTriggers
+        if starts_with_keyword(expr, "when", has_trailing_ws) {
+            parse_when_trigger(&param, binding_parser, &mut triggers, &mut errors);
+        } else if starts_with_keyword(expr, "on", has_trailing_ws) {
+            parse_on_trigger(allocator, &param, binding_parser, &mut triggers, &mut errors);
+        } else if starts_with_keyword_pair(expr, "prefetch", "when", has_trailing_ws) {
+            parse_when_trigger(&param, binding_parser, &mut prefetch_triggers, &mut errors);
+        } else if starts_with_keyword_pair(expr, "prefetch", "on", has_trailing_ws) {
+            parse_on_trigger(
+                allocator,
+                &param,
                 binding_parser,
-            );
-        } else if is_prefetch_when_pattern(expr) {
-            let prefetch_span = Some(Span::new(span.start, span.start + 8)); // "prefetch"
-            parse_when_trigger_from_expr(
-                &allocator,
-                binding_parser,
-                expr,
-                span,
-                prefetch_span,
-                None,
                 &mut prefetch_triggers,
                 &mut errors,
             );
-        } else if is_prefetch_on_pattern(expr) {
-            let prefetch_span = Some(Span::new(span.start, span.start + 8)); // "prefetch"
-            parse_on_trigger_from_expr(
-                &allocator,
-                expr,
-                span,
-                prefetch_span,
-                None,
-                &mut prefetch_triggers,
-                &mut errors,
-                binding_parser,
-            );
-        } else if is_hydrate_when_pattern(expr) {
-            let hydrate_span = Some(Span::new(span.start, span.start + 7)); // "hydrate"
-            parse_when_trigger_from_expr(
-                &allocator,
-                binding_parser,
-                expr,
-                span,
-                None,
-                hydrate_span,
-                &mut hydrate_triggers,
-                &mut errors,
-            );
-        } else if is_hydrate_on_pattern(expr) {
-            let hydrate_span = Some(Span::new(span.start, span.start + 7)); // "hydrate"
-            parse_on_trigger_from_expr(
-                &allocator,
-                expr,
-                span,
-                None,
-                hydrate_span,
-                &mut hydrate_triggers,
-                &mut errors,
-                binding_parser,
-            );
+        } else if starts_with_keyword_pair(expr, "hydrate", "when", has_trailing_ws) {
+            parse_when_trigger(&param, binding_parser, &mut hydrate_triggers, &mut errors);
+        } else if starts_with_keyword_pair(expr, "hydrate", "on", has_trailing_ws) {
+            parse_on_trigger(allocator, &param, binding_parser, &mut hydrate_triggers, &mut errors);
         } else if is_hydrate_never_pattern(expr) {
-            let hydrate_span = Some(Span::new(span.start, span.start + 7)); // "hydrate"
-            parse_never_trigger(expr, span, hydrate_span, &mut hydrate_triggers, &mut errors);
-        } else if !expr.trim().is_empty() {
-            errors.push(format!("Unrecognized trigger: \"{}\"", expr.trim()));
+            parse_never_trigger(&param, &mut hydrate_triggers, &mut errors);
+        } else {
+            errors.push(DeferTriggerError::new(span, "Unrecognized trigger"));
         }
     }
 
     // Validate that `hydrate never` is not combined with other hydrate triggers
     if hydrate_triggers.never.is_some() && has_other_hydrate_triggers(&hydrate_triggers) {
-        errors.push(
-            "Cannot specify additional `hydrate` triggers if `hydrate never` is present"
-                .to_string(),
-        );
+        errors.push(DeferTriggerError::new(
+            block_start_span,
+            "Cannot specify additional `hydrate` triggers if `hydrate never` is present",
+        ));
     }
 
     DeferTriggerParseResult { triggers, prefetch_triggers, hydrate_triggers, errors }
@@ -993,658 +930,668 @@ fn has_other_hydrate_triggers(triggers: &R3DeferredBlockTriggers<'_>) -> bool {
         || triggers.viewport.is_some()
 }
 
-/// Parses a "never" trigger (only valid for hydrate).
-fn parse_never_trigger(
-    expr: &str,
+/// A `@defer` block parameter holding a trigger.
+struct TriggerParameter<'a> {
+    /// The (trimmed) parameter text.
+    expression: &'a str,
+    /// The parameter span, including trimmed trailing whitespace.
     span: Span,
-    hydrate_span: Option<Span>,
-    triggers: &mut R3DeferredBlockTriggers<'_>,
-    errors: &mut std::vec::Vec<String>,
-) {
-    let never_index = expr.find("never");
+}
 
-    if let Some(idx) = never_index {
-        let never_start = span.start + idx as u32;
-        let never_span = Span::new(never_start, never_start + 5); // "never" is 5 chars
+impl TriggerParameter<'_> {
+    /// Span of the `prefetch` keyword, if the parameter starts with it.
+    fn prefetch_span(&self) -> Option<Span> {
+        self.keyword_span("prefetch")
+    }
 
-        if triggers.never.is_some() {
-            errors.push("Duplicate 'never' trigger is not allowed".to_string());
-            return;
-        }
+    /// Span of the `hydrate` keyword, if the parameter starts with it.
+    fn hydrate_span(&self) -> Option<Span> {
+        self.keyword_span("hydrate")
+    }
 
-        triggers.never = Some(R3NeverDeferredTrigger {
-            source_span: span,
-            name_span: Some(never_span),
-            prefetch_span: None,
-            when_or_on_source_span: Some(never_span),
-            hydrate_span,
-        });
-    } else {
-        errors.push("Could not find \"never\" keyword in expression".to_string());
+    fn keyword_span(&self, keyword: &str) -> Option<Span> {
+        self.expression
+            .starts_with(keyword)
+            .then(|| Span::new(self.span.start, self.span.start + keyword.len() as u32))
+    }
+
+    /// Span of `len` bytes starting `offset` bytes into the parameter.
+    fn span_at(&self, offset: usize, len: usize) -> Span {
+        let start = self.span.start + offset as u32;
+        Span::new(start, start + len as u32)
     }
 }
 
-/// Parses a "when" trigger from the full expression.
-fn parse_when_trigger_from_expr<'a>(
-    allocator: &'a Allocator,
-    binding_parser: &BindingParser<'a>,
-    expr: &'a str,
-    span: Span,
-    prefetch_span: Option<Span>,
-    hydrate_span: Option<Span>,
-    triggers: &mut R3DeferredBlockTriggers<'a>,
-    errors: &mut std::vec::Vec<String>,
+/// Records a trigger, reporting an error if one of the same kind already exists.
+fn track_trigger<T>(
+    name: &str,
+    slot: &mut Option<T>,
+    trigger: T,
+    source_span: Span,
+    errors: &mut std::vec::Vec<DeferTriggerError>,
 ) {
-    let when_index = expr.find("when");
-
-    if let Some(idx) = when_index {
-        let when_start = span.start + idx as u32;
-        let when_source_span = Span::new(when_start, when_start + 4); // "when" is 4 chars
-
-        // Find where the actual condition starts (after "when" + whitespace)
-        let start = get_trigger_parameters_start(expr, idx + 4);
-
-        if let Some(start_idx) = start {
-            let condition_str = &expr[start_idx..];
-            // The full source span should cover from the start of the parameter
-            // (including prefetch/hydrate/when keywords) to the end
-            let full_source_span = span;
-            parse_when_trigger(
-                &allocator,
-                binding_parser,
-                condition_str,
-                Span::new(span.start + start_idx as u32, span.end),
-                full_source_span,
-                prefetch_span,
-                hydrate_span,
-                when_source_span,
-                triggers,
-                errors,
-            );
-        }
-        // If no condition found (e.g., bare "when" after trimming),
-        // Angular silently accepts it with no triggers. Match that behavior.
+    if slot.is_some() {
+        errors.push(DeferTriggerError::new(
+            source_span,
+            format!("Duplicate \"{name}\" trigger is not allowed"),
+        ));
     } else {
-        errors.push("Could not find \"when\" keyword in expression".to_string());
+        *slot = Some(trigger);
     }
 }
 
-/// Parses an "on" trigger from the full expression.
-fn parse_on_trigger_from_expr<'a>(
-    allocator: &'a Allocator,
-    expr: &'a str,
-    span: Span,
-    prefetch_span: Option<Span>,
-    hydrate_span: Option<Span>,
-    triggers: &mut R3DeferredBlockTriggers<'a>,
-    errors: &mut std::vec::Vec<String>,
-    binding_parser: &BindingParser<'a>,
+/// Parses a `hydrate never` trigger.
+fn parse_never_trigger(
+    param: &TriggerParameter<'_>,
+    triggers: &mut R3DeferredBlockTriggers<'_>,
+    errors: &mut std::vec::Vec<DeferTriggerError>,
 ) {
-    let on_index = expr.find("on");
-
-    if let Some(idx) = on_index {
-        // Find where the actual trigger names start (after "on" + whitespace)
-        let start = get_trigger_parameters_start(expr, idx + 2);
-
-        if let Some(start_idx) = start {
-            let triggers_str = &expr[start_idx..];
-            // Calculate span for the triggers portion
-            let triggers_span = Span::new(span.start + start_idx as u32, span.end);
-            // The full span starts from the beginning (including prefetch/hydrate/on keywords)
-            let full_source_span_start = span.start;
-            parse_on_triggers(
-                &allocator,
-                triggers_str,
-                triggers_span,
-                full_source_span_start,
-                prefetch_span,
-                hydrate_span,
-                triggers,
-                errors,
-                binding_parser,
-            );
-        }
-        // If no trigger parameters found (e.g., bare "on" after trimming),
-        // Angular silently accepts it with no triggers. Match that behavior.
-    } else {
-        errors.push("Could not find \"on\" keyword in expression".to_string());
-    }
+    // This is here just to be safe, we shouldn't enter this function
+    // in the first place if a block doesn't have the "never" keyword.
+    let Some(never_index) = param.expression.find("never") else {
+        errors.push(DeferTriggerError::new(
+            param.span,
+            "Could not find \"never\" keyword in expression",
+        ));
+        return;
+    };
+
+    let never_span = param.span_at(never_index, "never".len());
+    let trigger = R3NeverDeferredTrigger {
+        source_span: param.span,
+        name_span: Some(never_span),
+        prefetch_span: param.prefetch_span(),
+        when_or_on_source_span: None,
+        hydrate_span: param.hydrate_span(),
+    };
+    track_trigger("never", &mut triggers.never, trigger, param.span, errors);
 }
 
-/// Parses a "when condition" trigger.
+/// Parses a `when` trigger.
 fn parse_when_trigger<'a>(
-    _allocator: &'a Allocator,
+    param: &TriggerParameter<'a>,
     binding_parser: &BindingParser<'a>,
-    condition_str: &'a str,
-    span: Span,
-    full_source_span: Span,
-    prefetch_span: Option<Span>,
-    hydrate_span: Option<Span>,
-    when_source_span: Span,
     triggers: &mut R3DeferredBlockTriggers<'a>,
-    errors: &mut std::vec::Vec<String>,
+    errors: &mut std::vec::Vec<DeferTriggerError>,
 ) {
-    if condition_str.is_empty() {
-        errors.push("@defer 'when' trigger requires a condition expression".to_string());
+    // This is here just to be safe, we shouldn't enter this function
+    // in the first place if a block doesn't have the "when" keyword.
+    let Some(when_index) = param.expression.find("when") else {
+        errors.push(DeferTriggerError::new(
+            param.span,
+            "Could not find \"when\" keyword in expression",
+        ));
         return;
-    }
+    };
 
-    if triggers.when.is_some() {
-        errors.push("Duplicate 'when' trigger is not allowed".to_string());
+    // When no condition follows the keyword (`when ` with only whitespace after it),
+    // Angular slices from index -1 and parses the trailing whitespace into an empty
+    // `when` trigger, which ngtsc then fails to compile ("Unsupported reification of
+    // ir.Expression kind: EmptyExpr"). Accept it without a trigger instead.
+    let Some(start) = get_trigger_parameters_start(param.expression, when_index + 1) else {
         return;
-    }
-
-    // Parse the condition expression
-    let parsed = binding_parser.parse_binding(condition_str, span);
+    };
+    let condition = &param.expression[start..];
+    let parsed = binding_parser
+        .parse_binding(condition, Span::new(param.span.start + start as u32, param.span.end));
+    errors.extend(parsed.errors.into_iter().map(DeferTriggerError::Expression));
 
-    // source_span should cover the entire trigger clause including keywords
-    triggers.when = Some(R3BoundDeferredTrigger {
+    let trigger = R3BoundDeferredTrigger {
         value: parsed.ast,
-        source_span: full_source_span,
-        prefetch_span,
-        when_source_span,
-        hydrate_span,
-    });
+        source_span: param.span,
+        prefetch_span: param.prefetch_span(),
+        when_source_span: param.span_at(when_index, "when".len()),
+        hydrate_span: param.hydrate_span(),
+    };
+    track_trigger("when", &mut triggers.when, trigger, param.span, errors);
 }
 
-/// Splits a string by top-level commas, respecting nested parentheses, braces, and brackets.
-fn split_by_top_level_comma(s: &str) -> std::vec::Vec<&str> {
-    let mut parts = std::vec::Vec::new();
-    let mut start = 0;
-    let mut depth_paren: i32 = 0;
-    let mut depth_brace: i32 = 0;
-    let mut depth_bracket: i32 = 0;
-    let mut in_string = false;
-    let mut escape_next = false;
-    let mut string_char = '"';
-
-    for (i, ch) in s.char_indices() {
-        if escape_next {
-            escape_next = false;
-            continue;
-        }
-
-        if ch == '\\' {
-            escape_next = true;
-            continue;
-        }
+/// Parses an `on` trigger.
+fn parse_on_trigger<'a>(
+    allocator: &'a Allocator,
+    param: &TriggerParameter<'a>,
+    binding_parser: &BindingParser<'a>,
+    triggers: &mut R3DeferredBlockTriggers<'a>,
+    errors: &mut std::vec::Vec<DeferTriggerError>,
+) {
+    // This is here just to be safe, we shouldn't enter this function
+    // in the first place if a block doesn't have the "on" keyword.
+    let Some(on_index) = param.expression.find("on") else {
+        errors.push(DeferTriggerError::new(
+            param.span,
+            "Could not find \"on\" keyword in expression",
+        ));
+        return;
+    };
 
-        if in_string {
-            if ch == string_char {
-                in_string = false;
-            }
-            continue;
-        }
+    // Without anything after the keyword, Angular tokenizes just the trailing
+    // whitespace character, which yields no tokens and therefore no triggers.
+    let Some(start) = get_trigger_parameters_start(param.expression, on_index + 1) else {
+        return;
+    };
 
-        match ch {
-            '"' | '\'' => {
-                in_string = true;
-                string_char = ch;
-            }
-            '(' => depth_paren += 1,
-            ')' => depth_paren = depth_paren.saturating_sub(1),
-            '{' => depth_brace += 1,
-            '}' => depth_brace = depth_brace.saturating_sub(1),
-            '[' => depth_bracket += 1,
-            ']' => depth_bracket = depth_bracket.saturating_sub(1),
-            ',' if depth_paren == 0 && depth_brace == 0 && depth_bracket == 0 => {
-                parts.push(&s[start..i]);
-                start = i + 1;
-            }
-            _ => {}
-        }
-    }
+    let is_hydration_trigger = param.expression.starts_with("hydrate");
+    let mut parser = OnTriggerParser {
+        allocator,
+        binding_parser,
+        expression: param.expression,
+        start,
+        span: param.span,
+        tokens: Lexer::new(allocator, &param.expression[start..]).tokenize(),
+        index: 0,
+        triggers,
+        errors,
+        is_hydration_trigger,
+        prefetch_span: param.prefetch_span(),
+        on_source_span: param.span_at(on_index, "on".len()),
+        hydrate_span: param.hydrate_span(),
+    };
+    parser.parse();
+}
 
-    // Push the last part
-    if start < s.len() {
-        parts.push(&s[start..]);
-    } else if start == s.len() && !s.is_empty() && s.ends_with(',') {
-        parts.push("");
-    }
+/// Reference and options of a `viewport` trigger.
+type ViewportReferenceAndOptions<'a> = (Option<Ident<'a>>, Option<AngularExpression<'a>>);
 
-    parts
+/// Parsed information about a defer trigger parameter.
+struct ParsedParameter<'a> {
+    /// Expression of the parameter.
+    expression: &'a str,
+    /// Index within the trigger at which the parameter starts.
+    start: u32,
 }
 
-/// Parses "on <type>" triggers (can have multiple comma-separated).
-/// The span passed here should already point to the start of the triggers portion
-/// (after "on" and its trailing whitespace).
-fn parse_on_triggers<'a>(
+/// Port of Angular's `OnTriggerParser`: parses the comma-separated trigger
+/// list of an `on`, `prefetch on` or `hydrate on` parameter from the
+/// expression lexer's tokens.
+struct OnTriggerParser<'p, 'a> {
     allocator: &'a Allocator,
-    triggers_str: &'a str,
+    binding_parser: &'p BindingParser<'a>,
+    /// The whole parameter text.
+    expression: &'a str,
+    /// Index within `expression` at which the trigger list starts.
+    start: usize,
+    /// Span of the whole parameter.
     span: Span,
-    full_source_span_start: u32,
+    /// Tokens of `expression[start..]`.
+    tokens: std::vec::Vec<Token<'a>>,
+    index: usize,
+    triggers: &'p mut R3DeferredBlockTriggers<'a>,
+    errors: &'p mut std::vec::Vec<DeferTriggerError>,
+    is_hydration_trigger: bool,
     prefetch_span: Option<Span>,
+    on_source_span: Span,
     hydrate_span: Option<Span>,
-    triggers: &mut R3DeferredBlockTriggers<'a>,
-    errors: &mut std::vec::Vec<String>,
-    binding_parser: &BindingParser<'a>,
-) {
-    // The span now starts at the triggers portion (after "on" + whitespace)
-    let triggers_str_start = span.start;
-
-    // Split by top-level commas only, respecting nested structures
-    // E.g., "idle, viewport({trigger: foo, margin: 1})" splits into:
-    // - "idle"
-    // - " viewport({trigger: foo, margin: 1})"
-    let parts = split_by_top_level_comma(triggers_str);
-
-    let mut current_pos = 0u32;
-    let mut is_first_trigger = true;
-
-    for trigger_part_raw in parts {
-        // Calculate position of this trigger in the original string
-        let original_len = trigger_part_raw.len() as u32;
-        let leading_whitespace = trigger_part_raw.len() - trigger_part_raw.trim_start().len();
-        let trigger_part = trigger_part_raw.trim();
-        if trigger_part.is_empty() {
-            // Account for the empty part and comma separator
-            current_pos += original_len + 1;
-            continue;
-        }
-
-        // Calculate the actual span for this trigger
-        let trigger_start = triggers_str_start + current_pos + leading_whitespace as u32;
-        let trigger_end = trigger_start + trigger_part.len() as u32;
-        let trigger_span = Span::new(trigger_start, trigger_end);
-
-        // For the first trigger, source_span includes the "on"/"prefetch on"/"hydrate on" prefix
-        // For subsequent triggers, source_span is just the trigger name
-        let source_span = if is_first_trigger {
-            Span::new(full_source_span_start, trigger_end)
-        } else {
-            trigger_span
-        };
+}
 
-        // Parse individual trigger
-        parse_single_on_trigger(
-            &allocator,
-            trigger_part,
-            trigger_span,
-            source_span,
-            prefetch_span,
-            hydrate_span,
-            triggers,
-            errors,
-            binding_parser,
-        );
+/// Pairs of characters that form syntax that is comma-delimited.
+fn comma_delimited_closer(token: &Token<'_>) -> Option<char> {
+    if token.token_type != TokenType::Character {
+        return None;
+    }
+    if token.is_character('{') {
+        Some('}') // Object literals
+    } else if token.is_character('[') {
+        Some(']') // Array literals
+    } else if token.is_character('(') {
+        Some(')') // Function calls
+    } else {
+        None
+    }
+}
 
-        // Move past this trigger and the comma separator
-        current_pos += original_len + 1;
-        is_first_trigger = false;
+/// Angular's `Token.toString()`, used in "Unexpected token" errors.
+fn token_text(token: &Token<'_>) -> String {
+    match token.token_type {
+        TokenType::Number => token.num_value.to_string(),
+        TokenType::NoSubstitutionTemplate
+        | TokenType::TemplateHead
+        | TokenType::TemplateMiddle
+        | TokenType::TemplateTail => "null".to_string(),
+        _ => token.str_value.to_string(),
     }
 }
 
-/// Parses a single "on" trigger like "idle", "timer(500ms)", "hover(ref)".
-/// `trigger_span` is the span of just the trigger (e.g., "idle" or "hover(button)")
-/// `source_span` is the full span including any prefix (e.g., "on hover(button)")
-fn parse_single_on_trigger<'a>(
-    allocator: &'a Allocator,
-    trigger_str: &'a str,
-    trigger_span: Span,
-    source_span: Span,
-    prefetch_span: Option<Span>,
-    hydrate_span: Option<Span>,
-    triggers: &mut R3DeferredBlockTriggers<'a>,
-    errors: &mut std::vec::Vec<String>,
-    binding_parser: &BindingParser<'a>,
-) {
-    // Extract trigger name and optional parameters
-    let (name, params) = if let Some(paren_start) = trigger_str.find('(') {
-        let name = trigger_str[..paren_start].trim();
-        let params_end = trigger_str.rfind(')').unwrap_or(trigger_str.len());
-        let params_str = trigger_str[paren_start + 1..params_end].trim();
-        // Empty parentheses like `idle()` should be treated as zero parameters,
-        // matching Angular's consumeParameters() which returns an empty array for `()`.
-        (name, if params_str.is_empty() { None } else { Some(params_str) })
-    } else {
-        (trigger_str.trim(), None)
-    };
+impl<'a> OnTriggerParser<'_, 'a> {
+    fn parse(&mut self) {
+        while !self.tokens.is_empty() && self.index < self.tokens.len() {
+            let token = self.token().clone();
 
-    match name {
-        "idle" => {
-            // v22+: `idle` accepts an optional timeout parameter, e.g. `on idle(100)`.
-            let timeout = if let Some(param_str) = params {
-                if param_str.contains(',') {
-                    errors
-                        .push("\"idle\" trigger can only have zero or one parameters".to_string());
-                    return;
-                }
-                match parse_deferred_time(param_str) {
-                    Some(t) => Some(t),
-                    None => {
-                        errors.push("Could not parse time value of trigger \"idle\"".to_string());
-                        return;
-                    }
-                }
-            } else {
-                None
-            };
-            if triggers.idle.is_some() {
-                errors.push("Duplicate 'idle' trigger is not allowed".to_string());
-                return;
+            if !token.is_identifier() {
+                self.unexpected_token(&token);
+                break;
             }
-            triggers.idle = Some(R3IdleDeferredTrigger {
-                timeout,
-                source_span,
-                name_span: Some(trigger_span),
-                prefetch_span,
-                when_or_on_source_span: Some(trigger_span),
-                hydrate_span,
-            });
-        }
 
-        "immediate" => {
-            if params.is_some() {
-                errors.push("'immediate' trigger cannot have parameters".to_string());
-                return;
-            }
-            if triggers.immediate.is_some() {
-                errors.push("Duplicate 'immediate' trigger is not allowed".to_string());
-                return;
+            // An identifier immediately followed by a comma or the end of
+            // the expression cannot have parameters so we can exit early.
+            if self.is_followed_by_or_last(',') {
+                self.consume_trigger(&token, &[]);
+                self.advance();
+            } else if self.is_followed_by_or_last('(') {
+                self.advance(); // Advance to the opening paren.
+                let prev_errors = self.errors.len();
+                let parameters = self.consume_parameters();
+                if self.errors.len() != prev_errors {
+                    break;
+                }
+                self.consume_trigger(&token, &parameters);
+                self.advance(); // Advance past the closing paren.
+            } else if self.index < self.tokens.len() - 1 {
+                let next = self.tokens[self.index + 1].clone();
+                self.unexpected_token(&next);
             }
-            triggers.immediate = Some(R3ImmediateDeferredTrigger {
-                source_span,
-                name_span: Some(trigger_span),
-                prefetch_span,
-                when_or_on_source_span: Some(trigger_span),
-                hydrate_span,
-            });
+
+            self.advance();
         }
+    }
 
-        "timer" => {
-            let delay = if let Some(param_str) = params {
-                match parse_deferred_time(param_str) {
-                    Some(d) => d,
-                    None => {
-                        errors.push(format!(
-                            "Could not parse time value '{}' for 'timer' trigger",
-                            param_str
-                        ));
-                        return;
-                    }
-                }
-            } else {
-                errors.push("'timer' trigger must have exactly one parameter".to_string());
-                return;
-            };
+    fn advance(&mut self) {
+        self.index += 1;
+    }
 
-            if triggers.timer.is_some() {
-                errors.push("Duplicate 'timer' trigger is not allowed".to_string());
-                return;
-            }
-            triggers.timer = Some(R3TimerDeferredTrigger {
-                delay,
-                source_span,
-                name_span: trigger_span,
-                prefetch_span,
-                on_source_span: Some(trigger_span),
-                hydrate_span,
-            });
+    fn is_followed_by_or_last(&self, ch: char) -> bool {
+        if self.index == self.tokens.len() - 1 {
+            return true;
         }
+        self.tokens[self.index + 1].is_character(ch)
+    }
 
-        "hover" => {
-            if triggers.hover.is_some() {
-                errors.push("Duplicate 'hover' trigger is not allowed".to_string());
-                return;
-            }
-            // Hydration triggers for hover cannot have parameters
-            if hydrate_span.is_some() && params.is_some() {
-                errors.push("Hydration trigger \"hover\" cannot have parameters".to_string());
-                return;
-            }
-            // Validate zero or one parameter (matching Angular's validatePlainReferenceBasedTrigger)
-            if let Some(p) = params {
-                let param_parts: std::vec::Vec<&str> =
-                    p.split(',').map(|s| s.trim()).filter(|s| !s.is_empty()).collect();
-                if param_parts.len() > 1 {
-                    errors
-                        .push("\"hover\" trigger can only have zero or one parameters".to_string());
-                    return;
-                }
-            }
-            let reference = params.map(|s| Ident::from(s.trim()));
-            triggers.hover = Some(R3HoverDeferredTrigger {
-                reference,
-                source_span,
-                name_span: trigger_span,
-                prefetch_span,
-                on_source_span: Some(trigger_span),
-                hydrate_span,
-            });
-        }
+    fn token(&self) -> &Token<'a> {
+        &self.tokens[self.index.min(self.tokens.len() - 1)]
+    }
 
-        "interaction" => {
-            if triggers.interaction.is_some() {
-                errors.push("Duplicate 'interaction' trigger is not allowed".to_string());
-                return;
-            }
-            // Hydration triggers for interaction cannot have parameters
-            if hydrate_span.is_some() && params.is_some() {
-                errors.push("Hydration trigger \"interaction\" cannot have parameters".to_string());
-                return;
+    fn consume_trigger(&mut self, identifier: &Token<'a>, parameters: &[ParsedParameter<'a>]) {
+        let name_start =
+            self.span.start + self.start as u32 + identifier.index - self.tokens[0].index;
+        let name_span = Span::new(name_start, name_start + identifier.str_value.len() as u32);
+        let end = name_start + (self.token().end - identifier.index);
+
+        // Put the prefetch and on spans with the first trigger
+        // This should maybe be refactored to have something like an outer OnGroup AST
+        // Since triggers can be grouped with commas "on hover(x), interaction(y)"
+        let is_first_trigger = identifier.index == 0;
+        let source_span =
+            Span::new(if is_first_trigger { self.span.start } else { name_start }, end);
+
+        let result = match identifier.str_value.as_str() {
+            "idle" => create_idle_trigger(parameters).map(|timeout| {
+                let trigger = R3IdleDeferredTrigger {
+                    timeout,
+                    source_span,
+                    name_span: Some(name_span),
+                    prefetch_span: if is_first_trigger { self.prefetch_span } else { None },
+                    when_or_on_source_span: is_first_trigger.then_some(self.on_source_span),
+                    hydrate_span: if is_first_trigger { self.hydrate_span } else { None },
+                };
+                track_trigger("idle", &mut self.triggers.idle, trigger, source_span, self.errors);
+            }),
+            "timer" => create_timer_trigger(parameters).map(|delay| {
+                let trigger = R3TimerDeferredTrigger {
+                    delay,
+                    source_span,
+                    name_span,
+                    prefetch_span: self.prefetch_span,
+                    on_source_span: Some(self.on_source_span),
+                    hydrate_span: self.hydrate_span,
+                };
+                track_trigger("timer", &mut self.triggers.timer, trigger, source_span, self.errors);
+            }),
+            "interaction" => {
+                self.validate_reference_based_trigger("interaction", parameters).map(|()| {
+                    let trigger = R3InteractionDeferredTrigger {
+                        reference: parameters.first().map(|p| Ident::from(p.expression)),
+                        source_span,
+                        name_span,
+                        prefetch_span: self.prefetch_span,
+                        on_source_span: Some(self.on_source_span),
+                        hydrate_span: self.hydrate_span,
+                    };
+                    track_trigger(
+                        "interaction",
+                        &mut self.triggers.interaction,
+                        trigger,
+                        source_span,
+                        self.errors,
+                    );
+                })
             }
-            // Validate zero or one parameter (matching Angular's validatePlainReferenceBasedTrigger)
-            if let Some(p) = params {
-                let param_parts: std::vec::Vec<&str> =
-                    p.split(',').map(|s| s.trim()).filter(|s| !s.is_empty()).collect();
-                if param_parts.len() > 1 {
-                    errors.push(
-                        "\"interaction\" trigger can only have zero or one parameters".to_string(),
+            "immediate" => create_immediate_trigger(parameters).map(|()| {
+                let trigger = R3ImmediateDeferredTrigger {
+                    source_span,
+                    name_span: Some(name_span),
+                    prefetch_span: self.prefetch_span,
+                    when_or_on_source_span: Some(self.on_source_span),
+                    hydrate_span: self.hydrate_span,
+                };
+                track_trigger(
+                    "immediate",
+                    &mut self.triggers.immediate,
+                    trigger,
+                    source_span,
+                    self.errors,
+                );
+            }),
+            "hover" => self.validate_reference_based_trigger("hover", parameters).map(|()| {
+                let trigger = R3HoverDeferredTrigger {
+                    reference: parameters.first().map(|p| Ident::from(p.expression)),
+                    source_span,
+                    name_span,
+                    prefetch_span: self.prefetch_span,
+                    on_source_span: Some(self.on_source_span),
+                    hydrate_span: self.hydrate_span,
+                };
+                track_trigger("hover", &mut self.triggers.hover, trigger, source_span, self.errors);
+            }),
+            "viewport" => {
+                self.create_viewport_trigger(parameters, source_span).map(|(reference, options)| {
+                    let trigger = R3ViewportDeferredTrigger {
+                        reference,
+                        options,
+                        source_span,
+                        name_span,
+                        prefetch_span: self.prefetch_span,
+                        on_source_span: Some(self.on_source_span),
+                        hydrate_span: self.hydrate_span,
+                    };
+                    track_trigger(
+                        "viewport",
+                        &mut self.triggers.viewport,
+                        trigger,
+                        source_span,
+                        self.errors,
                     );
-                    return;
-                }
+                })
             }
-            let reference = params.map(|s| Ident::from(s.trim()));
-            triggers.interaction = Some(R3InteractionDeferredTrigger {
-                reference,
-                source_span,
-                name_span: trigger_span,
-                prefetch_span,
-                on_source_span: Some(trigger_span),
-                hydrate_span,
-            });
+            // `never` is only valid as `hydrate never`, so it is unrecognized here too.
+            name => Err(format!("Unrecognized trigger type \"{name}\"")),
+        };
+
+        if let Err(msg) = result {
+            self.error(identifier, msg);
         }
+    }
 
-        "viewport" => {
-            if triggers.viewport.is_some() {
-                errors.push("Duplicate 'viewport' trigger is not allowed".to_string());
-                return;
-            }
+    fn consume_parameters(&mut self) -> std::vec::Vec<ParsedParameter<'a>> {
+        let mut parameters = std::vec::Vec::new();
 
-            // Validate parameter count before parsing (matching Angular's validator).
-            // Non-hydrate: validatePlainReferenceBasedTrigger → max 1 parameter
-            // Hydrate: validateHydrateReferenceBasedTrigger → max 1 parameter
-            // Use top-level comma splitting to respect nested {}, [], () in object literals.
-            if let Some(p) = params {
-                let param_parts: std::vec::Vec<&str> = split_by_top_level_comma(p)
-                    .into_iter()
-                    .map(|s| s.trim())
-                    .filter(|s| !s.is_empty())
-                    .collect();
-                if param_parts.len() > 1 {
-                    if hydrate_span.is_some() {
-                        errors.push(
-                            "Hydration trigger \"viewport\" cannot have more than one parameter"
-                                .to_string(),
-                        );
-                    } else {
-                        errors.push(
-                            "\"viewport\" trigger can only have zero or one parameters".to_string(),
-                        );
-                    }
-                    return;
+        if !self.token().is_character('(') {
+            let token = self.token().clone();
+            self.unexpected_token(&token);
+            return parameters;
+        }
+
+        self.advance();
+
+        let mut comma_delim_stack: std::vec::Vec<char> = std::vec::Vec::new();
+        // Index range (into `self.tokens`) of the current parameter's tokens.
+        let mut param_tokens: Option<(usize, usize)> = None;
+
+        while self.index < self.tokens.len() {
+            let token = self.token();
+
+            // Stop parsing if we've hit the end character and we're outside of a comma-delimited
+            // syntax. Note that we don't need to account for strings here since the lexer already
+            // parsed them into string tokens.
+            if token.is_character(')') && comma_delim_stack.is_empty() {
+                if let Some(range) = param_tokens {
+                    parameters.push(self.token_range_parameter(range));
                 }
+                break;
             }
 
-            let (reference, options) = if let Some(param_str) = params {
-                let trimmed = param_str.trim();
-                if trimmed.starts_with('{') {
-                    // Parse as object literal for options
-                    let parsed = binding_parser.parse_binding(trimmed, trigger_span);
-                    // Extract reference from 'trigger' key if present and filter it from options
-                    let result =
-                        extract_viewport_trigger_and_options(allocator, parsed.ast, trigger_span);
-                    // Add any errors from extraction
-                    errors.extend(result.errors);
-                    (result.reference, result.options)
-                } else {
-                    // Simple reference name
-                    (Some(Ident::from(trimmed)), None)
-                }
-            } else {
-                (None, None)
-            };
+            // In the `on` microsyntax "top-level" commas (e.g. ones outside of an parameters)
+            // separate the different triggers (e.g. `on idle,timer(500)`). This is problematic,
+            // because the function-like syntax also implies that multiple parameters can be passed
+            // into the individual trigger (e.g. `on foo(a, b)`). To avoid tripping up the parser
+            // with commas that are part of other sorts of syntax (object literals, arrays), we
+            // treat anything inside a comma-delimited syntax block as plain text.
+            if let Some(closer) = comma_delimited_closer(token) {
+                comma_delim_stack.push(closer);
+            }
 
-            // Hydration viewport triggers cannot have a reference
-            if hydrate_span.is_some() && reference.is_some() {
-                errors.push("\"viewport\" hydration trigger cannot have a \"trigger\"".to_string());
-                return;
+            if comma_delim_stack.last().is_some_and(|&closer| token.is_character(closer)) {
+                comma_delim_stack.pop();
             }
 
-            triggers.viewport = Some(R3ViewportDeferredTrigger {
-                reference,
-                options,
-                source_span,
-                name_span: trigger_span,
-                prefetch_span,
-                on_source_span: Some(trigger_span),
-                hydrate_span,
+            // If we hit a comma outside of a comma-delimited syntax, it means
+            // that we're at the top level and we're starting a new parameter.
+            if comma_delim_stack.is_empty()
+                && token.is_character(',')
+                && let Some(range) = param_tokens.take()
+            {
+                parameters.push(self.token_range_parameter(range));
+                self.advance();
+                continue;
+            }
+
+            // Otherwise treat the token as a plain text character in the current parameter.
+            param_tokens = Some(match param_tokens {
+                Some((first, _)) => (first, self.index),
+                None => (self.index, self.index),
             });
+            self.advance();
         }
 
-        _ => {
-            // "never" is only valid as "hydrate never" (top-level pattern), not as an on-trigger.
-            // Angular's OnTriggerParser switch has no case for NEVER, so it falls to default.
-            errors.push(format!("Unrecognized trigger type \"{}\"", name));
+        if !self.token().is_character(')') || !comma_delim_stack.is_empty() {
+            let token = self.token().clone();
+            self.error(&token, "Unexpected end of expression");
         }
-    }
-}
 
-/// Result type for viewport trigger extraction.
-struct ViewportTriggerResult<'a> {
-    reference: Option<Ident<'a>>,
-    options: Option<AngularExpression<'a>>,
-    errors: std::vec::Vec<String>,
-}
+        if self.index + 1 < self.tokens.len() && !self.tokens[self.index + 1].is_character(',') {
+            let next = self.tokens[self.index + 1].clone();
+            self.unexpected_token(&next);
+        }
 
-/// Checks if an expression contains dynamic nodes (not literal values).
-fn contains_dynamic_node(expr: &AngularExpression<'_>) -> bool {
-    match expr {
-        AngularExpression::LiteralPrimitive(_) => false,
-        AngularExpression::LiteralArray(arr) => arr.expressions.iter().any(contains_dynamic_node),
-        AngularExpression::LiteralMap(map) => map.values.iter().any(contains_dynamic_node),
-        // All other expression types are considered dynamic
-        _ => true,
+        parameters
     }
-}
 
-/// Extracts the trigger reference and options from a viewport trigger object literal.
-///
-/// Given `{trigger: foo, rootMargin: "123px", threshold: [1, 2, 3]}`, returns:
-/// - reference: `Some("foo")`
-/// - options: `LiteralMap({rootMargin: "123px", threshold: [1, 2, 3]})`
-fn extract_viewport_trigger_and_options<'a>(
-    allocator: &'a Allocator,
-    expr: AngularExpression<'a>,
-    _span: Span,
-) -> ViewportTriggerResult<'a> {
-    use crate::ast::expression::{LiteralMap, LiteralMapKey, LiteralMapPropertyKey};
+    /// Creates a parameter from the source text covered by a range of tokens.
+    fn token_range_parameter(&self, (first, last): (usize, usize)) -> ParsedParameter<'a> {
+        let first = &self.tokens[first];
+        let last = &self.tokens[last];
+        ParsedParameter {
+            expression: &self.expression
+                [self.start + first.index as usize..self.start + last.end as usize],
+            start: first.index,
+        }
+    }
 
-    let mut errors = std::vec::Vec::new();
+    fn error(&mut self, token: &Token<'_>, msg: impl Into<String>) {
+        let start = self.span.start + self.start as u32 + token.index;
+        let span = Span::new(start, start + (token.end - token.index));
+        self.errors.push(DeferTriggerError::new(span, msg));
+    }
 
-    if let AngularExpression::LiteralMap(map) = expr {
-        let mut trigger_ref: Option<Ident<'a>> = None;
-        let mut trigger_idx: Option<usize> = None;
-
-        // First pass: find the trigger key, check for "root" key, and extract trigger value
-        for (idx, (key, value)) in map.keys.iter().zip(map.values.iter()).enumerate() {
-            let key_str = match key {
-                LiteralMapKey::Property(prop) => prop.key.as_str(),
-                LiteralMapKey::Spread(_) => continue, // Skip spread keys
-            };
-            if key_str == "trigger" {
-                trigger_idx = Some(idx);
-                // Extract reference from the trigger value
-                if let AngularExpression::PropertyRead(prop) = value {
-                    // It's a simple identifier like `foo`
-                    trigger_ref = Some(prop.name.clone());
-                } else {
-                    errors.push(
-                        "\"trigger\" option of the \"viewport\" trigger must be an identifier"
-                            .to_string(),
-                    );
+    fn unexpected_token(&mut self, token: &Token<'_>) {
+        self.error(token, format!("Unexpected token \"{}\"", token_text(token)));
+    }
+
+    /// Checks the structure of a reference-based trigger (`validatePlainReferenceBasedTrigger`
+    /// or `validateHydrateReferenceBasedTrigger`, depending on the trigger kind).
+    fn validate_reference_based_trigger(
+        &self,
+        name: &str,
+        parameters: &[ParsedParameter<'_>],
+    ) -> Result<(), String> {
+        if self.is_hydration_trigger {
+            if name == "viewport" {
+                if parameters.len() > 1 {
+                    return Err(format!(
+                        "Hydration trigger \"{name}\" cannot have more than one parameter"
+                    ));
                 }
-            } else if key_str == "root" {
-                errors.push(
-                    "The \"root\" option is not supported in the options parameter of the \"viewport\" trigger".to_string()
-                );
+            } else if !parameters.is_empty() {
+                return Err(format!("Hydration trigger \"{name}\" cannot have parameters"));
             }
+        } else if parameters.len() > 1 {
+            return Err(format!("\"{name}\" trigger can only have zero or one parameters"));
         }
+        Ok(())
+    }
 
-        // If no trigger key found, return the original expression as options
-        let trigger_idx = match trigger_idx {
-            Some(idx) => idx,
-            None => {
-                // Check for dynamic nodes in options
-                if map.values.iter().any(contains_dynamic_node) {
-                    errors.push(
-                        "Options of the \"viewport\" trigger must be an object literal containing only literal values".to_string()
-                    );
-                }
-                return ViewportTriggerResult {
-                    reference: None,
-                    options: Some(AngularExpression::LiteralMap(map)),
-                    errors,
-                };
-            }
-        };
+    /// Returns the `viewport` trigger's reference and options.
+    fn create_viewport_trigger(
+        &mut self,
+        parameters: &[ParsedParameter<'a>],
+        source_span: Span,
+    ) -> Result<ViewportReferenceAndOptions<'a>, String> {
+        use crate::ast::expression::{LiteralMap, LiteralMapKey};
 
-        // Unbox the map to get ownership of keys and values
-        let LiteralMap { span: map_span, source_span: map_source_span, keys, values } = map.unbox();
+        self.validate_reference_based_trigger("viewport", parameters)?;
 
-        // Second pass: filter out the trigger key
-        let mut filtered_keys = Vec::new_in(&allocator);
-        let mut filtered_values = Vec::new_in(&allocator);
+        let (reference, options) = match parameters.first() {
+            None => (None, None),
+            Some(param) if !param.expression.starts_with('{') => {
+                (Some(Ident::from(param.expression)), None)
+            }
+            Some(param) => {
+                let offset = source_span.start + self.start as u32 + param.start;
+                let parsed = self.binding_parser.parse_binding(
+                    param.expression,
+                    Span::new(offset, offset + param.expression.len() as u32),
+                );
+                self.errors.extend(parsed.errors.into_iter().map(DeferTriggerError::Expression));
 
-        for (idx, (key, value)) in keys.into_iter().zip(values.into_iter()).enumerate() {
-            if idx != trigger_idx {
-                // Check for dynamic values
-                if contains_dynamic_node(&value) {
-                    errors.push(
-                        "Options of the \"viewport\" trigger must be an object literal containing only literal values".to_string()
+                let AngularExpression::LiteralMap(map) = parsed.ast else {
+                    return Err(
+                        "Options parameter of the \"viewport\" trigger must be an object literal"
+                            .to_string(),
                     );
+                };
+                let is_property = |key: &LiteralMapKey<'_>, name: &str| matches!(key, LiteralMapKey::Property(prop) if prop.key == name);
+                if map.keys.iter().any(|key| matches!(key, LiteralMapKey::Spread(_))) {
+                    return Err("Spread operator are not allowed in this context".to_string());
                 }
-                // Only include property keys, skip spread keys
-                if let LiteralMapKey::Property(prop) = key {
-                    filtered_keys.push(LiteralMapKey::Property(LiteralMapPropertyKey {
-                        key: prop.key,
-                        quoted: prop.quoted,
-                        is_shorthand_initialized: prop.is_shorthand_initialized,
-                    }));
-                    filtered_values.push(value);
+                if map.keys.iter().any(|key| is_property(key, "root")) {
+                    return Err("The \"root\" option is not supported in the options parameter of the \"viewport\" trigger".to_string());
+                }
+
+                match map.keys.iter().position(|key| is_property(key, "trigger")) {
+                    None => (None, Some(AngularExpression::LiteralMap(map))),
+                    Some(trigger_index) => {
+                        let reference = match &map.values[trigger_index] {
+                            AngularExpression::PropertyRead(read)
+                                if matches!(
+                                    read.receiver,
+                                    AngularExpression::ImplicitReceiver(_)
+                                ) =>
+                            {
+                                read.name
+                            }
+                            _ => {
+                                return Err("\"trigger\" option of the \"viewport\" trigger must be an identifier".to_string());
+                            }
+                        };
+
+                        let LiteralMap { span, source_span, keys, values } = map.unbox();
+                        let mut filtered_keys = Vec::new_in(&self.allocator);
+                        let mut filtered_values = Vec::new_in(&self.allocator);
+                        for (index, (key, value)) in keys.into_iter().zip(values).enumerate() {
+                            if index != trigger_index {
+                                filtered_keys.push(key);
+                                filtered_values.push(value);
+                            }
+                        }
+                        let options = AngularExpression::LiteralMap(oxc_allocator::Box::new_in(
+                            LiteralMap {
+                                span,
+                                source_span,
+                                keys: filtered_keys,
+                                values: filtered_values,
+                            },
+                            &self.allocator,
+                        ));
+                        (Some(reference), Some(options))
+                    }
                 }
             }
+        };
+
+        if self.is_hydration_trigger && reference.is_some() {
+            return Err("\"viewport\" hydration trigger cannot have a \"trigger\"".to_string());
+        }
+        if let Some(dynamic_node) = options.as_ref().and_then(find_dynamic_node) {
+            return Err(format!(
+                "Options of the \"viewport\" trigger must be an object literal containing only literal values, but \"{dynamic_node}\" was found"
+            ));
         }
 
-        // Always create a LiteralMap for options, even if empty (matching Angular behavior).
-        // Angular keeps an empty LiteralMap {} when only the trigger key was present.
-        let options = Some(AngularExpression::LiteralMap(oxc_allocator::Box::new_in(
-            LiteralMap {
-                span: map_span,
-                source_span: map_source_span,
-                keys: filtered_keys,
-                values: filtered_values,
-            },
-            &allocator,
-        )));
+        Ok((reference, options))
+    }
+}
 
-        ViewportTriggerResult { reference: trigger_ref, options, errors }
-    } else {
-        // Not a LiteralMap
-        errors.push(
-            "Options parameter of the \"viewport\" trigger must be an object literal".to_string(),
-        );
-        ViewportTriggerResult { reference: None, options: Some(expr), errors }
+fn create_idle_trigger(parameters: &[ParsedParameter<'_>]) -> Result<Option<f64>, String> {
+    if parameters.len() > 1 {
+        return Err("\"idle\" trigger can only have zero or one parameters".to_string());
+    }
+    // v22+: `idle` accepts an optional timeout parameter, e.g. `on idle(100)`.
+    parameters
+        .first()
+        .map(|param| {
+            parse_deferred_time(param.expression)
+                .ok_or_else(|| "Could not parse time value of trigger \"idle\"".to_string())
+        })
+        .transpose()
+}
+
+fn create_timer_trigger(parameters: &[ParsedParameter<'_>]) -> Result<f64, String> {
+    if parameters.len() != 1 {
+        return Err("\"timer\" trigger must have exactly one parameter".to_string());
+    }
+    parse_deferred_time(parameters[0].expression)
+        .ok_or_else(|| "Could not parse time value of trigger \"timer\"".to_string())
+}
+
+fn create_immediate_trigger(parameters: &[ParsedParameter<'_>]) -> Result<(), String> {
+    if !parameters.is_empty() {
+        return Err("\"immediate\" trigger cannot have parameters".to_string());
+    }
+    Ok(())
+}
+
+/// Port of Angular's `DynamicAstValidator`: returns the class name of the last
+/// non-literal node found in a `viewport` options expression.
+fn find_dynamic_node(expr: &AngularExpression<'_>) -> Option<&'static str> {
+    match expr {
+        AngularExpression::LiteralPrimitive(_) => None,
+        AngularExpression::LiteralArray(arr) => {
+            arr.expressions.iter().rev().find_map(find_dynamic_node)
+        }
+        AngularExpression::LiteralMap(map) => map.values.iter().rev().find_map(find_dynamic_node),
+        _ => Some(angular_ast_class_name(expr)),
+    }
+}
+
+/// The name of the Angular AST class an expression corresponds to.
+fn angular_ast_class_name(expr: &AngularExpression<'_>) -> &'static str {
+    match expr {
+        AngularExpression::Empty(_) => "EmptyExpr",
+        AngularExpression::ImplicitReceiver(_) => "ImplicitReceiver",
+        AngularExpression::ThisReceiver(_) => "ThisReceiver",
+        AngularExpression::Chain(_) => "Chain",
+        AngularExpression::Conditional(_) => "Conditional",
+        AngularExpression::PropertyRead(_) => "PropertyRead",
+        AngularExpression::SafePropertyRead(_) => "SafePropertyRead",
+        AngularExpression::KeyedRead(_) => "KeyedRead",
+        AngularExpression::SafeKeyedRead(_) => "SafeKeyedRead",
+        AngularExpression::BindingPipe(_) => "BindingPipe",
+        AngularExpression::LiteralPrimitive(_) => "LiteralPrimitive",
+        AngularExpression::LiteralArray(_) => "LiteralArray",
+        AngularExpression::LiteralMap(_) => "LiteralMap",
+        AngularExpression::Interpolation(_) => "Interpolation",
+        AngularExpression::Binary(_) => "Binary",
+        AngularExpression::Unary(_) => "Unary",
+        AngularExpression::PrefixNot(_) => "PrefixNot",
+        AngularExpression::TypeofExpression(_) => "TypeofExpression",
+        AngularExpression::VoidExpression(_) => "VoidExpression",
+        AngularExpression::NonNullAssert(_) => "NonNullAssert",
+        AngularExpression::Call(_) => "Call",
+        AngularExpression::SafeCall(_) => "SafeCall",
+        AngularExpression::TaggedTemplateLiteral(_) => "TaggedTemplateLiteral",
+        AngularExpression::TemplateLiteral(_) => "TemplateLiteral",
+        AngularExpression::ParenthesizedExpression(_) => "ParenthesizedExpression",
+        AngularExpression::RegularExpressionLiteral(_) => "RegularExpressionLiteral",
+        AngularExpression::SpreadElement(_) => "SpreadElement",
+        AngularExpression::ArrowFunction(_) => "ArrowFunction",
     }
 }
 
diff --git a/crates/oxc_angular_compiler/src/transform/html_to_r3.rs b/crates/oxc_angular_compiler/src/transform/html_to_r3.rs
index c5437fbe9..4727e3514 100644
--- a/crates/oxc_angular_compiler/src/transform/html_to_r3.rs
+++ b/crates/oxc_angular_compiler/src/transform/html_to_r3.rs
@@ -34,7 +34,9 @@ use crate::schema::{
     element_security_context_for, is_known_element, is_trusted_types_sink_at,
     strips_namespaced_svg_script, strips_namespaced_svg_style, uses_namespaced_schema,
 };
-use crate::transform::control_flow::{parse_conditional_params, parse_defer_triggers};
+use crate::transform::control_flow::{
+    DeferTriggerError, parse_conditional_params, parse_defer_triggers,
+};
 use crate::util::ParseError;
 
 /// Regex pattern for binding prefixes.
@@ -2881,35 +2883,19 @@ impl<'a> HtmlToR3Transform<'a> {
         let children = self.visit_children(&block.children);
 
         // Parse defer triggers from block parameters
-        let trigger_result =
-            parse_defer_triggers(self.allocator, &block.parameters, &self.binding_parser);
+        let trigger_result = parse_defer_triggers(
+            self.allocator,
+            &block.parameters,
+            &self.binding_parser,
+            block.start_span,
+        );
 
         // Report trigger parsing errors via diagnostics
         for error in trigger_result.errors {
-            self.errors.push(crate::util::ParseError {
-                span: crate::util::ParseSourceSpan::new(
-                    crate::util::ParseLocation::new(
-                        std::sync::Arc::new(crate::util::ParseSourceFile::new(
-                            self.source_text,
-                            "template",
-                        )),
-                        block.span.start,
-                        0,
-                        0,
-                    ),
-                    crate::util::ParseLocation::new(
-                        std::sync::Arc::new(crate::util::ParseSourceFile::new(
-                            self.source_text,
-                            "template",
-                        )),
-                        block.span.end,
-                        0,
-                        0,
-                    ),
-                ),
-                msg: error,
-                level: crate::util::ParseErrorLevel::Error,
-            });
+            match error {
+                DeferTriggerError::Trigger { span, msg } => self.report_error(&msg, span),
+                DeferTriggerError::Expression(error) => self.errors.push(error),
+            }
         }
 
         // Process connected blocks with validation
diff --git a/crates/oxc_angular_compiler/tests/defer_trigger_parsing_test.rs b/crates/oxc_angular_compiler/tests/defer_trigger_parsing_test.rs
new file mode 100644
index 000000000..ce588fa87
--- /dev/null
+++ b/crates/oxc_angular_compiler/tests/defer_trigger_parsing_test.rs
@@ -0,0 +1,175 @@
+//! `@defer` trigger parsing (`on`, `prefetch on`, `hydrate on`, `when`, ...)
+//! matches Angular's `r3_deferred_triggers.ts` / `r3_deferred_blocks.ts`.
+//!
+//! `fixtures/defer_triggers_ngtsc.json` is a snapshot of what `parseTemplate`
+//! from `@angular/compiler` (version in the file) reports for each template:
+//! the errors (message and span) and the parsed triggers of each kind. Each
+//! case is summarized the same way on both sides, see `summarize`. Expression
+//! parser errors are compared by kind only, since their text carries
+//! positions formatted differently. Cases whose difference lies outside
+//! trigger parsing carry a `skip` reason.
+
+use oxc_allocator::Allocator;
+use oxc_angular_compiler::ast::expression::{AngularExpression, LiteralMapKey};
+use oxc_angular_compiler::ast::r3::{R3DeferredBlockTriggers, R3Node};
+use oxc_angular_compiler::parser::html::HtmlParser;
+use oxc_angular_compiler::transform::html_to_r3::{HtmlToR3Transform, TransformOptions};
+use oxc_span::Span;
+use serde_json::Value;
+
+const FIXTURES: &str = include_str!("fixtures/defer_triggers_ngtsc.json");
+
+fn span(span: Span) -> String {
+    format!("{}..{}", span.start, span.end)
+}
+
+fn opt_span(s: Option<Span>) -> String {
+    s.map_or_else(|| "-".to_string(), span)
+}
+
+fn time(value: f64) -> String {
+    value.to_string()
+}
+
+fn expression_class(expr: &AngularExpression<'_>) -> &'static str {
+    match expr {
+        AngularExpression::Empty(_) => "EmptyExpr",
+        AngularExpression::PropertyRead(_) => "PropertyRead",
+        AngularExpression::Binary(_) => "Binary",
+        AngularExpression::Call(_) => "Call",
+        AngularExpression::LiteralPrimitive(_) => "LiteralPrimitive",
+        _ => "Other",
+    }
+}
+
+/// One trigger set, in the format of the fixture's `on:`/`prefetch:`/`hydrate:` lines.
+fn summarize_triggers(t: &R3DeferredBlockTriggers<'_>) -> String {
+    let reference = |r: &Option<oxc_str::Ident<'_>>| {
+        r.as_ref().map_or_else(|| "-".to_string(), std::string::ToString::to_string)
+    };
+    let mut out = Vec::new();
+    if let Some(w) = &t.when {
+        out.push(format!(
+            "when(value={} span={})",
+            expression_class(&w.value),
+            span(w.source_span)
+        ));
+    }
+    if let Some(i) = &t.idle {
+        out.push(format!(
+            "idle(timeout={} span={} name={})",
+            i.timeout.map_or_else(|| "-".to_string(), time),
+            span(i.source_span),
+            opt_span(i.name_span)
+        ));
+    }
+    if let Some(i) = &t.immediate {
+        out.push(format!("immediate(span={} name={})", span(i.source_span), opt_span(i.name_span)));
+    }
+    if let Some(h) = &t.hover {
+        out.push(format!(
+            "hover(ref={} span={} name={})",
+            reference(&h.reference),
+            span(h.source_span),
+            span(h.name_span)
+        ));
+    }
+    if let Some(tm) = &t.timer {
+        out.push(format!(
+            "timer(delay={} span={} name={})",
+            time(tm.delay),
+            span(tm.source_span),
+            span(tm.name_span)
+        ));
+    }
+    if let Some(i) = &t.interaction {
+        out.push(format!(
+            "interaction(ref={} span={} name={})",
+            reference(&i.reference),
+            span(i.source_span),
+            span(i.name_span)
+        ));
+    }
+    if let Some(v) = &t.viewport {
+        let options = match &v.options {
+            Some(AngularExpression::LiteralMap(map)) => {
+                let keys: Vec<&str> = map
+                    .keys
+                    .iter()
+                    .map(|k| match k {
+                        LiteralMapKey::Property(p) => p.key.as_str(),
+                        LiteralMapKey::Spread(_) => "...",
+                    })
+                    .collect();
+                format!("{{{}}}", keys.join(","))
+            }
+            Some(_) => "?".to_string(),
+            None => "-".to_string(),
+        };
+        out.push(format!(
+            "viewport(ref={} options={options} span={} name={})",
+            reference(&v.reference),
+            span(v.source_span),
+            span(v.name_span)
+        ));
+    }
+    if let Some(n) = &t.never {
+        out.push(format!("never(span={} name={})", span(n.source_span), opt_span(n.name_span)));
+    }
+    out.join(" ")
+}
+
+/// Errors and triggers of the first `@defer` block in `template`, one line each.
+fn summarize(template: &str) -> Vec<String> {
+    let allocator = Allocator::default();
+    let html_result = HtmlParser::new(&allocator, template, "test.html").parse();
+    let mut lines: Vec<String> = html_result
+        .errors
+        .iter()
+        .map(|e| format!("error {}..{} {}", e.span.start.offset, e.span.end.offset, e.msg))
+        .collect();
+
+    let transformer = HtmlToR3Transform::new(&allocator, template, TransformOptions::default());
+    let r3_result = transformer.transform(&html_result.nodes);
+    for e in &r3_result.errors {
+        // Expression parser errors don't carry a span here.
+        if e.span.start.offset == 0 && e.span.end.offset == 0 {
+            lines.push("error Parser Error".to_string());
+        } else {
+            lines.push(format!("error {}..{} {}", e.span.start.offset, e.span.end.offset, e.msg));
+        }
+    }
+
+    if let Some(R3Node::DeferredBlock(block)) =
+        r3_result.nodes.iter().find(|n| matches!(n, R3Node::DeferredBlock(_)))
+    {
+        lines.push(format!("on: {}", summarize_triggers(&block.triggers)));
+        lines.push(format!("prefetch: {}", summarize_triggers(&block.prefetch_triggers)));
+        lines.push(format!("hydrate: {}", summarize_triggers(&block.hydrate_triggers)));
+    }
+    lines
+}
+
+#[test]
+fn defer_triggers_match_ngtsc() {
+    let fixtures: Value = serde_json::from_str(FIXTURES).unwrap();
+    let mut failures = Vec::new();
+    for case in fixtures["cases"].as_array().unwrap() {
+        if case.get("skip").is_some() {
+            continue;
+        }
+        let template = case["template"].as_str().unwrap();
+        let expected: Vec<String> = case["summary"]
+            .as_array()
+            .unwrap()
+            .iter()
+            .map(|l| l.as_str().unwrap().to_string())
+            .collect();
+        let actual = summarize(template);
+        if actual != expected {
+            failures
+                .push(format!("{template:?}\n  expected: {expected:#?}\n  actual:   {actual:#?}"));
+        }
+    }
+    assert!(failures.is_empty(), "{} mismatches:\n{}", failures.len(), failures.join("\n"));
+}
diff --git a/crates/oxc_angular_compiler/tests/fixtures/defer_triggers_ngtsc.json b/crates/oxc_angular_compiler/tests/fixtures/defer_triggers_ngtsc.json
new file mode 100644
index 000000000..bf752deee
--- /dev/null
+++ b/crates/oxc_angular_compiler/tests/fixtures/defer_triggers_ngtsc.json
@@ -0,0 +1,718 @@
+{
+  "compiler": "22.2.2",
+  "cases": [
+    {
+      "template": "@defer (on timer(1s) idle) {x}",
+      "summary": ["error 21..25 Unexpected token \"idle\"", "on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on hover(a) foo) {x}",
+      "summary": ["error 20..23 Unexpected token \"foo\"", "on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on idle, idle) {x}",
+      "summary": [
+        "error 17..21 Duplicate \"idle\" trigger is not allowed",
+        "on: idle(timeout=- span=8..15 name=11..15)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on viewport({trigger: x, rootMargin: '1px'})) {x}",
+      "summary": [
+        "on: viewport(ref=x options={rootMargin} span=8..52 name=11..19)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on viewport({rootMargin: '1px, 2px', threshold: [1, 2]})) {x}",
+      "summary": [
+        "on: viewport(ref=- options={rootMargin,threshold} span=8..64 name=11..19)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on hover(a, b)) {x}",
+      "summary": [
+        "error 11..16 \"hover\" trigger can only have zero or one parameters",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on hover(a), interaction(b)) {x}",
+      "summary": [
+        "on: hover(ref=a span=8..19 name=11..16) interaction(ref=b span=21..35 name=21..32)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on idle,) {x}",
+      "summary": ["on: idle(timeout=- span=8..15 name=11..15)", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on ,idle) {x}",
+      "summary": ["error 11..12 Unexpected token \",\"", "on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on idle()) {x}",
+      "summary": ["on: idle(timeout=- span=8..17 name=11..15)", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on timer) {x}",
+      "summary": [
+        "error 11..16 \"timer\" trigger must have exactly one parameter",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on timer(abc)) {x}",
+      "summary": [
+        "error 11..16 Could not parse time value of trigger \"timer\"",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on timer(1s, 2s)) {x}",
+      "summary": [
+        "error 11..16 \"timer\" trigger must have exactly one parameter",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on immediate(1)) {x}",
+      "summary": [
+        "error 11..20 \"immediate\" trigger cannot have parameters",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on foo) {x}",
+      "summary": [
+        "error 11..14 Unrecognized trigger type \"foo\"",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on never) {x}",
+      "summary": [
+        "error 11..16 Unrecognized trigger type \"never\"",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (when) {x}",
+      "summary": ["error 8..12 Unrecognized trigger", "on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on) {x}",
+      "summary": ["error 8..10 Unrecognized trigger", "on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on ) {x}",
+      "summary": ["on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (when ) {x}",
+      "skip": "Angular parses an empty `when` trigger that ngtsc then fails to compile (EmptyExpr reification); oxc adds no trigger",
+      "summary": ["on: when(value=EmptyExpr span=8..13)", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (prefetch on ) {x}",
+      "summary": ["on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (prefetch on) {x}",
+      "summary": ["error 8..19 Unrecognized trigger", "on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (when a; when b) {x}",
+      "summary": [
+        "error 16..22 Duplicate \"when\" trigger is not allowed",
+        "on: when(value=PropertyRead span=8..14)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (when a +) {x}",
+      "skip": "the expression parser reports \"a +\" twice; it does so for any binding (`[a]=\"a +\"`)",
+      "summary": [
+        "error Parser Error",
+        "on: when(value=Binary span=8..16)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (prefetch when a; hydrate when b) {x}",
+      "summary": [
+        "on: ",
+        "prefetch: when(value=PropertyRead span=8..23)",
+        "hydrate: when(value=PropertyRead span=25..39)"
+      ]
+    },
+    {
+      "template": "@defer (hydrate on hover(a)) {x}",
+      "summary": [
+        "error 19..24 Hydration trigger \"hover\" cannot have parameters",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (hydrate on interaction(a)) {x}",
+      "summary": [
+        "error 19..30 Hydration trigger \"interaction\" cannot have parameters",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (hydrate on viewport(a)) {x}",
+      "summary": [
+        "error 19..27 \"viewport\" hydration trigger cannot have a \"trigger\"",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (hydrate on viewport(a, b)) {x}",
+      "summary": [
+        "error 19..27 Hydration trigger \"viewport\" cannot have more than one parameter",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (hydrate on viewport({rootMargin: '1px'})) {x}",
+      "summary": [
+        "on: ",
+        "prefetch: ",
+        "hydrate: viewport(ref=- options={rootMargin} span=8..48 name=19..27)"
+      ]
+    },
+    {
+      "template": "@defer (hydrate on viewport({trigger: a})) {x}",
+      "summary": [
+        "error 19..27 \"viewport\" hydration trigger cannot have a \"trigger\"",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (hydrate never; hydrate on idle) {x}",
+      "summary": [
+        "error 0..41 Cannot specify additional `hydrate` triggers if `hydrate never` is present",
+        "on: ",
+        "prefetch: ",
+        "hydrate: idle(timeout=- span=23..38 name=34..38) never(span=8..21 name=16..21)"
+      ]
+    },
+    {
+      "template": "@defer (hydrate never; hydrate never) {x}",
+      "summary": [
+        "error 23..36 Duplicate \"never\" trigger is not allowed",
+        "on: ",
+        "prefetch: ",
+        "hydrate: never(span=8..21 name=16..21)"
+      ]
+    },
+    {
+      "template": "@defer (hydrate never ) {x}",
+      "summary": ["on: ", "prefetch: ", "hydrate: never(span=8..22 name=16..21)"]
+    },
+    {
+      "template": "@defer (prefetch on idle; on timer(100ms)) {x}",
+      "summary": [
+        "on: timer(delay=100 span=26..41 name=29..34)",
+        "prefetch: idle(timeout=- span=8..24 name=20..24)",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on viewport(1)) {x}",
+      "summary": ["on: viewport(ref=1 options=- span=8..22 name=11..19)", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on viewport({root: a})) {x}",
+      "summary": [
+        "error 11..19 The \"root\" option is not supported in the options parameter of the \"viewport\" trigger",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on viewport({trigger: a.b})) {x}",
+      "summary": [
+        "error 11..19 \"trigger\" option of the \"viewport\" trigger must be an identifier",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on viewport({trigger: this.a})) {x}",
+      "summary": [
+        "error 11..19 \"trigger\" option of the \"viewport\" trigger must be an identifier",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on viewport({threshold: a})) {x}",
+      "summary": [
+        "error 11..19 Options of the \"viewport\" trigger must be an object literal containing only literal values, but \"PropertyRead\" was found",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on viewport({threshold: [1, a], rootMargin: b()})) {x}",
+      "summary": [
+        "error 11..19 Options of the \"viewport\" trigger must be an object literal containing only literal values, but \"Call\" was found",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on viewport({...a})) {x}",
+      "summary": [
+        "error 11..19 Spread operator are not allowed in this context",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on viewport([a])) {x}",
+      "summary": [
+        "on: viewport(ref=[a] options=- span=8..24 name=11..19)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on viewport({a: })) {x}",
+      "skip": "the expression parser accepts `{a: }` without error; it does so for any binding",
+      "summary": [
+        "error Parser Error",
+        "error 11..19 Options of the \"viewport\" trigger must be an object literal containing only literal values, but \"EmptyExpr\" was found",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on viewport({trigger: a})) {x}",
+      "summary": [
+        "on: viewport(ref=a options={} span=8..33 name=11..19)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on idle, viewport({trigger: a, threshold: 0.5})) {x}",
+      "summary": [
+        "on: idle(timeout=- span=8..15 name=11..15) viewport(ref=a options={threshold} span=17..55 name=17..25)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on idle(100ms)) {x}",
+      "summary": ["on: idle(timeout=100 span=8..22 name=11..15)", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on idle(1, 2)) {x}",
+      "summary": [
+        "error 11..15 \"idle\" trigger can only have zero or one parameters",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on idle(abc)) {x}",
+      "summary": [
+        "error 11..15 Could not parse time value of trigger \"idle\"",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on hover('a,b')) {x}",
+      "summary": ["on: hover(ref='a,b' span=8..23 name=11..16)", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on interaction(fn(a, b))) {x}",
+      "summary": ["on: interaction(ref=fn(a, b) span=8..32 name=11..22)", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (bogus) {x}",
+      "summary": ["error 8..13 Unrecognized trigger", "on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on 1) {x}",
+      "summary": ["error 11..12 Unexpected token \"1\"", "on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on true) {x}",
+      "summary": ["error 11..15 Unexpected token \"true\"", "on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on 'idle') {x}",
+      "summary": ["error 11..17 Unexpected token \"idle\"", "on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on idle timer) {x}",
+      "summary": [
+        "error 16..21 Unexpected token \"timer\"",
+        "error 16..21 \"timer\" trigger must have exactly one parameter",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on  idle ,  timer(500ms) ) {x}",
+      "summary": [
+        "on: idle(timeout=- span=8..16 name=12..16) timer(delay=500 span=20..32 name=20..25)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on idle\n,\ntimer(5)) {x}",
+      "summary": [
+        "on: idle(timeout=- span=8..15 name=11..15) timer(delay=5 span=18..26 name=18..23)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on hover([a, b])) {x}",
+      "summary": ["on: hover(ref=[a, b] span=8..24 name=11..16)", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on hover(a.b)) {x}",
+      "summary": ["on: hover(ref=a.b span=8..21 name=11..16)", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on hover(a)b) {x}",
+      "summary": ["error 19..20 Unexpected token \"b\"", "on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on hover({a)) {x}",
+      "summary": ["error 19..20 Unexpected end of expression", "on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on hover(,a)) {x}",
+      "summary": ["on: hover(ref=,a span=8..20 name=11..16)", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on timer(1s), idle, immediate, hover(a), interaction(b), viewport(c)) {x}",
+      "summary": [
+        "on: idle(timeout=- span=22..26 name=22..26) immediate(span=28..37 name=28..37) hover(ref=a span=39..47 name=39..44) timer(delay=1000 span=8..20 name=11..16) interaction(ref=b span=49..63 name=49..60) viewport(ref=c options=- span=65..76 name=65..73)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on timer(1 s)) {x}",
+      "summary": [
+        "error 11..16 Could not parse time value of trigger \"timer\"",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on timer(1.5s)) {x}",
+      "summary": ["on: timer(delay=1500 span=8..22 name=11..16)", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on hover, hover) {x}",
+      "summary": [
+        "error 18..23 Duplicate \"hover\" trigger is not allowed",
+        "on: hover(ref=- span=8..16 name=11..16)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on immediate; on immediate) {x}",
+      "summary": [
+        "error 22..34 Duplicate \"immediate\" trigger is not allowed",
+        "on: immediate(span=8..20 name=11..20)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on interaction(a); prefetch on interaction(b); hydrate on interaction) {x}",
+      "summary": [
+        "on: interaction(ref=a span=8..25 name=11..22)",
+        "prefetch: interaction(ref=b span=27..53 name=39..50)",
+        "hydrate: interaction(ref=- span=55..77 name=66..77)"
+      ]
+    },
+    {
+      "template": "@defer (on immediate; never) {x}",
+      "summary": [
+        "error 22..27 Unrecognized trigger",
+        "on: immediate(span=8..20 name=11..20)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (hydrate never, and thank you) {x}",
+      "summary": ["error 8..36 Unrecognized trigger", "on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (when isVisible#){hello}",
+      "summary": [
+        "error Parser Error",
+        "error Parser Error",
+        "on: when(value=PropertyRead span=8..23)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (unknown visible()){hello}",
+      "summary": ["error 8..25 Unrecognized trigger", "on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on hover idle) {hello}",
+      "summary": [
+        "error 17..21 Unexpected token \"idle\"",
+        "on: idle(timeout=- span=17..21 name=17..21)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on viewport(button) idle) {hello}",
+      "summary": ["error 28..32 Unexpected token \"idle\"", "on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on viewport(button), , idle) {hello}",
+      "summary": [
+        "error 29..30 Unexpected token \",\"",
+        "on: viewport(ref=button options=- span=8..27 name=11..19)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on viewport(but)ton) {hello}",
+      "summary": ["error 24..27 Unexpected token \"ton\"", "on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on 123) {hello}",
+      "summary": ["error 11..14 Unexpected token \"123\"", "on: ", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on viewport[]) {hello}",
+      "summary": [
+        "error 19..20 Unexpected token \"[\"",
+        "error 19..20 Unexpected token \"[\"",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on idle(123abc)) {hello}",
+      "summary": [
+        "error 11..15 Could not parse time value of trigger \"idle\"",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on interaction(a, b)) {hello}",
+      "summary": [
+        "error 11..22 \"interaction\" trigger can only have zero or one parameters",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on viewport(a, b)) {hello}",
+      "summary": [
+        "error 11..19 \"viewport\" trigger can only have zero or one parameters",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on viewport({trigger: \"str\"})) {hello}",
+      "summary": [
+        "error 11..19 \"trigger\" option of the \"viewport\" trigger must be an identifier",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on viewport({threshold: [1, someVar, 3]})) {hello}",
+      "summary": [
+        "error 11..19 Options of the \"viewport\" trigger must be an object literal containing only literal values, but \"PropertyRead\" was found",
+        "on: ",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on idle; when isVisible(); on timer(10), idle) {hello}",
+      "summary": [
+        "error 49..53 Duplicate \"idle\" trigger is not allowed",
+        "on: when(value=Call span=17..33) idle(timeout=- span=8..15 name=11..15) timer(delay=10 span=35..47 name=38..43)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (prefetch when isVisible(); prefetch when somethingElse()) {hello}",
+      "summary": [
+        "error 35..64 Duplicate \"when\" trigger is not allowed",
+        "on: ",
+        "prefetch: when(value=Call span=8..33)",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (prefetch on idle; prefetch when isVisible(); prefetch on timer(10), idle) {hello}",
+      "summary": [
+        "error 76..80 Duplicate \"idle\" trigger is not allowed",
+        "on: ",
+        "prefetch: when(value=Call span=26..51) idle(timeout=- span=8..24 name=20..24) timer(delay=10 span=53..74 name=65..70)",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (on immediate; hydrate on viewport) {hello}",
+      "summary": [
+        "on: immediate(span=8..20 name=11..20)",
+        "prefetch: ",
+        "hydrate: viewport(ref=- options=- span=22..41 name=33..41)"
+      ]
+    },
+    {
+      "template": "@defer (on immediate; prefetch never) {hello}",
+      "summary": [
+        "error 22..36 Unrecognized trigger",
+        "on: immediate(span=8..20 name=11..20)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (hydrate never; on idle;) {hello}",
+      "summary": [
+        "on: idle(timeout=- span=23..30 name=26..30)",
+        "prefetch: ",
+        "hydrate: never(span=8..21 name=16..21)"
+      ]
+    },
+    {
+      "template": "@defer(hydrate never ; on idle ;) {hello}",
+      "summary": [
+        "on: idle(timeout=- span=23..30 name=26..30)",
+        "prefetch: ",
+        "hydrate: never(span=7..21 name=15..20)"
+      ]
+    },
+    {
+      "template": "@defer(\n        on idle;\n        hydrate never) {hello}",
+      "summary": [
+        "on: idle(timeout=- span=16..23 name=19..23)",
+        "prefetch: ",
+        "hydrate: never(span=33..46 name=41..46)"
+      ]
+    },
+    {
+      "template": "@defer (hydrate never; hydrate when shouldHydrate()) {hello}",
+      "summary": [
+        "error 0..54 Cannot specify additional `hydrate` triggers if `hydrate never` is present",
+        "on: ",
+        "prefetch: ",
+        "hydrate: when(value=Call span=23..51) never(span=8..21 name=16..21)"
+      ]
+    },
+    {
+      "template": "@defer (hydrate when shouldHydrate(); hydrate never) {hello}",
+      "summary": [
+        "error 0..54 Cannot specify additional `hydrate` triggers if `hydrate never` is present",
+        "on: ",
+        "prefetch: ",
+        "hydrate: when(value=Call span=8..36) never(span=38..51 name=46..51)"
+      ]
+    },
+    {
+      "template": "@defer (on\n  timer(1s),\n  hover(a)) {x}",
+      "summary": [
+        "on: hover(ref=a span=26..34 name=26..31) timer(delay=1000 span=8..22 name=13..18)",
+        "prefetch: ",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (prefetch on hover(a), viewport({rootMargin: '1px'})) {x}",
+      "summary": [
+        "on: ",
+        "prefetch: hover(ref=a span=8..28 name=20..25) viewport(ref=- options={rootMargin} span=30..59 name=30..38)",
+        "hydrate: "
+      ]
+    },
+    {
+      "template": "@defer (hydrate on idle, timer(1s), immediate) {x}",
+      "summary": [
+        "on: ",
+        "prefetch: ",
+        "hydrate: idle(timeout=- span=8..23 name=19..23) immediate(span=36..45 name=36..45) timer(delay=1000 span=25..34 name=25..30)"
+      ]
+    },
+    {
+      "template": "@defer (on hover(`a,b`)) {x}",
+      "summary": ["on: hover(ref=`a,b` span=8..23 name=11..16)", "prefetch: ", "hydrate: "]
+    },
+    {
+      "template": "@defer (on hover(a ?? b)) {x}",
+      "summary": ["on: hover(ref=a ?? b span=8..24 name=11..16)", "prefetch: ", "hydrate: "]
+    }
+  ]
+}
diff --git a/napi/angular-compiler/e2e/compare/fixtures/defer/defer-trigger-lists.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/defer/defer-trigger-lists.fixture.ts
new file mode 100644
index 000000000..b520604bd
--- /dev/null
+++ b/napi/angular-compiler/e2e/compare/fixtures/defer/defer-trigger-lists.fixture.ts
@@ -0,0 +1,87 @@
+/**
+ * @defer `on` trigger lists: several comma-separated triggers per parameter,
+ * whitespace and newlines between them, and commas nested inside trigger
+ * arguments (strings, arrays, object literals).
+ */
+import type { Fixture } from '../types.js'
+
+export const fixtures: Fixture[] = [
+  {
+    name: 'defer-on-trigger-list',
+    category: 'defer',
+    description: '@defer with several comma-separated `on` triggers across lines',
+    className: 'DeferOnTriggerListComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-defer-on-trigger-list',
+  standalone: true,
+  template: \`
+    <button #btn>Load</button>
+    @defer (on  idle ,  timer(500ms) ;
+            prefetch on
+              hover(btn),
+              interaction(btn)) {
+      <div>Deferred</div>
+    } @placeholder {
+      <span>Placeholder</span>
+    }
+  \`,
+})
+export class DeferOnTriggerListComponent {}
+    `.trim(),
+    expectedFeatures: ['ɵɵdefer', 'ɵɵdeferOnIdle', 'ɵɵdeferOnTimer', 'ɵɵdeferPrefetchOnHover'],
+  },
+  {
+    name: 'defer-viewport-options-nested-commas',
+    category: 'defer',
+    description: '@defer viewport options whose strings and arrays contain commas',
+    className: 'DeferViewportOptionsNestedCommasComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-defer-viewport-options-nested-commas',
+  standalone: true,
+  template: \`
+    <div #target>Target</div>
+    @defer (on idle, viewport({trigger: target, rootMargin: '1px, 2px', threshold: [0, 0.5, 1]})) {
+      <div>Deferred</div>
+    }
+  \`,
+})
+export class DeferViewportOptionsNestedCommasComponent {}
+    `.trim(),
+    expectedFeatures: ['ɵɵdefer', 'ɵɵdeferOnIdle', 'ɵɵdeferOnViewport'],
+  },
+  {
+    name: 'defer-prefetch-hydrate-trigger-lists',
+    category: 'defer',
+    description: '@defer with `prefetch on` and `hydrate on` trigger lists',
+    className: 'DeferPrefetchHydrateTriggerListsComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-defer-prefetch-hydrate-trigger-lists',
+  standalone: true,
+  template: \`
+    <div #anchor>Anchor</div>
+    @defer (on timer(1.5s), hover(anchor);
+            prefetch on hover(anchor), viewport({rootMargin: '10px'});
+            hydrate on idle, timer(1s), immediate) {
+      <div>Deferred</div>
+    } @placeholder {
+      <span>Placeholder</span>
+    }
+  \`,
+})
+export class DeferPrefetchHydrateTriggerListsComponent {}
+    `.trim(),
+    expectedFeatures: ['ɵɵdefer', 'ɵɵdeferPrefetchOnViewport', 'ɵɵdeferHydrateOnTimer'],
+  },
+]

From af567ef4fcd60237b40710f59e7ddbeb7f6bcd3c Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:07:38 +0800
Subject: [PATCH 19/54] fix(security): sanitize static and i18n attributes like
 ngtsc
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Static attributes were ingested with SecurityContext::None, so a constant
like `<iframe srcdoc="...">` or `<script src="...">` was emitted as a plain
string. ngtsc wraps these in ɵɵtrustConstantHtml / ɵɵtrustConstantResourceUrl.

- ingest: compute the security context of static attributes from the
  element tag (with its :svg:/:math: prefix), ng-template, or ng-content,
  as Angular's ingest does.
- const_collection: when an extracted attribute has a trusted value fn,
  emit it as a tagged template (i0.ɵɵtrustConstantX`...`).
- resolve_sanitizers: do not set trusted value fns on host attributes;
  upstream skips this for host jobs.
- Port resolveI18nAttrSanitizers. It wraps translated attribute values
  (e.g. `<a href="..." i18n-href>`) in the matching sanitizer or in
  ɵɵvalidateAttribute. It runs right after collectI18nConsts, as upstream
  does. It is limited to the Angular versions that have upstream commit
  61a97f22e8 (19.2.23+, 20.3.22+, 21.2.15+, 22+), the same gate as
  normalizeTagName.

Tests: integration tests check the exact output of ngtsc 22.2.2 for the
security_sensitive_constant_attributes compliance case, templates, host
attributes, i18n attributes, and the version gate. A new e2e compare
fixture file covers the same cases.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/pipeline/ingest.rs                    |  59 ++++++-
 .../src/pipeline/phases/const_collection.rs   | 122 ++++++++++++--
 .../src/pipeline/phases/mod.rs                |   8 +
 .../phases/resolve_i18n_attr_sanitizers.rs    | 131 +++++++++++++++
 .../src/pipeline/phases/resolve_sanitizers.rs |  13 +-
 .../src/schema/dom_security_schema.rs         |  11 ++
 crates/oxc_angular_compiler/src/schema/mod.rs |   4 +-
 .../tests/integration_test.rs                 | 149 ++++++++++++++++++
 .../security-sensitive-constants.fixture.ts   | 131 +++++++++++++++
 9 files changed, 594 insertions(+), 34 deletions(-)
 create mode 100644 crates/oxc_angular_compiler/src/pipeline/phases/resolve_i18n_attr_sanitizers.rs
 create mode 100644 napi/angular-compiler/e2e/compare/fixtures/regressions/security-sensitive-constants.fixture.ts

diff --git a/crates/oxc_angular_compiler/src/pipeline/ingest.rs b/crates/oxc_angular_compiler/src/pipeline/ingest.rs
index d9589d50f..2304a4545 100644
--- a/crates/oxc_angular_compiler/src/pipeline/ingest.rs
+++ b/crates/oxc_angular_compiler/src/pipeline/ingest.rs
@@ -1288,7 +1288,16 @@ fn ingest_element<'a>(
     // so that binding_specialization can detect ngNonBindable and other special attributes.
     // Note: We preserve i18n metadata for i18n-marked text attributes (e.g., tooltip="text" i18n-tooltip)
     // Element attributes are not structural template attributes
-    ingest_static_attributes_with_i18n(job, view_xref, xref, &element.attributes, false);
+    // Angular looks attributes up under the element's full name, which already
+    // carries any `:svg:` / `:math:` prefix.
+    ingest_static_attributes_with_i18n(
+        job,
+        view_xref,
+        xref,
+        element.name.as_str(),
+        &element.attributes,
+        false,
+    );
 
     // Ingest bindings BEFORE children to ensure update ops are in slot order.
     // This matches Angular's TypeScript implementation in ingest.ts.
@@ -1408,6 +1417,7 @@ fn ingest_static_attributes_with_i18n<'a>(
     job: &mut ComponentCompilationJob<'a>,
     view_xref: XrefId,
     element_xref: XrefId,
+    security_tag: &str,
     attributes: &[R3TextAttribute<'a>],
     is_structural_template_attribute: bool,
 ) {
@@ -1418,6 +1428,12 @@ fn ingest_static_attributes_with_i18n<'a>(
     for attr in attributes {
         let name = attr.name.clone();
         let value = attr.value.clone();
+        // `domSchema.securityContext(tag, attr.name, true)` in Angular's ingest.
+        let security_context = crate::schema::get_security_context_for(
+            security_tag,
+            name.as_str(),
+            job.angular_version,
+        );
 
         // ngNonBindable and animate.* require special handling
         if name.as_str() == "ngNonBindable" || name.as_str().starts_with("animate.") {
@@ -1434,7 +1450,7 @@ fn ingest_static_attributes_with_i18n<'a>(
                 name,
                 expression: Box::new_in(value_expr, &allocator),
                 unit: None,
-                security_context: SecurityContext::None,
+                security_context,
                 i18n_message: None,
                 is_text_attribute: true,
             };
@@ -1496,7 +1512,7 @@ fn ingest_static_attributes_with_i18n<'a>(
             namespace,
             name: local_name,
             value: Some(Box::new_in(value_expr, &allocator)),
-            security_context: SecurityContext::None,
+            security_context,
             truthy_expression: false,
             i18n_context: None,
             i18n_message,
@@ -1528,6 +1544,7 @@ fn ingest_single_static_attribute<'a>(
     job: &mut ComponentCompilationJob<'a>,
     view_xref: XrefId,
     element_xref: XrefId,
+    security_tag: &str,
     name: Ident<'a>,
     value: Ident<'a>,
     is_structural_template_attribute: bool,
@@ -1535,6 +1552,9 @@ fn ingest_single_static_attribute<'a>(
     use crate::output::ast::{LiteralExpr, LiteralValue, OutputExpression};
 
     let allocator = job.allocator;
+    // `domSchema.securityContext(tag, attr.name, true)` in Angular's ingest.
+    let security_context =
+        crate::schema::get_security_context_for(security_tag, name.as_str(), job.angular_version);
 
     let literal_expr = OutputExpression::Literal(Box::new_in(
         LiteralExpr { value: LiteralValue::String(value), source_span: None },
@@ -1554,7 +1574,7 @@ fn ingest_single_static_attribute<'a>(
             name,
             expression: Box::new_in(value_expr, &allocator),
             unit: None,
-            security_context: SecurityContext::None,
+            security_context,
             i18n_message: None,
             is_text_attribute: true,
         });
@@ -1576,7 +1596,7 @@ fn ingest_single_static_attribute<'a>(
             namespace,
             name: local_name,
             value: Some(Box::new_in(value_expr, &allocator)),
-            security_context: SecurityContext::None,
+            security_context,
             truthy_expression: false,
             i18n_context: None,
             i18n_message: None,
@@ -2082,7 +2102,15 @@ fn ingest_template<'a>(
             R3TemplateAttr::Text(attr) => {
                 // Static structural template attributes (e.g., ngFor from *ngFor="let item of items")
                 // Process inline to preserve ordering
-                ingest_single_static_attribute(job, view_xref, xref, attr.name, attr.value, true);
+                ingest_single_static_attribute(
+                    job,
+                    view_xref,
+                    xref,
+                    NG_TEMPLATE_TAG_NAME,
+                    attr.name,
+                    attr.value,
+                    true,
+                );
             }
         }
     }
@@ -2093,7 +2121,15 @@ fn ingest_template<'a>(
     // Angular's TS passes asMessage(attr.i18n) to createTemplateBinding (ingest.ts line 1497).
     if !attributes.is_empty() {
         // Hoisted attributes from wrapped element are regular attributes, not Template
-        ingest_static_attributes_with_i18n(job, view_xref, xref, &attributes, false);
+        // Angular looks template attributes up under `ng-template`, whatever the tag.
+        ingest_static_attributes_with_i18n(
+            job,
+            view_xref,
+            xref,
+            NG_TEMPLATE_TAG_NAME,
+            &attributes,
+            false,
+        );
     }
 
     // Process hoisted inputs from the wrapped element (e.g., [class]="..." on <div *ngIf>).
@@ -2377,6 +2413,13 @@ fn ingest_content<'a>(
     //   }
     let mut binding_ops: std::vec::Vec<UpdateOp<'a>> = std::vec::Vec::new();
     for attr in content.attributes {
+        // `domSchema.securityContext(content.name, attr.name, true)`; `content.name`
+        // is always `ng-content`.
+        let security_context = crate::schema::get_security_context_for(
+            "ng-content",
+            attr.name.as_str(),
+            job.angular_version,
+        );
         // Create a string literal expression for the attribute value
         let value_expr = create_string_literal_atom(allocator, attr.value);
         let binding_op = UpdateOp::Binding(BindingOp {
@@ -2386,7 +2429,7 @@ fn ingest_content<'a>(
             name: attr.name,
             expression: Box::new_in(value_expr, &allocator),
             unit: None,
-            security_context: SecurityContext::None,
+            security_context,
             i18n_message: None,
             is_text_attribute: true, // Static attributes are always text attributes
         });
diff --git a/crates/oxc_angular_compiler/src/pipeline/phases/const_collection.rs b/crates/oxc_angular_compiler/src/pipeline/phases/const_collection.rs
index bacd8b7b5..f2cf356d6 100644
--- a/crates/oxc_angular_compiler/src/pipeline/phases/const_collection.rs
+++ b/crates/oxc_angular_compiler/src/pipeline/phases/const_collection.rs
@@ -18,23 +18,31 @@ use oxc_allocator::Box;
 use crate::ir::enums::{BindingKind, CompatibilityMode};
 use crate::ir::expression::IrExpression;
 use crate::ir::ops::{CreateOp, ExtractedAttributeOp, XrefId};
-use crate::output::ast::{LiteralArrayExpr, LiteralExpr, LiteralValue, OutputExpression};
+use crate::output::ast::{
+    LiteralArrayExpr, LiteralExpr, LiteralValue, OutputExpression, ReadPropExpr, ReadVarExpr,
+    TaggedTemplateLiteralExpr, TemplateLiteralElement, TemplateLiteralExpr,
+};
 use crate::pipeline::compilation::{
     ComponentCompilationJob, ConstValue, HostBindingCompilationJob,
 };
+use crate::pipeline::conversion::cooked_to_raw_text;
 use crate::pipeline::selector::{parse_selector_to_r3_selector, r3_selector_to_output_expr};
 
 /// Represents an attribute value that can be either a string literal or an i18n variable reference.
 ///
 /// This is needed to support i18n attributes where the value is a reference to an i18n
 /// variable (e.g., I18N_0) rather than a literal string.
-#[derive(Debug, Clone)]
+#[derive(Debug)]
 enum AttributeValue<'a> {
     /// A string literal value.
     String(Ident<'a>),
     /// An i18n variable reference (stores just the variable name for efficient comparison).
     /// This will be serialized as a ReadVar expression in the const array.
     I18nVar(Ident<'a>),
+    /// Any other value expression: a string literal tagged with its trusted value
+    /// function (`i0.ɵɵtrustConstantHtml`...``), or an i18n variable wrapped in a
+    /// sanitizer by `resolve_i18n_attr_sanitizers`.
+    Expression(OutputExpression<'a>),
 }
 
 /// Marker values for attribute arrays (matches Angular's AttributeMarker enum).
@@ -64,6 +72,10 @@ enum AttributeMarker {
 /// where duplicate attribute, class, and style values are only allowed in
 /// TemplateDefinitionBuilder compatibility mode.
 struct ElementAttributes<'a> {
+    /// Allocator for the value expressions built by `add`.
+    allocator: &'a oxc_allocator::Allocator,
+    /// Namespace of `@angular/core` imports (`i0`), for trusted value functions.
+    core_namespace: Ident<'a>,
     /// Compatibility mode - determines whether duplicates are allowed.
     compatibility: CompatibilityMode,
     /// Tracks known (kind, name) pairs to prevent duplicates.
@@ -88,8 +100,14 @@ struct ElementAttributes<'a> {
 
 impl<'a> ElementAttributes<'a> {
     /// Creates a new ElementAttributes with the specified compatibility mode.
-    fn new(compatibility: CompatibilityMode) -> Self {
+    fn new(
+        allocator: &'a oxc_allocator::Allocator,
+        core_namespace: Ident<'a>,
+        compatibility: CompatibilityMode,
+    ) -> Self {
         Self {
+            allocator,
+            core_namespace,
             compatibility,
             known: std::collections::HashMap::default(),
             attributes: std::vec::Vec::new(),
@@ -153,7 +171,7 @@ impl<'a> ElementAttributes<'a> {
             BindingKind::Attribute => {
                 // For attributes, we store namespace, name, and value
                 // Extract the actual value from the expression if available
-                let value = Self::extract_attribute_value(attr);
+                let value = self.extract_attribute_value(attr);
 
                 // Check for ngProjectAs attribute - store its value for special handling
                 // ngProjectAs must have a string literal value, not an i18n variable reference
@@ -170,7 +188,7 @@ impl<'a> ElementAttributes<'a> {
             }
             BindingKind::StyleProperty => {
                 // Styles only support string values, not i18n variable references
-                let value = Self::extract_attribute_value(attr);
+                let value = self.extract_attribute_value(attr);
                 let string_value = match value {
                     Some(AttributeValue::String(s)) => Some(s),
                     _ => None,
@@ -214,7 +232,7 @@ impl<'a> ElementAttributes<'a> {
         match attr.binding_kind {
             BindingKind::Attribute => {
                 // For attributes, we store namespace, name, and value
-                let value = Self::extract_attribute_value(attr);
+                let value = self.extract_attribute_value(attr);
 
                 // Check for ngProjectAs attribute - store its value for special handling
                 // ngProjectAs must have a string literal value, not an i18n variable reference
@@ -231,7 +249,7 @@ impl<'a> ElementAttributes<'a> {
             }
             BindingKind::StyleProperty => {
                 // Styles only support string values, not i18n variable references
-                let value = Self::extract_attribute_value(attr);
+                let value = self.extract_attribute_value(attr);
                 let string_value = match value {
                     Some(AttributeValue::String(s)) => Some(s),
                     _ => None,
@@ -261,7 +279,20 @@ impl<'a> ElementAttributes<'a> {
     /// For static attributes, the value is stored as a literal string expression.
     /// For i18n attributes, the value may be a ReadVar expression referencing an i18n variable.
     /// For truthy expressions (e.g., boolean attributes), we return an empty string.
-    fn extract_attribute_value(attr: &ExtractedAttributeOp<'a>) -> Option<AttributeValue<'a>> {
+    ///
+    /// A string literal with a trusted value function becomes a tagged template, as in
+    /// Angular's `ElementAttributes.add`:
+    /// ```typescript
+    /// if (trustedValueFn !== null && ir.isStringLiteral(value)) {
+    ///   array.push(o.taggedTemplate(trustedValueFn, new o.TemplateLiteralExpr(...)));
+    /// } else {
+    ///   array.push(value);
+    /// }
+    /// ```
+    fn extract_attribute_value(
+        &self,
+        attr: &ExtractedAttributeOp<'a>,
+    ) -> Option<AttributeValue<'a>> {
         use crate::ast::expression::AngularExpression;
         use crate::output::ast::LiteralValue;
 
@@ -273,21 +304,26 @@ impl<'a> ElementAttributes<'a> {
                     match output_expr.as_ref() {
                         OutputExpression::Literal(lit) => {
                             if let LiteralValue::String(s) = &lit.value {
-                                return Some(AttributeValue::String(s.clone()));
+                                return Some(self.string_value(attr, s));
                             }
                         }
                         // Handle ReadVar expressions (i18n variable references)
                         OutputExpression::ReadVar(read_var) => {
                             return Some(AttributeValue::I18nVar(read_var.name.clone()));
                         }
-                        _ => {}
+                        // Other expressions (e.g. sanitized i18n variables) are kept as-is.
+                        other => {
+                            return Some(AttributeValue::Expression(
+                                other.clone_in(self.allocator),
+                            ));
+                        }
                     }
                 }
                 // Handle IrExpression::Ast for style values created by parse_extracted_styles
                 IrExpression::Ast(ast_expr) => {
                     if let AngularExpression::LiteralPrimitive(lit) = ast_expr.as_ref() {
                         if let crate::ast::expression::LiteralValue::String(s) = &lit.value {
-                            return Some(AttributeValue::String(s.clone()));
+                            return Some(self.string_value(attr, s));
                         }
                     }
                 }
@@ -299,6 +335,55 @@ impl<'a> ElementAttributes<'a> {
         if attr.truthy_expression { Some(AttributeValue::String(Ident::from(""))) } else { None }
     }
 
+    /// A string literal attribute value, tagged with the attribute's trusted value
+    /// function when it has one (e.g. `i0.ɵɵtrustConstantResourceUrl`https://x``).
+    fn string_value(
+        &self,
+        attr: &ExtractedAttributeOp<'a>,
+        value: &Ident<'a>,
+    ) -> AttributeValue<'a> {
+        let Some(trusted_value_fn) = &attr.trusted_value_fn else {
+            return AttributeValue::String(*value);
+        };
+        let allocator = self.allocator;
+        let tag = OutputExpression::ReadProp(Box::new_in(
+            ReadPropExpr {
+                receiver: Box::new_in(
+                    OutputExpression::ReadVar(Box::new_in(
+                        ReadVarExpr { name: self.core_namespace, source_span: None },
+                        &allocator,
+                    )),
+                    &allocator,
+                ),
+                name: *trusted_value_fn,
+                optional: false,
+                source_span: None,
+            },
+            &allocator,
+        ));
+        let mut elements = OxcVec::with_capacity_in(1, &allocator);
+        elements.push(TemplateLiteralElement {
+            text: *value,
+            raw_text: cooked_to_raw_text(allocator, value.as_str()),
+            source_span: None,
+        });
+        AttributeValue::Expression(OutputExpression::TaggedTemplateLiteral(Box::new_in(
+            TaggedTemplateLiteralExpr {
+                tag: Box::new_in(tag, &allocator),
+                template: Box::new_in(
+                    TemplateLiteralExpr {
+                        elements,
+                        expressions: OxcVec::new_in(&allocator),
+                        source_span: None,
+                    },
+                    &allocator,
+                ),
+                source_span: None,
+            },
+            &allocator,
+        )))
+    }
+
     fn is_empty(&self) -> bool {
         self.attributes.is_empty()
             && self.classes.is_empty()
@@ -343,6 +428,9 @@ fn serialize_attributes<'a>(
                     ));
                     elements.push(ConstValue::Expression(read_var));
                 }
+                AttributeValue::Expression(expr) => {
+                    elements.push(ConstValue::Expression(expr.clone_in(allocator)));
+                }
             }
         }
     }
@@ -462,6 +550,9 @@ fn serialize_attributes_to_array_expr<'a>(
                         &allocator,
                     )));
                 }
+                AttributeValue::Expression(expr) => {
+                    entries.push(expr.clone_in(allocator));
+                }
             }
         }
     }
@@ -622,6 +713,7 @@ enum XrefToAssign {
 pub fn collect_element_consts(job: &mut ComponentCompilationJob<'_>) {
     let allocator = job.allocator;
     let compatibility = job.compatibility_mode;
+    let core_namespace = job.core_namespace;
 
     // Collect all extracted attributes grouped by target element
     // Ported from const_collection.ts lines 26-37
@@ -639,9 +731,9 @@ pub fn collect_element_consts(job: &mut ComponentCompilationJob<'_>) {
             loop {
                 let should_remove = if let Some(op) = cursor.current() {
                     if let CreateOp::ExtractedAttribute(attr) = op {
-                        let attrs = all_element_attrs
-                            .entry(attr.target)
-                            .or_insert_with(|| ElementAttributes::new(compatibility));
+                        let attrs = all_element_attrs.entry(attr.target).or_insert_with(|| {
+                            ElementAttributes::new(allocator, core_namespace, compatibility)
+                        });
                         attrs.add(attr);
                         true
                     } else {
@@ -899,7 +991,7 @@ pub fn collect_element_consts_for_host(job: &mut HostBindingCompilationJob<'_>)
     let compatibility = job.compatibility_mode;
 
     // Collect all extracted attributes from the root unit
-    let mut attrs = ElementAttributes::new(compatibility);
+    let mut attrs = ElementAttributes::new(allocator, job.core_namespace, compatibility);
 
     // First pass: Collect extracted attributes and mark them for removal
     // Use add_for_host which skips Property/TwoWayProperty bindings since those
diff --git a/crates/oxc_angular_compiler/src/pipeline/phases/mod.rs b/crates/oxc_angular_compiler/src/pipeline/phases/mod.rs
index d326e0c50..8ed2508a7 100644
--- a/crates/oxc_angular_compiler/src/pipeline/phases/mod.rs
+++ b/crates/oxc_angular_compiler/src/pipeline/phases/mod.rs
@@ -64,6 +64,7 @@ mod remove_unused_i18n_attrs;
 mod resolve_contexts;
 mod resolve_defer_deps_fns;
 mod resolve_dollar_event;
+mod resolve_i18n_attr_sanitizers;
 mod resolve_i18n_element_placeholders;
 mod resolve_i18n_expression_placeholders;
 mod resolve_names;
@@ -500,6 +501,13 @@ pub static PHASES: &[Phase] = &[
         run_host: None,
         name: "collectI18nConsts",
     },
+    // Phase 52b: resolveI18nAttrSanitizers (Template only)
+    Phase {
+        kind: CompilationJobKind::Template,
+        run: resolve_i18n_attr_sanitizers::resolve_i18n_attr_sanitizers,
+        run_host: None,
+        name: "resolveI18nAttrSanitizers",
+    },
     // Phase 53: collectConstExpressions (Template only)
     Phase {
         kind: CompilationJobKind::Template,
diff --git a/crates/oxc_angular_compiler/src/pipeline/phases/resolve_i18n_attr_sanitizers.rs b/crates/oxc_angular_compiler/src/pipeline/phases/resolve_i18n_attr_sanitizers.rs
new file mode 100644
index 000000000..ce147fb5f
--- /dev/null
+++ b/crates/oxc_angular_compiler/src/pipeline/phases/resolve_i18n_attr_sanitizers.rs
@@ -0,0 +1,131 @@
+//! Resolve i18n attribute sanitizers phase.
+//!
+//! Wraps static i18n extracted attributes in their corresponding
+//! sanitizers/validators, e.g. `<a href="..." i18n-href>` becomes
+//! `["href", i0.ɵɵsanitizeUrl(i18n_0)]` in the consts array.
+//!
+//! Ported from Angular's `template/pipeline/src/phases/resolve_i18n_attr_sanitizers.ts`.
+
+use oxc_allocator::{Allocator, Box, Vec as OxcVec};
+use oxc_str::Ident;
+use rustc_hash::FxHashMap;
+
+use crate::ast::r3::SecurityContext;
+use crate::ir::expression::IrExpression;
+use crate::ir::ops::{CreateOp, XrefId};
+use crate::output::ast::{
+    InvokeFunctionExpr, LiteralExpr, LiteralValue, OutputExpression, ReadPropExpr, ReadVarExpr,
+};
+use crate::pipeline::compilation::ComponentCompilationJob;
+use crate::pipeline::conversion::prefix_with_namespace;
+use crate::r3::Identifiers;
+use crate::schema::sanitizes_i18n_attrs;
+
+/// Wraps static i18n extracted attributes in their corresponding sanitizers/validators.
+///
+/// Only Angular versions with compile-time i18n attribute validation run this
+/// (see [`sanitizes_i18n_attrs`]).
+pub fn resolve_i18n_attr_sanitizers(job: &mut ComponentCompilationJob<'_>) {
+    if !sanitizes_i18n_attrs(job.angular_version) {
+        return;
+    }
+
+    let allocator = job.allocator;
+    let core_namespace = job.core_namespace;
+
+    // Upstream keys the `:svg:` / `:math:` qualified tag of every element and
+    // template by xref, for `ɵɵvalidateAttribute`'s tag argument.
+    let mut tag_names_by_element: FxHashMap<XrefId, String> = FxHashMap::default();
+    for view in job.all_views() {
+        for op in view.create.iter() {
+            let (xref, tag, namespace) = match op {
+                CreateOp::ElementStart(op) => (op.xref, Some(&op.tag), op.namespace),
+                CreateOp::Template(op) => (op.xref, op.tag.as_ref(), op.namespace),
+                _ => continue,
+            };
+            let tag = tag.map_or("", |tag| tag.as_str());
+            tag_names_by_element.insert(xref, prefix_with_namespace(tag, namespace));
+        }
+    }
+
+    for view in job.all_views_mut() {
+        for op in view.create.iter_mut() {
+            let CreateOp::ExtractedAttribute(attr) = op else { continue };
+            if attr.i18n_context.is_none() || attr.value.is_none() {
+                continue;
+            }
+
+            let sanitizer = match attr.security_context {
+                SecurityContext::Html => Identifiers::SANITIZE_HTML,
+                SecurityContext::Style => Identifiers::SANITIZE_STYLE,
+                SecurityContext::Script => Identifiers::SANITIZE_SCRIPT,
+                SecurityContext::Url => Identifiers::SANITIZE_URL,
+                SecurityContext::ResourceUrl => Identifiers::SANITIZE_RESOURCE_URL,
+                SecurityContext::AttributeNoBinding => Identifiers::VALIDATE_ATTRIBUTE,
+                SecurityContext::None | SecurityContext::UrlOrResourceUrl => continue,
+            };
+            // The value is the i18n variable read set by `collect_i18n_consts`.
+            let Some(value) = attr.value.take() else { continue };
+            let expr = match Box::unbox(value) {
+                IrExpression::OutputExpr(expr) => Box::unbox(expr),
+                other => {
+                    attr.value = Some(Box::new_in(other, &allocator));
+                    continue;
+                }
+            };
+            let mut args = OxcVec::with_capacity_in(3, &allocator);
+            args.push(expr);
+            if attr.security_context == SecurityContext::AttributeNoBinding {
+                let tag = tag_names_by_element.get(&attr.target).map_or("", String::as_str);
+                args.push(string_literal(allocator, Ident::from(allocator.alloc_str(tag))));
+                args.push(string_literal(allocator, attr.name));
+            }
+            let call = call_core_fn(allocator, core_namespace, sanitizer, args);
+            attr.value = Some(Box::new_in(
+                IrExpression::OutputExpr(Box::new_in(call, &allocator)),
+                &allocator,
+            ));
+        }
+    }
+}
+
+fn string_literal<'a>(allocator: &'a Allocator, value: Ident<'a>) -> OutputExpression<'a> {
+    OutputExpression::Literal(Box::new_in(
+        LiteralExpr { value: LiteralValue::String(value), source_span: None },
+        &allocator,
+    ))
+}
+
+/// `o.importExpr(Identifiers.<name>).callFn(args)`: `i0.<name>(...args)`.
+fn call_core_fn<'a>(
+    allocator: &'a Allocator,
+    core_namespace: Ident<'a>,
+    name: &'static str,
+    args: OxcVec<'a, OutputExpression<'a>>,
+) -> OutputExpression<'a> {
+    let fn_expr = OutputExpression::ReadProp(Box::new_in(
+        ReadPropExpr {
+            receiver: Box::new_in(
+                OutputExpression::ReadVar(Box::new_in(
+                    ReadVarExpr { name: core_namespace, source_span: None },
+                    &allocator,
+                )),
+                &allocator,
+            ),
+            name: Ident::from(name),
+            optional: false,
+            source_span: None,
+        },
+        &allocator,
+    ));
+    OutputExpression::InvokeFunction(Box::new_in(
+        InvokeFunctionExpr {
+            fn_expr: Box::new_in(fn_expr, &allocator),
+            args,
+            pure: false,
+            optional: false,
+            source_span: None,
+        },
+        &allocator,
+    ))
+}
diff --git a/crates/oxc_angular_compiler/src/pipeline/phases/resolve_sanitizers.rs b/crates/oxc_angular_compiler/src/pipeline/phases/resolve_sanitizers.rs
index 3848d7174..9e0820756 100644
--- a/crates/oxc_angular_compiler/src/pipeline/phases/resolve_sanitizers.rs
+++ b/crates/oxc_angular_compiler/src/pipeline/phases/resolve_sanitizers.rs
@@ -186,18 +186,13 @@ pub fn resolve_sanitizers(job: &mut ComponentCompilationJob<'_>) {
 /// Resolves sanitizers for host binding compilation.
 ///
 /// Host version - only processes the root unit (no embedded views).
+///
+/// Unlike templates, host attributes get no trusted value functions: upstream
+/// skips that step when `job.kind === CompilationJobKind.Host`, so
+/// `host: {'srcdoc': '...'}` stays a plain string in `hostAttrs`.
 pub fn resolve_sanitizers_for_host(job: &mut HostBindingCompilationJob<'_>) {
     let iframe_validation = uses_iframe_attr_validation(job.angular_version);
 
-    // Process create ops - set trusted value functions for extracted attributes
-    for op in job.root.create.iter_mut() {
-        if let CreateOp::ExtractedAttribute(attr) = op {
-            if let Some(fn_name) = get_trusted_value_fn(attr.security_context) {
-                attr.trusted_value_fn = Some(Ident::from(fn_name));
-            }
-        }
-    }
-
     // Process update ops - set sanitizers for property/attribute bindings
     for op in job.root.update.iter_mut() {
         let (name, sanitizer) = match op {
diff --git a/crates/oxc_angular_compiler/src/schema/dom_security_schema.rs b/crates/oxc_angular_compiler/src/schema/dom_security_schema.rs
index 4300e9d56..1c3b42d30 100644
--- a/crates/oxc_angular_compiler/src/schema/dom_security_schema.rs
+++ b/crates/oxc_angular_compiler/src/schema/dom_security_schema.rs
@@ -179,6 +179,17 @@ pub fn rejects_iframe_src_i18n(version: Option<crate::AngularVersion>) -> bool {
     security_profile(version).iframe_src_i18n
 }
 
+/// Whether the `resolveI18nAttrSanitizers` phase runs.
+///
+/// The phase wraps static i18n attribute values in their sanitizer /
+/// `ɵɵvalidateAttribute`. It landed in the same upstream commit as
+/// `normalizeTagName` ("prefix-insensitive DOM schema lookups and compile-time
+/// i18n attribute validation", angular/angular@61a97f22e8), so it shares that
+/// version range.
+pub fn sanitizes_i18n_attrs(version: Option<crate::AngularVersion>) -> bool {
+    security_profile(version).normalizes_tag_names
+}
+
 /// Whether `resolve_sanitizers` applies the `ɵɵvalidateIframeAttribute`
 /// fallback. Upstream kept it on versions without the iframe
 /// `attributeNoBinding` schema keys (everything before 19.2.17 / 20.3.15 /
diff --git a/crates/oxc_angular_compiler/src/schema/mod.rs b/crates/oxc_angular_compiler/src/schema/mod.rs
index a2208a395..12c8a531a 100644
--- a/crates/oxc_angular_compiler/src/schema/mod.rs
+++ b/crates/oxc_angular_compiler/src/schema/mod.rs
@@ -10,7 +10,7 @@ pub use dom_security_schema::{
     calc_security_context_for_unknown_element, element_security_context_for, get_security_context,
     get_security_context_for, host_binding_security_context, host_binding_security_context_for,
     is_iframe_security_sensitive_attr, is_known_element, rejects_iframe_src_i18n,
-    strips_namespaced_svg_script, strips_namespaced_svg_style, uses_iframe_attr_validation,
-    uses_namespaced_schema,
+    sanitizes_i18n_attrs, strips_namespaced_svg_script, strips_namespaced_svg_style,
+    uses_iframe_attr_validation, uses_namespaced_schema,
 };
 pub use trusted_types_sinks::{is_trusted_types_sink, is_trusted_types_sink_at};
diff --git a/crates/oxc_angular_compiler/tests/integration_test.rs b/crates/oxc_angular_compiler/tests/integration_test.rs
index e3ae0b37b..6bc567420 100644
--- a/crates/oxc_angular_compiler/tests/integration_test.rs
+++ b/crates/oxc_angular_compiler/tests/integration_test.rs
@@ -17851,3 +17851,152 @@ fn test_lone_surrogate_host_listener_argument_is_diagnostic() {
         assert_eq!(expect_diagnostics(&source), [expected], "`{member}`");
     }
 }
+
+// ============================================================================
+// Security-sensitive static attributes
+// ============================================================================
+// Constant values of security-sensitive attributes become trusted constants in
+// the consts array (`ɵɵtrustConstantHtml` / `ɵɵtrustConstantResourceUrl`), host
+// attributes stay plain, and static i18n attributes are wrapped in their
+// sanitizer by `resolveI18nAttrSanitizers` (19.2.23 / 20.3.22 / 21.2.15 / 22+).
+
+/// Compiles `template` in a component for `version` and returns the code with
+/// all whitespace removed.
+fn compile_component_compact(template: &str, version: Option<AngularVersion>) -> String {
+    let allocator = Allocator::default();
+    let source = format!(
+        "import {{ Component }} from '@angular/core';\n\
+         @Component({{ selector: 'my-component', template: {template:?} }})\n\
+         export class MyComponent {{}}\n"
+    );
+    let options = ComponentTransformOptions { angular_version: version, ..Default::default() };
+    let result = transform_angular_file(&allocator, "test.ts", &source, Some(&options), None);
+    assert!(!result.has_errors(), "Should not have errors: {:?}", result.diagnostics);
+    result.code.chars().filter(|c| !c.is_whitespace()).collect()
+}
+
+/// Port of `r3_compiler_compliance/elements/security_sensitive_constant_attributes`.
+#[test]
+fn test_security_sensitive_constant_attributes_use_trusted_value_fns() {
+    let code = compile_component_compact(
+        r#"<embed src="https://angular.io/" />
+        <iframe srcdoc="<h1>Angular</h1>"></iframe>
+        <object data="https://angular.io/" codebase="/"></object>
+        <embed src="https://angular.io/" />
+        <img src="https://angular.io/" />"#,
+        None,
+    );
+    assert!(
+        code.contains(
+            "consts:[[\"src\",i0.ɵɵtrustConstantResourceUrl`https://angular.io/`],\
+             [\"srcdoc\",i0.ɵɵtrustConstantHtml`<h1>Angular</h1>`],\
+             [\"data\",i0.ɵɵtrustConstantResourceUrl`https://angular.io/`,\
+             \"codebase\",i0.ɵɵtrustConstantResourceUrl`/`],[\"src\",\"https://angular.io/\"]]"
+        ),
+        "{code}"
+    );
+    assert!(
+        code.contains(
+            "i0.ɵɵelement(0,\"embed\",0)(1,\"iframe\",1)(2,\"object\",2)(3,\"embed\",0)(4,\"img\",3)"
+        ),
+        "{code}"
+    );
+}
+
+/// Structural templates and `ng-template` look attributes up under `ng-template`;
+/// trusted constants escape template-literal control sequences.
+#[test]
+fn test_security_sensitive_constant_attributes_on_templates() {
+    let code = compile_component_compact(
+        r#"<div *ngIf="c" innerHTML="<b>x</b>"></div><ng-template innerHTML="<i>y</i>"></ng-template>@if (c) {<embed src="/a${x}`b" />}<svg><a href="/s"></a></svg>"#,
+        None,
+    );
+    assert!(
+        code.contains(
+            "consts:[[\"innerHTML\",i0.ɵɵtrustConstantHtml`<b>x</b>`,4,\"ngIf\"],\
+             [\"innerHTML\",i0.ɵɵtrustConstantHtml`<i>y</i>`],[\"src\",\"/a${x}`b\"],\
+             [\"href\",\"/s\"],[\"innerHTML\",i0.ɵɵtrustConstantHtml`<b>x</b>`],\
+             [\"src\",i0.ɵɵtrustConstantResourceUrl`/a$\\{x}\\`b`]]"
+        ),
+        "{code}"
+    );
+}
+
+/// Port of `r3_view_compiler_bindings/host_bindings/security_sensitive_constant_attributes`:
+/// upstream skips trusted value functions for host jobs.
+#[test]
+fn test_host_security_sensitive_constant_attributes_stay_plain() {
+    let allocator = Allocator::default();
+    let source = r"
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[hostBindingDir]',
+  host: {'src': 'trusted', 'srcdoc': 'trusted'},
+})
+export class HostBindingDir {}
+
+@Directive({
+  selector: 'img',
+  host: {'src': 'trusted', 'srcdoc': 'trusted'},
+})
+export class HostBindingDir2 {}
+";
+    let result = transform_angular_file(&allocator, "test.ts", source, None, None);
+    assert!(!result.has_errors(), "Should not have errors: {:?}", result.diagnostics);
+    let code: String = result.code.chars().filter(|c| !c.is_whitespace()).collect();
+    assert_eq!(
+        code.matches("hostAttrs:[\"src\",\"trusted\",\"srcdoc\",\"trusted\"]").count(),
+        2,
+        "{code}"
+    );
+    assert!(!code.contains("trustConstant"), "{code}");
+}
+
+/// Static i18n attributes are wrapped in their sanitizer, or `ɵɵvalidateAttribute`
+/// with the `:svg:` / `:math:` qualified tag, matching ngtsc 22.2.2.
+#[test]
+fn test_i18n_attribute_sanitizers() {
+    let code = compile_component_compact(
+        r#"<a href="https://x" i18n-href>x</a><svg><a href="https://y" i18n-href></a><animate attributeName="x" i18n-attributeName></animate><set to="x" i18n-to></set></svg><ng-template href="x" i18n-href></ng-template><a *ngIf="c" href="https://z" i18n-href>z</a><math><mi href="https://m" i18n-href></mi></math><form action="/go" i18n-action></form><area href="/a" i18n-href /><div title="t" i18n-title></div>"#,
+        None,
+    );
+    assert!(
+        code.contains(
+            "return[[\"href\",i0.ɵɵsanitizeUrl(i18n_0)],[\"href\",i0.ɵɵsanitizeUrl(i18n_1)],\
+             [\"attributeName\",i0.ɵɵvalidateAttribute(i18n_2,\":svg:animate\",\"attributeName\")],\
+             [\"to\",i0.ɵɵvalidateAttribute(i18n_3,\":svg:set\",\"to\")],[\"href\",i18n_4],\
+             [\"href\",i18n_5,4,\"ngIf\"],[\"href\",i0.ɵɵsanitizeUrl(i18n_6)],\
+             [\"action\",i0.ɵɵsanitizeUrl(i18n_7)],[\"href\",i0.ɵɵsanitizeUrl(i18n_8)],\
+             [\"title\",i18n_9],[\"href\",i0.ɵɵsanitizeUrl(i18n_5)]];"
+        ),
+        "{code}"
+    );
+}
+
+/// `resolveI18nAttrSanitizers` landed with `normalizeTagName`
+/// (angular/angular@61a97f22e8); earlier versions emit the bare i18n variable.
+#[test]
+fn test_i18n_attribute_sanitizers_are_version_gated() {
+    const TEMPLATE: &str = r#"<a href="https://x" i18n-href>x</a>"#;
+    for version in [
+        AngularVersion::new(19, 2, 22),
+        AngularVersion::new(20, 3, 21),
+        AngularVersion::new(21, 2, 14),
+    ] {
+        let code = compile_component_compact(TEMPLATE, Some(version));
+        assert!(code.contains("return[[\"href\",i18n_0]];"), "{version:?}: {code}");
+    }
+    for version in [
+        AngularVersion::new(19, 2, 23),
+        AngularVersion::new(20, 3, 22),
+        AngularVersion::new(21, 2, 15),
+        AngularVersion::new(22, 0, 0),
+    ] {
+        let code = compile_component_compact(TEMPLATE, Some(version));
+        assert!(
+            code.contains("return[[\"href\",i0.ɵɵsanitizeUrl(i18n_0)]];"),
+            "{version:?}: {code}"
+        );
+    }
+}
diff --git a/napi/angular-compiler/e2e/compare/fixtures/regressions/security-sensitive-constants.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/regressions/security-sensitive-constants.fixture.ts
new file mode 100644
index 000000000..4155c1701
--- /dev/null
+++ b/napi/angular-compiler/e2e/compare/fixtures/regressions/security-sensitive-constants.fixture.ts
@@ -0,0 +1,131 @@
+/**
+ * Security-sensitive static attributes.
+ *
+ * Constant values of security-sensitive attributes are wrapped in their trusted value
+ * function (`ɵɵtrustConstantHtml` / `ɵɵtrustConstantResourceUrl`) in the consts array,
+ * and static i18n attributes are wrapped in their sanitizer (`resolveI18nAttrSanitizers`).
+ * Host attributes stay plain strings.
+ */
+import type { Fixture } from '../types.js'
+
+export const fixtures: Fixture[] = [
+  {
+    // Port of r3_compiler_compliance/elements/security_sensitive_constant_attributes.
+    name: 'security-sensitive-constant-attributes',
+    category: 'regressions',
+    description: 'Trusted value functions for security-sensitive constant attributes',
+    className: 'SecuritySensitiveConstantAttributesComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-component',
+  standalone: true,
+  template: \`
+    <!-- A couple of security-sensitive attributes with constant values -->
+    <embed src="https://angular.io/" />
+    <iframe srcdoc="<h1>Angular</h1>"></iframe>
+    <object data="https://angular.io/" codebase="/"></object>
+
+    <!-- Repeated element to make sure attribute deduplication works properly -->
+    <embed src="https://angular.io/" />
+
+    <!-- Another element with a src attribute that is not security sensitive -->
+    <img src="https://angular.io/" />
+  \`,
+})
+export class SecuritySensitiveConstantAttributesComponent {}
+    `.trim(),
+    expectedFeatures: ['ɵɵtrustConstantResourceUrl', 'ɵɵtrustConstantHtml'],
+  },
+  {
+    name: 'security-sensitive-constant-templates',
+    category: 'regressions',
+    description:
+      'Trusted constants on structural templates, ng-template, @if and SVG, with template-literal escapes',
+    className: 'SecuritySensitiveConstantTemplatesComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+import { NgIf } from '@angular/common';
+
+@Component({
+  selector: 'app-security-sensitive-constant-templates',
+  standalone: true,
+  imports: [NgIf],
+  template: \`
+    <div *ngIf="show" innerHTML="<b>bold</b>"></div>
+    <ng-template innerHTML="<i>italic</i>"></ng-template>
+    @if (show) {
+      <embed src="/a\\\${x}\\\`b" />
+    }
+    <svg><a href="/svg-link"></a></svg>
+  \`,
+})
+export class SecuritySensitiveConstantTemplatesComponent {
+  show = true;
+}
+    `.trim(),
+    expectedFeatures: ['ɵɵtrustConstantResourceUrl', 'ɵɵtrustConstantHtml'],
+  },
+  {
+    name: 'i18n-attribute-sanitizers',
+    category: 'regressions',
+    description: 'Static i18n attributes are wrapped in their sanitizer or ɵɵvalidateAttribute',
+    className: 'I18nAttributeSanitizersComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+import { NgIf } from '@angular/common';
+
+@Component({
+  selector: 'app-i18n-attribute-sanitizers',
+  standalone: true,
+  imports: [NgIf],
+  template: \`
+    <a href="https://x" i18n-href>x</a>
+    <svg>
+      <a href="https://y" i18n-href></a>
+      <animate attributeName="x" i18n-attributeName></animate>
+      <set to="x" i18n-to></set>
+    </svg>
+    <ng-template href="x" i18n-href></ng-template>
+    <a *ngIf="show" href="https://z" i18n-href>z</a>
+    <math><mi href="https://m" i18n-href></mi></math>
+    <form action="/go" i18n-action></form>
+    <area href="/a" i18n-href />
+    <div title="plain" i18n-title></div>
+  \`,
+})
+export class I18nAttributeSanitizersComponent {
+  show = true;
+}
+    `.trim(),
+    expectedFeatures: ['ɵɵsanitizeUrl', 'ɵɵvalidateAttribute'],
+  },
+  {
+    // Port of r3_view_compiler_bindings/host_bindings/security_sensitive_constant_attributes.
+    name: 'host-security-sensitive-constant-attributes',
+    category: 'regressions',
+    description: 'Host attributes get no trusted value functions',
+    className: 'HostBindingDir',
+    type: 'full-transform',
+    sourceCode: `
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[hostBindingDir]',
+  host: { 'src': 'trusted', 'srcdoc': 'trusted' },
+})
+export class HostBindingDir {}
+
+@Directive({
+  selector: 'img',
+  host: { 'src': 'trusted', 'srcdoc': 'trusted' },
+})
+export class HostBindingDir2 {}
+    `.trim(),
+    expectedFeatures: ['hostAttrs'],
+  },
+]

From e09bfc7e1176fac4c1146810f50bd8553113440d Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:07:42 +0800
Subject: [PATCH 20/54] perf(pipeline): skip needless clones and walks in
 template phases

These changes do not change any output (all compare fixtures still match).

- generate_arrow_functions: record on the job whether any arrow function
  was hoisted, and return early from collect_arrow_functions when none was.
- emit: move view and pool statements into the output instead of deep
  cloning them.
- any_cast: replace `$any(x)` with `x` by moving the argument out instead
  of cloning it.
- resolve_dollar_event: walk each listener once. The same walk rewrites
  `$event` and records whether the listener reads it. This drops the
  separate "contains $event" IR walk.
- i18n_const_collection: set i18n attribute consts in a single pass over
  the views, not one pass per message.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/pipeline/compilation.rs               |   9 +
 .../oxc_angular_compiler/src/pipeline/emit.rs |  69 ++---
 .../src/pipeline/phases/any_cast.rs           |  79 +++---
 .../phases/generate_arrow_functions.rs        |  29 +-
 .../pipeline/phases/i18n_const_collection.rs  |  57 ++--
 .../pipeline/phases/resolve_dollar_event.rs   | 253 +++---------------
 6 files changed, 153 insertions(+), 343 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/pipeline/compilation.rs b/crates/oxc_angular_compiler/src/pipeline/compilation.rs
index 89e396b98..5f5461ef5 100644
--- a/crates/oxc_angular_compiler/src/pipeline/compilation.rs
+++ b/crates/oxc_angular_compiler/src/pipeline/compilation.rs
@@ -228,6 +228,11 @@ pub struct ComponentCompilationJob<'a> {
     /// collision-free alias (`i0_1`, ...) when the source file already binds
     /// `i0` or another namespace import to `@angular/core`.
     pub core_namespace: Ident<'a>,
+    /// Whether `generate_arrow_functions` marked any arrow function as hoisted.
+    ///
+    /// No later phase creates hoisted arrow functions, so while this is `false`
+    /// every view's `functions` list is empty and refreshing it can be skipped.
+    pub has_hoisted_arrow_functions: bool,
     /// Diagnostics collected during compilation.
     pub diagnostics: std::vec::Vec<OxcDiagnostic>,
 }
@@ -280,6 +285,7 @@ impl<'a> ComponentCompilationJob<'a> {
             angular_version: None,
             legacy_optional_chaining: None,
             core_namespace: Ident::from(crate::r3::CORE_ALIAS),
+            has_hoisted_arrow_functions: false,
             diagnostics: std::vec::Vec::new(),
         }
     }
@@ -691,6 +697,8 @@ pub struct HostBindingCompilationJob<'a> {
     /// Namespace identifier used for `@angular/core` runtime imports.
     /// See [`ComponentCompilationJob::core_namespace`].
     pub core_namespace: Ident<'a>,
+    /// See [`ComponentCompilationJob::has_hoisted_arrow_functions`].
+    pub has_hoisted_arrow_functions: bool,
 }
 
 impl<'a> HostBindingCompilationJob<'a> {
@@ -739,6 +747,7 @@ impl<'a> HostBindingCompilationJob<'a> {
             angular_version: None,
             legacy_optional_chaining: None,
             core_namespace: Ident::from(crate::r3::CORE_ALIAS),
+            has_hoisted_arrow_functions: false,
         }
     }
 
diff --git a/crates/oxc_angular_compiler/src/pipeline/emit.rs b/crates/oxc_angular_compiler/src/pipeline/emit.rs
index 0aafadee6..51c28ab68 100644
--- a/crates/oxc_angular_compiler/src/pipeline/emit.rs
+++ b/crates/oxc_angular_compiler/src/pipeline/emit.rs
@@ -11,7 +11,6 @@ use crate::ir::expression::IrExpression;
 use crate::output::ast::{
     BinaryOperator, BinaryOperatorExpr, DeclareFunctionStmt, FnParam, FunctionExpr, IfStmt,
     LiteralExpr, LiteralValue, OutputExpression, OutputStatement, ReadVarExpr, StmtModifier,
-    clone_output_statement,
 };
 use crate::r3::{CORE, Identifiers, get_interpolate_instruction, get_pipe_bind_instruction};
 use oxc_allocator::Box;
@@ -50,7 +49,7 @@ pub fn transform_host(job: &mut HostBindingCompilationJob<'_>) {
 /// Returns the root template function expression. Child views are added to
 /// the job's constant pool as declarations.
 pub fn emit_template_fn<'a>(job: &mut ComponentCompilationJob<'a>) -> FunctionExpr<'a> {
-    let root_fn = emit_view(job.allocator, &job.root);
+    let root_fn = emit_view(job.allocator, &mut job.root);
 
     // Emit child views depth-first, adding them to job.pool.statements
     emit_child_views_to_job(job);
@@ -91,15 +90,15 @@ fn emit_child_views_recursive<'a>(
         emit_child_views_recursive(job, child_xref, all_xrefs);
 
         // Then emit this child view
-        if let Some(unit) = job.views.get(&child_xref) {
+        if let Some(unit) = job.views.get_mut(&child_xref) {
             let view_fn = emit_view(job.allocator, unit);
 
-            if let Some(fn_name) = view_fn.name.clone() {
+            if let Some(fn_name) = view_fn.name {
                 let fn_stmt = OutputStatement::DeclareFunction(Box::new_in(
                     DeclareFunctionStmt {
                         name: fn_name,
-                        params: clone_params(job.allocator, &view_fn.params),
-                        statements: clone_statements(job.allocator, &view_fn.statements),
+                        params: view_fn.params,
+                        statements: view_fn.statements,
                         modifiers: StmtModifier::NONE,
                         source_span: None,
                     },
@@ -114,13 +113,14 @@ fn emit_child_views_recursive<'a>(
 /// Emit a template function for an individual view.
 ///
 /// After the reify phase, view.create_statements and view.update_statements
-/// contain the JavaScript statements for the template function.
-fn emit_view<'a>(allocator: &'a Allocator, view: &ViewCompilationUnit<'a>) -> FunctionExpr<'a> {
+/// contain the JavaScript statements for the template function. They are moved
+/// into the function, leaving the view's lists empty.
+fn emit_view<'a>(allocator: &'a Allocator, view: &mut ViewCompilationUnit<'a>) -> FunctionExpr<'a> {
     let fn_name = view.fn_name.clone();
 
-    // Clone the statements from the view (reify phase has populated these)
-    let create_statements = clone_statements(allocator, &view.create_statements);
-    let update_statements = clone_statements(allocator, &view.update_statements);
+    // Move the statements out of the view (reify phase has populated these)
+    let create_statements = take_statements(allocator, &mut view.create_statements);
+    let update_statements = take_statements(allocator, &mut view.update_statements);
 
     // Generate rf block conditions
     // Angular templates use a render flag (rf) to distinguish between create and update phases:
@@ -144,28 +144,12 @@ fn emit_view<'a>(allocator: &'a Allocator, view: &ViewCompilationUnit<'a>) -> Fu
     FunctionExpr { name: fn_name, params, statements: body, source_span: None }
 }
 
-/// Clone a vec of statements for use in emission.
-fn clone_statements<'a>(
+/// Move the statements out of `statements`, leaving it empty.
+fn take_statements<'a>(
     allocator: &'a Allocator,
-    statements: &OxcVec<'a, OutputStatement<'a>>,
+    statements: &mut OxcVec<'a, OutputStatement<'a>>,
 ) -> OxcVec<'a, OutputStatement<'a>> {
-    let mut result = OxcVec::new_in(&allocator);
-    for stmt in statements.iter() {
-        result.push(clone_output_statement(stmt, &allocator));
-    }
-    result
-}
-
-/// Clone function parameters.
-fn clone_params<'a>(
-    allocator: &'a Allocator,
-    params: &OxcVec<'a, FnParam<'a>>,
-) -> OxcVec<'a, FnParam<'a>> {
-    let mut result = OxcVec::new_in(&allocator);
-    for param in params.iter() {
-        result.push(FnParam { name: param.name.clone() });
-    }
-    result
+    std::mem::replace(statements, OxcVec::new_in(&allocator))
 }
 
 /// Generate an if block for the given render flag.
@@ -221,18 +205,19 @@ fn maybe_generate_rf_block<'a>(
 
 /// Emit a host binding function from HostBindingCompilationJob.
 ///
-/// Returns None if there are no host bindings.
+/// Returns None if there are no host bindings. The root unit's statements are
+/// moved into the function, leaving its lists empty.
 ///
 /// Ported from Angular's `emitHostBindingFunction` in `emit.ts`.
 pub fn emit_host_binding_function<'a>(
-    job: &HostBindingCompilationJob<'a>,
+    job: &mut HostBindingCompilationJob<'a>,
 ) -> Option<FunctionExpr<'a>> {
     let allocator = job.allocator;
-    let unit = &job.root;
+    let unit = &mut job.root;
 
-    // Clone the statements from the unit (reify phase has populated these)
-    let create_statements = clone_statements(allocator, &unit.create_statements);
-    let update_statements = clone_statements(allocator, &unit.update_statements);
+    // Move the statements out of the unit (reify phase has populated these)
+    let create_statements = take_statements(allocator, &mut unit.create_statements);
+    let update_statements = take_statements(allocator, &mut unit.update_statements);
 
     // Return None if there are no statements
     if create_statements.is_empty() && update_statements.is_empty() {
@@ -307,10 +292,8 @@ pub fn compile_template<'a>(
         )));
     }
 
-    // Add child view function declarations from job.pool
-    for stmt in job.pool.statements.iter() {
-        declarations.push(clone_output_statement(stmt, &allocator));
-    }
+    // Move the child view function declarations out of job.pool
+    declarations.extend(take_statements(allocator, &mut job.pool.statements));
 
     TemplateCompilationResult { template_fn, declarations }
 }
@@ -1651,9 +1634,7 @@ pub fn compile_host_bindings<'a>(
             &allocator,
         )));
     }
-    for stmt in job.pool.statements.iter() {
-        declarations.push(clone_output_statement(stmt, &allocator));
-    }
+    declarations.extend(take_statements(allocator, &mut job.pool.statements));
 
     HostBindingCompilationResult { host_binding_fn, host_attrs, host_vars, declarations }
 }
diff --git a/crates/oxc_angular_compiler/src/pipeline/phases/any_cast.rs b/crates/oxc_angular_compiler/src/pipeline/phases/any_cast.rs
index 5e3125c4a..f7ab58102 100644
--- a/crates/oxc_angular_compiler/src/pipeline/phases/any_cast.rs
+++ b/crates/oxc_angular_compiler/src/pipeline/phases/any_cast.rs
@@ -20,34 +20,23 @@ use crate::pipeline::compilation::{ComponentCompilationJob, HostBindingCompilati
 /// - `$any(value)` → `value`
 /// - `$any(obj.prop)` → `obj.prop`
 pub fn delete_any_casts(job: &mut ComponentCompilationJob<'_>) {
-    let allocator = job.allocator;
-
-    // Process each view
-    let view_xrefs: Vec<_> = job.all_views().map(|v| v.xref).collect();
-
-    for xref in view_xrefs {
-        if let Some(view) = job.view_mut(xref) {
-            // Process create operations
-            for op in view.create.iter_mut() {
-                transform_expressions_in_create_op(
-                    op,
-                    &|expr, _flags| {
-                        remove_any_cast(expr, &allocator);
-                    },
-                    VisitorContextFlag::NONE,
-                );
-            }
+    for view in job.all_views_mut() {
+        // Process create operations
+        for op in view.create.iter_mut() {
+            transform_expressions_in_create_op(
+                op,
+                &|expr, _flags| remove_any_cast(expr),
+                VisitorContextFlag::NONE,
+            );
+        }
 
-            // Process update operations
-            for op in view.update.iter_mut() {
-                transform_expressions_in_update_op(
-                    op,
-                    &|expr, _flags| {
-                        remove_any_cast(expr, &allocator);
-                    },
-                    VisitorContextFlag::NONE,
-                );
-            }
+        // Process update operations
+        for op in view.update.iter_mut() {
+            transform_expressions_in_update_op(
+                op,
+                &|expr, _flags| remove_any_cast(expr),
+                VisitorContextFlag::NONE,
+            );
         }
     }
 }
@@ -64,25 +53,23 @@ pub fn delete_any_casts(job: &mut ComponentCompilationJob<'_>) {
 /// e.fn instanceof ir.LexicalReadExpr &&
 /// e.fn.name === '$any'
 /// ```
-fn remove_any_cast<'a>(expr: &mut IrExpression<'a>, allocator: &'a oxc_allocator::Allocator) {
+fn remove_any_cast(expr: &mut IrExpression<'_>) {
     // Check if this is a ResolvedCall with LexicalRead("$any") as the receiver
     // This is how $any(arg) is represented after convert_ast_to_ir:
     // - $any on implicit receiver becomes LexicalRead("$any")
     // - The call becomes ResolvedCall(receiver: LexicalRead("$any"), args: [...])
-    if let IrExpression::ResolvedCall(call) = expr {
-        if let IrExpression::LexicalRead(lexical_read) = call.receiver.as_ref() {
-            if lexical_read.name.as_str() == "$any" {
-                // This is a $any(arg) call - replace with the argument
-                if call.args.len() == 1 {
-                    // Take the single argument and replace the expression
-                    // We need to clone the argument since we can't move out of a Box
-                    let arg = &call.args[0];
-                    *expr = arg.clone_in(allocator);
-                }
-                // If args.len() != 1, leave as-is (will be caught by type checker)
-            }
-        }
+    let IrExpression::ResolvedCall(call) = expr else { return };
+    let is_any_cast = matches!(
+        call.receiver.as_ref(),
+        IrExpression::LexicalRead(lexical_read) if lexical_read.name.as_str() == "$any"
+    );
+    // If args.len() != 1, leave as-is (will be caught by type checker)
+    if !is_any_cast || call.args.len() != 1 {
+        return;
     }
+    // This is a $any(arg) call - move the argument out and put it in the call's place.
+    let Some(arg) = call.args.pop() else { return };
+    *expr = arg;
     // Note: We only handle ResolvedCall with LexicalRead("$any") as receiver.
     // Standalone LexicalRead("$any") should not be transformed - it's the receiver
     // that the traversal visits before visiting the call. Only the call itself
@@ -93,15 +80,11 @@ fn remove_any_cast<'a>(expr: &mut IrExpression<'a>, allocator: &'a oxc_allocator
 ///
 /// Host version - only processes the root unit (no embedded views).
 pub fn delete_any_casts_for_host(job: &mut HostBindingCompilationJob<'_>) {
-    let allocator = job.allocator;
-
     // Process create operations
     for op in job.root.create.iter_mut() {
         transform_expressions_in_create_op(
             op,
-            &|expr, _flags| {
-                remove_any_cast(expr, &allocator);
-            },
+            &|expr, _flags| remove_any_cast(expr),
             VisitorContextFlag::NONE,
         );
     }
@@ -110,9 +93,7 @@ pub fn delete_any_casts_for_host(job: &mut HostBindingCompilationJob<'_>) {
     for op in job.root.update.iter_mut() {
         transform_expressions_in_update_op(
             op,
-            &|expr, _flags| {
-                remove_any_cast(expr, &allocator);
-            },
+            &|expr, _flags| remove_any_cast(expr),
             VisitorContextFlag::NONE,
         );
     }
diff --git a/crates/oxc_angular_compiler/src/pipeline/phases/generate_arrow_functions.rs b/crates/oxc_angular_compiler/src/pipeline/phases/generate_arrow_functions.rs
index 7eb198368..91500cb43 100644
--- a/crates/oxc_angular_compiler/src/pipeline/phases/generate_arrow_functions.rs
+++ b/crates/oxc_angular_compiler/src/pipeline/phases/generate_arrow_functions.rs
@@ -6,6 +6,8 @@
 //!
 //! Ported from Angular's `template/pipeline/src/phases/generate_arrow_functions.ts`.
 
+use std::cell::Cell;
+
 use crate::ir::enums::OpKind;
 use crate::ir::expression::{
     ArrowFunctionExpr, IrExpression, VisitorContextFlag, transform_expressions_in_create_op,
@@ -21,6 +23,8 @@ use crate::pipeline::compilation::{ComponentCompilationJob, HostBindingCompilati
 /// 1. They need to be able to access $event.
 /// 2. We don't need to store them.
 pub fn generate_arrow_functions(job: &mut ComponentCompilationJob<'_>) {
+    let found = Cell::new(false);
+
     // Process each view
     let view_xrefs: Vec<_> = job.all_views().map(|v| v.xref).collect();
 
@@ -32,7 +36,7 @@ pub fn generate_arrow_functions(job: &mut ComponentCompilationJob<'_>) {
                 if !is_listener_op(op) {
                     transform_expressions_in_create_op(
                         op,
-                        &|expr, flags| add_arrow_function(expr, flags),
+                        &|expr, flags| add_arrow_function(expr, flags, &found),
                         VisitorContextFlag::NONE,
                     );
                 }
@@ -42,13 +46,14 @@ pub fn generate_arrow_functions(job: &mut ComponentCompilationJob<'_>) {
             for op in view.update.iter_mut() {
                 transform_expressions_in_update_op(
                     op,
-                    &|expr, flags| add_arrow_function(expr, flags),
+                    &|expr, flags| add_arrow_function(expr, flags, &found),
                     VisitorContextFlag::NONE,
                 );
             }
         }
     }
 
+    job.has_hoisted_arrow_functions = found.get();
     collect_arrow_functions(job);
 }
 
@@ -57,7 +62,12 @@ pub fn generate_arrow_functions(job: &mut ComponentCompilationJob<'_>) {
 ///
 /// The list holds pointers into the expression tree, and phases that rewrite expressions
 /// move arrow functions around, so phases that walk `functions` refresh it first.
+///
+/// When no arrow function was hoisted, every list is already empty and stays so.
 pub fn collect_arrow_functions(job: &mut ComponentCompilationJob<'_>) {
+    if !job.has_hoisted_arrow_functions {
+        return;
+    }
     let view_xrefs: Vec<_> = job.all_views().map(|v| v.xref).collect();
     for xref in view_xrefs {
         if let Some(view) = job.view_mut(xref) {
@@ -82,16 +92,17 @@ fn is_listener_op(op: &CreateOp<'_>) -> bool {
     )
 }
 
-/// Marks a user-written arrow function as hoisted.
+/// Marks a user-written arrow function as hoisted, recording in `found` that one was.
 ///
 /// Arrow functions nested inside another arrow function are part of that function's
 /// body and stay in place.
-fn add_arrow_function(expr: &mut IrExpression<'_>, flags: VisitorContextFlag) {
+fn add_arrow_function(expr: &mut IrExpression<'_>, flags: VisitorContextFlag, found: &Cell<bool>) {
     if flags.contains(VisitorContextFlag::IN_CHILD_OPERATION) {
         return;
     }
     if let IrExpression::ArrowFunction(arrow_fn) = expr {
         arrow_fn.hoisted = true;
+        found.set(true);
     }
 }
 
@@ -101,12 +112,14 @@ fn add_arrow_function(expr: &mut IrExpression<'_>, flags: VisitorContextFlag) {
 /// template and host compilations. Host bindings can contain arrow
 /// function expressions (e.g., in @HostBinding values or event handlers).
 pub fn generate_arrow_functions_for_host(job: &mut HostBindingCompilationJob<'_>) {
+    let found = Cell::new(false);
+
     // Process create operations (skip listeners)
     for op in job.root.create.iter_mut() {
         if !is_listener_op(op) {
             transform_expressions_in_create_op(
                 op,
-                &|expr, flags| add_arrow_function(expr, flags),
+                &|expr, flags| add_arrow_function(expr, flags, &found),
                 VisitorContextFlag::NONE,
             );
         }
@@ -116,13 +129,14 @@ pub fn generate_arrow_functions_for_host(job: &mut HostBindingCompilationJob<'_>
     for op in job.root.update.iter_mut() {
         transform_expressions_in_update_op(
             op,
-            &|expr, flags| add_arrow_function(expr, flags),
+            &|expr, flags| add_arrow_function(expr, flags, &found),
             VisitorContextFlag::NONE,
         );
     }
 
     // Collect arrow functions into the root unit's functions set.
     // Only hoisted arrows are collected, matching the template path.
+    job.has_hoisted_arrow_functions = found.get();
     collect_arrow_functions_for_host(job);
 }
 
@@ -130,6 +144,9 @@ pub fn generate_arrow_functions_for_host(job: &mut HostBindingCompilationJob<'_>
 /// currently in its operations, mirroring [`collect_arrow_functions`] for
 /// template jobs.
 pub fn collect_arrow_functions_for_host(job: &mut HostBindingCompilationJob<'_>) {
+    if !job.has_hoisted_arrow_functions {
+        return;
+    }
     job.root.functions.clear();
     for ptr in collect_hoisted_arrow_functions(&mut job.root.create, &mut job.root.update) {
         job.root.functions.push(ptr);
diff --git a/crates/oxc_angular_compiler/src/pipeline/phases/i18n_const_collection.rs b/crates/oxc_angular_compiler/src/pipeline/phases/i18n_const_collection.rs
index 426941f5b..0502a8148 100644
--- a/crates/oxc_angular_compiler/src/pipeline/phases/i18n_const_collection.rs
+++ b/crates/oxc_angular_compiler/src/pipeline/phases/i18n_const_collection.rs
@@ -153,6 +153,8 @@ pub fn collect_i18n_consts(job: &mut ComponentCompilationJob<'_>) {
     let mut message_const_indices: FxHashMap<XrefId, u32> = FxHashMap::default();
     // Map: i18n_context xref -> i18n variable name (for attribute bindings)
     let mut i18n_var_names_by_context: FxHashMap<XrefId, Ident<'_>> = FxHashMap::default();
+    // Map: i18n_context xref -> i18n variable name, for contexts owning an extracted attribute
+    let mut attr_var_names_by_context: FxHashMap<XrefId, Ident<'_>> = FxHashMap::default();
 
     // Counter for unique variable names
     let mut i18n_var_counter: usize = 0;
@@ -225,36 +227,33 @@ pub fn collect_i18n_consts(job: &mut ComponentCompilationJob<'_>) {
             // This is critical for const_collection to NOT deduplicate attribute arrays that
             // contain different i18n variables.
             // Ported from Angular's i18n_const_collection.ts lines 140-144.
+            // The attributes are updated in one pass once every message is serialized.
             if extracted_attributes_by_i18n_context.contains_key(&ctx_xref) {
-                // Iterate through all views to find and update matching ExtractedAttribute ops
-                let view_xrefs_for_attr_update: Vec<XrefId> =
-                    job.all_views().map(|v| v.xref).collect();
-
-                for view_xref in view_xrefs_for_attr_update {
-                    if let Some(view) = job.view_mut(view_xref) {
-                        for op in view.create.iter_mut() {
-                            if let CreateOp::ExtractedAttribute(attr_op) = op {
-                                if attr_op.i18n_context == Some(ctx_xref) {
-                                    // Update the value to reference the i18n variable
-                                    let var_expr =
-                                        OutputExpression::ReadVar(oxc_allocator::Box::new_in(
-                                            ReadVarExpr {
-                                                name: var_name_atom.clone(),
-                                                source_span: None,
-                                            },
-                                            &allocator,
-                                        ));
-                                    attr_op.value = Some(oxc_allocator::Box::new_in(
-                                        crate::ir::expression::IrExpression::OutputExpr(
-                                            oxc_allocator::Box::new_in(var_expr, &allocator),
-                                        ),
-                                        &allocator,
-                                    ));
-                                }
-                            }
-                        }
-                    }
-                }
+                attr_var_names_by_context.insert(ctx_xref, var_name_atom);
+            }
+        }
+    }
+
+    // Point each i18n extracted attribute at its message's i18n variable.
+    if !attr_var_names_by_context.is_empty() {
+        for view in job.all_views_mut() {
+            for op in view.create.iter_mut() {
+                let CreateOp::ExtractedAttribute(attr_op) = op else { continue };
+                let Some(var_name) =
+                    attr_op.i18n_context.and_then(|ctx| attr_var_names_by_context.get(&ctx))
+                else {
+                    continue;
+                };
+                let var_expr = OutputExpression::ReadVar(oxc_allocator::Box::new_in(
+                    ReadVarExpr { name: *var_name, source_span: None },
+                    &allocator,
+                ));
+                attr_op.value = Some(oxc_allocator::Box::new_in(
+                    crate::ir::expression::IrExpression::OutputExpr(oxc_allocator::Box::new_in(
+                        var_expr, &allocator,
+                    )),
+                    &allocator,
+                ));
             }
         }
     }
diff --git a/crates/oxc_angular_compiler/src/pipeline/phases/resolve_dollar_event.rs b/crates/oxc_angular_compiler/src/pipeline/phases/resolve_dollar_event.rs
index 6e9b69aed..7746f5ea6 100644
--- a/crates/oxc_angular_compiler/src/pipeline/phases/resolve_dollar_event.rs
+++ b/crates/oxc_angular_compiler/src/pipeline/phases/resolve_dollar_event.rs
@@ -44,87 +44,60 @@ pub fn resolve_dollar_event(job: &mut ComponentCompilationJob<'_>) {
 /// Transform $event in create operations.
 ///
 /// Listener handler ops are transformed as child operations, matching
-/// `transformExpressionsInOp`. Each `LexicalReadExpr('$event')` found is
-/// rewritten to an output `ReadVarExpr`, like Angular's resolveDollarEvent.
+/// `transformExpressionsInOp`. Each listener is walked once: every
+/// `LexicalReadExpr('$event')` found is rewritten to an output `ReadVarExpr`,
+/// like Angular's resolveDollarEvent, and marks the listener as consuming
+/// `$event`, as does a raw AST expression that reads it.
 fn transform_dollar_event_create<'a>(
     ops: &mut crate::ir::list::CreateOpList<'a>,
     expressions: &ExpressionStore<'a>,
     allocator: &'a oxc_allocator::Allocator,
 ) {
     for op in ops.iter_mut() {
+        let found = Cell::new(false);
+        let resolve = |expr: &mut IrExpression<'a>, _flags: VisitorContextFlag| {
+            resolve_dollar_event_in_expr(expr, expressions, allocator, &found);
+        };
         match op {
             CreateOp::Listener(listener) => {
-                // Check handler expression for $event usage
                 if let Some(handler) = &mut listener.handler_expression {
-                    if expression_contains_dollar_event(handler, expressions) {
-                        listener.consumes_dollar_event = true;
-                    }
                     crate::ir::expression::transform_expressions_in_expression(
                         handler,
-                        &|expr, _flags| replace_dollar_event(expr, allocator),
+                        &resolve,
                         VisitorContextFlag::IN_CHILD_OPERATION,
                     );
                 }
-
-                // Check handler ops for $event usage
                 for handler_op in listener.handler_ops.iter_mut() {
-                    let found = Cell::new(false);
                     transform_expressions_in_update_op(
                         handler_op,
-                        &|expr, _flags| {
-                            if expression_contains_dollar_event(expr, expressions) {
-                                found.set(true);
-                            }
-                        },
+                        &resolve,
                         VisitorContextFlag::IN_CHILD_OPERATION,
                     );
-                    if found.get() {
-                        listener.consumes_dollar_event = true;
-                    }
                 }
-                // Rewrite $event reads in handler ops
-                for handler_op in listener.handler_ops.iter_mut() {
-                    transform_expressions_in_update_op(
-                        handler_op,
-                        &|expr, _flags| replace_dollar_event(expr, allocator),
-                        VisitorContextFlag::IN_CHILD_OPERATION,
-                    );
+                if found.get() {
+                    listener.consumes_dollar_event = true;
                 }
             }
+            // Two-way listeners always consume `$event` so they omit this field.
             CreateOp::TwoWayListener(listener) => {
-                // Check handler ops for $event usage
                 for handler_op in listener.handler_ops.iter_mut() {
                     transform_expressions_in_update_op(
                         handler_op,
-                        &|expr, _flags| replace_dollar_event(expr, allocator),
+                        &resolve,
                         VisitorContextFlag::IN_CHILD_OPERATION,
                     );
                 }
             }
             CreateOp::AnimationListener(listener) => {
-                // Check handler ops for $event usage
                 for handler_op in listener.handler_ops.iter_mut() {
-                    let found = Cell::new(false);
                     transform_expressions_in_update_op(
                         handler_op,
-                        &|expr, _flags| {
-                            if expression_contains_dollar_event(expr, expressions) {
-                                found.set(true);
-                            }
-                        },
+                        &resolve,
                         VisitorContextFlag::IN_CHILD_OPERATION,
                     );
-                    if found.get() {
-                        listener.consumes_dollar_event = true;
-                    }
                 }
-                // Rewrite $event reads in handler ops
-                for handler_op in listener.handler_ops.iter_mut() {
-                    transform_expressions_in_update_op(
-                        handler_op,
-                        &|expr, _flags| replace_dollar_event(expr, allocator),
-                        VisitorContextFlag::IN_CHILD_OPERATION,
-                    );
+                if found.get() {
+                    listener.consumes_dollar_event = true;
                 }
             }
             _ => {}
@@ -133,10 +106,20 @@ fn transform_dollar_event_create<'a>(
 }
 
 /// Rewrites `LexicalReadExpr('$event')` to an output `ReadVarExpr` so the read
-/// bypasses name resolution, like Angular's resolveDollarEvent.
-fn replace_dollar_event<'a>(expr: &mut IrExpression<'a>, allocator: &'a oxc_allocator::Allocator) {
-    if let IrExpression::LexicalRead(lexical) = expr {
-        if lexical.name.as_str() == DOLLAR_EVENT {
+/// bypasses name resolution, like Angular's resolveDollarEvent, and records in
+/// `found` that the listener reads `$event`.
+///
+/// The walk visits every IR node, so only this node itself is checked. Raw AST
+/// (`Ast` / `ExpressionRef`) is a leaf to the walk and is searched whole.
+fn resolve_dollar_event_in_expr<'a>(
+    expr: &mut IrExpression<'a>,
+    expressions: &ExpressionStore<'a>,
+    allocator: &'a oxc_allocator::Allocator,
+    found: &Cell<bool>,
+) {
+    match expr {
+        IrExpression::LexicalRead(lexical) if lexical.name.as_str() == DOLLAR_EVENT => {
+            found.set(true);
             *expr = IrExpression::OutputExpr(oxc_allocator::Box::new_in(
                 crate::output::ast::OutputExpression::ReadVar(oxc_allocator::Box::new_in(
                     crate::output::ast::ReadVarExpr {
@@ -148,175 +131,15 @@ fn replace_dollar_event<'a>(expr: &mut IrExpression<'a>, allocator: &'a oxc_allo
                 &allocator,
             ));
         }
-    }
-}
-
-/// Check if an expression contains a $event reference.
-fn expression_contains_dollar_event<'a>(
-    expr: &IrExpression<'a>,
-    expressions: &ExpressionStore<'a>,
-) -> bool {
-    match expr {
-        IrExpression::LexicalRead(lexical) => lexical.name.as_str() == DOLLAR_EVENT,
-        IrExpression::SafeNavigationMigration(m) => {
-            expression_contains_dollar_event(&m.expr, expressions)
-        }
-        IrExpression::SafeTernary(st) => {
-            expression_contains_dollar_event(&st.guard, expressions)
-                || expression_contains_dollar_event(&st.expr, expressions)
-        }
-        IrExpression::Ternary(t) => {
-            expression_contains_dollar_event(&t.condition, expressions)
-                || expression_contains_dollar_event(&t.true_expr, expressions)
-                || expression_contains_dollar_event(&t.false_expr, expressions)
-        }
-        IrExpression::SafePropertyRead(sp) => {
-            expression_contains_dollar_event(&sp.receiver, expressions)
-        }
-        IrExpression::SafeKeyedRead(sk) => {
-            expression_contains_dollar_event(&sk.receiver, expressions)
-                || expression_contains_dollar_event(&sk.index, expressions)
-        }
-        IrExpression::SafeInvokeFunction(sf) => {
-            expression_contains_dollar_event(&sf.receiver, expressions)
-                || sf.args.iter().any(|e| expression_contains_dollar_event(e, expressions))
-        }
-        IrExpression::AssignTemporary(at) => {
-            expression_contains_dollar_event(&at.expr, expressions)
-        }
-        IrExpression::PipeBinding(pb) => {
-            pb.args.iter().any(|e| expression_contains_dollar_event(e, expressions))
-        }
-        IrExpression::PipeBindingVariadic(pbv) => {
-            expression_contains_dollar_event(&pbv.args, expressions)
-        }
-        IrExpression::PureFunction(pf) => {
-            pf.args.iter().any(|e| expression_contains_dollar_event(e, expressions))
-        }
-        IrExpression::Interpolation(i) => {
-            i.expressions.iter().any(|e| expression_contains_dollar_event(e, expressions))
+        IrExpression::Ast(ast_expr) if ast_expression_contains_dollar_event(ast_expr) => {
+            found.set(true);
         }
-        IrExpression::RestoreView(rv) => {
-            use crate::ir::expression::RestoreViewTarget;
-            if let RestoreViewTarget::Dynamic(e) = &rv.view {
-                expression_contains_dollar_event(e, expressions)
-            } else {
-                false
-            }
-        }
-        IrExpression::ResetView(rv) => expression_contains_dollar_event(&rv.expr, expressions),
-        IrExpression::ConditionalCase(cc) => {
-            cc.expr.as_ref().is_some_and(|e| expression_contains_dollar_event(e, expressions))
-        }
-        IrExpression::TwoWayBindingSet(tbs) => {
-            expression_contains_dollar_event(&tbs.target, expressions)
-                || expression_contains_dollar_event(&tbs.value, expressions)
-        }
-        IrExpression::StoreLet(sl) => expression_contains_dollar_event(&sl.value, expressions),
-        IrExpression::ConstCollected(cc) => expression_contains_dollar_event(&cc.expr, expressions),
-        IrExpression::Binary(binary) => {
-            expression_contains_dollar_event(&binary.lhs, expressions)
-                || expression_contains_dollar_event(&binary.rhs, expressions)
-        }
-        IrExpression::ResolvedPropertyRead(rpr) => {
-            expression_contains_dollar_event(&rpr.receiver, expressions)
-        }
-        IrExpression::ResolvedBinary(rb) => {
-            expression_contains_dollar_event(&rb.left, expressions)
-                || expression_contains_dollar_event(&rb.right, expressions)
-        }
-        IrExpression::ResolvedCall(rc) => {
-            expression_contains_dollar_event(&rc.receiver, expressions)
-                || rc.args.iter().any(|e| expression_contains_dollar_event(e, expressions))
-        }
-        IrExpression::ResolvedKeyedRead(rkr) => {
-            expression_contains_dollar_event(&rkr.receiver, expressions)
-                || expression_contains_dollar_event(&rkr.key, expressions)
-        }
-        IrExpression::ResolvedSafePropertyRead(rspr) => {
-            expression_contains_dollar_event(&rspr.receiver, expressions)
-        }
-        // Check AST expressions for $event
-        IrExpression::Ast(ast_expr) => ast_expression_contains_dollar_event(ast_expr),
-        // DerivedLiteralArray: check entries
-        IrExpression::DerivedLiteralArray(arr) => {
-            arr.entries.iter().any(|e| expression_contains_dollar_event(e, expressions))
-        }
-        // DerivedLiteralMap: check values
-        IrExpression::DerivedLiteralMap(map) => {
-            map.values.iter().any(|e| expression_contains_dollar_event(e, expressions))
-        }
-        // ExpressionRef: dereference to stored AngularExpression and check it
-        IrExpression::ExpressionRef(id) => {
-            let stored_expr = expressions.get(*id);
-            ast_expression_contains_dollar_event(stored_expr)
-        }
-        // Leaf expressions without nested content
-        IrExpression::Reference(_)
-        | IrExpression::Context(_)
-        | IrExpression::NextContext(_)
-        | IrExpression::GetCurrentView(_)
-        | IrExpression::ReadVariable(_)
-        | IrExpression::PureFunctionParameter(_)
-        | IrExpression::Empty(_)
-        | IrExpression::ReadTemporary(_)
-        | IrExpression::SlotLiteral(_)
-        | IrExpression::ConstReference(_)
-        | IrExpression::ContextLetReference(_)
-        | IrExpression::TrackContext(_)
-        | IrExpression::OutputExpr(_) => false, // OutputExpr is already converted, no $event
-
-        // LiteralArray: check all elements
-        IrExpression::LiteralArray(arr) => {
-            arr.elements.iter().any(|e| expression_contains_dollar_event(e, expressions))
-        }
-
-        // LiteralMap: check all values
-        IrExpression::LiteralMap(map) => {
-            map.values.iter().any(|e| expression_contains_dollar_event(e, expressions))
-        }
-
-        // Not expression: check inner expression
-        IrExpression::Not(not) => expression_contains_dollar_event(&not.expr, expressions),
-
-        // Unary expression: check inner expression
-        IrExpression::Unary(unary) => expression_contains_dollar_event(&unary.expr, expressions),
-
-        // Typeof expression: check inner expression
-        IrExpression::Typeof(typeof_expr) => {
-            expression_contains_dollar_event(&typeof_expr.expr, expressions)
-        }
-
-        // Void expression: check inner expression
-        IrExpression::Void(void_expr) => {
-            expression_contains_dollar_event(&void_expr.expr, expressions)
-        }
-
-        // ResolvedTemplateLiteral: check all embedded expressions
-        IrExpression::ResolvedTemplateLiteral(rtl) => {
-            rtl.expressions.iter().any(|e| expression_contains_dollar_event(e, expressions))
-        }
-
-        // TaggedTemplateLiteral: check the tag and embedded expressions
-        IrExpression::TaggedTemplateLiteral(ttl) => {
-            expression_contains_dollar_event(&ttl.tag, expressions)
-                || ttl.expressions.iter().any(|e| expression_contains_dollar_event(e, expressions))
-        }
-
-        // SpreadElement: check the inner expression
-        IrExpression::SpreadElement(spread) => {
-            expression_contains_dollar_event(&spread.expr, expressions)
-        }
-
-        // ArrowFunction: check the body expression
-        IrExpression::ArrowFunction(arrow_fn) => {
-            expression_contains_dollar_event(&arrow_fn.body, expressions)
-        }
-
-        // Parenthesized: check the inner expression
-        IrExpression::Parenthesized(paren) => {
-            expression_contains_dollar_event(&paren.expr, expressions)
+        IrExpression::ExpressionRef(id)
+            if ast_expression_contains_dollar_event(expressions.get(*id)) =>
+        {
+            found.set(true);
         }
+        _ => {}
     }
 }
 

From a5ae760eb33d4094e47deee960aebe1cf3158d53 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:09:44 +0800
Subject: [PATCH 21/54] =?UTF-8?q?fix(ng=5Fmodule):=20patch=20the=20scope?=
 =?UTF-8?q?=20on=20with=20a=20JIT-only=20=C9=B5=C9=B5setNgModuleScope=20li?=
 =?UTF-8?q?ke=20ngtsc?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In full compilation ngtsc uses R3SelectorScopeMode.SideEffect: ɵmod keeps
only `type` (and `bootstrap`), and declarations/imports/exports go to a
tree-shakeable `(function () { (typeof ngJitMode === "undefined" ||
ngJitMode) && ɵɵsetNgModuleScope(M, {...}); })()` after the class. Oxc
inlined the scope into ɵɵdefineNgModule, which keeps every declaration
and import alive in production bundles and differs from ngtsc's ɵmod.

- to_r3_metadata now uses SideEffect.
- The guard is built with the shared `guarded_expression` (real
  `typeof`, `===`) instead of a `typeof ngJitMode` identifier and `==`.
- The IIFE callee is parenthesized; the side-effect path was never
  emitted before, and without the parens it printed `function() {...}();`,
  which does not parse.
- Forward-declared lists use `() => [...]` like ngtsc's refsToArray,
  not `function () { return [...]; }`.
- A list Oxc cannot resolve to class names in one file (a const array,
  a spread, a `forRoot()` call) used to be dropped or cut down to the
  names it could find. It now reaches ɵɵsetNgModuleScope as written,
  like ngtsc's local compilation; the runtime flattens it, resolves
  forward refs and unwraps ModuleWithProviders. Plain lists of class
  names (and forwardRef(() => X)) still emit the resolved array, so the
  output matches ngtsc exactly there. Empty lists are skipped.

Partial compilation is unchanged (it never emits the side effect).

Removes the NG_MODULE_IMPORTS known differences and adds fixtures for
a module whose declarations/imports use const arrays and spreads, and
for a module that extends a base class without a constructor.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/class_metadata/compiler.rs            |  10 ++
 .../src/class_metadata/mod.rs                 |   1 +
 .../src/ng_module/compiler.rs                 | 138 ++++++----------
 .../src/ng_module/decorator.rs                |  70 +++++++--
 .../src/ng_module/definition.rs               | 147 +++++++++++++++++-
 .../src/ng_module/metadata.rs                 |  39 +++++
 .../tests/integration_test.rs                 |  42 +++++
 .../fixtures/injector/basic.fixture.ts        |  48 ++++++
 .../e2e/compare/fixtures/known-differences.ts |  13 --
 9 files changed, 387 insertions(+), 121 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/class_metadata/compiler.rs b/crates/oxc_angular_compiler/src/class_metadata/compiler.rs
index b2f2cac53..4c7649a3c 100644
--- a/crates/oxc_angular_compiler/src/class_metadata/compiler.rs
+++ b/crates/oxc_angular_compiler/src/class_metadata/compiler.rs
@@ -307,6 +307,16 @@ fn dev_only_guarded_expression<'a>(
     guarded_expression(allocator, "ngDevMode", expr)
 }
 
+/// Creates: (typeof ngJitMode === "undefined" || ngJitMode) && expr
+///
+/// Ported from Angular's `jitOnlyGuardedExpression` in `util.ts`.
+pub(crate) fn jit_only_guarded_expression<'a>(
+    allocator: &'a Allocator,
+    expr: OutputExpression<'a>,
+) -> OutputExpression<'a> {
+    guarded_expression(allocator, "ngJitMode", expr)
+}
+
 /// Creates: (typeof guard === "undefined" || guard) && expr
 fn guarded_expression<'a>(
     allocator: &'a Allocator,
diff --git a/crates/oxc_angular_compiler/src/class_metadata/mod.rs b/crates/oxc_angular_compiler/src/class_metadata/mod.rs
index 0073b8426..6b829df67 100644
--- a/crates/oxc_angular_compiler/src/class_metadata/mod.rs
+++ b/crates/oxc_angular_compiler/src/class_metadata/mod.rs
@@ -19,6 +19,7 @@ pub use builders::{
     build_prop_decorators_metadata, build_prop_decorators_metadata_in,
 };
 pub(crate) use builders::{entity_path, param_type_reference, type_param_names_of};
+pub(crate) use compiler::jit_only_guarded_expression;
 pub use compiler::{
     compile_class_metadata, compile_component_class_metadata,
     compile_component_metadata_async_resolver, compile_opaque_async_class_metadata,
diff --git a/crates/oxc_angular_compiler/src/ng_module/compiler.rs b/crates/oxc_angular_compiler/src/ng_module/compiler.rs
index 674c55fb4..e96220bda 100644
--- a/crates/oxc_angular_compiler/src/ng_module/compiler.rs
+++ b/crates/oxc_angular_compiler/src/ng_module/compiler.rs
@@ -17,10 +17,11 @@ use oxc_allocator::{Allocator, Box, Vec};
 use oxc_str::Ident;
 
 use super::metadata::{R3NgModuleMetadata, R3Reference};
+use crate::class_metadata::jit_only_guarded_expression;
 use crate::output::ast::{
-    BinaryOperator, BinaryOperatorExpr, FunctionExpr, InvokeFunctionExpr, LiteralArrayExpr,
-    LiteralExpr, LiteralMapEntry, LiteralMapExpr, LiteralValue, OutputExpression, OutputStatement,
-    ReadPropExpr, ReadVarExpr, ReturnStatement,
+    ArrowFunctionBody, ArrowFunctionExpr, FunctionExpr, InvokeFunctionExpr, LiteralArrayExpr,
+    LiteralMapEntry, LiteralMapExpr, OutputExpression, OutputStatement, ParenthesizedExpr,
+    ReadPropExpr, ReadVarExpr,
 };
 use crate::r3::Identifiers;
 
@@ -168,16 +169,13 @@ fn create_reference_array<'a>(
     ));
 
     if wrap_in_function {
-        // () => [Class1, Class2, ...]
-        let params = Vec::new_in(&allocator);
-        let mut body = Vec::new_in(&allocator);
-        body.push(OutputStatement::Return(Box::new_in(
-            ReturnStatement { value: array, source_span: None },
-            &allocator,
-        )));
-
-        OutputExpression::Function(Box::new_in(
-            FunctionExpr { name: None, params, statements: body, source_span: None },
+        // () => [Class1, Class2, ...], like ngtsc's `refsToArray`
+        OutputExpression::ArrowFunction(Box::new_in(
+            ArrowFunctionExpr {
+                params: Vec::new_in(&allocator),
+                body: ArrowFunctionBody::Expression(Box::new_in(array, &allocator)),
+                source_span: None,
+            },
             &allocator,
         ))
     } else {
@@ -248,33 +246,28 @@ fn create_set_scope_side_effect<'a>(
     core_namespace: &'a str,
     metadata: &R3NgModuleMetadata<'a>,
 ) -> Option<OutputStatement<'a>> {
-    // Only create if there's something to set
-    if !metadata.has_declarations() && !metadata.has_imports() && !metadata.has_exports() {
-        return None;
-    }
-
-    // Build the scope map
+    // Build the scope map. A list given as a raw expression (one Oxc could
+    // not resolve statically) is emitted as written; the runtime flattens it.
     let mut scope_entries = Vec::new_in(&allocator);
-
-    if metadata.has_declarations() {
-        let decls = create_reference_array(
-            &allocator,
-            &metadata.declarations,
-            metadata.contains_forward_decls,
-        );
-        scope_entries.push(LiteralMapEntry::new(Ident::from("declarations"), decls, false));
+    let fields = [
+        ("declarations", &metadata.declarations, &metadata.declarations_expression),
+        ("imports", &metadata.imports, &metadata.imports_expression),
+        ("exports", &metadata.exports, &metadata.exports_expression),
+    ];
+    for (key, refs, raw) in fields {
+        let value = match raw {
+            Some(raw) => raw.clone_in(allocator),
+            None if !refs.is_empty() => {
+                create_reference_array(allocator, refs, metadata.contains_forward_decls)
+            }
+            None => continue,
+        };
+        scope_entries.push(LiteralMapEntry::new(Ident::from(key), value, false));
     }
 
-    if metadata.has_imports() {
-        let imports =
-            create_reference_array(allocator, &metadata.imports, metadata.contains_forward_decls);
-        scope_entries.push(LiteralMapEntry::new(Ident::from("imports"), imports, false));
-    }
-
-    if metadata.has_exports() {
-        let exports =
-            create_reference_array(allocator, &metadata.exports, metadata.contains_forward_decls);
-        scope_entries.push(LiteralMapEntry::new(Ident::from("exports"), exports, false));
+    // Only create if there's something to set
+    if scope_entries.is_empty() {
+        return None;
     }
 
     let scope_map = OutputExpression::LiteralMap(Box::new_in(
@@ -314,56 +307,8 @@ fn create_set_scope_side_effect<'a>(
         &allocator,
     ));
 
-    // Create: (typeof ngJitMode === "undefined" || ngJitMode)
-    let typeof_expr = OutputExpression::ReadVar(Box::new_in(
-        ReadVarExpr { name: Ident::from("typeof ngJitMode"), source_span: None },
-        &allocator,
-    ));
-
-    let undefined_check = OutputExpression::BinaryOperator(Box::new_in(
-        BinaryOperatorExpr {
-            operator: BinaryOperator::Equals,
-            lhs: Box::new_in(typeof_expr, &allocator),
-            rhs: Box::new_in(
-                OutputExpression::Literal(Box::new_in(
-                    LiteralExpr {
-                        value: LiteralValue::String(Ident::from("undefined")),
-                        source_span: None,
-                    },
-                    &allocator,
-                )),
-                &allocator,
-            ),
-            source_span: None,
-        },
-        &allocator,
-    ));
-
-    let ng_jit_mode = OutputExpression::ReadVar(Box::new_in(
-        ReadVarExpr { name: Ident::from("ngJitMode"), source_span: None },
-        &allocator,
-    ));
-
-    let jit_mode_check = OutputExpression::BinaryOperator(Box::new_in(
-        BinaryOperatorExpr {
-            operator: BinaryOperator::Or,
-            lhs: Box::new_in(undefined_check, &allocator),
-            rhs: Box::new_in(ng_jit_mode, &allocator),
-            source_span: None,
-        },
-        &allocator,
-    ));
-
-    // Create: (jitModeCheck) && setNgModuleScope(...)
-    let guarded_call = OutputExpression::BinaryOperator(Box::new_in(
-        BinaryOperatorExpr {
-            operator: BinaryOperator::And,
-            lhs: Box::new_in(jit_mode_check, &allocator),
-            rhs: Box::new_in(set_scope_call, &allocator),
-            source_span: None,
-        },
-        &allocator,
-    ));
+    // Create: (typeof ngJitMode === "undefined" || ngJitMode) && setNgModuleScope(...)
+    let guarded_call = jit_only_guarded_expression(allocator, set_scope_call);
 
     // Wrap in IIFE: (function() { ... })()
     let params = Vec::new_in(&allocator);
@@ -373,8 +318,18 @@ fn create_set_scope_side_effect<'a>(
         &allocator,
     )));
 
-    let iife_fn = OutputExpression::Function(Box::new_in(
-        FunctionExpr { name: None, params, statements: body, source_span: None },
+    // The parens keep the statement from parsing as a function declaration.
+    let iife_fn = OutputExpression::Parenthesized(Box::new_in(
+        ParenthesizedExpr {
+            expr: Box::new_in(
+                OutputExpression::Function(Box::new_in(
+                    FunctionExpr { name: None, params, statements: body, source_span: None },
+                    &allocator,
+                )),
+                &allocator,
+            ),
+            source_span: None,
+        },
         &allocator,
     ));
 
@@ -578,8 +533,7 @@ mod tests {
         let emitter = JsEmitter::new();
         let output = emitter.emit_expression(&result.expression);
 
-        // Should contain arrow function wrapper
-        assert!(output.contains("function"));
-        assert!(output.contains("return"));
+        // Should contain arrow function wrapper, like ngtsc's refsToArray
+        assert!(output.contains("declarations:() =>[ForwardComponent]"), "got: {output}");
     }
 }
diff --git a/crates/oxc_angular_compiler/src/ng_module/decorator.rs b/crates/oxc_angular_compiler/src/ng_module/decorator.rs
index 59714cef2..e14440f38 100644
--- a/crates/oxc_angular_compiler/src/ng_module/decorator.rs
+++ b/crates/oxc_angular_compiler/src/ng_module/decorator.rs
@@ -43,6 +43,16 @@ pub struct NgModuleMetadata<'a> {
     /// Exported declarations and modules as class names.
     pub exports: Vec<'a, Ident<'a>>,
 
+    /// The `declarations`, `imports` and `exports` expressions as written,
+    /// kept only for a list that is not a plain array of class references
+    /// (a const array, a spread, a `forRoot()` call...), whose names above
+    /// are incomplete. `ɵɵsetNgModuleScope` emits these instead.
+    pub declarations_scope_expr: Option<OutputExpression<'a>>,
+    /// See [`Self::declarations_scope_expr`].
+    pub imports_scope_expr: Option<OutputExpression<'a>>,
+    /// See [`Self::declarations_scope_expr`].
+    pub exports_scope_expr: Option<OutputExpression<'a>>,
+
     /// Providers expression as OutputExpression.
     pub providers: Option<OutputExpression<'a>>,
 
@@ -74,6 +84,9 @@ impl<'a> NgModuleMetadata<'a> {
             imports: Vec::new_in(&allocator),
             raw_imports_expr: None,
             exports: Vec::new_in(&allocator),
+            declarations_scope_expr: None,
+            imports_scope_expr: None,
+            exports_scope_expr: None,
             providers: None,
             bootstrap: Vec::new_in(&allocator),
             schemas: Vec::new_in(&allocator),
@@ -95,11 +108,24 @@ impl<'a> NgModuleMetadata<'a> {
             &allocator,
         ));
 
+        // Like ngtsc in full compilation, the scope is patched on with a
+        // tree-shakeable `ɵɵsetNgModuleScope` call instead of being inlined.
+        // See: packages/compiler-cli/src/ngtsc/annotations/ng_module/src/handler.ts
         let mut builder = R3NgModuleMetadataBuilder::new(allocator)
             .r#type(R3Reference::value_only(type_expr))
-            .selector_scope_mode(R3SelectorScopeMode::Inline)
+            .selector_scope_mode(R3SelectorScopeMode::SideEffect)
             .contains_forward_decls(self.contains_forward_decls);
 
+        if let Some(expr) = &self.declarations_scope_expr {
+            builder = builder.declarations_expression(expr.clone_in(allocator));
+        }
+        if let Some(expr) = &self.imports_scope_expr {
+            builder = builder.imports_expression(expr.clone_in(allocator));
+        }
+        if let Some(expr) = &self.exports_scope_expr {
+            builder = builder.exports_expression(expr.clone_in(allocator));
+        }
+
         // Add declarations
         for decl in &self.declarations {
             let decl_expr = OutputExpression::ReadVar(Box::new_in(
@@ -235,15 +261,19 @@ pub(crate) fn extract_ng_module_metadata_in<'a>(
 
             match key_name.as_str() {
                 "declarations" => {
-                    let (identifiers, has_forward_refs) =
+                    let (identifiers, has_forward_refs, is_static) =
                         extract_reference_array(allocator, &prop.value);
                     metadata.declarations = identifiers;
                     if has_forward_refs {
                         metadata.contains_forward_decls = true;
                     }
+                    if !is_static {
+                        metadata.declarations_scope_expr =
+                            convert_oxc_expression(allocator, &prop.value, source_text);
+                    }
                 }
                 "imports" => {
-                    let (identifiers, has_forward_refs) =
+                    let (identifiers, has_forward_refs, is_static) =
                         extract_reference_array(allocator, &prop.value);
                     metadata.imports = identifiers;
                     if has_forward_refs {
@@ -254,21 +284,29 @@ pub(crate) fn extract_ng_module_metadata_in<'a>(
                     // and spread elements that are dropped by extract_reference_array.
                     metadata.raw_imports_expr =
                         convert_oxc_expression(allocator, &prop.value, source_text);
+                    if !is_static {
+                        metadata.imports_scope_expr =
+                            metadata.raw_imports_expr.as_ref().map(|e| e.clone_in(allocator));
+                    }
                 }
                 "exports" => {
-                    let (identifiers, has_forward_refs) =
+                    let (identifiers, has_forward_refs, is_static) =
                         extract_reference_array(allocator, &prop.value);
                     metadata.exports = identifiers;
                     if has_forward_refs {
                         metadata.contains_forward_decls = true;
                     }
+                    if !is_static {
+                        metadata.exports_scope_expr =
+                            convert_oxc_expression(allocator, &prop.value, source_text);
+                    }
                 }
                 "providers" => {
                     metadata.providers =
                         convert_oxc_expression(allocator, &prop.value, source_text);
                 }
                 "bootstrap" => {
-                    let (identifiers, has_forward_refs) =
+                    let (identifiers, has_forward_refs, _) =
                         extract_reference_array(allocator, &prop.value);
                     metadata.bootstrap = identifiers;
                     if has_forward_refs {
@@ -354,16 +392,21 @@ fn extract_string_value<'a>(expr: &Expression<'a>) -> Option<Ident<'a>> {
 }
 
 /// Extract an array of identifiers (for declarations, imports, exports, bootstrap).
-/// Returns the identifiers and whether any forward references were found.
+///
+/// Returns the identifiers, whether any forward references were found, and
+/// whether the identifiers are the whole list: `false` when the value is not
+/// an array literal, or has an element other than a class name or a
+/// `forwardRef(() => Class)` (a spread, a `forRoot()` call...).
 fn extract_reference_array<'a>(
     allocator: &'a Allocator,
     expr: &Expression<'a>,
-) -> (Vec<'a, Ident<'a>>, bool) {
+) -> (Vec<'a, Ident<'a>>, bool, bool) {
     let mut result = Vec::new_in(&allocator);
     let mut has_forward_refs = false;
+    let mut is_static = true;
 
     let Expression::ArrayExpression(arr) = expr else {
-        return (result, has_forward_refs);
+        return (result, has_forward_refs, false);
     };
 
     for element in &arr.elements {
@@ -375,6 +418,7 @@ fn extract_reference_array<'a>(
             // Forward reference: forwardRef(() => SomeComponent)
             // Or method call: StoreModule.forRoot(...), EffectsModule.forRoot([...])
             ArrayExpressionElement::CallExpression(call) => {
+                let mut resolved = false;
                 if let Expression::Identifier(id) = &call.callee {
                     if id.name == "forwardRef" {
                         has_forward_refs = true;
@@ -383,23 +427,27 @@ fn extract_reference_array<'a>(
                         {
                             if let Some(Expression::Identifier(inner_id)) = arrow.get_expression() {
                                 result.push(inner_id.name.clone().into());
+                                resolved = true;
                             }
                         }
                     }
                 } else if let Expression::StaticMemberExpression(member) = &call.callee {
                     // Module.forRoot(...) or Module.forChild(...) pattern
-                    // Extract the base class identifier for ɵmod scope resolution
+                    // Extract the base class identifier for ɵmod scope resolution.
+                    // The call may return another module, so the list still
+                    // counts as unresolved.
                     if let Expression::Identifier(id) = &member.object {
                         result.push(id.name.clone().into());
                     }
                 }
+                is_static &= resolved;
             }
             // Spread element or other complex expressions - skip
-            _ => {}
+            _ => is_static = false,
         }
     }
 
-    (result, has_forward_refs)
+    (result, has_forward_refs, is_static)
 }
 
 /// Extract an array of simple identifiers (for schemas).
diff --git a/crates/oxc_angular_compiler/src/ng_module/definition.rs b/crates/oxc_angular_compiler/src/ng_module/definition.rs
index bc17a793e..aa9f05a3a 100644
--- a/crates/oxc_angular_compiler/src/ng_module/definition.rs
+++ b/crates/oxc_angular_compiler/src/ng_module/definition.rs
@@ -10,14 +10,19 @@
 //! ## Generated Output
 //!
 //! ```javascript
-//! // Module definition:
+//! // Module definition (the scope is patched on below, JIT only):
 //! AppModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({
 //!   type: AppModule,
-//!   bootstrap: [AppComponent],
-//!   declarations: [MyComponent],
-//!   imports: [CommonModule],
-//!   exports: [MyComponent]
+//!   bootstrap: [AppComponent]
 //! });
+//! (function() {
+//!   (typeof ngJitMode === "undefined" || ngJitMode) &&
+//!     i0.ɵɵsetNgModuleScope(AppModule, {
+//!       declarations: [MyComponent],
+//!       imports: [CommonModule],
+//!       exports: [MyComponent]
+//!     });
+//! })();
 //!
 //! // Factory function:
 //! AppModule.ɵfac = function AppModule_Factory(__ngFactoryType__) {
@@ -770,6 +775,138 @@ mod tests {
         );
     }
 
+    /// Compile `code`'s NgModule in full mode and emit all of its output.
+    fn full_module_js(code: &str) -> String {
+        let allocator = Allocator::default();
+        let code = allocator.alloc_str(code);
+        let metadata = module_metadata_from_code(&allocator, code);
+        let class_name = metadata.class_name.to_string();
+        let definition =
+            generate_full_ng_module_definition(&allocator, "i0", &metadata, CompilationMode::Full)
+                .expect("Should generate definition");
+        emit_full_ng_module_definition(&class_name, &definition)
+    }
+
+    #[test]
+    fn test_ng_module_scope_is_a_jit_only_side_effect() {
+        // Like ngtsc in full compilation: ɵmod keeps only `type` and
+        // `bootstrap`, the scope goes to a `ngJitMode`-guarded
+        // ɵɵsetNgModuleScope call, and a class without a constructor or a
+        // superclass gets a plain factory.
+        let js = full_module_js(
+            r"
+            @NgModule({
+              declarations: [A],
+              imports: [CommonModule],
+              exports: [A],
+              bootstrap: [A],
+            })
+            export class M {}
+        ",
+        );
+        assert_eq!(
+            js,
+            "M.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({type:M,bootstrap:[A]});\n\
+             M.ɵfac = function M_Factory(__ngFactoryType__) {\n  return new (__ngFactoryType__ || M)();\n};\n\
+             M.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({imports:[CommonModule]});\n\
+             (function() {\n  (((typeof ngJitMode === \"undefined\") || ngJitMode) && \
+             i0.ɵɵsetNgModuleScope(M,{declarations:[A],\n      imports:[CommonModule],exports:[A]}));\n})();"
+        );
+    }
+
+    /// The `ɵmod` line and the `ɵɵsetNgModuleScope` IIFE (if any) of `js`.
+    fn mod_and_scope(js: &str) -> (&str, Option<&str>) {
+        let mod_line = js.lines().next().unwrap_or_default();
+        (mod_line, js.find("(function() {").map(|start| &js[start..]))
+    }
+
+    #[test]
+    fn test_ng_module_scope_keeps_unresolved_lists_as_written() {
+        // Const arrays, spreads and `forRoot()` calls cannot be resolved to
+        // classes in a single file; they reach ɵɵsetNgModuleScope as written
+        // (the runtime flattens them and unwraps ModuleWithProviders).
+        let js = full_module_js(
+            r"
+            @NgModule({
+              declarations: [...DECLS, P],
+              imports: [SHARED, RouterModule.forChild([])],
+              exports: DECLS,
+            })
+            export class M {}
+        ",
+        );
+        assert_eq!(
+            mod_and_scope(&js),
+            (
+                "M.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({type:M});",
+                Some(
+                    "(function() {\n  (((typeof ngJitMode === \"undefined\") || ngJitMode) && \
+                     i0.ɵɵsetNgModuleScope(M,{declarations:[...DECLS,\n      P],\
+                     imports:[SHARED,RouterModule.forChild([])],exports:DECLS}));\n})();"
+                )
+            )
+        );
+    }
+
+    #[test]
+    fn test_ng_module_scope_skips_empty_lists() {
+        // ngtsc drops empty lists from the scope, and the whole call when
+        // nothing is left.
+        let js = full_module_js(
+            r"
+            @NgModule({ imports: [CommonModule], declarations: [], exports: [] })
+            export class M {}
+        ",
+        );
+        assert_eq!(
+            mod_and_scope(&js).1,
+            Some(
+                "(function() {\n  (((typeof ngJitMode === \"undefined\") || ngJitMode) && \
+                 i0.ɵɵsetNgModuleScope(M,{imports:[CommonModule]}));\n})();"
+            )
+        );
+
+        let js = full_module_js(
+            r"
+            @NgModule({ declarations: [] })
+            export class M {}
+        ",
+        );
+        assert_eq!(
+            mod_and_scope(&js),
+            ("M.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({type:M});", None)
+        );
+    }
+
+    #[test]
+    fn test_ng_module_scope_forward_refs_use_arrow_function() {
+        // ngtsc's refsToArray wraps forward-declared lists in an arrow function.
+        let js = full_module_js(
+            r"
+            @NgModule({ declarations: [forwardRef(() => Late)] })
+            export class M {}
+        ",
+        );
+        assert_eq!(
+            mod_and_scope(&js).1,
+            Some(
+                "(function() {\n  (((typeof ngJitMode === \"undefined\") || ngJitMode) && \
+                 i0.ɵɵsetNgModuleScope(M,{declarations:() =>[Late]}));\n})();"
+            )
+        );
+    }
+
+    #[test]
+    fn test_ng_module_without_constructor_with_superclass_uses_inherited_factory() {
+        let js = full_module_js(
+            r"
+            @NgModule({})
+            export class M extends Base {}
+        ",
+        );
+        assert!(js.contains("ɵɵgetInheritedFactory(M)"), "Should inherit the factory, got: {js}");
+    }
+
     #[test]
     fn test_ng_module_definition_is_pure() {
         // Test that the generated expression has pure=true set on the function call.
diff --git a/crates/oxc_angular_compiler/src/ng_module/metadata.rs b/crates/oxc_angular_compiler/src/ng_module/metadata.rs
index 9569bc8a4..174d7a704 100644
--- a/crates/oxc_angular_compiler/src/ng_module/metadata.rs
+++ b/crates/oxc_angular_compiler/src/ng_module/metadata.rs
@@ -66,6 +66,18 @@ pub struct R3NgModuleMetadata<'a> {
     /// Exported classes.
     pub exports: Vec<'a, R3Reference<'a>>,
 
+    /// The `declarations` expression as written, used by `ɵɵsetNgModuleScope`
+    /// in place of [`Self::declarations`] when the list could not be resolved
+    /// statically (a const array, a spread, a call...). The runtime flattens
+    /// it, like the raw expressions ngtsc emits in local compilation.
+    pub declarations_expression: Option<OutputExpression<'a>>,
+
+    /// The `imports` expression as written; see [`Self::declarations_expression`].
+    pub imports_expression: Option<OutputExpression<'a>>,
+
+    /// The `exports` expression as written; see [`Self::declarations_expression`].
+    pub exports_expression: Option<OutputExpression<'a>>,
+
     /// Custom element schemas.
     pub schemas: Vec<'a, R3Reference<'a>>,
 
@@ -124,6 +136,9 @@ pub struct R3NgModuleMetadataBuilder<'a> {
     declarations: Vec<'a, R3Reference<'a>>,
     imports: Vec<'a, R3Reference<'a>>,
     exports: Vec<'a, R3Reference<'a>>,
+    declarations_expression: Option<OutputExpression<'a>>,
+    imports_expression: Option<OutputExpression<'a>>,
+    exports_expression: Option<OutputExpression<'a>>,
     schemas: Vec<'a, R3Reference<'a>>,
     id: Option<OutputExpression<'a>>,
     selector_scope_mode: R3SelectorScopeMode,
@@ -139,6 +154,9 @@ impl<'a> R3NgModuleMetadataBuilder<'a> {
             declarations: Vec::new_in(&allocator),
             imports: Vec::new_in(&allocator),
             exports: Vec::new_in(&allocator),
+            declarations_expression: None,
+            imports_expression: None,
+            exports_expression: None,
             schemas: Vec::new_in(&allocator),
             id: None,
             selector_scope_mode: R3SelectorScopeMode::Inline,
@@ -176,6 +194,24 @@ impl<'a> R3NgModuleMetadataBuilder<'a> {
         self
     }
 
+    /// Set the raw `declarations` expression for `ɵɵsetNgModuleScope`.
+    pub fn declarations_expression(mut self, expr: OutputExpression<'a>) -> Self {
+        self.declarations_expression = Some(expr);
+        self
+    }
+
+    /// Set the raw `imports` expression for `ɵɵsetNgModuleScope`.
+    pub fn imports_expression(mut self, expr: OutputExpression<'a>) -> Self {
+        self.imports_expression = Some(expr);
+        self
+    }
+
+    /// Set the raw `exports` expression for `ɵɵsetNgModuleScope`.
+    pub fn exports_expression(mut self, expr: OutputExpression<'a>) -> Self {
+        self.exports_expression = Some(expr);
+        self
+    }
+
     /// Add a schema.
     pub fn add_schema(mut self, schema: R3Reference<'a>) -> Self {
         self.schemas.push(schema);
@@ -212,6 +248,9 @@ impl<'a> R3NgModuleMetadataBuilder<'a> {
             declarations: self.declarations,
             imports: self.imports,
             exports: self.exports,
+            declarations_expression: self.declarations_expression,
+            imports_expression: self.imports_expression,
+            exports_expression: self.exports_expression,
             schemas: self.schemas,
             id: self.id,
             selector_scope_mode: self.selector_scope_mode,
diff --git a/crates/oxc_angular_compiler/tests/integration_test.rs b/crates/oxc_angular_compiler/tests/integration_test.rs
index e3ae0b37b..7f75137e8 100644
--- a/crates/oxc_angular_compiler/tests/integration_test.rs
+++ b/crates/oxc_angular_compiler/tests/integration_test.rs
@@ -16183,6 +16183,48 @@ export class D {}
     assert!(result.dts_declarations.is_empty());
 }
 
+#[test]
+fn test_ng_module_scope_is_set_by_a_jit_only_side_effect() {
+    // Like ngtsc in full compilation: the class keeps ɵmod with only the
+    // type, and a ngJitMode-guarded IIFE after it patches the scope on.
+    let allocator = Allocator::default();
+    let source = r"
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+const SHARED = [CommonModule];
+
+@NgModule({ imports: [SHARED, FormsModule] })
+export class M {}
+";
+    let result = transform_angular_file(&allocator, "m.module.ts", source, None, None);
+    assert!(!result.has_errors(), "Should not have errors: {:?}", result.diagnostics);
+    assert!(
+        result.code.contains("static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({type:M});"),
+        "ɵmod should only have the type. Got:\n{}",
+        result.code
+    );
+    assert!(
+        result.code.contains(
+            "(function() {\n  (((typeof ngJitMode === \"undefined\") || ngJitMode) && \
+             i0.ɵɵsetNgModuleScope(M,{imports:[SHARED,\n      FormsModule]}));\n})();"
+        ),
+        "Should patch the scope on in a ngJitMode-guarded IIFE. Got:\n{}",
+        result.code
+    );
+
+    // The IIFE must parse as an expression statement, not a function declaration.
+    let parsed =
+        oxc_parser::Parser::new(&allocator, &result.code, oxc_span::SourceType::ts()).parse();
+    assert!(
+        parsed.diagnostics.is_empty(),
+        "Output should parse: {:?}\n{}",
+        parsed.diagnostics,
+        result.code
+    );
+}
+
 #[test]
 fn test_jit_true_ng_module_skips_aot() {
     let allocator = Allocator::default();
diff --git a/napi/angular-compiler/e2e/compare/fixtures/injector/basic.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/injector/basic.fixture.ts
index 0c2c4f843..1304efe62 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/injector/basic.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/injector/basic.fixture.ts
@@ -84,4 +84,52 @@ export class FullModule {}
     `.trim(),
     expectedFeatures: ['defineInjector', 'defineNgModule', 'MODULE_PROVIDERS', 'CommonModule'],
   },
+  {
+    type: 'full-transform',
+    name: 'injector-with-spread-declarations',
+    category: 'injector',
+    description: 'NgModule whose declarations and imports use const arrays and spreads',
+    className: 'SpreadModule',
+    sourceCode: `
+import { Component, NgModule, Pipe } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({ selector: 'app-a', template: '', standalone: false })
+export class AComponent {}
+
+@Pipe({ name: 'b', standalone: false })
+export class BPipe {
+  transform(value: unknown) {
+    return value;
+  }
+}
+
+const DECLARATIONS = [AComponent];
+const SHARED = [CommonModule, FormsModule];
+
+@NgModule({
+  declarations: [...DECLARATIONS, BPipe],
+  imports: [SHARED],
+})
+export class SpreadModule {}
+    `.trim(),
+    expectedFeatures: ['defineInjector', 'defineNgModule', 'ɵɵsetNgModuleScope', 'SHARED'],
+  },
+  {
+    type: 'full-transform',
+    name: 'injector-extends-base-without-constructor',
+    category: 'injector',
+    description: 'NgModule that extends a base class without a constructor inherits its factory',
+    className: 'DerivedModule',
+    sourceCode: `
+import { NgModule } from '@angular/core';
+
+class BaseModule {}
+
+@NgModule({})
+export class DerivedModule extends BaseModule {}
+    `.trim(),
+    expectedFeatures: ['defineInjector', 'defineNgModule', 'ɵɵgetInheritedFactory'],
+  },
 ]
diff --git a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
index d95775007..41649b2ce 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
@@ -19,7 +19,6 @@ interface KnownDifference {
   reasons: string[]
 }
 
-const NG_MODULE_IMPORTS = 'ɵmod includes imports, which Angular omits in full compilation'
 const HOST_ATTRS_ORDER = 'hostAttrs are emitted in a different order'
 const CUSTOM_DECORATOR =
   'the reference ngtsc compile leaves a class with a non-Angular decorator uncompiled, so only Oxc emits ɵfac/ɵcmp'
@@ -51,10 +50,6 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     ],
     reasons: [SET_CLASS_METADATA_IMPORT],
   },
-  'class-metadata/class-metadata-ngmodule': {
-    fields: ['TestableModule.ɵmod'],
-    reasons: [NG_MODULE_IMPORTS],
-  },
   'class-metadata/class-metadata-with-inject': {
     fields: [],
     importDiffs: [
@@ -136,14 +131,6 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     fields: ['HostDirectivesOnPushComponent.ɵcmp'],
     reasons: [CHANGE_DETECTION_V22],
   },
-  'injector/injector-with-both': {
-    fields: ['FullModule.ɵmod'],
-    reasons: [NG_MODULE_IMPORTS],
-  },
-  'injector/injector-with-imports': {
-    fields: ['FeatureModule.ɵmod'],
-    reasons: [NG_MODULE_IMPORTS],
-  },
   'providers/object-members-injectable-use-factory': {
     fields: ['ObjectMembersService.ɵprov'],
     reasons: [INJECTABLE_FACTORY_WRAPPER],

From 2f895602af87600014b6cfbcd7f7cbe806ac7521 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:21:11 +0800
Subject: [PATCH 22/54] fix(styles): gate the legacy ShadowCss polyfill passes
 on the Angular version

Angular v22.0.0-rc.0 removed the polyfill-next-selector, polyfill-rule
and polyfill-unscoped-rule rewrites and the ::shadow / ::content
replacement from ShadowCss (22.0.0-next.12 still has them; checked
against the published @angular/compiler packages). The shim always ran
them, so on v22 these blocks were rewritten instead of being scoped like
any other rule.

Angular 19-21 are still supported, so the passes stay and run only when
the configured version predates v22.0.0-rc.0
(AngularVersion::uses_shadow_css_polyfills). None keeps meaning
"latest", like the other version gates.

The version is threaded through:
- shim_css_text_for_version / encapsulate_style_for_version (new);
  shim_css_text / encapsulate_style keep their signatures (latest).
- finalize_component_style takes the version; the component compiler,
  HMR compile and the linker pass theirs.
- NAPI encapsulateStyle gets an optional third angularVersion argument
  (backward compatible) and the vite styles plugin passes its
  angularVersion option.

e2e compare: shadow-css-polyfill-next-selector and
shadow-css-polyfill-unscoped-rule now match ngtsc 22 and leave
known-differences; the polyfill-rule reason is updated (ngtsc 22.2
strips a marker in the rule body as part of CSS nesting support).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/component/definition.rs               |   1 +
 .../src/component/metadata.rs                 |  41 +++++++
 crates/oxc_angular_compiler/src/lib.rs        |   4 +-
 crates/oxc_angular_compiler/src/linker/mod.rs |   8 +-
 .../src/styles/encapsulation.rs               | 113 +++++++++++++-----
 .../oxc_angular_compiler/src/styles/minify.rs |   9 +-
 crates/oxc_angular_compiler/src/styles/mod.rs |   4 +-
 .../tests/shadow_css_test.rs                  | 108 +++++++++++++++--
 .../e2e/compare/fixtures/known-differences.ts |  12 +-
 napi/angular-compiler/index.d.ts              |   9 +-
 napi/angular-compiler/src/lib.rs              |  16 ++-
 napi/angular-compiler/vite-plugin/index.ts    |   2 +-
 12 files changed, 269 insertions(+), 58 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/component/definition.rs b/crates/oxc_angular_compiler/src/component/definition.rs
index ea4f317a5..c173ab543 100644
--- a/crates/oxc_angular_compiler/src/component/definition.rs
+++ b/crates/oxc_angular_compiler/src/component/definition.rs
@@ -415,6 +415,7 @@ fn generate_cmp_definition<'a>(
                 content_attr,
                 host_attr,
                 options.minify_component_styles,
+                options.angular_version,
             );
             if style.trim().is_empty() {
                 continue;
diff --git a/crates/oxc_angular_compiler/src/component/metadata.rs b/crates/oxc_angular_compiler/src/component/metadata.rs
index 318e55935..2c098b0ee 100644
--- a/crates/oxc_angular_compiler/src/component/metadata.rs
+++ b/crates/oxc_angular_compiler/src/component/metadata.rs
@@ -219,6 +219,21 @@ impl AngularVersion {
         self.is_at_least(22, 0, 0)
     }
 
+    /// Check if this version's `ShadowCss` still runs the legacy Shadow DOM
+    /// polyfill passes (before v22.0.0-rc.0).
+    ///
+    /// Until then `shimCssText` rewrote `polyfill-next-selector`,
+    /// `polyfill-rule` and `polyfill-unscoped-rule` blocks and replaced the
+    /// `::shadow` / `::content` combinators with a space. v22.0.0-rc.0 dropped
+    /// all four passes (`22.0.0-next.12` still has them), so a v22 stylesheet
+    /// scopes those tokens like any other selector text.
+    pub fn uses_shadow_css_polyfills(&self) -> bool {
+        if self.major == 22 && self.minor == 0 && self.patch == 0 {
+            return matches!(self.prerelease, Some(prerelease) if prerelease < Prerelease::Rc(0));
+        }
+        self.major < 22
+    }
+
     /// Check if this version is `major.minor.patch` or newer.
     ///
     /// Compares the release triple only: a prerelease of `22.3.0` counts as
@@ -936,4 +951,30 @@ mod tests {
             assert!(!version.supports_incremental_hydration_runtime(), "{version:?}");
         }
     }
+
+    #[test]
+    fn shadow_css_polyfills_end_at_22_0_0_rc_0() {
+        let parse = |s| AngularVersion::parse(s).unwrap();
+
+        for version in [
+            parse("19.2.25"),
+            parse("20.3.18"),
+            parse("21.2.25"),
+            parse("22.0.0-next.12"),
+            // Unknown tags parse to `Other`, below `next`.
+            parse("22.0.0-beta.1"),
+        ] {
+            assert!(version.uses_shadow_css_polyfills(), "{version:?}");
+        }
+
+        for version in [
+            parse("22.0.0-rc.0"),
+            parse("22.0.0"),
+            parse("22.2.2"),
+            parse("23.0.0"),
+            AngularVersion::new(u32::MAX, 0, 0),
+        ] {
+            assert!(!version.uses_shadow_css_polyfills(), "{version:?}");
+        }
+    }
 }
diff --git a/crates/oxc_angular_compiler/src/lib.rs b/crates/oxc_angular_compiler/src/lib.rs
index a34f97c69..a08487263 100644
--- a/crates/oxc_angular_compiler/src/lib.rs
+++ b/crates/oxc_angular_compiler/src/lib.rs
@@ -84,7 +84,9 @@ pub use hmr::{
 };
 
 // Re-export styles
-pub use styles::{encapsulate_style, shim_css_text};
+pub use styles::{
+    encapsulate_style, encapsulate_style_for_version, shim_css_text, shim_css_text_for_version,
+};
 
 // Re-export pipe types
 pub use pipe::{
diff --git a/crates/oxc_angular_compiler/src/linker/mod.rs b/crates/oxc_angular_compiler/src/linker/mod.rs
index d85c51762..efe786b4d 100644
--- a/crates/oxc_angular_compiler/src/linker/mod.rs
+++ b/crates/oxc_angular_compiler/src/linker/mod.rs
@@ -2146,8 +2146,12 @@ fn link_component(
             let Some(expr) = el.as_expression() else { continue };
             if let Some(style) = as_static_string(expr) {
                 if is_emulated {
-                    let scoped =
-                        crate::styles::shim_css_text(style, "_ngcontent-%COMP%", "_nghost-%COMP%");
+                    let scoped = crate::styles::shim_css_text_for_version(
+                        style,
+                        "_ngcontent-%COMP%",
+                        "_nghost-%COMP%",
+                        options.angular_version,
+                    );
                     if !scoped.trim().is_empty() {
                         scoped_styles.push(crate::output::emitter::escape_string(&scoped, false));
                     }
diff --git a/crates/oxc_angular_compiler/src/styles/encapsulation.rs b/crates/oxc_angular_compiler/src/styles/encapsulation.rs
index 64fece20f..1379d1423 100644
--- a/crates/oxc_angular_compiler/src/styles/encapsulation.rs
+++ b/crates/oxc_angular_compiler/src/styles/encapsulation.rs
@@ -28,6 +28,8 @@
 
 use std::ops::Range;
 
+use crate::component::AngularVersion;
+
 /// Comments are replaced by `%COMMENT<n>%` placeholders during processing,
 /// where `<n>` is the comment's index in the extracted list.
 ///
@@ -303,6 +305,8 @@ impl SafeSelector {
 /// Shim CSS text with the given selectors.
 ///
 /// This is the main entry point matching Angular's `ShadowCss.shimCssText()`.
+/// It follows the latest Angular release; use [`shim_css_text_for_version`]
+/// to match an older one.
 ///
 /// # Arguments
 ///
@@ -324,25 +328,42 @@ impl SafeSelector {
 /// assert!(result.contains("[contenta]"));
 /// ```
 pub fn shim_css_text(css: &str, content_attr: &str, host_attr: &str) -> String {
+    shim_css_text_for_version(css, content_attr, host_attr, None)
+}
+
+/// Shim CSS text the way the given Angular version's `ShadowCss` does.
+///
+/// `None` means the latest Angular release. Versions before v22.0.0-rc.0 also
+/// run the legacy Shadow DOM polyfill passes (`polyfill-next-selector`,
+/// `polyfill-rule`, `polyfill-unscoped-rule`, `::shadow`, `::content`); see
+/// [`AngularVersion::uses_shadow_css_polyfills`].
+pub fn shim_css_text_for_version(
+    css: &str,
+    content_attr: &str,
+    host_attr: &str,
+    angular_version: Option<AngularVersion>,
+) -> String {
     if css.is_empty() {
         return String::new();
     }
 
+    let legacy_polyfills = angular_version.is_some_and(|v| v.uses_shadow_css_polyfills());
+
     // Step 0: Extract comments and replace with placeholders
     // This prevents comment contents from interfering with CSS parsing
-    let (result, comments) = extract_comments(css);
-
-    let mut result = result;
+    let (mut result, comments) = extract_comments(css);
 
     // Step 1: Process polyfill directives (polyfill-next-selector, polyfill-rule)
     // These convert ShadowDOM rules to work with the CSS shim
-    result = insert_polyfill_directives(&result);
-    result = insert_polyfill_rules(&result);
-
     // Step 2: Extract unscoped rules (polyfill-unscoped-rule)
     // These rules are added at the end WITHOUT scoping
-    let unscoped_rules = extract_unscoped_rules(&result);
-    result = remove_unscoped_rules(&result);
+    let mut unscoped_rules = String::new();
+    if legacy_polyfills {
+        result = insert_polyfill_directives(&result);
+        result = insert_polyfill_rules(&result);
+        unscoped_rules = extract_unscoped_rules(&result);
+        result = remove_unscoped_rules(&result);
+    }
 
     // Step 3: Handle :host-context() - must be done before :host
     result = convert_colon_host_context(&result, content_attr, host_attr);
@@ -350,8 +371,10 @@ pub fn shim_css_text(css: &str, content_attr: &str, host_attr: &str) -> String {
     // Step 4: Handle :host selectors
     result = convert_colon_host(&result, host_attr);
 
-    // Step 5: Handle ::ng-deep and other shadow DOM selectors
-    result = convert_shadow_dom_selectors(&result);
+    // Step 5: Handle ::shadow and ::content (removed in v22)
+    if legacy_polyfills {
+        result = convert_shadow_dom_selectors(&result);
+    }
 
     // Step 6: Scope keyframes and animation properties
     if !content_attr.is_empty() {
@@ -926,9 +949,18 @@ fn scope_animation_keyframe(
 /// This is the original API that generates `[ng-c{id}]` format.
 /// Consider using `shim_css_text` directly for more control.
 pub fn encapsulate_style(css: &str, component_id: &str) -> String {
-    let content_attr = format!("ng-c{}", component_id);
-    let host_attr = format!("ng-c{}", component_id);
-    shim_css_text(css, &content_attr, &host_attr)
+    encapsulate_style_for_version(css, component_id, None)
+}
+
+/// [`encapsulate_style`] for a specific Angular version (`None` = latest).
+pub fn encapsulate_style_for_version(
+    css: &str,
+    component_id: &str,
+    angular_version: Option<AngularVersion>,
+) -> String {
+    let content_attr = format!("ng-c{component_id}");
+    let host_attr = format!("ng-c{component_id}");
+    shim_css_text_for_version(css, &content_attr, &host_attr, angular_version)
 }
 
 // =============================================================================
@@ -3396,10 +3428,14 @@ mod tests {
     // Polyfill Directive Tests
     // ============================================================================
 
+    /// The polyfill passes only run for Angular < v22.0.0-rc.0.
+    fn shim_v21(css: &str, content_attr: &str, host_attr: &str) -> String {
+        shim_css_text_for_version(css, content_attr, host_attr, Some(AngularVersion::new(21, 2, 0)))
+    }
+
     #[test]
     fn test_polyfill_next_selector_single_quotes() {
-        let result =
-            shim_css_text("polyfill-next-selector {content: 'x > y'} z {}", "contenta", "");
+        let result = shim_v21("polyfill-next-selector {content: 'x > y'} z {}", "contenta", "");
         assert!(result.contains("x[contenta]"), "Got: {}", result);
         assert!(result.contains("y[contenta]"), "Got: {}", result);
         assert!(!result.contains("polyfill-next-selector"), "Got: {}", result);
@@ -3408,15 +3444,14 @@ mod tests {
 
     #[test]
     fn test_polyfill_next_selector_double_quotes() {
-        let result =
-            shim_css_text("polyfill-next-selector {content: \"x > y\"} z {}", "contenta", "");
+        let result = shim_v21("polyfill-next-selector {content: \"x > y\"} z {}", "contenta", "");
         assert!(result.contains("x[contenta]"), "Got: {}", result);
         assert!(result.contains("y[contenta]"), "Got: {}", result);
     }
 
     #[test]
     fn test_polyfill_next_selector_with_attribute() {
-        let result = shim_css_text(
+        let result = shim_v21(
             "polyfill-next-selector {content: 'button[priority=\"1\"]'} z {}",
             "contenta",
             "",
@@ -3426,7 +3461,7 @@ mod tests {
 
     #[test]
     fn test_polyfill_unscoped_rule_single_quotes() {
-        let result = shim_css_text(
+        let result = shim_v21(
             "polyfill-unscoped-rule {content: '#menu > .bar';color: blue;}",
             "contenta",
             "",
@@ -3443,7 +3478,7 @@ mod tests {
 
     #[test]
     fn test_polyfill_unscoped_rule_double_quotes() {
-        let result = shim_css_text(
+        let result = shim_v21(
             "polyfill-unscoped-rule {content: \"#menu > .bar\";color: blue;}",
             "contenta",
             "",
@@ -3454,7 +3489,7 @@ mod tests {
 
     #[test]
     fn test_polyfill_unscoped_rule_multiple() {
-        let result = shim_css_text(
+        let result = shim_v21(
             "polyfill-unscoped-rule {content: 'foo';color: blue;}polyfill-unscoped-rule {content: 'bar';color: red;}",
             "contenta",
             "",
@@ -3467,7 +3502,7 @@ mod tests {
 
     #[test]
     fn test_polyfill_rule_single_quotes() {
-        let result = shim_css_text(
+        let result = shim_v21(
             "polyfill-rule {content: ':host.foo .bar';color: blue;}",
             "contenta",
             "a-host",
@@ -3480,7 +3515,7 @@ mod tests {
 
     #[test]
     fn test_polyfill_rule_double_quotes() {
-        let result = shim_css_text(
+        let result = shim_v21(
             "polyfill-rule {content: \":host.foo .bar\";color: blue;}",
             "contenta",
             "a-host",
@@ -3491,14 +3526,36 @@ mod tests {
 
     #[test]
     fn test_polyfill_rule_with_attribute() {
-        let result = shim_css_text(
-            "polyfill-rule {content: 'button[priority=\"1\"]'}",
-            "contenta",
-            "a-host",
-        );
+        let result =
+            shim_v21("polyfill-rule {content: 'button[priority=\"1\"]'}", "contenta", "a-host");
         assert!(result.contains("button[priority=\"1\"][contenta]"), "Got: {}", result);
     }
 
+    // ============================================================================
+
+    #[test]
+    fn test_polyfills_are_plain_selectors_in_v22() {
+        // Angular v22 dropped the polyfill passes: the blocks are scoped like
+        // any other rule and `::shadow` / `::content` are kept.
+        assert_eq!(
+            shim_css_text("polyfill-next-selector {content: 'x > y'} z {}", "contenta", ""),
+            "polyfill-next-selector[contenta] {content: 'x > y'} z[contenta] {}"
+        );
+        assert_eq!(
+            shim_css_text(
+                "polyfill-unscoped-rule {content: '#menu > .bar';color: blue;}",
+                "contenta",
+                ""
+            ),
+            "polyfill-unscoped-rule[contenta] {content: '#menu > .bar';color: blue;}"
+        );
+        assert_eq!(
+            shim_css_text("x::content y {}", "contenta", ""),
+            "x[contenta]::content y[contenta] {}"
+        );
+        assert_eq!(shim_v21("x::content y {}", "contenta", ""), "x[contenta] y[contenta] {}");
+    }
+
     // ============================================================================
     // Regression test for exponential :host-context explosion
     // See: https://github.com/nickreese/oxc/issues/XXX
diff --git a/crates/oxc_angular_compiler/src/styles/minify.rs b/crates/oxc_angular_compiler/src/styles/minify.rs
index 89f75a907..f2c876952 100644
--- a/crates/oxc_angular_compiler/src/styles/minify.rs
+++ b/crates/oxc_angular_compiler/src/styles/minify.rs
@@ -1,18 +1,24 @@
 use lightningcss::stylesheet::{MinifyOptions, ParserOptions, PrinterOptions, StyleSheet};
 
+use crate::component::AngularVersion;
+
 const COMPONENT_PLACEHOLDER: &str = "%COMP%";
 const MINIFY_PLACEHOLDER: &str = "OXCANGULARCOMPONENT";
 
 /// Apply Angular style encapsulation and optionally minify the final CSS.
+///
+/// `angular_version` selects which Angular release's `ShadowCss` to match
+/// (`None` = latest).
 pub fn finalize_component_style(
     style: &str,
     encapsulate: bool,
     content_attr: &str,
     host_attr: &str,
     minify: bool,
+    angular_version: Option<AngularVersion>,
 ) -> String {
     let style = if encapsulate {
-        super::shim_css_text(style, content_attr, host_attr)
+        super::shim_css_text_for_version(style, content_attr, host_attr, angular_version)
     } else {
         style.to_string()
     };
@@ -58,6 +64,7 @@ mod tests {
             "_ngcontent-%COMP%",
             "_nghost-%COMP%",
             true,
+            None,
         );
 
         assert_eq!(
diff --git a/crates/oxc_angular_compiler/src/styles/mod.rs b/crates/oxc_angular_compiler/src/styles/mod.rs
index 7d71b123b..e677dd7fd 100644
--- a/crates/oxc_angular_compiler/src/styles/mod.rs
+++ b/crates/oxc_angular_compiler/src/styles/mod.rs
@@ -7,5 +7,7 @@
 mod encapsulation;
 mod minify;
 
-pub use encapsulation::{encapsulate_style, shim_css_text};
+pub use encapsulation::{
+    encapsulate_style, encapsulate_style_for_version, shim_css_text, shim_css_text_for_version,
+};
 pub use minify::{finalize_component_style, minify_component_style};
diff --git a/crates/oxc_angular_compiler/tests/shadow_css_test.rs b/crates/oxc_angular_compiler/tests/shadow_css_test.rs
index b88b71176..2b726f012 100644
--- a/crates/oxc_angular_compiler/tests/shadow_css_test.rs
+++ b/crates/oxc_angular_compiler/tests/shadow_css_test.rs
@@ -9,7 +9,10 @@
 //!
 //! The goal is to have 1:1 compatibility with Angular's ShadowCss implementation.
 
-use oxc_angular_compiler::styles::{finalize_component_style, shim_css_text};
+use oxc_angular_compiler::AngularVersion;
+use oxc_angular_compiler::styles::{
+    finalize_component_style, shim_css_text, shim_css_text_for_version,
+};
 
 /// Normalize CSS for comparison (matches Angular's toEqualCss behavior).
 /// - Removes leading/trailing whitespace
@@ -38,6 +41,12 @@ fn shim_with_host(css: &str, content_attr: &str, host_attr: &str) -> String {
     shim_css_text(css, content_attr, host_attr)
 }
 
+/// The last Angular line that still runs the legacy polyfill passes.
+const V21: Option<AngularVersion> = Some(AngularVersion::new(21, 2, 0));
+
+/// The versions whose `ShadowCss` passes differ: latest and pre-v22.
+const SHIM_VERSIONS: [Option<AngularVersion>; 2] = [None, V21];
+
 /// Assert CSS equality with normalization.
 macro_rules! assert_css_eq {
     ($actual:expr, $expected:expr) => {
@@ -330,12 +339,14 @@ fn test_multibyte_utf8_preserved_in_css_values() {
 fn test_finalize_preserves_unicode() {
     // Full pipeline with Sass-compiled CSS containing actual bullet character
     let css = ".test:after { content: \"\u{2022}\"; }";
-    let result = finalize_component_style(css, true, "_ngcontent-%COMP%", "_nghost-%COMP%", true);
+    let result =
+        finalize_component_style(css, true, "_ngcontent-%COMP%", "_nghost-%COMP%", true, None);
     assert!(result.contains('\u{2022}'), "Bullet lost in full pipeline: {result}");
 
     // With @charset prefix from Sass
     let css = "@charset \"UTF-8\";\n.test:after { content: \"\u{2022}\"; }";
-    let result = finalize_component_style(css, true, "_ngcontent-%COMP%", "_nghost-%COMP%", true);
+    let result =
+        finalize_component_style(css, true, "_ngcontent-%COMP%", "_nghost-%COMP%", true, None);
     assert!(result.contains('\u{2022}'), "Bullet lost with @charset: {result}");
 }
 
@@ -1147,8 +1158,14 @@ fn test_comment_glued_stylesheet_stays_scoped_through_finalize() {
 ";
 
     for minify in [false, true] {
-        let result =
-            finalize_component_style(css, true, "_ngcontent-%COMP%", "_nghost-%COMP%", minify);
+        let result = finalize_component_style(
+            css,
+            true,
+            "_ngcontent-%COMP%",
+            "_nghost-%COMP%",
+            minify,
+            None,
+        );
         assert!(!result.contains("%COMMENT"), "placeholder leaked (minify={minify}):\n{result}");
         for selector in [".probe", ".widget", ".container.sticky-header"] {
             assert!(
@@ -1195,8 +1212,10 @@ fn test_comment_placeholder_never_leaks_into_output() {
     // placeholders carried their comment index, every `:host-context()` case
     // below leaked one: each duplicated placeholder consumed the *next*
     // comment, so the last one ran out and was left in the output verbatim.
-    for css in PLACEHOLDER_STRESS_CASES {
-        let result = shim_with_host(css, "contenta", "hosta");
+    for (css, version) in
+        PLACEHOLDER_STRESS_CASES.iter().flat_map(|c| SHIM_VERSIONS.map(|v| (c, v)))
+    {
+        let result = shim_css_text_for_version(css, "contenta", "hosta", version);
         assert!(!result.contains("%COMMENT"), "placeholder leaked for {css:?}:\n{result}");
     }
 }
@@ -1207,9 +1226,11 @@ fn test_sourcemap_comment_survives_placeholder_duplication() {
     // placeholder is directly visible: before the fix the duplicated
     // `:host-context()` placeholder consumed this comment and teleported it
     // into the middle of a selector, leaving `%COMMENT%` at the real position.
-    for css in PLACEHOLDER_STRESS_CASES {
+    for (css, version) in
+        PLACEHOLDER_STRESS_CASES.iter().flat_map(|c| SHIM_VERSIONS.map(|v| (c, v)))
+    {
         let with_map = format!("{css}\n/*# sourceMappingURL=x.map */");
-        let result = shim_with_host(&with_map, "contenta", "hosta");
+        let result = shim_css_text_for_version(&with_map, "contenta", "hosta", version);
         // It must still occupy its own line - the teleport spliced it into the
         // middle of a selector. (`polyfill-unscoped-rule` legitimately appends
         // its rule after this line, so don't require it to be last.)
@@ -1286,7 +1307,7 @@ fn test_comment_placeholder_indices_are_independent_of_position() {
     // must not shift the comments that follow it onto the wrong placeholders.
     let css = "polyfill-next-selector { content: ':host .a'; }/* dropped */::content .b { color: red; }\n\
                /*# sourceMappingURL=x.map */";
-    let result = shim_with_host(css, "contenta", "hosta");
+    let result = shim_css_text_for_version(css, "contenta", "hosta", V21);
     assert!(result.contains("/*# sourceMappingURL=x.map */"), "{result}");
     assert!(!result.contains("%COMMENT"), "{result}");
 }
@@ -1306,3 +1327,70 @@ fn test_host_pseudo_with_newline_combinator() {
     let expected = "[hosta]:hover .child[contenta] { color: red; }";
     assert_css_eq!(shim_with_host(css, "contenta", "hosta"), expected);
 }
+
+// ============================================================================
+// Version-dependent passes. Expected strings are the exact output of
+// `@angular/compiler`'s `encapsulateStyle` (22.2.2), not normalized.
+// ============================================================================
+
+const NG_CONTENT: &str = "_ngcontent-%COMP%";
+const NG_HOST: &str = "_nghost-%COMP%";
+
+fn ng_shim(css: &str) -> String {
+    shim_css_text(css, NG_CONTENT, NG_HOST)
+}
+
+#[test]
+fn test_legacy_polyfills_follow_angular_version() {
+    // Angular v22.0.0-rc.0 removed the polyfill passes.
+    let css = "polyfill-next-selector {content: 'x > y'} z {}";
+    assert_eq!(
+        ng_shim(css),
+        "polyfill-next-selector[_ngcontent-%COMP%] {content: 'x > y'} z[_ngcontent-%COMP%] {}"
+    );
+    assert_css_eq!(
+        shim_css_text_for_version(css, NG_CONTENT, NG_HOST, V21),
+        "x[_ngcontent-%COMP%] > y[_ngcontent-%COMP%] {}"
+    );
+
+    let css = "polyfill-unscoped-rule {content: '#menu > .bar';color: blue;}";
+    assert_eq!(
+        ng_shim(css),
+        "polyfill-unscoped-rule[_ngcontent-%COMP%] {content: '#menu > .bar';color: blue;}"
+    );
+    assert_css_eq!(
+        shim_css_text_for_version(css, NG_CONTENT, NG_HOST, V21),
+        "#menu > .bar { color: blue; }"
+    );
+
+    assert_eq!(ng_shim("x::content y {}"), "x[_ngcontent-%COMP%]::content y[_ngcontent-%COMP%] {}");
+    assert_css_eq!(
+        shim_css_text_for_version("x::shadow > y {}", NG_CONTENT, NG_HOST, V21),
+        "x[_ngcontent-%COMP%] > y[_ngcontent-%COMP%] {}"
+    );
+
+    // v22 prereleases before rc.0 still had them.
+    let next_12 = AngularVersion::parse("22.0.0-next.12");
+    assert_css_eq!(
+        shim_css_text_for_version("x::content y {}", NG_CONTENT, NG_HOST, next_12),
+        "x[_ngcontent-%COMP%] y[_ngcontent-%COMP%] {}"
+    );
+    let rc_0 = AngularVersion::parse("22.0.0-rc.0");
+    assert_eq!(
+        shim_css_text_for_version("x::content y {}", NG_CONTENT, NG_HOST, rc_0),
+        "x[_ngcontent-%COMP%]::content y[_ngcontent-%COMP%] {}"
+    );
+}
+
+#[test]
+fn test_finalize_component_style_threads_angular_version() {
+    let css = "x::content y {}";
+    assert_eq!(
+        finalize_component_style(css, true, NG_CONTENT, NG_HOST, false, None),
+        "x[_ngcontent-%COMP%]::content y[_ngcontent-%COMP%] {}"
+    );
+    assert_css_eq!(
+        finalize_component_style(css, true, NG_CONTENT, NG_HOST, false, V21),
+        "x[_ngcontent-%COMP%] y[_ngcontent-%COMP%] {}"
+    );
+}
diff --git a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
index 73032f069..938f6642d 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
@@ -282,17 +282,11 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     fields: ['NgDeepBasicComponent.ɵcmp'],
     reasons: ['a leading space is kept before a ::ng-deep selector'],
   },
-  'styles/shadow-css-polyfill-next-selector': {
-    fields: ['PolyfillNextSelectorComponent.ɵcmp'],
-    reasons: ['a space is added before an empty rule body'],
-  },
   'styles/shadow-css-polyfill-rule': {
     fields: ['PolyfillRuleComponent.ɵcmp'],
-    reasons: ['polyfill-rule output drops a leading ";" from the rule body'],
-  },
-  'styles/shadow-css-polyfill-unscoped-rule': {
-    fields: ['PolyfillUnscopedComponent.ɵcmp'],
-    reasons: ['polyfill-unscoped-rule is not scoped and rewritten as Angular does'],
+    reasons: [
+      'Angular 22.2 strips the -shadowcsshost-no-combinator marker left in a rule body (part of its CSS nesting support); Oxc keeps it, as Angular 22.0 does',
+    ],
   },
   'styles/shadow-css-where-with-host': {
     fields: ['WhereWithHostComponent.ɵcmp'],
diff --git a/napi/angular-compiler/index.d.ts b/napi/angular-compiler/index.d.ts
index 4f1b6fda8..c31150273 100644
--- a/napi/angular-compiler/index.d.ts
+++ b/napi/angular-compiler/index.d.ts
@@ -252,6 +252,9 @@ export interface DtsInjectDeclaration {
  *
  * * `css` - The CSS source code to encapsulate
  * * `component_id` - The component's unique identifier (typically a hash)
+ * * `angular_version` - The Angular version to match. Versions before
+ *   v22.0.0-rc.0 keep the legacy `polyfill-*` / `::shadow` / `::content`
+ *   handling. When not set, assumes the latest Angular version.
  *
  * # Returns
  *
@@ -269,7 +272,11 @@ export interface DtsInjectDeclaration {
  * .button[ng-cabc123] { color: red; }
  * ```
  */
-export declare function encapsulateStyle(css: string, componentId: string): string
+export declare function encapsulateStyle(
+  css: string,
+  componentId: string,
+  angularVersion?: AngularVersion | undefined | null,
+): string
 
 /**
  * URL-encode a component ID for use in import URLs.
diff --git a/napi/angular-compiler/src/lib.rs b/napi/angular-compiler/src/lib.rs
index 8e838932f..c7a71e8c6 100644
--- a/napi/angular-compiler/src/lib.rs
+++ b/napi/angular-compiler/src/lib.rs
@@ -27,8 +27,8 @@ use oxc_angular_compiler::{
     build_decorator_metadata_array as core_build_decorator_metadata_array,
     build_prop_decorators_metadata_in as core_build_prop_decorators_metadata,
     compile_template_for_hmr, compile_template_to_js_with_options,
-    encapsulate_style as rust_encapsulate_style, generate_hmr_update_module,
-    generate_hmr_update_module_from_js, generate_style_update_module,
+    encapsulate_style_for_version as rust_encapsulate_style_for_version,
+    generate_hmr_update_module, generate_hmr_update_module_from_js, generate_style_update_module,
 };
 use oxc_napi::OxcError;
 
@@ -672,6 +672,7 @@ pub fn compile_for_hmr_sync(
                         "_ngcontent-%COMP%",
                         "_nghost-%COMP%",
                         opts.minify_component_styles,
+                        opts.angular_version,
                     )
                 })
                 .filter(|style| !style.trim().is_empty())
@@ -854,6 +855,9 @@ pub struct ComponentIdParts {
 ///
 /// * `css` - The CSS source code to encapsulate
 /// * `component_id` - The component's unique identifier (typically a hash)
+/// * `angular_version` - The Angular version to match. Versions before
+///   v22.0.0-rc.0 keep the legacy `polyfill-*` / `::shadow` / `::content`
+///   handling. When not set, assumes the latest Angular version.
 ///
 /// # Returns
 ///
@@ -871,8 +875,12 @@ pub struct ComponentIdParts {
 /// .button[ng-cabc123] { color: red; }
 /// ```
 #[napi]
-pub fn encapsulate_style(css: String, component_id: String) -> String {
-    rust_encapsulate_style(&css, &component_id)
+pub fn encapsulate_style(
+    css: String,
+    component_id: String,
+    angular_version: Option<AngularVersion>,
+) -> String {
+    rust_encapsulate_style_for_version(&css, &component_id, angular_version.map(Into::into))
 }
 
 /// URLs extracted from @Component decorators in a file.
diff --git a/napi/angular-compiler/vite-plugin/index.ts b/napi/angular-compiler/vite-plugin/index.ts
index 3dfb9a0e0..a69fcc054 100644
--- a/napi/angular-compiler/vite-plugin/index.ts
+++ b/napi/angular-compiler/vite-plugin/index.ts
@@ -1529,7 +1529,7 @@ export function angular(options: PluginOptions = {}): Plugin[] {
 
           // Only encapsulate for emulated encapsulation (e=0)
           if (encapsulation === '0' && componentId) {
-            const encapsulated = encapsulateStyle(code, componentId)
+            const encapsulated = encapsulateStyle(code, componentId, pluginOptions.angularVersion)
             return {
               code: encapsulated,
               map: null,

From b3464bbff6effdf09c2055e3ab65e20db81bedb7 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:22:57 +0800
Subject: [PATCH 23/54] fix(styles): align the CSS shim scanners with Angular
 v22 shadow_css.ts

Each change was checked against @angular/compiler 22.2.2's
encapsulateStyle with the same input.

- Trim the result before restoring comments, like _scopeCssText. A
  leading newline or space used to ship in every component style.
- Keep the text between a rule's `}` and the next `}`. It was collected
  as a selector and dropped on an at-rule close (`{ ... } }` became
  `{ ... }}`), or carried into the next selector on a stray `}`
  (`@media x { .a {} b } c {}` scoped `b c` as one selector). It is now
  written out unscoped, in place, as Angular leaves it.
- Skip the character after a backslash in the string scanners of the
  :host-context and selector-scoping passes. An escaped quote ended the
  string early and the rest of the stylesheet was read as one string,
  so later rules were left unscoped.
- Rewrite :host-context() at any depth. It only ran at the top level,
  so inside @media/@supports/@layer/... it was left as a literal
  `[_ngcontent-%COMP%]:host-context(.x)`. Selectors are still processed
  one at a time (text since the previous `{`/`}`), so rules are not
  combined with each other.
- Scope only the bodies of Angular's scopedAtRuleIdentifiers (@media,
  @supports, @document, @layer, @container, @scope, @starting-style),
  strip @font-face/@page as before, and copy every other at-rule body
  unchanged. Declaration-only bodies (@property, @counter-style,
  @view-transition, @position-try...) were read as selectors and split
  off their at-rule (`@property --x {} syntax: ...`), and
  @font-feature-values lost its nested block.

e2e compare: new styles fixtures pin each fix; component-with-pipes and
shadow-css-ng-deep-basic now match and leave known-differences.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/styles/encapsulation.rs               | 212 +++++++++---------
 .../tests/shadow_css_test.rs                  | 163 +++++++++++++-
 .../e2e/compare/fixtures/known-differences.ts |   8 -
 .../fixtures/styles/shadow-css.fixture.ts     | 110 +++++++++
 4 files changed, 377 insertions(+), 116 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/styles/encapsulation.rs b/crates/oxc_angular_compiler/src/styles/encapsulation.rs
index 1379d1423..b4ba0e772 100644
--- a/crates/oxc_angular_compiler/src/styles/encapsulation.rs
+++ b/crates/oxc_angular_compiler/src/styles/encapsulation.rs
@@ -391,8 +391,10 @@ pub fn shim_css_text_for_version(
         result = result + "\n" + unscoped_rules.trim();
     }
 
-    // Step 9: Restore comments
-    restore_comments(&result, &comments)
+    // Step 9: Trim, then restore comments. Angular's `_scopeCssText` trims
+    // before the comments come back, so newlines kept from a leading or
+    // trailing comment survive.
+    restore_comments(result.trim(), &comments)
 }
 
 /// Extract comments and replace them with placeholders.
@@ -987,35 +989,31 @@ fn convert_colon_host_context(css: &str, content_attr: &str, host_attr: &str) ->
     // not across the entire CSS. Otherwise, multiple :host-context rules will be
     // combined exponentially, causing massive output explosion.
     //
-    // Strategy: Scan through CSS, identify each selector (text before {), process
-    // :host-context only within that selector, then continue to the next rule.
+    // Strategy: Scan through CSS, identify each selector (text before `{`, back to
+    // the previous `{` or `}`), process :host-context only within that selector,
+    // then continue to the next rule. Angular's pattern ends at the next `{` and
+    // applies at any depth, so selectors nested in `@media`/`@supports` count too.
+    // Text that ends at a `}` is a declaration list and is copied as is.
 
     let mut result = String::with_capacity(css.len() * 2);
-    let mut chars = css.chars().peekable();
+    let mut chars = css.chars();
     let mut current_selector = String::new();
-    let mut brace_depth: u32 = 0;
     let mut in_string = false;
     let mut string_char = '"';
 
     while let Some(c) = chars.next() {
         // Handle string literals
-        if !in_string && (c == '"' || c == '\'') {
-            in_string = true;
-            string_char = c;
-            if brace_depth == 0 {
-                current_selector.push(c);
-            } else {
-                result.push(c);
-            }
-            continue;
-        }
-        if in_string {
-            if brace_depth == 0 {
-                current_selector.push(c);
-            } else {
-                result.push(c);
-            }
-            if c == string_char {
+        if in_string || c == '"' || c == '\'' {
+            current_selector.push(c);
+            if !in_string {
+                in_string = true;
+                string_char = c;
+            } else if c == '\\' {
+                // An escaped character (`\"`, `\'`, `\\`) never ends the string.
+                if let Some(next_c) = chars.next() {
+                    current_selector.push(next_c);
+                }
+            } else if c == string_char {
                 in_string = false;
             }
             continue;
@@ -1023,30 +1021,22 @@ fn convert_colon_host_context(css: &str, content_attr: &str, host_attr: &str) ->
 
         match c {
             '{' => {
-                if brace_depth == 0 {
-                    // End of selector - process :host-context in this selector only
-                    let processed_selector = convert_colon_host_context_in_selector(
-                        &current_selector,
-                        content_attr,
-                        host_attr,
-                    );
-                    result.push_str(&processed_selector);
-                    current_selector.clear();
-                }
+                // End of selector - process :host-context in this selector only
+                let processed_selector = convert_colon_host_context_in_selector(
+                    &current_selector,
+                    content_attr,
+                    host_attr,
+                );
+                result.push_str(&processed_selector);
+                current_selector.clear();
                 result.push('{');
-                brace_depth += 1;
             }
             '}' => {
+                result.push_str(&current_selector);
+                current_selector.clear();
                 result.push('}');
-                brace_depth = brace_depth.saturating_sub(1);
-            }
-            _ => {
-                if brace_depth == 0 {
-                    current_selector.push(c);
-                } else {
-                    result.push(c);
-                }
             }
+            _ => current_selector.push(c),
         }
     }
 
@@ -1631,10 +1621,16 @@ fn convert_shadow_dom_selectors(css: &str) -> String {
 // Selector scoping
 // =============================================================================
 
-/// At-rules that should NOT have scoping selectors applied (e.g., @font-face, @page).
-/// These rules define global resources that shouldn't be component-scoped.
-/// All other at-rules (@media, @supports, @layer, @container, etc.) have their contents scoped.
-const NO_SCOPE_AT_RULES: &[&str] = &["@font-face", "@page"];
+/// At-rules whose bodies hold rules that are scoped like top-level ones.
+/// Matches Angular's `scopedAtRuleIdentifiers`.
+const SCOPED_AT_RULES: &[&str] =
+    &["@media", "@supports", "@document", "@layer", "@container", "@scope", "@starting-style"];
+
+/// At-rules whose bodies are kept unscoped but have `::ng-deep`, `>>>`,
+/// `/deep/` and `:host` stripped (e.g. `@page { ::ng-deep @top-left {} }`).
+/// Every other block at-rule (`@keyframes`, `@property`, `@counter-style`,
+/// `@font-feature-values`, unknown ones...) keeps its body exactly as written.
+const STRIP_SCOPING_AT_RULES: &[&str] = &["@font-face", "@page"];
 
 /// Scope all CSS selectors with the content attribute.
 fn scope_selectors(css: &str, content_attr: &str, host_attr: &str) -> String {
@@ -1649,34 +1645,35 @@ fn scope_selectors(css: &str, content_attr: &str, host_attr: &str) -> String {
     let mut in_declaration = false;
     let mut declaration_depth: u32 = 0;
     let mut at_rule_header = String::new(); // Collect the at-rule header text
-    let mut in_no_scope_at_rule = false; // Track if we're inside @font-face/@page
-    let mut no_scope_depth: u32 = 0; // Track nesting depth for no-scope at-rules
-    let mut no_scope_content = String::new(); // Collect content for no-scope at-rules
+    let mut in_unscoped_at_rule = false; // Inside an at-rule whose body is not scoped
+    let mut strip_unscoped_body = false; // Strip ::ng-deep/:host from that body (@font-face/@page)
+    let mut unscoped_depth: u32 = 0; // Brace depth inside the unscoped at-rule
+    let mut unscoped_content = String::new(); // Collected body of the unscoped at-rule
+
+    // Where comment and string text goes in the current state.
+    macro_rules! sink {
+        () => {
+            if in_unscoped_at_rule {
+                &mut unscoped_content
+            } else if in_at_rule_header || in_declaration {
+                &mut result
+            } else {
+                &mut current_selector
+            }
+        };
+    }
 
     while let Some(c) = chars.next() {
         // Handle comments
         if !in_string && c == '/' && chars.peek() == Some(&'*') {
             in_comment = true;
-            if in_at_rule_header || in_declaration {
-                result.push(c);
-            } else {
-                current_selector.push(c);
-            }
-            continue;
         }
         if in_comment {
-            if in_at_rule_header || in_declaration {
-                result.push(c);
-            } else {
-                current_selector.push(c);
-            }
+            let sink = sink!();
+            sink.push(c);
             if c == '*' && chars.peek() == Some(&'/') {
                 if let Some(next_c) = chars.next() {
-                    if in_at_rule_header || in_declaration {
-                        result.push(next_c);
-                    } else {
-                        current_selector.push(next_c);
-                    }
+                    sink.push(next_c);
                 }
                 in_comment = false;
             }
@@ -1684,54 +1681,48 @@ fn scope_selectors(css: &str, content_attr: &str, host_attr: &str) -> String {
         }
 
         // Handle strings
-        if !in_string && (c == '"' || c == '\'') {
-            in_string = true;
-            string_char = c;
-            if in_no_scope_at_rule {
-                no_scope_content.push(c);
-            } else if in_at_rule_header || in_declaration {
-                result.push(c);
-            } else {
-                current_selector.push(c);
-            }
-            continue;
-        }
-        if in_string {
-            if in_no_scope_at_rule {
-                no_scope_content.push(c);
-            } else if in_at_rule_header || in_declaration {
-                result.push(c);
-            } else {
-                current_selector.push(c);
-            }
-            if c == string_char {
+        if in_string || c == '"' || c == '\'' {
+            let sink = sink!();
+            sink.push(c);
+            if !in_string {
+                in_string = true;
+                string_char = c;
+            } else if c == '\\' {
+                // An escaped character (`\"`, `\'`, `\\`) never ends the string.
+                if let Some(next_c) = chars.next() {
+                    sink.push(next_c);
+                }
+            } else if c == string_char {
                 in_string = false;
             }
             continue;
         }
 
-        // Handle content inside @font-face/@page (no scoping, but strip selectors)
-        // This must be checked BEFORE the @ rule handling so nested @-rules
-        // (like @top-left inside @page) are collected properly
-        if in_no_scope_at_rule {
+        // Handle the body of an at-rule that is not scoped. This must be
+        // checked BEFORE the @ rule handling so nested @-rules (like @top-left
+        // inside @page) are collected properly
+        if in_unscoped_at_rule {
             if c == '{' {
-                no_scope_depth += 1;
-                no_scope_content.push(c);
+                unscoped_depth += 1;
+                unscoped_content.push(c);
             } else if c == '}' {
-                no_scope_depth -= 1;
-                if no_scope_depth == 0 {
-                    // Strip ::ng-deep, >>>, /deep/, and :host from the collected content
-                    let stripped = strip_scoping_selectors(&no_scope_content, host_attr);
-                    result.push_str(&stripped);
+                unscoped_depth -= 1;
+                if unscoped_depth == 0 {
+                    if strip_unscoped_body {
+                        // Strip ::ng-deep, >>>, /deep/, and :host from the collected content
+                        result.push_str(&strip_scoping_selectors(&unscoped_content, host_attr));
+                    } else {
+                        result.push_str(&unscoped_content);
+                    }
                     result.push('}');
-                    no_scope_content.clear();
-                    in_no_scope_at_rule = false;
+                    unscoped_content.clear();
+                    in_unscoped_at_rule = false;
                     at_rule_depth = at_rule_depth.saturating_sub(1);
                 } else {
-                    no_scope_content.push(c);
+                    unscoped_content.push(c);
                 }
             } else {
-                no_scope_content.push(c);
+                unscoped_content.push(c);
             }
             continue;
         }
@@ -1757,11 +1748,13 @@ fn scope_selectors(css: &str, content_attr: &str, host_attr: &str) -> String {
                 at_rule_depth += 1;
                 in_at_rule_header = false;
 
-                // Check if this is a no-scope at-rule (@font-face, @page)
-                let header_lower = at_rule_header.to_lowercase();
-                if NO_SCOPE_AT_RULES.iter().any(|r| header_lower.starts_with(&r.to_lowercase())) {
-                    in_no_scope_at_rule = true;
-                    no_scope_depth = 1;
+                // Like Angular, only the listed at-rules get their body
+                // scoped, matched case-sensitively on the header's start.
+                if !SCOPED_AT_RULES.iter().any(|r| at_rule_header.starts_with(r)) {
+                    in_unscoped_at_rule = true;
+                    strip_unscoped_body =
+                        STRIP_SCOPING_AT_RULES.iter().any(|r| at_rule_header.starts_with(r));
+                    unscoped_depth = 1;
                 }
                 at_rule_header.clear();
             } else if c == ';' {
@@ -1774,6 +1767,10 @@ fn scope_selectors(css: &str, content_attr: &str, host_attr: &str) -> String {
 
         // Track at-rule nesting for closing braces
         if at_rule_depth > 0 && c == '}' && !in_declaration {
+            // Text with no `{` before the `}` (`@media x { .a {} b }`) is not
+            // a rule; Angular leaves it unscoped, in place.
+            result.push_str(&current_selector);
+            current_selector.clear();
             at_rule_depth = at_rule_depth.saturating_sub(1);
             result.push(c);
             continue;
@@ -1803,6 +1800,9 @@ fn scope_selectors(css: &str, content_attr: &str, host_attr: &str) -> String {
             in_declaration = true;
             declaration_depth = 1;
         } else if c == '}' {
+            // A stray `}`: keep the text before it unscoped, in place.
+            result.push_str(&current_selector);
+            current_selector.clear();
             result.push(c);
         } else {
             current_selector.push(c);
diff --git a/crates/oxc_angular_compiler/tests/shadow_css_test.rs b/crates/oxc_angular_compiler/tests/shadow_css_test.rs
index 2b726f012..4451e218c 100644
--- a/crates/oxc_angular_compiler/tests/shadow_css_test.rs
+++ b/crates/oxc_angular_compiler/tests/shadow_css_test.rs
@@ -1329,8 +1329,8 @@ fn test_host_pseudo_with_newline_combinator() {
 }
 
 // ============================================================================
-// Version-dependent passes. Expected strings are the exact output of
-// `@angular/compiler`'s `encapsulateStyle` (22.2.2), not normalized.
+// Alignment with Angular v22 `shadow_css.ts`. Expected strings are the exact
+// output of `@angular/compiler`'s `encapsulateStyle` (22.2.2), not normalized.
 // ============================================================================
 
 const NG_CONTENT: &str = "_ngcontent-%COMP%";
@@ -1340,6 +1340,165 @@ fn ng_shim(css: &str) -> String {
     shim_css_text(css, NG_CONTENT, NG_HOST)
 }
 
+#[test]
+fn test_output_is_trimmed() {
+    assert_eq!(ng_shim("  .a { color: red; }  \n\n"), ".a[_ngcontent-%COMP%] { color: red; }");
+    assert_eq!(ng_shim("\n\n.a {}\n"), ".a[_ngcontent-%COMP%] {}");
+    assert_eq!(ng_shim("   "), "");
+    // Angular trims before restoring comments, so newlines kept from a
+    // trailing comment survive the trim.
+    assert_eq!(ng_shim(".a { } \n/* trailing */\n"), ".a[_ngcontent-%COMP%] { } \n");
+    assert_eq!(ng_shim("\n\n/*# sourceMappingURL=x.map */"), "/*# sourceMappingURL=x.map */");
+}
+
+#[test]
+fn test_whitespace_before_closing_brace_is_kept() {
+    // The whitespace between a rule's `}` and its at-rule's `}` was dropped.
+    assert_eq!(
+        ng_shim("@media screen { .a { color: red; } }"),
+        "@media screen { .a[_ngcontent-%COMP%] { color: red; } }"
+    );
+    assert_eq!(
+        ng_shim("@keyframes foo { 0% { opacity: 0 } 100% { opacity: 1 } }"),
+        "@keyframes _ngcontent-%COMP%_foo { 0% { opacity: 0 } 100% { opacity: 1 } }"
+    );
+}
+
+#[test]
+fn test_text_before_closing_brace_stays_in_place() {
+    // Text with no `{` before a `}` is not a rule. It used to be carried into
+    // the next selector (`b c {}`); Angular leaves it unscoped where it was.
+    assert_eq!(
+        ng_shim("@media screen { .a {} b } c {}"),
+        "@media screen { .a[_ngcontent-%COMP%] {} b } c[_ngcontent-%COMP%] {}"
+    );
+    assert_eq!(ng_shim(".a {} b } c {}"), ".a[_ngcontent-%COMP%] {} b } c[_ngcontent-%COMP%] {}");
+    assert_eq!(
+        ng_shim("@media screen { .a { color: red; } .b }"),
+        "@media screen { .a[_ngcontent-%COMP%] { color: red; } .b }"
+    );
+}
+
+#[test]
+fn test_escaped_quote_does_not_end_string() {
+    // An escaped quote used to end the string early, so the rest of the
+    // stylesheet was read as one string and left unscoped.
+    assert_eq!(
+        ng_shim(".a { content: \"\\\"\"; } .b { color: red; }"),
+        ".a[_ngcontent-%COMP%] { content: \"\\\"\"; } .b[_ngcontent-%COMP%] { color: red; }"
+    );
+    assert_eq!(
+        ng_shim(".a { content: '\\''; } .b { color: red; }"),
+        ".a[_ngcontent-%COMP%] { content: '\\''; } .b[_ngcontent-%COMP%] { color: red; }"
+    );
+    assert_eq!(
+        ng_shim(".a { content: \"\\\\\"; } .b {}"),
+        ".a[_ngcontent-%COMP%] { content: \"\\\\\"; } .b[_ngcontent-%COMP%] {}"
+    );
+    assert_eq!(
+        ng_shim(".a[title=\"x\\\"y\"] { color: red; } .b {}"),
+        ".a[title=\"x\\\"y\"][_ngcontent-%COMP%] { color: red; } .b[_ngcontent-%COMP%] {}"
+    );
+    // The `:host-context()` pass has its own string scanner.
+    assert_eq!(
+        normalize_css(&ng_shim(":host-context(.a) { content: \"\\\"\"; } .b {}")),
+        normalize_css(
+            ".a[_nghost-%COMP%], .a [_nghost-%COMP%] { content: \"\\\"\"; } \
+             .b[_ngcontent-%COMP%] {}"
+        )
+    );
+}
+
+#[test]
+fn test_host_context_inside_conditional_at_rules() {
+    // `:host-context()` was only rewritten at the top level, leaving a
+    // literal `[_ngcontent-%COMP%]:host-context(.dark)` inside `@media`.
+    // (Angular keeps the three spaces around the descendant combinator; the
+    // shim collapses them, see `assert_css_eq!`.)
+    assert_css_eq!(
+        ng_shim("@media screen { :host-context(.dark) .a { color: red; } }"),
+        "@media screen { .dark[_nghost-%COMP%] .a[_ngcontent-%COMP%], \
+         .dark [_nghost-%COMP%] .a[_ngcontent-%COMP%] { color: red; } }"
+    );
+    assert_css_eq!(
+        ng_shim("@supports (display: grid) { :host-context(.dark) { color: red; } }"),
+        "@supports (display: grid) { .dark[_nghost-%COMP%], .dark [_nghost-%COMP%] { color: red; } }"
+    );
+    assert_css_eq!(
+        ng_shim("@media screen { @supports (x: y) { :host-context(.a, .b) p { color: red; } } }"),
+        "@media screen { @supports (x: y) { \
+         .a[_nghost-%COMP%] p[_ngcontent-%COMP%], .a [_nghost-%COMP%] p[_ngcontent-%COMP%], \
+         .b[_nghost-%COMP%] p[_ngcontent-%COMP%], .b [_nghost-%COMP%] p[_ngcontent-%COMP%] \
+         { color: red; } } }"
+    );
+    assert_css_eq!(
+        ng_shim("@media screen { :host-context(.a):host-context(.b) .c {} }"),
+        "@media screen { \
+         .a.b[_nghost-%COMP%] .c[_ngcontent-%COMP%], .a.b [_nghost-%COMP%] .c[_ngcontent-%COMP%], \
+         .a .b[_nghost-%COMP%] .c[_ngcontent-%COMP%], .a .b [_nghost-%COMP%] .c[_ngcontent-%COMP%], \
+         .b .a[_nghost-%COMP%] .c[_ngcontent-%COMP%], .b .a [_nghost-%COMP%] .c[_ngcontent-%COMP%] {} }"
+    );
+    assert_css_eq!(
+        ng_shim("@layer base { :host-context([dir=rtl]) .a { margin-left: 0; } }"),
+        "@layer base { [dir=rtl][_nghost-%COMP%] .a[_ngcontent-%COMP%], \
+         [dir=rtl] [_nghost-%COMP%] .a[_ngcontent-%COMP%] { margin-left: 0; } }"
+    );
+}
+
+#[test]
+fn test_unscoped_at_rule_bodies_are_copied_unchanged() {
+    // Only `@media`, `@supports`, `@document`, `@layer`, `@container`,
+    // `@scope` and `@starting-style` have their body scoped. A declaration
+    // body used to be read as a selector and split off the at-rule
+    // (`@property --x {} syntax: ...`).
+    for css in [
+        "@property --x { syntax: '<length>'; inherits: false; initial-value: 0px; }",
+        "@counter-style thumbs { system: cyclic; symbols: \"\u{1F44D}\"; suffix: \" \"; }",
+        "@font-feature-values Font One { @styleset { nice-style: 12; } }",
+        "@view-transition { navigation: auto; }",
+        "@position-try --custom { top: anchor(bottom); }",
+        "@font-face { font-family: X; src: url(x.woff); }",
+        "@unknown-rule foo { .a { color: red; } }",
+        // The header is matched case-sensitively, like Angular.
+        "@MEDIA screen { .a { color: red; } }",
+    ] {
+        assert_eq!(ng_shim(css), css);
+    }
+    assert_eq!(
+        ng_shim("@property --x { initial-value: \"}\"; } .a {}"),
+        "@property --x { initial-value: \"}\"; } .a[_ngcontent-%COMP%] {}"
+    );
+    assert_eq!(
+        ng_shim("@font-feature-values Font One { @styleset { nice-style: 12; } } .a {}"),
+        "@font-feature-values Font One { @styleset { nice-style: 12; } } .a[_ngcontent-%COMP%] {}"
+    );
+    // Scoped at-rules still are.
+    for (css, expected) in [
+        (
+            "@container (min-width: 1px) { .a { color: red; } }",
+            "@container (min-width: 1px) { .a[_ngcontent-%COMP%] { color: red; } }",
+        ),
+        (
+            "@scope (.card) { img { border: 1px; } }",
+            "@scope (.card) { img[_ngcontent-%COMP%] { border: 1px; } }",
+        ),
+        (
+            "@starting-style { .a { opacity: 0; } }",
+            "@starting-style { .a[_ngcontent-%COMP%] { opacity: 0; } }",
+        ),
+        (
+            "@document url(http://x) { .a { color: red; } }",
+            "@document url(http://x) { .a[_ngcontent-%COMP%] { color: red; } }",
+        ),
+        (
+            "@media screen { @font-face { font-family: X; } .a {} }",
+            "@media screen { @font-face { font-family: X; } .a[_ngcontent-%COMP%] {} }",
+        ),
+    ] {
+        assert_eq!(ng_shim(css), expected);
+    }
+}
+
 #[test]
 fn test_legacy_polyfills_follow_angular_version() {
     // Angular v22.0.0-rc.0 removed the polyfill passes.
diff --git a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
index 938f6642d..becc3878c 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
@@ -108,10 +108,6 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     metadataDiffs: ['MyComponent.setClassMetadata'],
     reasons: [CUSTOM_DECORATOR],
   },
-  'full-file/component-with-pipes': {
-    fields: ['ComponentWithPipes.ɵcmp'],
-    reasons: ['component styles keep a leading newline'],
-  },
   'full-transform/full-transform-complex': {
     fields: ['ComplexComponent.ɵcmp'],
     reasons: [CHANGE_DETECTION_V22],
@@ -278,10 +274,6 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     fields: ['MultilineSelectorComponent.ɵcmp'],
     reasons: ['the newline between selectors in a list is dropped'],
   },
-  'styles/shadow-css-ng-deep-basic': {
-    fields: ['NgDeepBasicComponent.ɵcmp'],
-    reasons: ['a leading space is kept before a ::ng-deep selector'],
-  },
   'styles/shadow-css-polyfill-rule': {
     fields: ['PolyfillRuleComponent.ɵcmp'],
     reasons: [
diff --git a/napi/angular-compiler/e2e/compare/fixtures/styles/shadow-css.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/styles/shadow-css.fixture.ts
index fd5bd193a..c7493090f 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/styles/shadow-css.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/styles/shadow-css.fixture.ts
@@ -1699,4 +1699,114 @@ export class PolyfillRuleComponent {}
     `.trim(),
     expectedFeatures: ['styles:'],
   },
+
+  // ==========================================================================
+  // Alignment with Angular v22 shadow_css.ts
+  // ==========================================================================
+
+  {
+    name: 'shadow-css-trim-output',
+    category: 'styles',
+    description: 'Output is trimmed like ShadowCss._scopeCssText',
+    className: 'TrimOutputComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-shadow-css-trim-output',
+  standalone: true,
+  template: \`<div class="a">Content</div>\`,
+  styles: [\`\n\n  .a { color: red; }\n\n  \`],
+  encapsulation: ViewEncapsulation.Emulated,
+})
+export class TrimOutputComponent {}
+    `.trim(),
+    expectedFeatures: ['styles:'],
+  },
+
+  {
+    name: 'shadow-css-at-rule-closing-whitespace',
+    category: 'styles',
+    description: 'Whitespace before an at-rule closing brace is kept',
+    className: 'AtRuleClosingWhitespaceComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-shadow-css-at-rule-closing-whitespace',
+  standalone: true,
+  template: \`<div class="a">Content</div>\`,
+  styles: [\`@media screen { .a { color: red; } }  @supports (display: grid) {\n  .a { display: grid; }\n}\`],
+  encapsulation: ViewEncapsulation.Emulated,
+})
+export class AtRuleClosingWhitespaceComponent {}
+    `.trim(),
+    expectedFeatures: ['styles:'],
+  },
+
+  {
+    name: 'shadow-css-text-before-closing-brace',
+    category: 'styles',
+    description: 'Text with no block before a closing brace stays in place unscoped',
+    className: 'TextBeforeClosingBraceComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-shadow-css-text-before-closing-brace',
+  standalone: true,
+  template: \`<div class="a">Content</div>\`,
+  styles: [\`@media screen { .a {} b } c {}\`],
+  encapsulation: ViewEncapsulation.Emulated,
+})
+export class TextBeforeClosingBraceComponent {}
+    `.trim(),
+    expectedFeatures: ['styles:'],
+  },
+
+  {
+    name: 'shadow-css-escaped-quote-in-string',
+    category: 'styles',
+    description: 'An escaped quote does not end a string',
+    className: 'EscapedQuoteComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-shadow-css-escaped-quote-in-string',
+  standalone: true,
+  template: \`<div class="a b">Content</div>\`,
+  styles: [\`.a::before { content: "\\\\""; } .b { color: red; } .c[title="x\\\\"y"] { color: blue; }\`],
+  encapsulation: ViewEncapsulation.Emulated,
+})
+export class EscapedQuoteComponent {}
+    `.trim(),
+    expectedFeatures: ['styles:'],
+  },
+
+  {
+    name: 'shadow-css-declaration-at-rules',
+    category: 'styles',
+    description:
+      'Bodies of at-rules other than the scoped ones are copied unchanged (@property is left out: ngtsc 22.2 namespaces its name to --%NS%x outside ShadowCss)',
+    className: 'DeclarationAtRulesComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-shadow-css-declaration-at-rules',
+  standalone: true,
+  template: \`<div class="a">Content</div>\`,
+  styles: [\`@counter-style thumbs { system: cyclic; symbols: "*"; suffix: " "; } @font-feature-values Font One { @styleset { nice-style: 12; } } .a { color: red; }\`],
+  encapsulation: ViewEncapsulation.Emulated,
+})
+export class DeclarationAtRulesComponent {}
+    `.trim(),
+    expectedFeatures: ['styles:'],
+  },
 ]

From 22f98caaabf8270b16312365040d55a31f92c7e4 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:31:05 +0800
Subject: [PATCH 24/54] perf(cross-file): skip evaluating top-level class and
 function exports

A top-level `export class` or `export function` always evaluates to a
reference, which `StaticValue` can't hold, so `eval_export` parsed the
whole file again only to answer `None`. That happens for every imported
component class in `imports: [...]` and for each class/function in a
`{ ...ns }` spread.

The export map now marks those entries (`ExportInfo::never_static`) and
`export_value_at` returns `None` for them without evaluating. Only
declarations in the program body are marked: a namespace member shares
its entry with the top-level name, which still gets evaluated. A
top-level variable or enum of the same name (a duplicate TypeScript
rejects, but which the evaluator resolves first) clears the mark, so
the answer is the same as before in every case.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/component/cross_file_elision.rs       | 151 ++++++++++++++++--
 1 file changed, 135 insertions(+), 16 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/component/cross_file_elision.rs b/crates/oxc_angular_compiler/src/component/cross_file_elision.rs
index 6c33bbbad..e98b8f38a 100644
--- a/crates/oxc_angular_compiler/src/component/cross_file_elision.rs
+++ b/crates/oxc_angular_compiler/src/component/cross_file_elision.rs
@@ -20,7 +20,7 @@ use std::rc::Rc;
 use oxc_allocator::Allocator;
 use oxc_ast::ast::{
     BindingPattern, Class, Declaration, ExportDefaultDeclarationKind, Expression,
-    ObjectPropertyKind, Statement, TSNamespaceDeclarationBody,
+    ObjectPropertyKind, Program, Statement, TSNamespaceDeclarationBody,
 };
 use oxc_parser::Parser;
 use oxc_resolver::{
@@ -48,6 +48,10 @@ pub struct ExportInfo {
     /// hit a file already in `analyzing`, making the result depend on which
     /// file happened to be read first.
     pub(crate) value_local: Option<String>,
+    /// A top-level `export class` or `export function`: the evaluator reads
+    /// it as a reference, which `StaticValue` can't hold, so
+    /// [`Inner::export_value_at`] answers `None` without evaluating it.
+    pub(crate) never_static: bool,
 }
 
 /// Bounds a re-export chain (`export { X } from ...`, `export *`) followed
@@ -650,6 +654,9 @@ impl Inner {
 
         // A local export: evaluate its binding lazily. `local` is `"default"`
         // for `export default <expr>`.
+        if export_info.never_static {
+            return None;
+        }
         self.eval_export(file_path, &export_info.value_local?)
     }
 
@@ -863,6 +870,7 @@ impl Inner {
                     is_type_only: info.is_type_only,
                     re_export_source: Some((resolved, export_name.to_string())),
                     value_local: None,
+                    never_static: false,
                 });
             }
 
@@ -872,6 +880,7 @@ impl Inner {
                     is_type_only: info.is_type_only,
                     re_export_source: Some((resolved, export_name.to_string())),
                     value_local: None,
+                    never_static: false,
                 });
             }
         }
@@ -979,21 +988,62 @@ impl Inner {
         let parser_ret = Parser::new(&allocator, &source, source_type).parse();
 
         let mut exports = FxHashMap::default();
-
-        for stmt in &parser_ret.program.body {
-            self.analyze_statement(stmt, &mut exports);
-        }
+        self.analyze_program(&parser_ret.program, &mut exports);
 
         self.cache.borrow_mut().insert(file_path.to_string(), exports);
         self.analyzing.borrow_mut().remove(file_path);
     }
 
-    /// Analyze a statement for export information.
-    fn analyze_statement(&self, stmt: &Statement, exports: &mut FxHashMap<String, ExportInfo>) {
+    /// Collect `program`'s exports into `exports`.
+    fn analyze_program(&self, program: &Program, exports: &mut FxHashMap<String, ExportInfo>) {
+        for stmt in &program.body {
+            self.analyze_statement(stmt, exports, true);
+        }
+        // A top-level variable or enum shadows a class or function of the
+        // same name for the evaluator (a duplicate declaration TypeScript
+        // rejects): evaluate those exports as before.
+        if !exports.values().any(|info| info.never_static) {
+            return;
+        }
+        for stmt in &program.body {
+            let decl = match stmt {
+                Statement::ExportDeclaration(decl) => &decl.declaration,
+                _ => match stmt.as_declaration() {
+                    Some(decl) => decl,
+                    None => continue,
+                },
+            };
+            let mut shadow = |name: &str| {
+                if let Some(info) = exports.get_mut(name) {
+                    info.never_static = false;
+                }
+            };
+            match decl {
+                Declaration::VariableDeclaration(vars) => {
+                    for var in &vars.declarations {
+                        for id in var.id.get_binding_identifiers() {
+                            shadow(&id.name);
+                        }
+                    }
+                }
+                Declaration::TSEnumDeclaration(e) => shadow(&e.id.name),
+                _ => {}
+            }
+        }
+    }
+
+    /// Analyze a statement for export information. `top_level` is whether
+    /// `stmt` is in the program body rather than a namespace or module block.
+    fn analyze_statement(
+        &self,
+        stmt: &Statement,
+        exports: &mut FxHashMap<String, ExportInfo>,
+        top_level: bool,
+    ) {
         match stmt {
             // export class/function/const/interface/type Foo { ... }
             Statement::ExportDeclaration(decl) => {
-                self.analyze_declaration(&decl.declaration, exports);
+                self.analyze_declaration(&decl.declaration, exports, top_level);
             }
             // Local named export: export { X, Y } / export type { X }
             Statement::ExportNamedDeclaration(decl) => {
@@ -1006,6 +1056,7 @@ impl Inner {
                                 is_type_only: true,
                                 re_export_source: None,
                                 value_local: None,
+                                never_static: false,
                             },
                         );
                     }
@@ -1022,7 +1073,12 @@ impl Inner {
                     let value_local = (!is_type_only).then(|| spec.local.name().to_string());
                     exports.insert(
                         name,
-                        ExportInfo { is_type_only, re_export_source: None, value_local },
+                        ExportInfo {
+                            is_type_only,
+                            re_export_source: None,
+                            value_local,
+                            never_static: false,
+                        },
                     );
                 }
             }
@@ -1040,6 +1096,7 @@ impl Inner {
                                 is_type_only: true,
                                 re_export_source: None,
                                 value_local: None,
+                                never_static: false,
                             },
                         );
                     }
@@ -1058,6 +1115,7 @@ impl Inner {
                             is_type_only: spec.export_kind.is_type(),
                             re_export_source: source.map(|source| (source.to_string(), local_name)),
                             value_local: None,
+                            never_static: false,
                         },
                     );
                 }
@@ -1075,6 +1133,7 @@ impl Inner {
                         is_type_only,
                         re_export_source: None,
                         value_local: (!is_type_only).then(|| "default".to_string()),
+                        never_static: false,
                     },
                 );
             }
@@ -1090,6 +1149,7 @@ impl Inner {
                             is_type_only: false, // Namespace re-export - assume value
                             re_export_source: Some((source_module, "*".to_string())),
                             value_local: None,
+                            never_static: false,
                         },
                     );
                 } else {
@@ -1102,6 +1162,7 @@ impl Inner {
                             is_type_only: false,
                             re_export_source: Some((source_module, "*".to_string())),
                             value_local: None,
+                            never_static: false,
                         },
                     );
                 }
@@ -1110,7 +1171,7 @@ impl Inner {
             Statement::TSExternalModuleDeclaration(module_decl) => {
                 if let Some(block) = &module_decl.body {
                     for inner_stmt in &block.body {
-                        self.analyze_statement(inner_stmt, exports);
+                        self.analyze_statement(inner_stmt, exports, false);
                     }
                 }
             }
@@ -1121,7 +1182,7 @@ impl Inner {
             // declare global { ... }
             Statement::TSGlobalDeclaration(global_decl) => {
                 for inner_stmt in &global_decl.body.body {
-                    self.analyze_statement(inner_stmt, exports);
+                    self.analyze_statement(inner_stmt, exports, false);
                 }
             }
             _ => {}
@@ -1137,7 +1198,7 @@ impl Inner {
         match body {
             TSNamespaceDeclarationBody::TSModuleBlock(block) => {
                 for inner_stmt in &block.body {
-                    self.analyze_statement(inner_stmt, exports);
+                    self.analyze_statement(inner_stmt, exports, false);
                 }
             }
             TSNamespaceDeclarationBody::TSNamespaceDeclaration(nested) => {
@@ -1146,15 +1207,26 @@ impl Inner {
         }
     }
 
-    /// Analyze a declaration and add export information.
-    fn analyze_declaration(&self, decl: &Declaration, exports: &mut FxHashMap<String, ExportInfo>) {
+    /// Analyze a declaration and add export information. `top_level` is
+    /// whether it's declared in the program body (see
+    /// [`ExportInfo::never_static`]).
+    fn analyze_declaration(
+        &self,
+        decl: &Declaration,
+        exports: &mut FxHashMap<String, ExportInfo>,
+        top_level: bool,
+    ) {
         // A runtime export binds the declared name; its value is evaluated
         // lazily by `eval_export`. Type declarations have no value local.
         let value_info = |name: &str, is_type_only: bool| ExportInfo {
             is_type_only,
             re_export_source: None,
             value_local: (!is_type_only).then(|| name.to_string()),
+            never_static: false,
         };
+        // A class or function evaluates to a reference to itself.
+        let reference_info =
+            |name: &str| ExportInfo { never_static: top_level, ..value_info(name, false) };
         match decl {
             Declaration::TSInterfaceDeclaration(d) => {
                 exports.insert(d.id.name.to_string(), value_info(&d.id.name, true));
@@ -1164,12 +1236,12 @@ impl Inner {
             }
             Declaration::ClassDeclaration(d) => {
                 if let Some(id) = &d.id {
-                    exports.insert(id.name.to_string(), value_info(&id.name, false));
+                    exports.insert(id.name.to_string(), reference_info(&id.name));
                 }
             }
             Declaration::FunctionDeclaration(d) => {
                 if let Some(id) = &d.id {
-                    exports.insert(id.name.to_string(), value_info(&id.name, false));
+                    exports.insert(id.name.to_string(), reference_info(&id.name));
                 }
             }
             Declaration::VariableDeclaration(d) => {
@@ -1944,4 +2016,51 @@ export { doSomething } from './utils';
         analyzer.clear_cache();
         assert_eq!(selector(&analyzer).as_deref(), Some("app-b"));
     }
+
+    #[test]
+    fn test_value_class_and_function_exports_are_opaque() {
+        // Top-level classes and functions resolve to `None` without being
+        // evaluated; the export map still gives their local for selectors.
+        let dir = TempDir::new().unwrap();
+        create_test_file(
+            dir.path(),
+            "decls.ts",
+            "export class C {}\nexport function f() { return 1; }\nexport const V = 'v';",
+        );
+        let main_file = dir.path().join("main.ts");
+        let analyzer = CrossFileAnalyzer::new(dir.path(), None, true);
+
+        assert!(resolve(&analyzer, &main_file, "./decls", "C").is_none());
+        assert!(resolve(&analyzer, &main_file, "./decls", "f").is_none());
+        assert!(analyzer.inner.value_memo.borrow().is_empty());
+        assert!(matches!(
+            resolve(&analyzer, &main_file, "./decls", "V"),
+            Some(StaticValue::String(s)) if s == "v"
+        ));
+    }
+
+    #[test]
+    fn test_value_namespace_class_export_still_evaluates() {
+        // A namespace member's export entry evaluates the top-level name it
+        // shares (here a `const`): only top-level declarations skip
+        // evaluation, as do ones a top-level variable doesn't shadow.
+        let dir = TempDir::new().unwrap();
+        create_test_file(
+            dir.path(),
+            "ns.ts",
+            "export const Foo = 'x';\nexport namespace N { export class Foo {} }",
+        );
+        create_test_file(dir.path(), "dup.ts", "const Bar = 'y';\nexport class Bar {}");
+        let main_file = dir.path().join("main.ts");
+        let analyzer = CrossFileAnalyzer::new(dir.path(), None, true);
+
+        assert!(matches!(
+            resolve(&analyzer, &main_file, "./ns", "Foo"),
+            Some(StaticValue::String(s)) if s == "x"
+        ));
+        assert!(matches!(
+            resolve(&analyzer, &main_file, "./dup", "Bar"),
+            Some(StaticValue::String(s)) if s == "y"
+        ));
+    }
 }

From 891515016fb4f923a01eea80e01d2777c28fcc62 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:32:48 +0800
Subject: [PATCH 25/54] fix(linker,optimizer): honour the sourcemap option

`OptimizeOptions.sourcemap` was accepted but ignored: `optimize` always
returned `map: None`. The linker had no option at all, and its Vite
plugin returned `map: null` from `transform`, which tells Vite the code
did not move even though linked declarations replace whole calls and
change line counts. Stack traces and devtools into linked library code
pointed at the wrong lines.

- optimizer: when `sourcemap` is set, apply edits with the existing
  `apply_edits_with_sourcemap` helper (already used by the component
  transform) and return its map.
- linker: add `LinkOptions.sourcemap` (Rust and NAPI, default false) and
  do the same.
- vite plugin: add a `sourcemap` option to `angularLinkerPlugin`, forward
  it to the binding from both the transform hook and the dependency
  optimizer load hook (which now returns `{ code, map }` when a map
  exists), and pass `angular({ sourceMap })` through to it.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 crates/oxc_angular_compiler/src/linker/mod.rs | 11 ++++-
 .../oxc_angular_compiler/src/optimizer/mod.rs |  8 +++-
 .../oxc_angular_compiler/tests/linker_test.rs | 42 +++++++++++++++-
 .../tests/optimizer_test.rs                   | 39 +++++++++++++++
 napi/angular-compiler/index.d.ts              |  5 ++
 napi/angular-compiler/src/lib.rs              |  8 +++-
 napi/angular-compiler/test/linker.test.ts     | 48 +++++++++++++++++++
 .../vite-plugin/angular-linker-plugin.ts      | 16 +++++--
 napi/angular-compiler/vite-plugin/index.ts    |  5 +-
 9 files changed, 170 insertions(+), 12 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/linker/mod.rs b/crates/oxc_angular_compiler/src/linker/mod.rs
index 9fd1b107b..61cfc0126 100644
--- a/crates/oxc_angular_compiler/src/linker/mod.rs
+++ b/crates/oxc_angular_compiler/src/linker/mod.rs
@@ -91,6 +91,9 @@ pub struct LinkOptions {
     /// such as the DOM security schema (`img|src` is sanitized before 22.2.2).
     /// `None` assumes the latest Angular version.
     pub angular_version: Option<AngularVersion>,
+
+    /// Generate a source map from the linked code back to `code`.
+    pub sourcemap: bool,
 }
 
 /// Link Angular partial declarations in a JavaScript file.
@@ -131,9 +134,13 @@ pub fn link_with_options(
         return LinkResult { code: code.to_string(), map: None, linked: false };
     }
 
-    let linked_code = crate::optimizer::apply_edits(code, edits);
+    let (linked_code, map) = if options.sourcemap {
+        crate::optimizer::apply_edits_with_sourcemap(code, edits, filename)
+    } else {
+        (crate::optimizer::apply_edits(code, edits), None)
+    };
 
-    LinkResult { code: linked_code, map: None, linked: true }
+    LinkResult { code: linked_code, map, linked: true }
 }
 
 /// Recursively walk the AST to find all ɵɵngDeclare* calls and generate edits.
diff --git a/crates/oxc_angular_compiler/src/optimizer/mod.rs b/crates/oxc_angular_compiler/src/optimizer/mod.rs
index dc0ce4f4f..661872471 100644
--- a/crates/oxc_angular_compiler/src/optimizer/mod.rs
+++ b/crates/oxc_angular_compiler/src/optimizer/mod.rs
@@ -155,9 +155,13 @@ pub fn optimize(
     }
 
     // Apply edits
-    let optimized_code = apply_edits(code, edits);
+    let (optimized_code, map) = if options.sourcemap {
+        apply_edits_with_sourcemap(code, edits, filename)
+    } else {
+        (apply_edits(code, edits), None)
+    };
 
-    OptimizeResult { code: optimized_code, map: None }
+    OptimizeResult { code: optimized_code, map }
 }
 
 /// A source code edit operation.
diff --git a/crates/oxc_angular_compiler/tests/linker_test.rs b/crates/oxc_angular_compiler/tests/linker_test.rs
index 4059e3f08..3f22ec49b 100644
--- a/crates/oxc_angular_compiler/tests/linker_test.rs
+++ b/crates/oxc_angular_compiler/tests/linker_test.rs
@@ -288,7 +288,7 @@ Shape.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0
 
 fn link_for_version(code: &str, version: Option<AngularVersion>) -> String {
     let allocator = Allocator::default();
-    let options = LinkOptions { angular_version: version };
+    let options = LinkOptions { angular_version: version, ..LinkOptions::default() };
     let result = link_with_options(&allocator, code, "test.mjs", &options);
     assert!(result.linked);
     result.code
@@ -489,3 +489,43 @@ class D {
         result.code
     );
 }
+
+/// Zero-based line of the first line starting with `prefix`.
+fn line_starting_with(text: &str, prefix: &str) -> u32 {
+    text.lines().position(|line| line.starts_with(prefix)).unwrap() as u32
+}
+
+/// With `sourcemap`, the linker returns a map from the linked code back to the
+/// input; code after a replaced declaration maps to its original line even when
+/// the replacement spans more lines than the declaration.
+#[test]
+fn test_link_sourcemap() {
+    let code = r#"import * as i0 from "@angular/core";
+class P {
+  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: P, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+  static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: P, isStandalone: true, name: "p" });
+}
+export { P };
+"#;
+    let allocator = Allocator::default();
+    assert!(link(&allocator, code, "p.mjs").map.is_none(), "no map unless requested");
+
+    let options = LinkOptions { sourcemap: true, ..LinkOptions::default() };
+    let result = link_with_options(&allocator, code, "p.mjs", &options);
+    assert!(result.linked);
+    let map = result.map.expect("sourcemap requested");
+    let map = oxc_sourcemap::SourceMap::from_json_string(&map).unwrap();
+    assert_eq!(map.get_sources().collect::<Vec<_>>(), ["p.mjs"]);
+
+    let src_line = line_starting_with(code, "export");
+    let out_line = line_starting_with(&result.code, "export");
+    assert_ne!(src_line, out_line, "the factory should add lines:\n{}", result.code);
+    assert!(
+        map.get_tokens().any(|t| t.get_dst_line() == out_line
+            && t.get_dst_col() == 0
+            && t.get_src_line() == src_line
+            && t.get_src_col() == 0),
+        "`export` line {out_line} should map to source line {src_line}:\n{}",
+        result.code
+    );
+}
diff --git a/crates/oxc_angular_compiler/tests/optimizer_test.rs b/crates/oxc_angular_compiler/tests/optimizer_test.rs
index 87bdd05f5..c79825226 100644
--- a/crates/oxc_angular_compiler/tests/optimizer_test.rs
+++ b/crates/oxc_angular_compiler/tests/optimizer_test.rs
@@ -182,3 +182,42 @@ const x = createInjector();
         "Expected no pure annotations when mark_pure is false"
     );
 }
+
+/// With `sourcemap`, the optimizer returns a map from the optimized code back
+/// to the input; code after an elided metadata block maps to its original line.
+#[test]
+fn test_optimize_sourcemap() {
+    let code = r#"import * as i0 from "@angular/core";
+class Foo {}
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Foo, [{
+        type: i0.Injectable
+    }], null, null);
+})();
+export { Foo };
+"#;
+    let allocator = Allocator::default();
+    assert!(
+        optimize(&allocator, code, "foo.mjs", OptimizeOptions::all()).map.is_none(),
+        "no map unless requested"
+    );
+
+    let options = OptimizeOptions { sourcemap: true, ..OptimizeOptions::all() };
+    let result = optimize(&allocator, code, "foo.mjs", options);
+    assert!(!result.code.contains("ɵsetClassMetadata"), "{}", result.code);
+    let map = result.map.expect("sourcemap requested");
+    let map = oxc_sourcemap::SourceMap::from_json_string(&map).unwrap();
+    assert_eq!(map.get_sources().collect::<Vec<_>>(), ["foo.mjs"]);
+
+    let line_of = |text: &str| text.lines().position(|l| l.starts_with("export")).unwrap() as u32;
+    let (src_line, out_line) = (line_of(code), line_of(&result.code));
+    assert_ne!(src_line, out_line, "elision should remove lines:\n{}", result.code);
+    assert!(
+        map.get_tokens().any(|t| t.get_dst_line() == out_line
+            && t.get_dst_col() == 0
+            && t.get_src_line() == src_line
+            && t.get_src_col() == 0),
+        "`export` line {out_line} should map to source line {src_line}:\n{}",
+        result.code
+    );
+}
diff --git a/napi/angular-compiler/index.d.ts b/napi/angular-compiler/index.d.ts
index 4f1b6fda8..b81425eef 100644
--- a/napi/angular-compiler/index.d.ts
+++ b/napi/angular-compiler/index.d.ts
@@ -691,6 +691,11 @@ export interface LinkOptions {
    * When not set, assumes the latest Angular version.
    */
   angularVersion?: AngularVersion
+  /**
+   * Generate a source map from the linked code back to the input.
+   * Default: false
+   */
+  sourcemap?: boolean
 }
 
 /** Result of linking Angular partial declarations. */
diff --git a/napi/angular-compiler/src/lib.rs b/napi/angular-compiler/src/lib.rs
index 8e838932f..b58cd8627 100644
--- a/napi/angular-compiler/src/lib.rs
+++ b/napi/angular-compiler/src/lib.rs
@@ -2951,8 +2951,10 @@ pub fn link_angular_package_sync(
     use oxc_angular_compiler::linker::{LinkOptions as RustLinkOptions, link_with_options};
 
     let allocator = Allocator::default();
+    let options = options.unwrap_or_default();
     let rust_options = RustLinkOptions {
-        angular_version: options.and_then(|o| o.angular_version).map(Into::into),
+        angular_version: options.angular_version.map(Into::into),
+        sourcemap: options.sourcemap.unwrap_or(false),
     };
     let result = link_with_options(&allocator, &code, &filename, &rust_options);
 
@@ -2969,6 +2971,10 @@ pub struct LinkOptions {
     /// Angular's own linker does with the application's `@angular/compiler`.
     /// When not set, assumes the latest Angular version.
     pub angular_version: Option<AngularVersion>,
+
+    /// Generate a source map from the linked code back to the input.
+    /// Default: false
+    pub sourcemap: Option<bool>,
 }
 
 /// Async task for Angular linking.
diff --git a/napi/angular-compiler/test/linker.test.ts b/napi/angular-compiler/test/linker.test.ts
index cdc8c73c3..38231843e 100644
--- a/napi/angular-compiler/test/linker.test.ts
+++ b/napi/angular-compiler/test/linker.test.ts
@@ -361,3 +361,51 @@ describe('linker: angularVersion', () => {
     expect(await link({ major: 22, minor: 2, patch: 2 })).toContain('ɵɵproperty("src",ctx.url)')
   })
 })
+
+describe('linker: sourcemap', () => {
+  const id = 'node_modules/@angular/common/fesm2022/_pipes-chunk.mjs'
+
+  it('returns a source map only when requested', () => {
+    expect(linkAngularPackageSync(PIPE_CHUNK, id).map ?? null).toBeNull()
+
+    const result = linkAngularPackageSync(PIPE_CHUNK, id, { sourcemap: true })
+    expect(result.linked).toBe(true)
+    const map = JSON.parse(result.map!)
+    expect(map.sources).toEqual([id])
+    expect(map.mappings).not.toBe('')
+  })
+
+  it('forwards the plugin sourcemap option through the Vite transform hook', async () => {
+    const transform = async (sourcemap?: boolean) =>
+      (angularLinkerPlugin({ sourcemap }) as any).transform.handler.call({}, PIPE_CHUNK, id)
+
+    expect((await transform()).map).toBeNull()
+    expect(JSON.parse((await transform(true)).map).sources).toEqual([id])
+  })
+
+  it('returns the map from the dependency optimizer load hook', async () => {
+    const plugin = angularLinkerPlugin({ sourcemap: true }) as any
+    plugin.configResolved({ optimizeDeps: {} })
+    const [optimizerPlugin] = plugin.config({}, { command: 'serve' }).optimizeDeps.rolldownOptions
+      .plugins
+    const result = await optimizerPlugin.load.handler.call(
+      { fs: { readFile: async () => PIPE_CHUNK } },
+      id,
+    )
+
+    expect(result.code).toContain('definePipe')
+    expect(JSON.parse(result.map).sources).toEqual([id])
+  })
+
+  it('forwards angular() sourceMap to the linker plugin', async () => {
+    const link = async (sourceMap: boolean) => {
+      const plugin = angular({ sourceMap }).find(
+        (candidate) => candidate.name === '@oxc-angular/vite-linker',
+      ) as any
+      return plugin.transform.handler.call({}, PIPE_CHUNK, id)
+    }
+
+    expect((await link(false)).map).toBeNull()
+    expect(JSON.parse((await link(true)).map).sources).toEqual([id])
+  })
+})
diff --git a/napi/angular-compiler/vite-plugin/angular-linker-plugin.ts b/napi/angular-compiler/vite-plugin/angular-linker-plugin.ts
index 64ad51a50..7100bcb74 100644
--- a/napi/angular-compiler/vite-plugin/angular-linker-plugin.ts
+++ b/napi/angular-compiler/vite-plugin/angular-linker-plugin.ts
@@ -89,8 +89,9 @@ async function linkCode(
   code: string,
   id: string,
   angularVersion: AngularVersion | undefined,
+  sourcemap: boolean,
 ): Promise<{ code: string; map: string | null; linked: boolean }> {
-  const result = await linkAngularPackage(code, id, { angularVersion })
+  const result = await linkAngularPackage(code, id, { angularVersion, sourcemap })
   return {
     code: result.linked ? result.code : code,
     map: result.map ?? null,
@@ -101,6 +102,8 @@ async function linkCode(
 export interface AngularLinkerPluginOptions {
   /** Angular version of the application, forwarded to the linker. Assumes latest when unset. */
   angularVersion?: AngularVersion
+  /** Return source maps from linked code back to the package file. Default: false */
+  sourcemap?: boolean
 }
 
 /**
@@ -115,7 +118,10 @@ function optimizerPluginName(angularVersion: AngularVersion | undefined): string
   return `angular-linker@${major}.${minor}.${patch}${prerelease != null ? `-${prerelease}` : ''}`
 }
 
-export function angularLinkerPlugin({ angularVersion }: AngularLinkerPluginOptions = {}): Plugin {
+export function angularLinkerPlugin({
+  angularVersion,
+  sourcemap = false,
+}: AngularLinkerPluginOptions = {}): Plugin {
   let optimizeDepsExclude: readonly string[] = []
 
   return {
@@ -162,13 +168,13 @@ export function angularLinkerPlugin({ angularVersion }: AngularLinkerPluginOptio
                       return
                     }
 
-                    const result = await linkCode(code, id, angularVersion)
+                    const result = await linkCode(code, id, angularVersion, sourcemap)
 
                     if (!result.linked) {
                       return
                     }
 
-                    return result.code
+                    return result.map ? { code: result.code, map: result.map } : result.code
                   },
                 },
               },
@@ -201,7 +207,7 @@ export function angularLinkerPlugin({ angularVersion }: AngularLinkerPluginOptio
           return
         }
 
-        const result = await linkCode(code, id, angularVersion)
+        const result = await linkCode(code, id, angularVersion, sourcemap)
 
         if (!result.linked) {
           return
diff --git a/napi/angular-compiler/vite-plugin/index.ts b/napi/angular-compiler/vite-plugin/index.ts
index 3dfb9a0e0..85ab10f89 100644
--- a/napi/angular-compiler/vite-plugin/index.ts
+++ b/napi/angular-compiler/vite-plugin/index.ts
@@ -1546,7 +1546,10 @@ export function angular(options: PluginOptions = {}): Plugin[] {
     angularPlugin(),
     stylesPlugin(),
     dtsPlugin(),
-    angularLinkerPlugin({ angularVersion: pluginOptions.angularVersion }),
+    angularLinkerPlugin({
+      angularVersion: pluginOptions.angularVersion,
+      sourcemap: pluginOptions.sourceMap,
+    }),
     pluginOptions.jit &&
       jitPlugin({
         inlineStylesExtension: pluginOptions.inlineStylesExtension,

From 065668870b898abea99d29edd0243131830e497b Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:32:59 +0800
Subject: [PATCH 26/54] perf(cross-file): parse each analyzed file once per
 analyzer

`analyze_file` parsed a file to build its export map, then
`eval_export_uncached` parsed it again for every distinct export it
evaluated, and `standalone_class_selector` once more per selector
lookup, each time also cloning the kept source text.

Files are now parsed once into a `ParsedFile` that owns its arena
(boxed `Allocator` holding the source text), the `Program`, and the
`StringConsts` the evaluator reads, with the import resolver already
attached. `analyze_file` keeps that parse when `values_enabled`; files
it didn't keep are parsed on first use, as the old disk fallback did.
The parsed files replace the `sources` map and are dropped with
`clear_cache`.

The program and consts borrow the arena, so they are stored with a
`'static` lifetime and only lent out through `ParsedFile::with`, whose
closure is generic over the lifetime so nothing borrowed escapes. The
attached resolver holds a `Weak` handle to the analyzer state, so the
cache doesn't form an `Rc` cycle. A fresh `Evaluator` is still built
per export (its fuel and memo stay per evaluation), so the output is
unchanged.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/component/cross_file_elision.rs       | 230 ++++++++++++------
 1 file changed, 156 insertions(+), 74 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/component/cross_file_elision.rs b/crates/oxc_angular_compiler/src/component/cross_file_elision.rs
index e98b8f38a..1c1cfee0b 100644
--- a/crates/oxc_angular_compiler/src/component/cross_file_elision.rs
+++ b/crates/oxc_angular_compiler/src/component/cross_file_elision.rs
@@ -15,7 +15,7 @@
 
 use std::cell::RefCell;
 use std::path::{Path, PathBuf};
-use std::rc::Rc;
+use std::rc::{Rc, Weak};
 
 use oxc_allocator::Allocator;
 use oxc_ast::ast::{
@@ -29,7 +29,7 @@ use oxc_resolver::{
 use oxc_span::SourceType;
 use rustc_hash::{FxHashMap, FxHashSet};
 
-use crate::directive::ImportValueResolver;
+use crate::directive::{ImportValueResolver, StringConsts};
 
 /// Result of analyzing a file's exports
 #[derive(Debug, Clone)]
@@ -78,9 +78,10 @@ struct Inner {
     cache: RefCell<FxHashMap<String, FxHashMap<String, ExportInfo>>>,
     /// Files currently being analyzed (for circular import detection)
     analyzing: RefCell<FxHashSet<String>>,
-    /// Source text of analyzed files, kept so `eval_export` can re-parse
-    /// on demand. Only populated when `values_enabled`.
-    sources: RefCell<FxHashMap<String, String>>,
+    /// Files parsed for `eval_export` and `class_selector`, so each is
+    /// parsed once: `analyze_file` keeps its parse when `values_enabled`, and
+    /// other files are parsed on first use.
+    parsed: RefCell<FxHashMap<String, Rc<ParsedFile>>>,
     /// Memoized per-export value evaluations: `(file, local_name)` -> value.
     /// `None` means evaluated-but-opaque.
     value_memo: RefCell<FxHashMap<(String, String), Option<crate::directive::StaticValue>>>,
@@ -95,11 +96,61 @@ struct Inner {
     /// Files read to resolve exported values, so build tools can watch them.
     value_dependencies: RefCell<FxHashSet<String>>,
     /// Whether exported-value resolution (`resolve_imported_values`) is on.
-    /// When false, `analyze_file` doesn't retain source text.
+    /// When false, `analyze_file` doesn't keep the files it parses.
     values_enabled: bool,
-    /// `Rc` handle to this state, for resolvers built while analyzing a file
-    /// (`eval_export` only sees `&self`).
-    this: std::rc::Weak<Inner>,
+    /// Handle to this state, for the resolvers of the files in `parsed`
+    /// (`parse_file` only sees `&self`).
+    this: Weak<Inner>,
+}
+
+/// A file parsed once per analyzer: its program, and the consts the
+/// evaluator reads it through, which resolve its imports with a
+/// [`ParsedFileResolver`].
+struct ParsedFile {
+    // `consts` and `program` borrow `allocator`, which also holds the source
+    // text. They're declared first so they drop first; the allocator is boxed
+    // so it stays put when `ParsedFile` moves.
+    consts: StringConsts<'static>,
+    program: &'static Program<'static>,
+    allocator: Box<Allocator>,
+}
+
+impl ParsedFile {
+    /// Run `f` on the file's allocator, program and consts. `f` works for
+    /// any lifetime, so nothing borrowed from them outlives `self`.
+    fn with<R>(
+        &self,
+        f: impl for<'a> FnOnce(&'a Allocator, &'a Program<'a>, &'a StringConsts<'a>) -> R,
+    ) -> R {
+        // SAFETY: `program` and `consts` only borrow `self.allocator`, which
+        // lives as long as `self`, so they're valid for the borrow of `self`.
+        // `StringConsts` is invariant over its lifetime (its caches are
+        // `RefCell`s), hence the cast; `f` can only store data borrowed for
+        // that same lifetime in them, i.e. from the allocator.
+        let consts = unsafe { &*std::ptr::from_ref(&self.consts).cast::<StringConsts<'_>>() };
+        f(&self.allocator, self.program, consts)
+    }
+}
+
+/// The [`ImportValueResolver`] of a file in [`Inner::parsed`]: a
+/// [`CrossFileResolver`] holding a `Weak` handle, so the cache doesn't keep
+/// the analyzer alive.
+struct ParsedFileResolver {
+    inner: Weak<Inner>,
+    from_file: PathBuf,
+}
+
+impl ImportValueResolver for ParsedFileResolver {
+    fn resolve(&self, module: &str, name: &str) -> Option<crate::directive::StaticValue> {
+        self.inner.upgrade()?.resolve_export_value(module, name, &self.from_file)
+    }
+
+    fn exports(
+        &self,
+        module: &str,
+    ) -> Option<Vec<(String, Option<crate::directive::StaticValue>)>> {
+        self.inner.upgrade()?.export_values_of(module, &self.from_file)
+    }
 }
 
 /// An [`ImportValueResolver`] bound to the file whose imports it resolves:
@@ -123,22 +174,17 @@ impl ImportValueResolver for CrossFileResolver {
     }
 }
 
-/// The selector of the class `local` declares in `source` (the text of
-/// `file_path`; `"default"` for `export default class`) and exports as
-/// `exported`, when it is a standalone `@Component` or `@Directive` whose
-/// `selector` and `standalone` are literals.
-fn standalone_class_selector(
-    file_path: &str,
-    source: &str,
+/// The selector of the class `local` declares in `program` (`"default"` for
+/// `export default class`) and exports as `exported`, when it is a
+/// standalone `@Component` or `@Directive` whose `selector` and `standalone`
+/// are literals. `consts` are the program's.
+fn standalone_class_selector<'a>(
+    program: &'a Program<'a>,
+    consts: &StringConsts<'a>,
     exported: &str,
     local: &str,
     implicit_standalone: bool,
 ) -> Option<String> {
-    let allocator = Allocator::default();
-    let source_type = SourceType::from_path(file_path).unwrap_or_default();
-    let parser_ret = Parser::new(&allocator, source, source_type).parse();
-    let program = &parser_ret.program;
-
     // A plain `class Local` must be exported as `exported` by a local
     // `export { Local as exported }`: the export map also records namespace
     // members, which can share the name of a top-level class the file doesn't
@@ -169,9 +215,8 @@ fn standalone_class_selector(
         _ => None,
     })?;
 
-    let consts = crate::directive::collect_string_consts(&allocator, program);
     let decorator = ["Component", "Directive"].iter().find_map(|name| {
-        crate::directive::find_angular_class_decorator(&class.decorators, name, &consts)
+        crate::directive::find_angular_class_decorator(&class.decorators, name, consts)
     })?;
     let Expression::CallExpression(call) = &decorator.expression else { return None };
     let Some(Expression::ObjectExpression(object)) =
@@ -223,7 +268,7 @@ impl CrossFileAnalyzer {
                 resolver: Resolver::new(options),
                 cache: RefCell::new(FxHashMap::default()),
                 analyzing: RefCell::new(FxHashSet::default()),
-                sources: RefCell::new(FxHashMap::default()),
+                parsed: RefCell::new(FxHashMap::default()),
                 value_memo: RefCell::new(FxHashMap::default()),
                 selector_memo: RefCell::new(FxHashMap::default()),
                 evaluating_values: RefCell::new(FxHashSet::default()),
@@ -499,7 +544,7 @@ impl Inner {
     }
 
     /// [`standalone_class_selector`] memoized per `(file, exported, local)`,
-    /// reading the source `analyze_file` kept instead of the file again.
+    /// reading the file through [`Self::parsed_file`].
     fn class_selector(
         &self,
         file_path: &str,
@@ -512,16 +557,10 @@ impl Inner {
         if let Some(cached) = self.selector_memo.borrow().get(&key) {
             return cached.clone();
         }
-        // `sources` is populated when `values_enabled`; read the file
-        // directly as a fallback, like `eval_export_uncached`.
-        let source = self
-            .sources
-            .borrow()
-            .get(file_path)
-            .cloned()
-            .or_else(|| std::fs::read_to_string(file_path).ok());
-        let selector = source.and_then(|source| {
-            standalone_class_selector(file_path, &source, exported, local, implicit_standalone)
+        let selector = self.parsed_file(file_path).and_then(|file| {
+            file.with(|_, program, consts| {
+                standalone_class_selector(program, consts, exported, local, implicit_standalone)
+            })
         });
         self.selector_memo.borrow_mut().insert(key, selector.clone());
         selector
@@ -679,39 +718,57 @@ impl Inner {
         value
     }
 
-    /// [`Self::eval_export`] without the memo: re-parse the cached source and
-    /// evaluate the named binding.
+    /// [`Self::eval_export`] without the memo: evaluate the named binding in
+    /// the parsed file.
     fn eval_export_uncached(
         &self,
         file_path: &str,
         local: &str,
     ) -> Option<crate::directive::StaticValue> {
-        // `sources` is populated by `analyze_file` when `values_enabled`;
-        // read the file directly as a fallback so behavior doesn't depend on
-        // which path discovered it first.
-        let source = self
-            .sources
-            .borrow()
-            .get(file_path)
-            .cloned()
-            .or_else(|| std::fs::read_to_string(file_path).ok())?;
-
-        let allocator = Allocator::default();
-        let source_type = SourceType::from_path(file_path).unwrap_or_default();
-        let parser_ret = Parser::new(&allocator, &source, source_type).parse();
-        let Some(inner) = self.this.upgrade() else { return None };
-        let consts =
-            crate::directive::collect_string_consts(&allocator, &parser_ret.program).with_resolver(
-                Rc::new(CrossFileResolver { inner, from_file: Path::new(file_path).to_path_buf() }),
-            );
-        let evaluator = crate::directive::Evaluator::new(&consts);
-
-        if local == "default" {
-            return self
-                .find_default_expr(&parser_ret.program.body)
-                .and_then(|expr| evaluator.evaluate(expr).as_static());
+        let file = self.parsed_file(file_path)?;
+        file.with(|allocator, program, consts| {
+            let evaluator = crate::directive::Evaluator::new(consts);
+            if local == "default" {
+                return self
+                    .find_default_expr(&program.body)
+                    .and_then(|expr| evaluator.evaluate(expr).as_static());
+            }
+            evaluator.evaluate_name(allocator.alloc_str(local)).as_static()
+        })
+    }
+
+    /// `file_path` parsed, from [`Self::parsed`], or read and parsed now when
+    /// `analyze_file` didn't keep it (`values_enabled` off) so behavior
+    /// doesn't depend on which path discovered it first. `None` when the
+    /// file can't be read.
+    fn parsed_file(&self, file_path: &str) -> Option<Rc<ParsedFile>> {
+        if let Some(file) = self.parsed.borrow().get(file_path) {
+            return Some(Rc::clone(file));
         }
-        evaluator.evaluate_name(allocator.alloc_str(local)).as_static()
+        let source = std::fs::read_to_string(file_path).ok()?;
+        let file = Rc::new(self.parse_file(file_path, &source));
+        self.parsed.borrow_mut().insert(file_path.to_string(), Rc::clone(&file));
+        Some(file)
+    }
+
+    /// Parse `source`, the text of `file_path`, with consts whose imports
+    /// resolve from `file_path`.
+    fn parse_file(&self, file_path: &str, source: &str) -> ParsedFile {
+        let allocator = Box::new(Allocator::default());
+        // SAFETY: the boxed allocator outlives the program and consts that
+        // borrow it (see `ParsedFile`), and `ParsedFile::with` only lends
+        // them for the borrow of the `ParsedFile`.
+        let arena: &'static Allocator = unsafe { &*std::ptr::from_ref::<Allocator>(&*allocator) };
+        let source = arena.alloc_str(source);
+        let source_type = SourceType::from_path(file_path).unwrap_or_default();
+        let program = arena.alloc(Parser::new(arena, source, source_type).parse().program);
+        let resolver = ParsedFileResolver {
+            inner: Weak::clone(&self.this),
+            from_file: Path::new(file_path).to_path_buf(),
+        };
+        let consts = crate::directive::collect_string_consts(arena, program)
+            .with_resolver(Rc::new(resolver));
+        ParsedFile { consts, program, allocator }
     }
 
     /// The initializer expression of `export default <expr>`, searching the
@@ -979,17 +1036,20 @@ impl Inner {
             }
         };
 
+        // With values on, keep the parsed file for `eval_export` and
+        // `class_selector`, so the file is parsed once per analyzer.
+        let mut exports = FxHashMap::default();
         if self.values_enabled {
-            self.sources.borrow_mut().insert(file_path.to_string(), source.clone());
+            let file = Rc::new(self.parse_file(file_path, &source));
+            file.with(|_, program, _| self.analyze_program(program, &mut exports));
+            self.parsed.borrow_mut().insert(file_path.to_string(), file);
+        } else {
+            let allocator = Allocator::default();
+            let source_type = SourceType::from_path(file_path).unwrap_or_default();
+            let parser_ret = Parser::new(&allocator, &source, source_type).parse();
+            self.analyze_program(&parser_ret.program, &mut exports);
         }
 
-        let allocator = Allocator::default();
-        let source_type = SourceType::from_path(file_path).unwrap_or_default();
-        let parser_ret = Parser::new(&allocator, &source, source_type).parse();
-
-        let mut exports = FxHashMap::default();
-        self.analyze_program(&parser_ret.program, &mut exports);
-
         self.cache.borrow_mut().insert(file_path.to_string(), exports);
         self.analyzing.borrow_mut().remove(file_path);
     }
@@ -1271,7 +1331,7 @@ impl Inner {
     /// Clear the analysis cache.
     pub fn clear_cache(&self) {
         self.cache.borrow_mut().clear();
-        self.sources.borrow_mut().clear();
+        self.parsed.borrow_mut().clear();
         self.value_memo.borrow_mut().clear();
         self.selector_memo.borrow_mut().clear();
     }
@@ -1912,8 +1972,8 @@ export { doSomething } from './utils';
 
     #[test]
     fn test_value_elision_only_analyzer_resolves_on_demand() {
-        // `resolve_export_value` works without `values_enabled`: `sources` is
-        // empty and the file is re-read for evaluation.
+        // `resolve_export_value` works without `values_enabled`: `parsed` is
+        // empty and the file is read again for evaluation.
         let dir = TempDir::new().unwrap();
         create_test_file(dir.path(), "other.ts", "export const V = 'v';");
         let main_file = dir.path().join("main.ts");
@@ -1994,7 +2054,7 @@ export { doSomething } from './utils';
 
     #[test]
     fn test_standalone_directive_selector_is_memoized() {
-        // The selector is read from the source `analyze_file` kept and
+        // The selector is read from the file `analyze_file` parsed and
         // memoized, not re-read from disk on every lookup, until the caches
         // are cleared. The file is still reported as a dependency each time.
         let dir = TempDir::new().unwrap();
@@ -2017,6 +2077,28 @@ export { doSomething } from './utils';
         assert_eq!(selector(&analyzer).as_deref(), Some("app-b"));
     }
 
+    #[test]
+    fn test_value_file_parsed_once() {
+        // `analyze_file`'s parse serves every later evaluation and selector
+        // lookup in the file: an edit made after it isn't seen.
+        let dir = TempDir::new().unwrap();
+        let meta =
+            create_test_file(dir.path(), "meta.ts", "export const A = 'a';\nexport const B = 'b';");
+        let main_file = dir.path().join("main.ts");
+        let analyzer = CrossFileAnalyzer::new(dir.path(), None, true);
+
+        assert!(matches!(
+            resolve(&analyzer, &main_file, "./meta", "A"),
+            Some(StaticValue::String(s)) if s == "a"
+        ));
+        fs::write(&meta, "export const A = 'x';\nexport const B = 'y';").unwrap();
+        assert!(matches!(
+            resolve(&analyzer, &main_file, "./meta", "B"),
+            Some(StaticValue::String(s)) if s == "b"
+        ));
+        assert_eq!(analyzer.inner.parsed.borrow().len(), 1);
+    }
+
     #[test]
     fn test_value_class_and_function_exports_are_opaque() {
         // Top-level classes and functions resolve to `None` without being

From 953b53b15d45a33ea032f450fabae04c2c910f3b Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:34:35 +0800
Subject: [PATCH 27/54] perf(optimizer): build edit source maps in linear time

`generate_sourcemap_from_edits` rescanned the source and the output from
byte 0 for every unchanged segment to find its line and column, and
re-summed the edit shifts from the first edit each time. That is
quadratic in file size, which did not matter for single component files
but does for the multi-megabyte FESM bundles the linker and optimizer
now map.

Segments are visited in ascending source order, so keep a running
prefix sum of edit shifts and a forward-only line/column cursor per
string (it restarts from the start if asked for an earlier offset).
The generated maps are byte-identical.

Linking then optimizing the 200 @angular/* fesm2022 files in
node_modules with sourcemaps on (release build):
  link      0.224s -> 0.077s  (0.055s without maps)
  optimize  0.358s -> 0.078s  (0.038s without maps)
with the same hash over every generated map before and after.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../oxc_angular_compiler/src/optimizer/mod.rs | 71 +++++++++++++------
 1 file changed, 51 insertions(+), 20 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/optimizer/mod.rs b/crates/oxc_angular_compiler/src/optimizer/mod.rs
index 661872471..07f72c756 100644
--- a/crates/oxc_angular_compiler/src/optimizer/mod.rs
+++ b/crates/oxc_angular_compiler/src/optimizer/mod.rs
@@ -347,17 +347,27 @@ fn generate_sourcemap_from_edits(
         .collect();
     edit_shifts.sort_by_key(|(end, _)| *end);
 
+    // `unchanged` is in ascending source order, so the edit-shift prefix sum and
+    // both line/column cursors only move forward: linear in the input size
+    // instead of rescanning from the start for every segment.
+    let mut shift_idx = 0;
+    let mut net_shift: i64 = 0;
+    let mut src_cursor = LineColCursor::new(source);
+    let mut out_cursor = LineColCursor::new(output);
+
     for (src_start, src_end) in &unchanged {
         let segment = &source[*src_start as usize..*src_end as usize];
         if segment.is_empty() {
             continue;
         }
         // Compute output byte offset: src_start + net shift from all edits ending at or before src_start
-        let net_shift: i64 = edit_shifts
-            .iter()
-            .take_while(|(end, _)| *end <= *src_start)
-            .map(|(_, shift)| shift)
-            .sum();
+        while let Some((end, shift)) = edit_shifts.get(shift_idx) {
+            if *end > *src_start {
+                break;
+            }
+            net_shift += shift;
+            shift_idx += 1;
+        }
         let output_byte_pos = (*src_start as i64 + net_shift) as usize;
 
         debug_assert!(
@@ -370,34 +380,55 @@ fn generate_sourcemap_from_edits(
             src_end,
         );
 
-        let (src_line, src_col) = byte_offset_to_line_col_utf16(source, *src_start as usize);
-        let (out_line, out_col) = byte_offset_to_line_col_utf16(output, output_byte_pos);
+        let (src_line, src_col) = src_cursor.line_col(*src_start as usize);
+        let (out_line, out_col) = out_cursor.line_col(output_byte_pos);
         add_line_mappings_for_segment(&mut builder, segment, out_line, out_col, src_line, src_col);
     }
 
     builder.into_sourcemap().to_json_string()
 }
 
-/// Compute line and column (UTF-16 code units) for a byte offset in a string.
+/// Computes line and column (UTF-16 code units) for byte offsets in a string.
 ///
 /// Source map columns must be in UTF-16 code units per the spec and `oxc_sourcemap`
 /// convention. For ASCII this equals byte offset; for multi-byte characters
 /// (e.g., `ɵ` U+0275 = 2 UTF-8 bytes but 1 UTF-16 code unit) the values differ.
-fn byte_offset_to_line_col_utf16(source: &str, offset: usize) -> (u32, u32) {
-    let mut line: u32 = 0;
-    let mut col: u32 = 0;
-    for (i, ch) in source.char_indices() {
-        if i >= offset {
-            break;
+///
+/// The cursor remembers where the previous lookup stopped, so ascending lookups
+/// scan the string once in total. A lookup behind the cursor restarts from the
+/// beginning.
+struct LineColCursor<'a> {
+    text: &'a str,
+    /// Byte offset of the next unscanned character (always a char boundary).
+    offset: usize,
+    line: u32,
+    col: u32,
+}
+
+impl<'a> LineColCursor<'a> {
+    fn new(text: &'a str) -> Self {
+        Self { text, offset: 0, line: 0, col: 0 }
+    }
+
+    /// Line and column after every character that starts before `offset`.
+    fn line_col(&mut self, offset: usize) -> (u32, u32) {
+        if offset < self.offset {
+            *self = Self::new(self.text);
         }
-        if ch == '\n' {
-            line += 1;
-            col = 0;
-        } else {
-            col += ch.len_utf16() as u32;
+        for ch in self.text[self.offset..].chars() {
+            if self.offset >= offset {
+                break;
+            }
+            if ch == '\n' {
+                self.line += 1;
+                self.col = 0;
+            } else {
+                self.col += ch.len_utf16() as u32;
+            }
+            self.offset += ch.len_utf8();
         }
+        (self.line, self.col)
     }
-    (line, col)
 }
 
 /// Add source map mappings for an unchanged segment of source code.

From c3d1ae0fabf63923cffbdb9341e949d4f69fd943 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:39:51 +0800
Subject: [PATCH 28/54] =?UTF-8?q?fix(ng=5Fmodule):=20always=20run=20=C9=B5?=
 =?UTF-8?q?=C9=B5setNgModuleScope,=20without=20the=20ngJitMode=20guard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous commit moved the NgModule scope out of ɵɵdefineNgModule into
`(typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(...)`,
like ngtsc. ngtsc can let production builds drop that call because it lists
every component's dependencies statically. Oxc compiles one file at a time
and resolves dependencies at runtime with ɵɵgetComponentDepsFactory, which
reads the scope from ɵmod (and only ɵɵsetNgModuleScope registers the module
with the deps tracker). The Vite plugin defines ngJitMode as false in
production, so with the guard:

- a standalone component that imports an Oxc-compiled NgModule lost that
  module's exported directives and pipes (it had them before, when the
  scope was inline in ɵmod), and
- a list given as a const array or spread never reached the runtime.

The call is now always made. ɵmod keeps only `type` (and `bootstrap`) and
the scope still goes through ɵɵsetNgModuleScope, so raw lists are flattened
by the runtime. As a side effect a component declared in an NgModule now
finds its owner module in production too; before this branch it had no
dependencies in any mode.

Cost: an NgModule that nothing uses is no longer tree-shaken, because the
IIFE is a side effect. The scope was not tree-shakeable before this branch
either (it was inline in ɵmod).

The e2e compare harness only compares the class body, so the guard does
not show up there; the exact output is pinned by the Rust tests, and a new
vitest test runs the compiled code against @angular/core with
ngJitMode = false.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/class_metadata/compiler.rs            | 10 ---
 .../src/class_metadata/mod.rs                 |  1 -
 .../src/ng_module/compiler.rs                 | 30 ++++---
 .../src/ng_module/definition.rs               | 47 +++++------
 .../src/ng_module/metadata.rs                 |  3 +-
 .../tests/integration_test.rs                 | 11 +--
 .../test/ng-module-scope-runtime.test.ts      | 84 +++++++++++++++++++
 7 files changed, 130 insertions(+), 56 deletions(-)
 create mode 100644 napi/angular-compiler/test/ng-module-scope-runtime.test.ts

diff --git a/crates/oxc_angular_compiler/src/class_metadata/compiler.rs b/crates/oxc_angular_compiler/src/class_metadata/compiler.rs
index 4c7649a3c..b2f2cac53 100644
--- a/crates/oxc_angular_compiler/src/class_metadata/compiler.rs
+++ b/crates/oxc_angular_compiler/src/class_metadata/compiler.rs
@@ -307,16 +307,6 @@ fn dev_only_guarded_expression<'a>(
     guarded_expression(allocator, "ngDevMode", expr)
 }
 
-/// Creates: (typeof ngJitMode === "undefined" || ngJitMode) && expr
-///
-/// Ported from Angular's `jitOnlyGuardedExpression` in `util.ts`.
-pub(crate) fn jit_only_guarded_expression<'a>(
-    allocator: &'a Allocator,
-    expr: OutputExpression<'a>,
-) -> OutputExpression<'a> {
-    guarded_expression(allocator, "ngJitMode", expr)
-}
-
 /// Creates: (typeof guard === "undefined" || guard) && expr
 fn guarded_expression<'a>(
     allocator: &'a Allocator,
diff --git a/crates/oxc_angular_compiler/src/class_metadata/mod.rs b/crates/oxc_angular_compiler/src/class_metadata/mod.rs
index 6b829df67..0073b8426 100644
--- a/crates/oxc_angular_compiler/src/class_metadata/mod.rs
+++ b/crates/oxc_angular_compiler/src/class_metadata/mod.rs
@@ -19,7 +19,6 @@ pub use builders::{
     build_prop_decorators_metadata, build_prop_decorators_metadata_in,
 };
 pub(crate) use builders::{entity_path, param_type_reference, type_param_names_of};
-pub(crate) use compiler::jit_only_guarded_expression;
 pub use compiler::{
     compile_class_metadata, compile_component_class_metadata,
     compile_component_metadata_async_resolver, compile_opaque_async_class_metadata,
diff --git a/crates/oxc_angular_compiler/src/ng_module/compiler.rs b/crates/oxc_angular_compiler/src/ng_module/compiler.rs
index e96220bda..4db6726cb 100644
--- a/crates/oxc_angular_compiler/src/ng_module/compiler.rs
+++ b/crates/oxc_angular_compiler/src/ng_module/compiler.rs
@@ -17,7 +17,6 @@ use oxc_allocator::{Allocator, Box, Vec};
 use oxc_str::Ident;
 
 use super::metadata::{R3NgModuleMetadata, R3Reference};
-use crate::class_metadata::jit_only_guarded_expression;
 use crate::output::ast::{
     ArrowFunctionBody, ArrowFunctionExpr, FunctionExpr, InvokeFunctionExpr, LiteralArrayExpr,
     LiteralMapEntry, LiteralMapExpr, OutputExpression, OutputStatement, ParenthesizedExpr,
@@ -233,14 +232,23 @@ fn create_define_ng_module_call<'a>(
 /// Generates:
 /// ```javascript
 /// (function() {
-///   (typeof ngJitMode === "undefined" || ngJitMode) &&
-///     ɵɵsetNgModuleScope(ModuleClass, {
-///       declarations: [...],
-///       imports: [...],
-///       exports: [...]
-///     });
+///   ɵɵsetNgModuleScope(ModuleClass, {
+///     declarations: [...],
+///     imports: [...],
+///     exports: [...]
+///   });
 /// })()
 /// ```
+///
+/// ngtsc guards the call with `(typeof ngJitMode === "undefined" || ngJitMode)`
+/// so production builds can drop it. That is safe for ngtsc only because it
+/// lists every component's dependencies statically. Oxc compiles one file at
+/// a time and resolves dependencies at runtime with `ɵɵgetComponentDepsFactory`,
+/// which reads the scope this call puts on ɵmod (and only this call registers
+/// the module with the deps tracker). The Vite plugin defines `ngJitMode` as
+/// `false` in production, so a guarded call would leave every component that
+/// is declared in, or imports, an Oxc-compiled NgModule without its directives
+/// and pipes. The call is therefore always made.
 fn create_set_scope_side_effect<'a>(
     allocator: &'a Allocator,
     core_namespace: &'a str,
@@ -307,14 +315,12 @@ fn create_set_scope_side_effect<'a>(
         &allocator,
     ));
 
-    // Create: (typeof ngJitMode === "undefined" || ngJitMode) && setNgModuleScope(...)
-    let guarded_call = jit_only_guarded_expression(allocator, set_scope_call);
-
-    // Wrap in IIFE: (function() { ... })()
+    // Wrap in IIFE: (function() { setNgModuleScope(...); })()
+    // No ngJitMode guard; see the doc comment above.
     let params = Vec::new_in(&allocator);
     let mut body = Vec::new_in(&allocator);
     body.push(OutputStatement::Expression(Box::new_in(
-        crate::output::ast::ExpressionStatement { expr: guarded_call, source_span: None },
+        crate::output::ast::ExpressionStatement { expr: set_scope_call, source_span: None },
         &allocator,
     )));
 
diff --git a/crates/oxc_angular_compiler/src/ng_module/definition.rs b/crates/oxc_angular_compiler/src/ng_module/definition.rs
index aa9f05a3a..2887165ad 100644
--- a/crates/oxc_angular_compiler/src/ng_module/definition.rs
+++ b/crates/oxc_angular_compiler/src/ng_module/definition.rs
@@ -10,18 +10,17 @@
 //! ## Generated Output
 //!
 //! ```javascript
-//! // Module definition (the scope is patched on below, JIT only):
+//! // Module definition (the scope is patched on below):
 //! AppModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({
 //!   type: AppModule,
 //!   bootstrap: [AppComponent]
 //! });
 //! (function() {
-//!   (typeof ngJitMode === "undefined" || ngJitMode) &&
-//!     i0.ɵɵsetNgModuleScope(AppModule, {
-//!       declarations: [MyComponent],
-//!       imports: [CommonModule],
-//!       exports: [MyComponent]
-//!     });
+//!   i0.ɵɵsetNgModuleScope(AppModule, {
+//!     declarations: [MyComponent],
+//!     imports: [CommonModule],
+//!     exports: [MyComponent]
+//!   });
 //! })();
 //!
 //! // Factory function:
@@ -106,11 +105,10 @@ pub struct FullNgModuleDefinition<'a> {
 ///   exports: [MyComponent]
 /// });
 ///
-/// // Module with side-effect scope (for tree-shaking):
+/// // Module with side-effect scope (not ngJitMode-guarded, see compiler.rs):
 /// AppModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: AppModule });
 /// (function() {
-///   (typeof ngJitMode === "undefined" || ngJitMode) &&
-///     i0.ɵɵsetNgModuleScope(AppModule, { declarations: [...], imports: [...] });
+///   i0.ɵɵsetNgModuleScope(AppModule, { declarations: [...], imports: [...] });
 /// })();
 /// ```
 pub fn generate_ng_module_definition<'a>(
@@ -788,11 +786,13 @@ mod tests {
     }
 
     #[test]
-    fn test_ng_module_scope_is_a_jit_only_side_effect() {
+    fn test_ng_module_scope_is_a_side_effect() {
         // Like ngtsc in full compilation: ɵmod keeps only `type` and
-        // `bootstrap`, the scope goes to a `ngJitMode`-guarded
-        // ɵɵsetNgModuleScope call, and a class without a constructor or a
-        // superclass gets a plain factory.
+        // `bootstrap`, the scope goes to a ɵɵsetNgModuleScope call, and a
+        // class without a constructor or a superclass gets a plain factory.
+        // Unlike ngtsc the call has no `ngJitMode` guard: Oxc resolves
+        // component dependencies at runtime from this scope, so it must run
+        // in production builds too.
         let js = full_module_js(
             r"
             @NgModule({
@@ -809,8 +809,8 @@ mod tests {
             "M.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({type:M,bootstrap:[A]});\n\
              M.ɵfac = function M_Factory(__ngFactoryType__) {\n  return new (__ngFactoryType__ || M)();\n};\n\
              M.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({imports:[CommonModule]});\n\
-             (function() {\n  (((typeof ngJitMode === \"undefined\") || ngJitMode) && \
-             i0.ɵɵsetNgModuleScope(M,{declarations:[A],\n      imports:[CommonModule],exports:[A]}));\n})();"
+             (function() {\n  \
+             i0.ɵɵsetNgModuleScope(M,{declarations:[A],imports:[CommonModule],exports:[A]});\n})();"
         );
     }
 
@@ -840,9 +840,8 @@ mod tests {
             (
                 "M.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({type:M});",
                 Some(
-                    "(function() {\n  (((typeof ngJitMode === \"undefined\") || ngJitMode) && \
-                     i0.ɵɵsetNgModuleScope(M,{declarations:[...DECLS,\n      P],\
-                     imports:[SHARED,RouterModule.forChild([])],exports:DECLS}));\n})();"
+                    "(function() {\n  i0.ɵɵsetNgModuleScope(M,{declarations:[...DECLS,P],\
+                     imports:[SHARED,RouterModule.forChild([])],\n      exports:DECLS});\n})();"
                 )
             )
         );
@@ -860,10 +859,7 @@ mod tests {
         );
         assert_eq!(
             mod_and_scope(&js).1,
-            Some(
-                "(function() {\n  (((typeof ngJitMode === \"undefined\") || ngJitMode) && \
-                 i0.ɵɵsetNgModuleScope(M,{imports:[CommonModule]}));\n})();"
-            )
+            Some("(function() {\n  i0.ɵɵsetNgModuleScope(M,{imports:[CommonModule]});\n})();")
         );
 
         let js = full_module_js(
@@ -889,10 +885,7 @@ mod tests {
         );
         assert_eq!(
             mod_and_scope(&js).1,
-            Some(
-                "(function() {\n  (((typeof ngJitMode === \"undefined\") || ngJitMode) && \
-                 i0.ɵɵsetNgModuleScope(M,{declarations:() =>[Late]}));\n})();"
-            )
+            Some("(function() {\n  i0.ɵɵsetNgModuleScope(M,{declarations:() =>[Late]});\n})();")
         );
     }
 
diff --git a/crates/oxc_angular_compiler/src/ng_module/metadata.rs b/crates/oxc_angular_compiler/src/ng_module/metadata.rs
index 174d7a704..f64256745 100644
--- a/crates/oxc_angular_compiler/src/ng_module/metadata.rs
+++ b/crates/oxc_angular_compiler/src/ng_module/metadata.rs
@@ -38,7 +38,8 @@ pub enum R3SelectorScopeMode {
     Inline,
 
     /// Scope is patched via ɵɵsetNgModuleScope in a side effect call.
-    /// Supports tree-shaking via ngJitMode guard.
+    /// Unlike ngtsc, Oxc does not guard the call with ngJitMode, because
+    /// component dependencies are resolved at runtime from this scope.
     SideEffect,
 
     /// No scope information is generated.
diff --git a/crates/oxc_angular_compiler/tests/integration_test.rs b/crates/oxc_angular_compiler/tests/integration_test.rs
index 7f75137e8..6c8f9bc3a 100644
--- a/crates/oxc_angular_compiler/tests/integration_test.rs
+++ b/crates/oxc_angular_compiler/tests/integration_test.rs
@@ -16184,9 +16184,11 @@ export class D {}
 }
 
 #[test]
-fn test_ng_module_scope_is_set_by_a_jit_only_side_effect() {
+fn test_ng_module_scope_is_set_by_a_side_effect() {
     // Like ngtsc in full compilation: the class keeps ɵmod with only the
-    // type, and a ngJitMode-guarded IIFE after it patches the scope on.
+    // type, and an IIFE after it patches the scope on. Unlike ngtsc the call
+    // is not ngJitMode-guarded, since ɵɵgetComponentDepsFactory reads this
+    // scope at runtime, also in production builds.
     let allocator = Allocator::default();
     let source = r"
 import { NgModule } from '@angular/core';
@@ -16207,10 +16209,9 @@ export class M {}
     );
     assert!(
         result.code.contains(
-            "(function() {\n  (((typeof ngJitMode === \"undefined\") || ngJitMode) && \
-             i0.ɵɵsetNgModuleScope(M,{imports:[SHARED,\n      FormsModule]}));\n})();"
+            "(function() {\n  i0.ɵɵsetNgModuleScope(M,{imports:[SHARED,FormsModule]});\n})();"
         ),
-        "Should patch the scope on in a ngJitMode-guarded IIFE. Got:\n{}",
+        "Should patch the scope on in an unguarded IIFE. Got:\n{}",
         result.code
     );
 
diff --git a/napi/angular-compiler/test/ng-module-scope-runtime.test.ts b/napi/angular-compiler/test/ng-module-scope-runtime.test.ts
new file mode 100644
index 000000000..bf83194b3
--- /dev/null
+++ b/napi/angular-compiler/test/ng-module-scope-runtime.test.ts
@@ -0,0 +1,84 @@
+/**
+ * NgModule scopes in a production build, with the real `@angular/core`.
+ *
+ * Oxc compiles one file at a time, so a component's directives and pipes are
+ * found at runtime by `ɵɵgetComponentDepsFactory`, which reads the scope that
+ * `ɵɵsetNgModuleScope` puts on the NgModule. ngtsc guards that call with
+ * `ngJitMode` so production builds drop it, and the Vite plugin defines
+ * `ngJitMode` as `false` there. If Oxc kept the guard, every component
+ * declared in, or importing, an Oxc-compiled NgModule would lose its
+ * dependencies in production. These tests run with `ngJitMode = false`.
+ */
+import { mkdirSync, rmSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
+
+import { transformAngularFileSync } from '../index.js'
+
+const TMP = join(fileURLToPath(new URL('.', import.meta.url)), '.ng-module-scope-runtime-tmp')
+let nextFile = 0
+let previousJitMode: unknown
+
+beforeAll(() => {
+  mkdirSync(TMP, { recursive: true })
+  previousJitMode = (globalThis as any).ngJitMode
+  ;(globalThis as any).ngJitMode = false
+})
+
+afterAll(() => {
+  ;(globalThis as any).ngJitMode = previousJitMode
+  rmSync(TMP, { recursive: true, force: true })
+})
+
+/** Compiles `source` and loads it as a module. */
+async function load(source: string): Promise<Record<string, any>> {
+  const result = transformAngularFileSync(source, '/x/a.ts', {})
+  expect(result.errors).toEqual([])
+  expect(result.code).not.toContain('ngJitMode')
+  const file = join(TMP, `module-${nextFile++}.mjs`)
+  writeFileSync(file, result.code)
+  return import(/* @vite-ignore */ pathToFileURL(file).href)
+}
+
+/** The class names of the directives `cmp`'s template can use. */
+function directiveNames(cmp: any): string[] {
+  const defs = cmp.ɵcmp.directiveDefs
+  return (typeof defs === 'function' ? defs() : (defs ?? [])).map((def: any) => def.type.name)
+}
+
+describe('NgModule scope with ngJitMode = false', () => {
+  it('gives a declared component the directives of its NgModule', async () => {
+    const m = await load(`
+      import { Component, Directive, NgModule } from '@angular/core';
+      @Directive({ selector: '[d]', standalone: false }) export class D {}
+      @Component({ selector: 'c', template: '<i d></i>', standalone: false }) export class C {}
+      @NgModule({ declarations: [C, D] }) export class M {}
+    `)
+    expect(directiveNames(m.C)).toEqual(['C', 'D'])
+  })
+
+  it('gives a standalone component the exports of an imported NgModule', async () => {
+    const m = await load(`
+      import { Component, Directive, NgModule } from '@angular/core';
+      @Directive({ selector: '[d]', standalone: false }) export class D {}
+      @NgModule({ declarations: [D], exports: [D] }) export class M {}
+      @Component({ selector: 's', template: '<i d></i>', imports: [M] }) export class S {}
+    `)
+    expect(directiveNames(m.S)).toEqual(['S', 'D'])
+  })
+
+  it('resolves declarations given as a const array and a spread', async () => {
+    const m = await load(`
+      import { Component, Directive, NgModule } from '@angular/core';
+      @Directive({ selector: '[d]', standalone: false }) export class D {}
+      @Component({ selector: 'c', template: '<i d></i>', standalone: false }) export class C {}
+      const DIRECTIVES = [D];
+      @NgModule({ declarations: [C, ...DIRECTIVES], exports: DIRECTIVES }) export class M {}
+      @Component({ selector: 's', template: '<i d></i>', imports: [M] }) export class S {}
+    `)
+    expect(directiveNames(m.C)).toEqual(['C', 'D'])
+    expect(directiveNames(m.S)).toEqual(['S', 'D'])
+  })
+})

From b47c1e3bd2a3a88bd4cfb03bb243f313a8981bce Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:48:21 +0800
Subject: [PATCH 29/54] fix(styles): do not start an at-rule on an @ inside a
 value or header

An unquoted `@` in the last declaration of a rule (`url(a@2x.png)`,
`url(#m@x)`, `image-set(...)`), common in minified CSS, opened an
at-rule header in scope_selectors. The header swallowed the rule's
closing `}` and ran up to the next `{`; since it was not a scoped
at-rule, the unscoped-body path consumed the `}` and never cleared
in_declaration, so every later rule was copied unscoped and leaked
out of the component. An `@` inside an at-rule header
(`@supports (background: url(a@2x.png))`) also restarted the header,
so the @supports body was left unscoped.

Only start an at-rule when neither a declaration block nor an at-rule
header is open. Nested at-rules inside a rule body are copied
unchanged, as before and as in Angular. Verified against
@angular/compiler 22.2.2 encapsulateStyle.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/styles/encapsulation.rs               |  6 ++-
 .../tests/shadow_css_test.rs                  | 37 +++++++++++++++++++
 .../fixtures/styles/shadow-css.fixture.ts     | 21 +++++++++++
 3 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/styles/encapsulation.rs b/crates/oxc_angular_compiler/src/styles/encapsulation.rs
index b4ba0e772..997697166 100644
--- a/crates/oxc_angular_compiler/src/styles/encapsulation.rs
+++ b/crates/oxc_angular_compiler/src/styles/encapsulation.rs
@@ -1727,8 +1727,10 @@ fn scope_selectors(css: &str, content_attr: &str, host_attr: &str) -> String {
             continue;
         }
 
-        // Handle @ rules (media queries, keyframes, etc.)
-        if c == '@' {
+        // Handle @ rules (media queries, keyframes, etc.). An `@` inside a
+        // declaration block or an at-rule header (`url(a@2x.png)`) does not
+        // start an at-rule; it is copied by the branches below.
+        if c == '@' && !in_declaration && !in_at_rule_header {
             // Flush any pending selector
             if !current_selector.is_empty() {
                 result.push_str(&current_selector);
diff --git a/crates/oxc_angular_compiler/tests/shadow_css_test.rs b/crates/oxc_angular_compiler/tests/shadow_css_test.rs
index 4451e218c..cdaa6c6bd 100644
--- a/crates/oxc_angular_compiler/tests/shadow_css_test.rs
+++ b/crates/oxc_angular_compiler/tests/shadow_css_test.rs
@@ -1499,6 +1499,43 @@ fn test_unscoped_at_rule_bodies_are_copied_unchanged() {
     }
 }
 
+#[test]
+fn test_at_sign_in_values_does_not_start_an_at_rule() {
+    // An unquoted `@` in the last declaration of a rule (`url(a@2x.png)`,
+    // common in minified CSS) opened an at-rule header that swallowed the
+    // rule's `}` and left every later rule unscoped.
+    for (css, expected) in [
+        (
+            ".a{background:url(a@2x.png)}.b{color:red}.c{color:blue}.d{x:y}",
+            ".a[_ngcontent-%COMP%]{background:url(a@2x.png)}.b[_ngcontent-%COMP%]{color:red}.c[_ngcontent-%COMP%]{color:blue}.d[_ngcontent-%COMP%]{x:y}",
+        ),
+        (
+            ".a{background:url(#m@x)}.b{}.c{}",
+            ".a[_ngcontent-%COMP%]{background:url(#m@x)}.b[_ngcontent-%COMP%]{}.c[_ngcontent-%COMP%]{}",
+        ),
+        (
+            ".a{b:image-set(url(a@1x.png) 1x, url(a@2x.png) 2x)}.b{c:d}",
+            ".a[_ngcontent-%COMP%]{b:image-set(url(a@1x.png) 1x, url(a@2x.png) 2x)}.b[_ngcontent-%COMP%]{c:d}",
+        ),
+        (
+            "@media (min-width: 1px) { .a{background:url(a@2x.png)} .b{c:d} } .c{e:f}",
+            "@media (min-width: 1px) { .a[_ngcontent-%COMP%]{background:url(a@2x.png)} .b[_ngcontent-%COMP%]{c:d} } .c[_ngcontent-%COMP%]{e:f}",
+        ),
+        // An `@` in an at-rule header does not restart the header.
+        (
+            "@supports (background: url(a@2x.png)) { .a{c:d} } .b{c:d}",
+            "@supports (background: url(a@2x.png)) { .a[_ngcontent-%COMP%]{c:d} } .b[_ngcontent-%COMP%]{c:d}",
+        ),
+        // Nested at-rules inside a rule body are copied unchanged.
+        (
+            ".a{@media x{color:red}} .b{c:d}",
+            ".a[_ngcontent-%COMP%]{@media x{color:red}} .b[_ngcontent-%COMP%]{c:d}",
+        ),
+    ] {
+        assert_eq!(ng_shim(css), expected);
+    }
+}
+
 #[test]
 fn test_legacy_polyfills_follow_angular_version() {
     // Angular v22.0.0-rc.0 removed the polyfill passes.
diff --git a/napi/angular-compiler/e2e/compare/fixtures/styles/shadow-css.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/styles/shadow-css.fixture.ts
index c7493090f..77f0329a7 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/styles/shadow-css.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/styles/shadow-css.fixture.ts
@@ -1809,4 +1809,25 @@ export class DeclarationAtRulesComponent {}
     `.trim(),
     expectedFeatures: ['styles:'],
   },
+
+  {
+    name: 'shadow-css-at-sign-in-values',
+    category: 'styles',
+    description: 'An unquoted @ in a declaration value or at-rule header does not start an at-rule',
+    className: 'AtSignInValuesComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-shadow-css-at-sign-in-values',
+  standalone: true,
+  template: \`<div class="a b c">Content</div>\`,
+  styles: [\`.a{background:url(a@2x.png)}.b{color:red}.c{color:blue}@supports (background: url(a@2x.png)) { .d{color:green} } .e{color:pink}\`],
+  encapsulation: ViewEncapsulation.Emulated,
+})
+export class AtSignInValuesComponent {}
+    `.trim(),
+    expectedFeatures: ['styles:'],
+  },
 ]

From 3a78e36214c4f7ec04f1d054f55b46ed04b836be Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:48:59 +0800
Subject: [PATCH 30/54] fix(compare): compare top-level statements, export
 targets and BigInt classes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review follow-up for the honest ngtsc compare:

- Top-level statements that no other part compared (setClassDebugInfo,
  setNgModuleScope, export default expressions, ...) were never looked
  at, so fixtures listed only for their ɵfac/ɵmod hid a missing
  ɵɵsetNgModuleScope call. They are now extracted in order, labelled
  `callee(firstArg)` and compared on the AST as a new statement diff
  kind that KnownDifference can list (`statements`). Their order,
  including the setClassMetadata calls, is compared too: a statement
  Oxc emits ahead of one Angular emits first is reported as
  `order <label>`. A setClassDebugInfo call that differs only in
  filePath is reported as `<label> filePath`.
- ngtsc now compiles component and full-transform fixtures under the
  project root. The `/fixtures/...` path lay outside it, so Angular
  left filePath and lineNumber out of setClassDebugInfo.
- compareExports reported an export pointing at another local binding
  or module as a match; it is now a `different` export diff.
- normalizeAst threw on BigInt literals, turning any class or constant
  with `10n` into an undocumentable parse error.

The setClassDebugInfo filePath (Oxc emits the path it is given, Angular
the project-relative path) and order (before setClassMetadata, Angular
emits it after) differ in 1034 fixtures. They are listed once in
GLOBAL_KNOWN_DIFFERENCES (DEBUG_INFO_PATH, DEBUG_INFO_ORDER); a fixture
with only these differences is reported as a known difference, not a
match. Newly listed per fixture: NG_MODULE_SCOPE on 3 NgModule
fixtures, DEBUG_INFO_LINE on edge-cases/unicode-special-escapes
(lineNumber ignores \r, U+2028 and U+2029 line breaks).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 napi/angular-compiler/e2e/compare/README.md   |  13 +-
 .../e2e/compare/fixtures/known-differences.ts |  47 ++-
 .../e2e/compare/fixtures/runner.ts            |  65 ++--
 .../e2e/compare/fixtures/types.ts             |  11 +-
 .../e2e/compare/src/compare.test.ts           |  71 ++++
 .../e2e/compare/src/compare.ts                | 323 +++++++++++++++++-
 .../e2e/compare/src/runner.ts                 |   4 +
 .../angular-compiler/e2e/compare/src/types.ts |   7 +
 8 files changed, 495 insertions(+), 46 deletions(-)

diff --git a/napi/angular-compiler/e2e/compare/README.md b/napi/angular-compiler/e2e/compare/README.md
index 3e3ffe0ce..ba022f00d 100644
--- a/napi/angular-compiler/e2e/compare/README.md
+++ b/napi/angular-compiler/e2e/compare/README.md
@@ -116,7 +116,8 @@ e2e/compare/
 3. Compile with Angular (NgtscProgram or template compiler)
 4. Parse both outputs and rename Oxc's const pool (_c0, _c1, etc.) to Angular's names by value
 5. Compare the ASTs: imports, exports, classes, static fields, setClassMetadata calls,
-   top-level functions and constants
+   top-level functions and constants, and every other top-level statement (setClassDebugInfo,
+   setNgModuleScope, ...) and its order
 6. For mismatches: Extract function-level diffs
 ```
 
@@ -141,6 +142,9 @@ The reference is compiled in `experimental-local` mode by default, which compile
 its own like Oxc does. Where that differs from a real build (for example `changeDetection`, or a
 class that also has a non-Angular decorator), a fixture sets `ngtscMode: 'full'`.
 
+ngtsc compiles each fixture under the project root (the compare directory), as a real build
+does, so that its `ɵsetClassDebugInfo` calls carry `filePath` and `lineNumber`.
+
 ### Known Differences (Not Bugs)
 
 | Difference                   | Description                                                   |
@@ -183,11 +187,16 @@ pnpm compare --fixtures --category control-flow --category animations
 
 `fixtures/known-differences.ts` lists fixtures whose output differs from Angular's in
 documented ways, with every difference (static fields, classes, top-level functions and
-constants, exports, imports, setClassMetadata calls) and the reasons. They are reported as known
+constants, exports, imports, setClassMetadata calls, other top-level statements) and the
+reasons. They are reported as known
 differences instead of failures, but only while the fixture differs in exactly what is listed:
 a difference anywhere else in the same fixture is still a failure, and so is a listed difference
 that no longer occurs, so remove an entry once the difference is fixed.
 
+`GLOBAL_KNOWN_DIFFERENCES` in the same file lists differences that nearly every fixture has
+(the `ɵsetClassDebugInfo` file path and order). A fixture whose only differences are these is
+reported as a known difference too, not as a match.
+
 Factory fixtures have no ngtsc baseline; they only check that Oxc compiles them and are
 reported as skipped.
 
diff --git a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
index 4d6abb19a..c67cd837c 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
@@ -3,9 +3,10 @@
  * `category/name`. Each entry lists every difference and why it exists.
  *
  * A listed fixture is reported as a known difference only while it differs in exactly what the
- * entry lists: a difference anywhere else (another static field, class, top-level function or
- * constant, export, import or metadata call) still fails, and so does a listed difference that
- * no longer occurs, so fixed entries get removed.
+ * entry (and `GLOBAL_KNOWN_DIFFERENCES`) lists: a difference anywhere else (another static field,
+ * class, top-level function or constant, export, import, metadata call or top-level statement)
+ * still fails, and so does a listed difference that no longer occurs, so fixed entries get
+ * removed.
  */
 import type { ImportDiff } from '../src/compare.js'
 
@@ -16,12 +17,17 @@ export interface KnownDifference {
   classes?: string[]
   /** Every top-level function or constant that differs, is missing or is extra. */
   functions?: string[]
-  /** Every export that is missing or extra. */
+  /** Every export that is missing, extra or points at another binding. */
   exports?: string[]
   /** Every import difference, exactly as `compareImports` reports it. */
   importDiffs?: ImportDiff[]
   /** Every setClassMetadata difference, as `Class.field`, e.g. `MyComponent.setClassMetadata`. */
   metadataDiffs?: string[]
+  /**
+   * Every other top-level statement that differs, by `StatementDiff.label`, e.g.
+   * `ɵɵsetNgModuleScope(AppModule)`.
+   */
+  statements?: string[]
   /** Why each difference exists. */
   reasons: string[]
 }
@@ -44,6 +50,25 @@ const SET_CLASS_METADATA_IMPORT =
 const ALIASED_INJECTABLE =
   'an aliased @Injectable compiles to a broken ɵprov under ngtsc — its needsFactory check compares the written decorator name, so the factory (and setClassMetadata) are never emitted; Oxc emits a working ɵfac (issue #507, kept deliberately)'
 
+const NG_MODULE_SCOPE =
+  'the ngJitMode-guarded ɵɵsetNgModuleScope call Angular emits after an NgModule is missing'
+const DEBUG_INFO_PATH =
+  'ɵsetClassDebugInfo filePath is the path Oxc was given (absolute here and in the Vite plugin) where Angular emits it relative to the project root'
+const DEBUG_INFO_LINE =
+  'ɵsetClassDebugInfo lineNumber counts only \\n line breaks where TypeScript also counts \\r, U+2028 and U+2029'
+const DEBUG_INFO_ORDER =
+  'ɵsetClassDebugInfo is emitted before ɵsetClassMetadata where Angular emits it after'
+
+/**
+ * Differences every fixture may have, matched against the labels `KnownDifference` uses. A
+ * fixture whose differences are all documented here or in its own entry is reported as a known
+ * difference with these reasons. They never go stale.
+ */
+export const GLOBAL_KNOWN_DIFFERENCES: Array<{ label: RegExp; reason: string }> = [
+  { label: /^statement ɵsetClassDebugInfo\([^()]+\)(#\d+)? filePath$/, reason: DEBUG_INFO_PATH },
+  { label: /^statement order ɵsetClassDebugInfo\([^()]+\)(#\d+)?$/, reason: DEBUG_INFO_ORDER },
+]
+
 export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
   'animations/animation-metadata-with-change-detection': {
     fields: ['AnimationsWithOnPushComponent.ɵcmp'],
@@ -51,7 +76,8 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
   },
   'class-metadata/class-metadata-ngmodule': {
     fields: ['TestableModule.ɵfac', 'TestableModule.ɵmod'],
-    reasons: [FACTORY, NG_MODULE_IMPORTS],
+    statements: ['ɵɵsetNgModuleScope(TestableModule)'],
+    reasons: [FACTORY, NG_MODULE_IMPORTS, NG_MODULE_SCOPE],
   },
   'class-metadata/class-metadata-pipe': {
     fields: ['TestablePipe.ɵfac'],
@@ -106,6 +132,11 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     metadataDiffs: ['AliasedService.setClassMetadata'],
     reasons: [ALIASED_INJECTABLE],
   },
+  'edge-cases/unicode-special-escapes': {
+    fields: [],
+    statements: ['ɵsetClassDebugInfo(UnicodeSpecialEscapesComponent)'],
+    reasons: [DEBUG_INFO_LINE, DEBUG_INFO_PATH],
+  },
   'edge-cases/multiple-custom-decorators': {
     fields: ['MultiDecoratorComponent.ɵcmp'],
     reasons: [DOM_ONLY],
@@ -214,11 +245,13 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
   },
   'injector/injector-with-both': {
     fields: ['FullModule.ɵfac', 'FullModule.ɵmod'],
-    reasons: [FACTORY, NG_MODULE_IMPORTS],
+    statements: ['ɵɵsetNgModuleScope(FullModule)'],
+    reasons: [FACTORY, NG_MODULE_IMPORTS, NG_MODULE_SCOPE],
   },
   'injector/injector-with-imports': {
     fields: ['FeatureModule.ɵfac', 'FeatureModule.ɵmod'],
-    reasons: [FACTORY, NG_MODULE_IMPORTS],
+    statements: ['ɵɵsetNgModuleScope(FeatureModule)'],
+    reasons: [FACTORY, NG_MODULE_IMPORTS, NG_MODULE_SCOPE],
   },
   'injector/injector-with-providers': {
     fields: ['ProvidersModule.ɵfac'],
diff --git a/napi/angular-compiler/e2e/compare/fixtures/runner.ts b/napi/angular-compiler/e2e/compare/fixtures/runner.ts
index 5221f274f..9c2133ac1 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/runner.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/runner.ts
@@ -22,7 +22,11 @@ import {
 } from '../src/compilers/angular-ngtsc.js'
 import { compileWithOxcFullFile } from '../src/compilers/oxc.js'
 import { discoverFixtures } from './index.js'
-import { KNOWN_DIFFERENCES, type KnownDifference } from './known-differences.js'
+import {
+  GLOBAL_KNOWN_DIFFERENCES,
+  KNOWN_DIFFERENCES,
+  type KnownDifference,
+} from './known-differences.js'
 
 /**
  * Path to the tsconfig.json used for fixture compilation.
@@ -33,6 +37,16 @@ import { KNOWN_DIFFERENCES, type KnownDifference } from './known-differences.js'
  * - The NgtscProgram for incremental compilation
  */
 const FIXTURE_TSCONFIG_PATH = join(dirname(fileURLToPath(import.meta.url)), '..', 'tsconfig.json')
+
+/**
+ * The path ngtsc compiles a fixture at. Fixture paths look like `/fixtures/...`, which lies
+ * outside the project root (the tsconfig directory), and ngtsc leaves `filePath` and
+ * `lineNumber` out of `ɵsetClassDebugInfo` for a file outside the project, which never happens in
+ * a real build. Placing the file under the project root makes ngtsc emit them.
+ */
+function ngtscFilePath(filePath: string): string {
+  return join(dirname(FIXTURE_TSCONFIG_PATH), filePath)
+}
 import type {
   Fixture,
   FixtureResult,
@@ -124,26 +138,29 @@ export async function runFixtures(options: FixtureRunnerOptions = {}): Promise<F
 }
 
 /**
- * Test a single fixture, applying its documented known differences: a listed fixture that
- * differs only in what the entry documents is reported as a known difference, one that
- * differs anywhere else (another static field, class, function, export, import or metadata
- * call, or a parse error) still fails, and one where a documented difference no longer occurs
- * fails so that the stale entry is removed.
+ * Test a single fixture, applying its documented known differences: a fixture that differs
+ * only in what its entry and `GLOBAL_KNOWN_DIFFERENCES` document is reported as a known
+ * difference, one that differs anywhere else (another static field, class, function, export,
+ * import, metadata call or top-level statement, or a parse error) still fails, and one where a
+ * difference its entry documents no longer occurs fails so that the stale entry is removed.
  */
 async function testFixture(fixture: Fixture, verbose?: boolean): Promise<FixtureResult> {
   const result = await compareFixture(fixture, verbose)
   const known = KNOWN_DIFFERENCES[`${fixture.category}/${fixture.name}`]
-  if (!known) {
-    return result
-  }
-  const knownDifferences = known.reasons
   if (result.status === 'mismatch') {
     const observed = observedDifferences(result)
-    const documented = documentedDifferences(known)
-    const undocumented = [...observed].filter((entry) => !documented.has(entry))
+    const documented = known ? documentedDifferences(known) : new Set<string>()
+    const globalReasons = new Set<string>()
+    const undocumented = [...observed].filter((entry) => {
+      if (documented.has(entry)) return false
+      const global = GLOBAL_KNOWN_DIFFERENCES.find(({ label }) => label.test(entry))
+      if (global) globalReasons.add(global.reason)
+      return !global
+    })
     if (undocumented.length > 0) {
-      return { ...result, knownDifferences, undocumentedFields: undocumented }
+      return { ...result, knownDifferences: known?.reasons, undocumentedFields: undocumented }
     }
+    const knownDifferences = [...(known?.reasons ?? []), ...globalReasons]
     // A documented difference that was not observed means the bug was fixed (or moved) —
     // surface it like a stale entry so the exemption cannot silently re-allow a regression.
     const unobserved = [...documented].filter((entry) => !observed.has(entry))
@@ -152,8 +169,13 @@ async function testFixture(fixture: Fixture, verbose?: boolean): Promise<Fixture
     }
     return { ...result, status: 'known-difference', knownDifferences }
   }
-  if (result.status === 'match') {
-    return { ...result, status: 'mismatch', knownDifferences, staleKnownDifference: true }
+  if (result.status === 'match' && known) {
+    return {
+      ...result,
+      status: 'mismatch',
+      knownDifferences: known.reasons,
+      staleKnownDifference: true,
+    }
   }
   return result
 }
@@ -167,8 +189,8 @@ function importDiffLabel(diff: ImportDiff): string {
 
 /**
  * Every difference a mismatching fixture reports, labelled the way `known-differences.ts`
- * names them: `Class.ɵfield`, `class Name`, `function name`, `export name`, an import label
- * and `Class.setClassMetadata...`. Parse errors can never be documented.
+ * names them: `Class.ɵfield`, `class Name`, `function name`, `export name`, an import label,
+ * `Class.setClassMetadata...` and `statement label`. Parse errors can never be documented.
  */
 function observedDifferences(result: FixtureResult): Set<string> {
   const fc = result.functionComparison
@@ -183,6 +205,7 @@ function observedDifferences(result: FixtureResult): Set<string> {
     ...(result.exportDiffs ?? []).map((diff) => `export ${diff.exportName}`),
     ...(result.importDiffs ?? []).map(importDiffLabel),
     ...(result.classMetadataDiffs ?? []).map((diff) => `${diff.className}.${diff.field}`),
+    ...(result.statementDiffs ?? []).map((diff) => `statement ${diff.label}`),
     ...(result.parseErrors ?? []).map((error) => `parse error: ${error}`),
   ])
 }
@@ -195,6 +218,7 @@ function documentedDifferences(known: KnownDifference): Set<string> {
     ...(known.exports ?? []).map((name) => `export ${name}`),
     ...(known.importDiffs ?? []).map(importDiffLabel),
     ...(known.metadataDiffs ?? []),
+    ...(known.statements ?? []).map((label) => `statement ${label}`),
   ])
 }
 
@@ -290,7 +314,7 @@ async function testComponentFixture(fixture: Fixture, verbose?: boolean): Promis
   let tsOutput: FixtureCompilerOutput
   const tsStart = performance.now()
   try {
-    const result = await compileWithNgtsc(source, filePath, {
+    const result = await compileWithNgtsc(source, ngtscFilePath(filePath), {
       tsconfigPath: FIXTURE_TSCONFIG_PATH,
       mode: fixture.ngtscMode,
     })
@@ -388,6 +412,7 @@ async function testComponentFixture(fixture: Fixture, verbose?: boolean): Promis
     classDiffs: comparison.classDiffs,
     staticFieldDiffs: comparison.staticFieldDiffs,
     classMetadataDiffs: comparison.classMetadataDiffs,
+    statementDiffs: comparison.statementDiffs,
     parseErrors: comparison.parseErrors,
     oxcFeatures,
     tsFeatures,
@@ -498,7 +523,7 @@ async function testFullTransformFixture(
 
   const tsStart = performance.now()
   try {
-    const result = await compileWithNgtsc(fixture.sourceCode, filePath, {
+    const result = await compileWithNgtsc(fixture.sourceCode, ngtscFilePath(filePath), {
       mode: fixture.ngtscMode,
       tsconfigPath: FIXTURE_TSCONFIG_PATH,
     })
@@ -584,6 +609,7 @@ async function testFullTransformFixture(
     classDiffs: comparison.classDiffs,
     staticFieldDiffs: comparison.staticFieldDiffs,
     classMetadataDiffs: comparison.classMetadataDiffs,
+    statementDiffs: comparison.statementDiffs,
     parseErrors: comparison.parseErrors,
   }
 }
@@ -742,6 +768,7 @@ async function testClassMetadataFixture(
     classDiffs: comparison.classDiffs,
     staticFieldDiffs: comparison.staticFieldDiffs,
     classMetadataDiffs: comparison.classMetadataDiffs,
+    statementDiffs: comparison.statementDiffs,
     parseErrors: comparison.parseErrors,
   }
 }
diff --git a/napi/angular-compiler/e2e/compare/fixtures/types.ts b/napi/angular-compiler/e2e/compare/fixtures/types.ts
index 736541361..3c97a7147 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/types.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/types.ts
@@ -7,7 +7,13 @@
 
 import type { TransformOptions } from '@oxc-angular/vite/api'
 
-import type { ImportDiff, ExportDiff, ClassDiff, StaticFieldDiff } from '../src/compare.js'
+import type {
+  ImportDiff,
+  ExportDiff,
+  ClassDiff,
+  StaticFieldDiff,
+  StatementDiff,
+} from '../src/compare.js'
 import type { NgtscMode } from '../src/compilers/angular-ngtsc.js'
 import type { FunctionLevelComparison, AstDiff, ClassMetadataDiff } from '../src/types.js'
 
@@ -327,6 +333,9 @@ export interface FixtureResult {
   /** Class metadata (setClassMetadata) differences (for full-file comparison) */
   classMetadataDiffs?: ClassMetadataDiff[]
 
+  /** Other top-level statement differences (for full-file comparison) */
+  statementDiffs?: StatementDiff[]
+
   /** Parse errors during comparison (for full-file comparison) */
   parseErrors?: string[]
 
diff --git a/napi/angular-compiler/e2e/compare/src/compare.test.ts b/napi/angular-compiler/e2e/compare/src/compare.test.ts
index 385b0504d..8861c5881 100644
--- a/napi/angular-compiler/e2e/compare/src/compare.test.ts
+++ b/napi/angular-compiler/e2e/compare/src/compare.test.ts
@@ -58,4 +58,75 @@ describe('compareFullFileSemantically', () => {
     const oxcCode = `const _c0 = ["b"];\nconst _c1 = ["a"];\nexport function f() { return [_c1, _c0]; }\n`
     expect((await compareFullFileSemantically(oxcCode, tsCode)).match).toBe(true)
   })
+
+  it('reports an export that points at another binding', async () => {
+    const result = await compareFullFileSemantically(
+      'class A {}\nclass B {}\nexport { A as X };\n',
+      'class A {}\nclass B {}\nexport { B as X };\n',
+    )
+    expect(result.match).toBe(false)
+    expect(result.exportDiffs).toEqual([
+      { type: 'different', exportName: 'X', expected: 'B', actual: 'A' },
+    ])
+  })
+
+  it('compares classes that contain BigInt literals', async () => {
+    const result = await compareFullFileSemantically(
+      'export class A { x = 10n; y = 1; }\n',
+      'export class A { x = 10n; y = 2; }\n',
+    )
+    expect(result.parseErrors).toBeUndefined()
+    expect(result.classDiffs?.map((d) => d.className)).toEqual(['A'])
+    expect(
+      (
+        await compareFullFileSemantically(
+          'export class A { x = 1n; }',
+          'export class A { x = 2n; }',
+        )
+      ).classDiffs,
+    ).toHaveLength(1)
+  })
+
+  describe('top-level statements', () => {
+    const metadata = (cls: string) =>
+      `(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(${cls}, [], null, null); })();`
+    const debugInfo = (cls: string, filePath: string, line = 3) =>
+      `(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(${cls}, { className: "${cls}", filePath: "${filePath}", lineNumber: ${line} }); })();`
+    const file = (...statements: string[]) =>
+      `import * as i0 from "@angular/core";\nexport class A {}\n${statements.join('\n')}\n`
+    const labels = async (oxc: string, ts: string) =>
+      (await compareFullFileSemantically(oxc, ts)).statementDiffs?.map(
+        (d) => `${d.type} ${d.label}`,
+      )
+
+    it('reports a missing setNgModuleScope call', async () => {
+      const scope =
+        '(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(A, { imports: [] }); })();'
+      expect(await labels(file(metadata('A')), file(metadata('A'), scope))).toEqual([
+        'missing ɵɵsetNgModuleScope(A)',
+      ])
+    })
+
+    it('tells a debug info file path difference apart from other differences', async () => {
+      const ts = file(metadata('A'), debugInfo('A', 'a.ts'))
+      expect(await labels(file(metadata('A'), debugInfo('A', '/x/a.ts')), ts)).toEqual([
+        'different ɵsetClassDebugInfo(A) filePath',
+      ])
+      expect(await labels(file(metadata('A'), debugInfo('A', '/x/a.ts', 4)), ts)).toEqual([
+        'different ɵsetClassDebugInfo(A)',
+      ])
+      expect((await compareFullFileSemantically(ts, ts.replace('"a.ts"', "'a.ts'"))).match).toBe(
+        true,
+      )
+    })
+
+    it('reports a statement emitted ahead of one Angular emits first', async () => {
+      expect(
+        await labels(
+          file(debugInfo('A', 'a.ts'), metadata('A')),
+          file(metadata('A'), debugInfo('A', 'a.ts')),
+        ),
+      ).toEqual(['order order ɵsetClassDebugInfo(A)'])
+    })
+  })
 })
diff --git a/napi/angular-compiler/e2e/compare/src/compare.ts b/napi/angular-compiler/e2e/compare/src/compare.ts
index 7cf1594d7..26e0a1bdc 100644
--- a/napi/angular-compiler/e2e/compare/src/compare.ts
+++ b/napi/angular-compiler/e2e/compare/src/compare.ts
@@ -20,6 +20,8 @@ export interface FullFileCompareResult {
   staticFieldDiffs?: StaticFieldDiff[]
   /** Class metadata (setClassMetadata) differences */
   classMetadataDiffs?: ClassMetadataDiff[]
+  /** Other top-level statement differences (setClassDebugInfo, setNgModuleScope, ...) */
+  statementDiffs?: StatementDiff[]
   /** Function-level comparison details (for template functions, etc.) */
   functionComparison?: FunctionLevelComparison
   /** Parse errors if any */
@@ -82,6 +84,27 @@ export interface StaticFieldDiff {
   actual?: string
 }
 
+/**
+ * Difference in a top-level statement that no other part of the comparison covers, such as the
+ * `ɵsetClassDebugInfo` and `ɵɵsetNgModuleScope` calls.
+ */
+export interface StatementDiff {
+  /**
+   * The statement's label: `callee(firstArg)` of its first `ɵ` call (e.g.
+   * `ɵsetClassDebugInfo(MyComponent)`), else `#N` for the N-th unlabelled statement. A
+   * `ɵsetClassDebugInfo` call that differs only in its `filePath` is labelled
+   * `ɵsetClassDebugInfo(MyComponent) filePath`, and a statement Oxc emits before one that Angular
+   * emits ahead of it is labelled `order ɵsetClassDebugInfo(MyComponent)`.
+   */
+  label: string
+  /** Type of difference */
+  type: 'missing' | 'extra' | 'different' | 'order'
+  /** Expected statement (from TS) */
+  expected?: string
+  /** Actual statement (from Oxc) */
+  actual?: string
+}
+
 /**
  * Properties to ignore when normalizing AST nodes for comparison.
  * These properties contain cosmetic/location information that doesn't affect semantics.
@@ -157,6 +180,10 @@ function normalizeAst(node: unknown): string {
     if (IGNORED_PROPERTIES.has(key)) {
       return undefined
     }
+    // A BigInt literal's `value` is a bigint, which JSON.stringify cannot serialize.
+    if (typeof value === 'bigint') {
+      return `${value}n`
+    }
     return value
   })
 }
@@ -843,14 +870,28 @@ function compareExports(
     }
   }
 
-  // Find missing exports (in TS but not in Oxc)
+  // Describe what an export points at: its local binding, or the module it re-exports from.
+  const target = (exp: NormalizedExport) =>
+    exp.moduleSource === undefined
+      ? exp.localName || exp.exportName
+      : `${exp.localName || exp.exportName} from "${exp.moduleSource}"`
+
+  // Find missing exports (in TS but not in Oxc), and exports that point at something else
   for (const [name, tsExp] of tsByName) {
-    if (!oxcByName.has(name)) {
+    const oxcExp = oxcByName.get(name)
+    if (!oxcExp) {
       diffs.push({
         type: 'missing',
         exportName: name,
         expected: tsExp.localName || name,
       })
+    } else if (target(oxcExp) !== target(tsExp)) {
+      diffs.push({
+        type: 'different',
+        exportName: name,
+        expected: target(tsExp),
+        actual: target(oxcExp),
+      })
     }
   }
 
@@ -880,6 +921,33 @@ function isAngularStaticField(member: NormAstNode): boolean {
   )
 }
 
+/** The `ClassName.ɵxxx = value` assignment an expression statement makes, if it is one. */
+function staticFieldAssignment(
+  statement: NormAstNode,
+): { className: string; fieldName: string; value: NormAstNode } | null {
+  const assignment = statement.expression as NormAstNode
+  const target = assignment.left as NormAstNode | undefined
+  const object = target?.object as NormAstNode | undefined
+  const property = target?.property as NormAstNode | undefined
+  if (
+    assignment.type === 'AssignmentExpression' &&
+    assignment.operator === '=' &&
+    target?.type === 'MemberExpression' &&
+    target.computed !== true &&
+    object?.type === 'Identifier' &&
+    typeof object.name === 'string' &&
+    typeof property?.name === 'string' &&
+    property.name.startsWith('ɵ')
+  ) {
+    return {
+      className: object.name,
+      fieldName: property.name,
+      value: assignment.right as NormAstNode,
+    }
+  }
+  return null
+}
+
 /**
  * Extract Angular static fields, both the `static ɵxxx = ...` class fields current Angular and
  * Oxc emit (e.g. `static ɵcmp = i0.ɵɵdefineComponent(...)`) and top-level
@@ -894,21 +962,9 @@ function extractClassStaticFields(program: Program, sourceCode: string): StaticF
   }
   for (const statement of program.body as unknown as NormAstNode[]) {
     if (statement.type === 'ExpressionStatement') {
-      const assignment = statement.expression as NormAstNode
-      const target = assignment.left as NormAstNode | undefined
-      const object = target?.object as NormAstNode | undefined
-      const property = target?.property as NormAstNode | undefined
-      if (
-        assignment.type === 'AssignmentExpression' &&
-        assignment.operator === '=' &&
-        target?.type === 'MemberExpression' &&
-        target.computed !== true &&
-        object?.type === 'Identifier' &&
-        typeof object.name === 'string' &&
-        typeof property?.name === 'string' &&
-        property.name.startsWith('ɵ')
-      ) {
-        push(object.name, property.name, assignment.right as NormAstNode)
+      const assignment = staticFieldAssignment(statement)
+      if (assignment) {
+        push(assignment.className, assignment.fieldName, assignment.value)
       }
       continue
     }
@@ -1814,6 +1870,205 @@ function compareClasses(
   return diffs
 }
 
+/**
+ * A top-level statement that no other part of the comparison covers.
+ */
+interface TopLevelStatement {
+  /** See `StatementDiff.label`. */
+  label: string
+  /** The first `ɵ` call in the statement, which gives the label. */
+  call?: NormAstNode
+  /** Whether it is a `ɵsetClassMetadata(Async)` call, whose content `compareClassMetadata` covers. */
+  isMetadata: boolean
+  node: NormAstNode
+  normalized: string
+  code: string
+}
+
+/** The first (pre-order) call in `node` whose callee is `ɵxxx` or `ns.ɵxxx`, with that name. */
+function firstAngularCall(node: unknown): { call: NormAstNode; name: string } | undefined {
+  let found: { call: NormAstNode; name: string } | undefined
+  const visit = (value: unknown): void => {
+    if (found || value === null || typeof value !== 'object') return
+    if (Array.isArray(value)) {
+      for (const item of value) visit(item)
+      return
+    }
+    const obj = value as NormAstNode
+    if (obj.type === 'CallExpression') {
+      const callee = obj.callee as NormAstNode
+      const name =
+        callee.type === 'MemberExpression' && callee.computed !== true
+          ? (callee.property as NormAstNode).name
+          : callee.name
+      if (typeof name === 'string' && name.startsWith('ɵ')) {
+        found = { call: obj, name }
+        return
+      }
+    }
+    for (const child of Object.values(obj)) visit(child)
+  }
+  visit(node)
+  return found
+}
+
+/**
+ * Extract, in order, every top-level statement that the other extractors do not compare: anything
+ * but imports, `export { ... }` lists, named class/function declarations, variable declarations
+ * with plain identifiers and `ClassName.ɵxxx = ...` assignments. In practice these are the
+ * `ɵsetClassMetadata`, `ɵsetClassDebugInfo` and `ɵɵsetNgModuleScope` calls. The
+ * `ɵsetClassMetadata(Async)` calls are kept so that the statement order can be compared.
+ */
+function extractTopLevelStatements(program: Program, sourceCode: string): TopLevelStatement[] {
+  const statements: TopLevelStatement[] = []
+  const seen = new Map<string, number>()
+  let unlabelled = 0
+
+  for (const topLevel of program.body as unknown as NormAstNode[]) {
+    const declaration =
+      topLevel.type === 'ExportNamedDeclaration' || topLevel.type === 'ExportDefaultDeclaration'
+        ? (topLevel.declaration as NormAstNode | null | undefined)
+        : topLevel
+    if (topLevel.type === 'ImportDeclaration' || topLevel.type === 'EmptyStatement') continue
+    // `export { a, b as c }` and `export ... from` lists are compared by `compareExports`.
+    if (topLevel.type === 'ExportNamedDeclaration' && !declaration) continue
+    if (
+      (declaration?.type === 'ClassDeclaration' || declaration?.type === 'FunctionDeclaration') &&
+      (declaration.id as NormAstNode | null | undefined)?.name
+    ) {
+      continue
+    }
+    if (
+      declaration?.type === 'VariableDeclaration' &&
+      (declaration.declarations as NormAstNode[]).every(
+        (decl) => (decl.id as NormAstNode).type === 'Identifier',
+      )
+    ) {
+      continue
+    }
+    if (topLevel.type === 'ExpressionStatement' && staticFieldAssignment(topLevel)) continue
+
+    const angularCall = firstAngularCall(topLevel)
+    let label: string
+    if (angularCall) {
+      const firstArg = (angularCall.call.arguments as NormAstNode[])[0]
+      label = `${angularCall.name}(${typeof firstArg?.name === 'string' ? firstArg.name : ''})`
+      const count = (seen.get(label) ?? 0) + 1
+      seen.set(label, count)
+      if (count > 1) label += `#${count}`
+    } else {
+      label = `#${++unlabelled}`
+    }
+    statements.push({
+      label,
+      call: angularCall?.call,
+      isMetadata:
+        angularCall?.name === 'ɵsetClassMetadata' || angularCall?.name === 'ɵsetClassMetadataAsync',
+      node: topLevel,
+      normalized: normalizeAst(topLevel),
+      code: sourceCode.slice(topLevel.start, topLevel.end),
+    })
+  }
+
+  return statements
+}
+
+/** Copy `node`, putting `to` where `from` was. */
+function substituteNode(node: unknown, from: unknown, to: unknown): unknown {
+  if (node === from) return to
+  if (node === null || typeof node !== 'object') return node
+  if (Array.isArray(node)) return node.map((item) => substituteNode(item, from, to))
+  return Object.fromEntries(
+    Object.entries(node).map(([key, value]) => [key, substituteNode(value, from, to)]),
+  )
+}
+
+/** The string `filePath` value node of a `ɵsetClassDebugInfo(Class, { ... })` call. */
+function debugInfoFilePath(statement: TopLevelStatement): NormAstNode | undefined {
+  if (!statement.label.startsWith('ɵsetClassDebugInfo(')) return undefined
+  const info = (statement.call?.arguments as NormAstNode[] | undefined)?.[1]
+  if (info?.type !== 'ObjectExpression') return undefined
+  for (const property of info.properties as NormAstNode[]) {
+    const key = property.key as NormAstNode | undefined
+    const value = property.value as NormAstNode | undefined
+    if (
+      property.type === 'Property' &&
+      property.computed !== true &&
+      (key?.name === 'filePath' || key?.value === 'filePath') &&
+      value?.type === 'Literal' &&
+      typeof value.value === 'string'
+    ) {
+      return value
+    }
+  }
+  return undefined
+}
+
+/**
+ * Compare the top-level statements from `extractTopLevelStatements` by label, and their order.
+ *
+ * The content of the `ɵsetClassMetadata(Async)` calls, and whether they exist, is left to
+ * `compareClassMetadata`; they only take part in the order check. A statement is reported out of
+ * order when Oxc emits it before a statement that Angular emits ahead of it.
+ */
+function compareTopLevelStatements(
+  oxcStatements: TopLevelStatement[],
+  tsStatements: TopLevelStatement[],
+): StatementDiff[] {
+  const diffs: StatementDiff[] = []
+  const oxcByLabel = new Map(oxcStatements.map((s) => [s.label, s]))
+  const tsByLabel = new Map(tsStatements.map((s) => [s.label, s]))
+
+  for (const ts of tsStatements) {
+    const oxc = oxcByLabel.get(ts.label)
+    if (!oxc) {
+      if (!ts.isMetadata) diffs.push({ label: ts.label, type: 'missing', expected: ts.code })
+      continue
+    }
+    if (ts.isMetadata || oxc.normalized === ts.normalized) continue
+    // Tell a debug info call that differs only in its file path apart from one that differs in
+    // its class name or line number.
+    const oxcPath = debugInfoFilePath(oxc)
+    const tsPath = debugInfoFilePath(ts)
+    if (
+      oxcPath &&
+      tsPath &&
+      normalizeAst(substituteNode(oxc.node, oxcPath, tsPath)) === ts.normalized
+    ) {
+      diffs.push({
+        label: `${ts.label} filePath`,
+        type: 'different',
+        expected: tsPath.value as string,
+        actual: oxcPath.value as string,
+      })
+    } else {
+      diffs.push({ label: ts.label, type: 'different', expected: ts.code, actual: oxc.code })
+    }
+  }
+  for (const oxc of oxcStatements) {
+    if (!tsByLabel.has(oxc.label) && !oxc.isMetadata) {
+      diffs.push({ label: oxc.label, type: 'extra', actual: oxc.code })
+    }
+  }
+
+  const tsOrder = tsStatements.map((s) => s.label).filter((label) => oxcByLabel.has(label))
+  const oxcOrder = oxcStatements.map((s) => s.label).filter((label) => tsByLabel.has(label))
+  const tsIndex = new Map(tsOrder.map((label, i) => [label, i]))
+  for (let i = 0; i < oxcOrder.length; i++) {
+    const index = tsIndex.get(oxcOrder[i])!
+    if (oxcOrder.slice(i + 1).some((later) => tsIndex.get(later)! < index)) {
+      diffs.push({
+        label: `order ${oxcOrder[i]}`,
+        type: 'order',
+        expected: tsOrder.join(', '),
+        actual: oxcOrder.join(', '),
+      })
+    }
+  }
+
+  return diffs
+}
+
 /**
  * Compare two full-file JavaScript outputs semantically.
  *
@@ -1823,6 +2078,8 @@ function compareClasses(
  * - Class definitions
  * - Static field assignments (ClassName.ɵcmp, ClassName.ɵfac, etc.)
  * - Top-level functions and constants (template functions, hoisted `_cN` constants, etc.)
+ * - Every other top-level statement (setClassDebugInfo, setNgModuleScope, ...), and the order of
+ *   these statements and the setClassMetadata calls
  *
  * Every part is compared on its AST, so formatting does not matter but any change inside a
  * string literal does; the source text is never rewritten to make the outputs line up.
@@ -1935,12 +2192,19 @@ export async function compareFullFileSemantically(
     const tsFunctions = extractFunctions(tsResult.program as unknown as Program, normalizedTsCode)
     const functionComparison = compareFunctions(oxcFunctions, tsFunctions)
 
+    // Extract and compare the remaining top-level statements (setClassDebugInfo, ...)
+    const statementDiffs = compareTopLevelStatements(
+      extractTopLevelStatements(oxcResult.program as unknown as Program, normalizedOxcCode),
+      extractTopLevelStatements(tsResult.program as unknown as Program, normalizedTsCode),
+    )
+
     // Determine if there are any differences
     const hasImportDiffs = importDiffs.length > 0
     const hasExportDiffs = exportDiffs.length > 0
     const hasClassDiffs = classDiffs.length > 0
     const hasStaticFieldDiffs = staticFieldDiffs.length > 0
     const hasClassMetadataDiffs = classMetadataDiffs.length > 0
+    const hasStatementDiffs = statementDiffs.length > 0
     const hasFunctionDiffs =
       functionComparison.missingFunctions.length > 0 ||
       functionComparison.extraFunctions.length > 0 ||
@@ -1952,6 +2216,7 @@ export async function compareFullFileSemantically(
       !hasClassDiffs &&
       !hasStaticFieldDiffs &&
       !hasClassMetadataDiffs &&
+      !hasStatementDiffs &&
       !hasFunctionDiffs
 
     if (match) {
@@ -1965,6 +2230,7 @@ export async function compareFullFileSemantically(
       classDiffs: hasClassDiffs ? classDiffs : undefined,
       staticFieldDiffs: hasStaticFieldDiffs ? staticFieldDiffs : undefined,
       classMetadataDiffs: hasClassMetadataDiffs ? classMetadataDiffs : undefined,
+      statementDiffs: hasStatementDiffs ? statementDiffs : undefined,
       functionComparison: hasFunctionDiffs ? functionComparison : undefined,
     }
   } catch (e) {
@@ -2027,6 +2293,8 @@ export function formatFullFileComparison(result: FullFileCompareResult): string
           break
         case 'different':
           lines.push(`  ~ Different export: ${diff.exportName}`)
+          lines.push(`      expected: ${diff.expected}`)
+          lines.push(`      actual:   ${diff.actual}`)
           break
       }
     }
@@ -2099,6 +2367,27 @@ export function formatFullFileComparison(result: FullFileCompareResult): string
     lines.push('')
   }
 
+  if (result.statementDiffs && result.statementDiffs.length > 0) {
+    lines.push('Top-level statement differences:')
+    for (const diff of result.statementDiffs) {
+      switch (diff.type) {
+        case 'missing':
+          lines.push(`  - Missing: ${diff.label}`)
+          break
+        case 'extra':
+          lines.push(`  + Extra: ${diff.label}`)
+          break
+        case 'different':
+        case 'order':
+          lines.push(`  ~ Different: ${diff.label}`)
+          lines.push(`      expected: ${truncate(diff.expected || '', 80)}`)
+          lines.push(`      actual:   ${truncate(diff.actual || '', 80)}`)
+          break
+      }
+    }
+    lines.push('')
+  }
+
   if (result.functionComparison) {
     lines.push(formatFunctionComparison(result.functionComparison))
   }
diff --git a/napi/angular-compiler/e2e/compare/src/runner.ts b/napi/angular-compiler/e2e/compare/src/runner.ts
index a4210c892..ba851eaa1 100644
--- a/napi/angular-compiler/e2e/compare/src/runner.ts
+++ b/napi/angular-compiler/e2e/compare/src/runner.ts
@@ -351,6 +351,7 @@ async function compareFilesProjectWide(
           classDiffs: comparison.classDiffs,
           staticFieldDiffs: comparison.staticFieldDiffs,
           classMetadataDiffs: comparison.classMetadataDiffs,
+          statementDiffs: comparison.statementDiffs,
           functionComparison: comparison.functionComparison,
           parseErrors: comparison.parseErrors,
         }
@@ -520,6 +521,9 @@ function summarizeComparisonDetails(
   if (details.classMetadataDiffs?.length) {
     parts.push(`${details.classMetadataDiffs.length} metadata diff(s)`)
   }
+  if (details.statementDiffs?.length) {
+    parts.push(`${details.statementDiffs.length} statement diff(s)`)
+  }
   if (details.functionComparison) {
     const fc = details.functionComparison
     if (fc.missingFunctions.length) {
diff --git a/napi/angular-compiler/e2e/compare/src/types.ts b/napi/angular-compiler/e2e/compare/src/types.ts
index b2e7b0112..8f6c950ce 100644
--- a/napi/angular-compiler/e2e/compare/src/types.ts
+++ b/napi/angular-compiler/e2e/compare/src/types.ts
@@ -405,6 +405,13 @@ export interface FileComparisonDetails {
   }>
   /** Class metadata differences */
   classMetadataDiffs?: ClassMetadataDiff[]
+  /** Other top-level statement differences (setClassDebugInfo, setNgModuleScope, ...) */
+  statementDiffs?: Array<{
+    label: string
+    type: 'missing' | 'extra' | 'different' | 'order'
+    expected?: string
+    actual?: string
+  }>
   /** Function comparison results */
   functionComparison?: FunctionLevelComparison
   /** Parse errors if any */

From 6f128c749d27d6e94973d7298b92bc30e253f1a8 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:53:48 +0800
Subject: [PATCH 31/54] fix(linker): annotate the declaration IIFE around
 define calls as pure
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When a linked component or directive needs template or host binding
declarations, the linker wraps them and the define call in an IIFE. The
inner define call was annotated, but the IIFE call itself was not, so
bundlers kept unused linked classes alive. Angular's babel linker hoists
those declarations instead and leaves `/* @__PURE__ */ i0.ɵɵdefine*(...)`
as the static field value. The IIFE only declares functions and pooled
constants before returning the pure call, so it is pure too.

The registerNgModuleType IIFE keeps no annotation, as it has a side
effect.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 crates/oxc_angular_compiler/src/linker/mod.rs | 12 ++++++++--
 .../oxc_angular_compiler/tests/linker_test.rs | 22 +++++++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/linker/mod.rs b/crates/oxc_angular_compiler/src/linker/mod.rs
index 61cfc0126..0b192c558 100644
--- a/crates/oxc_angular_compiler/src/linker/mod.rs
+++ b/crates/oxc_angular_compiler/src/linker/mod.rs
@@ -1608,7 +1608,13 @@ fn link_directive(
     if host_binding_declarations_js.is_empty() {
         Some(define_call)
     } else {
-        Some(format!("(() => {{\n{host_binding_declarations_js}\nreturn {define_call};\n}})()"))
+        // The IIFE only declares the host binding functions and constants before
+        // returning the pure define call, so it is pure too. Without the annotation
+        // bundlers keep unused directives (Angular's linker hoists the
+        // declarations and leaves the define call itself at the top level).
+        Some(format!(
+            "/*@__PURE__*/ (() => {{\n{host_binding_declarations_js}\nreturn {define_call};\n}})()"
+        ))
     }
 }
 
@@ -2219,7 +2225,9 @@ fn link_component(
     if declarations.trim().is_empty() {
         Some(define_component)
     } else {
-        Some(format!("(() => {{\n{declarations}\nreturn {define_component};\n}})()"))
+        // Pure for the same reason as in `link_directive`: it only declares the
+        // template functions and pooled constants used by the define call.
+        Some(format!("/*@__PURE__*/ (() => {{\n{declarations}\nreturn {define_component};\n}})()"))
     }
 }
 
diff --git a/crates/oxc_angular_compiler/tests/linker_test.rs b/crates/oxc_angular_compiler/tests/linker_test.rs
index 3f22ec49b..b98c0f551 100644
--- a/crates/oxc_angular_compiler/tests/linker_test.rs
+++ b/crates/oxc_angular_compiler/tests/linker_test.rs
@@ -469,6 +469,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
     assert!(result.code.contains("ngDevMode) && i0.ɵsetClassMetadata(C,"), "{}", result.code);
 }
 
+/// When the linker wraps a define call in an IIFE to declare template or host
+/// binding functions and pooled constants, the IIFE itself is annotated. Angular's
+/// linker hoists those declarations and leaves `/* @__PURE__ */ i0.ɵɵdefine*(...)`
+/// as the static field value, so an unannotated IIFE would keep unused classes alive.
+#[test]
+fn test_link_declaration_iife_is_pure() {
+    let allocator = Allocator::default();
+    let code = r#"import * as i0 from "@angular/core";
+class C {
+  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: C, isStandalone: true, selector: "c", ngImport: i0, template: "<b>{{x}}</b><ng-template><i>{{y}}</i></ng-template>" });
+}
+class D {
+  static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: D, isStandalone: true, selector: "[d]", ngImport: i0, host: { properties: { "style": "{ width: w }" } } });
+}
+"#;
+    let result = link(&allocator, code, "test.mjs");
+    assert!(result.code.contains("static ɵcmp = /*@__PURE__*/ (() => {"), "{}", result.code);
+    assert!(result.code.contains("static ɵdir = /*@__PURE__*/ (() => {"), "{}", result.code);
+    assert!(result.code.contains("return /*@__PURE__*/ i0.ɵɵdefineComponent("), "{}", result.code);
+    assert!(result.code.contains("return /*@__PURE__*/ i0.ɵɵdefineDirective("), "{}", result.code);
+}
+
 /// `styleAttribute` is parsed like Angular's `parse_extracted_styles` phase: `;` and `:`
 /// inside quotes or parentheses do not split, and property names are hyphenated. The
 /// expected `hostAttrs` are Angular 22.2.3's babel linker output for the same declaration.

From b55322f6d930f78926eeb6ac9c6803b663233974 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 17:53:48 +0800
Subject: [PATCH 32/54] fix(vite): drive linker source maps from
 sourceMap.vendor

The linker only processes node_modules files, but angular() passed it
the scripts setting, so `sourceMap: { vendor: false }` (and the default)
still produced maps for every linked package. Follow Angular CLI's
normalizeSourceMaps: vendor maps are on only when the object form sets
`vendor: true`, and only together with scripts.

The sourcemap flag also changes what the dependency optimizer load hook
returns, and Vite keys its deps cache on optimizer plugin names, not on
their options. Add a `+map` suffix to the plugin name so toggling the
option re-links prebundled deps.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 napi/angular-compiler/test/linker.test.ts     | 30 +++++++++++++++----
 .../vite-plugin/angular-linker-plugin.ts      | 13 +++++---
 napi/angular-compiler/vite-plugin/index.ts    |  7 ++++-
 3 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/napi/angular-compiler/test/linker.test.ts b/napi/angular-compiler/test/linker.test.ts
index 38231843e..163f22bd7 100644
--- a/napi/angular-compiler/test/linker.test.ts
+++ b/napi/angular-compiler/test/linker.test.ts
@@ -2,7 +2,7 @@ import { describe, it, expect } from 'vitest'
 
 import { linkAngularPackageSync, type AngularVersion } from '../index.js'
 import { angularLinkerPlugin } from '../vite-plugin/angular-linker-plugin.js'
-import { angular } from '../vite-plugin/index.js'
+import { angular, type PluginOptions } from '../vite-plugin/index.js'
 
 /**
  * Minimal Angular partial declaration fixtures that simulate the structure
@@ -397,15 +397,35 @@ describe('linker: sourcemap', () => {
     expect(JSON.parse(result.map).sources).toEqual([id])
   })
 
-  it('forwards angular() sourceMap to the linker plugin', async () => {
-    const link = async (sourceMap: boolean) => {
+  it('keys the dependency optimizer cache on sourcemap', () => {
+    // The load hook returns `{ code, map }` instead of a string, so prebundled deps
+    // must be rebuilt when the option changes.
+    const nameFor = (options: Parameters<typeof angularLinkerPlugin>[0]) =>
+      (angularLinkerPlugin(options) as any).config({}, { command: 'serve' }).optimizeDeps
+        .rolldownOptions.plugins[0].name
+
+    expect(nameFor({ sourcemap: false })).toBe('angular-linker')
+    expect(nameFor({ sourcemap: true })).toBe('angular-linker+map')
+    expect(nameFor({ angularVersion: { major: 22, minor: 2, patch: 2 }, sourcemap: true })).toBe(
+      'angular-linker@22.2.2+map',
+    )
+  })
+
+  it('follows angular() sourceMap.vendor, like Angular CLI', async () => {
+    const link = async (sourceMap: PluginOptions['sourceMap']) => {
       const plugin = angular({ sourceMap }).find(
         (candidate) => candidate.name === '@oxc-angular/vite-linker',
       ) as any
       return plugin.transform.handler.call({}, PIPE_CHUNK, id)
     }
 
-    expect((await link(false)).map).toBeNull()
-    expect(JSON.parse((await link(true)).map).sources).toEqual([id])
+    // Vendor maps are off by default and `sourceMap: true` only covers scripts.
+    expect((await link(undefined)).map).toBeNull()
+    expect((await link(true)).map).toBeNull()
+    expect((await link({ scripts: true })).map).toBeNull()
+    expect((await link({ scripts: true, vendor: false })).map).toBeNull()
+    expect((await link({ scripts: false, vendor: true })).map).toBeNull()
+    expect(JSON.parse((await link({ scripts: true, vendor: true })).map).sources).toEqual([id])
+    expect(JSON.parse((await link({ vendor: true })).map).sources).toEqual([id])
   })
 })
diff --git a/napi/angular-compiler/vite-plugin/angular-linker-plugin.ts b/napi/angular-compiler/vite-plugin/angular-linker-plugin.ts
index 7100bcb74..09c7fedf4 100644
--- a/napi/angular-compiler/vite-plugin/angular-linker-plugin.ts
+++ b/napi/angular-compiler/vite-plugin/angular-linker-plugin.ts
@@ -111,11 +111,16 @@ export interface AngularLinkerPluginOptions {
  * `optimizeDeps.rolldownOptions.plugins`, not their options, into the optimizer
  * cache key, so the version is part of the name: changing `angularVersion`
  * re-links prebundled deps instead of reusing ones linked for another version.
+ * `sourcemap` changes what the load hook returns, so it adds a `+map` suffix.
  */
-function optimizerPluginName(angularVersion: AngularVersion | undefined): string {
-  if (!angularVersion) return 'angular-linker'
+function optimizerPluginName(
+  angularVersion: AngularVersion | undefined,
+  sourcemap: boolean,
+): string {
+  const map = sourcemap ? '+map' : ''
+  if (!angularVersion) return `angular-linker${map}`
   const { major, minor, patch, prerelease } = angularVersion
-  return `angular-linker@${major}.${minor}.${patch}${prerelease != null ? `-${prerelease}` : ''}`
+  return `angular-linker@${major}.${minor}.${patch}${prerelease != null ? `-${prerelease}` : ''}${map}`
 }
 
 export function angularLinkerPlugin({
@@ -145,7 +150,7 @@ export function angularLinkerPlugin({
             },
             plugins: [
               {
-                name: optimizerPluginName(angularVersion),
+                name: optimizerPluginName(angularVersion, sourcemap),
                 load: {
                   filter: {
                     id: /\.[cm]?js$/,
diff --git a/napi/angular-compiler/vite-plugin/index.ts b/napi/angular-compiler/vite-plugin/index.ts
index 85ab10f89..aca84409f 100644
--- a/napi/angular-compiler/vite-plugin/index.ts
+++ b/napi/angular-compiler/vite-plugin/index.ts
@@ -262,6 +262,9 @@ export function angular(options: PluginOptions = {}): Plugin[] {
       typeof options.sourceMap === 'boolean'
         ? options.sourceMap
         : (options.sourceMap?.scripts ?? true),
+    // Like Angular CLI's `normalizeSourceMaps`, vendor maps are off unless the
+    // object form turns them on; `sourceMap: true` only covers scripts.
+    vendorSourceMap: typeof options.sourceMap === 'object' && (options.sourceMap.vendor ?? false),
     zoneless: options.zoneless ?? false,
     fileReplacements,
     angularVersion: options.angularVersion,
@@ -1548,7 +1551,9 @@ export function angular(options: PluginOptions = {}): Plugin[] {
     dtsPlugin(),
     angularLinkerPlugin({
       angularVersion: pluginOptions.angularVersion,
-      sourcemap: pluginOptions.sourceMap,
+      // The linker only sees node_modules files, so it follows the vendor setting
+      // (Angular CLI only maps third-party code when both scripts and vendor are on).
+      sourcemap: pluginOptions.sourceMap && pluginOptions.vendorSourceMap,
     }),
     pluginOptions.jit &&
       jitPlugin({

From 1b48c1256cbc8fd24998833221923b22ad73802a Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 18:06:32 +0800
Subject: [PATCH 33/54] test(compare): reconcile known differences after
 merging wave 1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drop entries that wave 1 fixed (ng-deep and polyfill-next-selector
whitespace, the injectable useFactory wrapper, the leftover factory
entries) and document the unguarded ɵɵsetNgModuleScope call, which Oxc
keeps on purpose because it resolves component dependencies at runtime.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../e2e/compare/fixtures/known-differences.ts | 49 +++++++++----------
 1 file changed, 22 insertions(+), 27 deletions(-)

diff --git a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
index b95bab2d0..06f038422 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
@@ -40,15 +40,14 @@ const DOM_ONLY =
   'templates use ɵɵelementStart/ɵɵlistener where a full ngtsc build of a standalone component without directive dependencies emits the DOM-only ɵɵdomElementStart/ɵɵdomListener'
 const COMPONENT_DEPS =
   'dependencies use the local-compilation ɵɵgetComponentDepsFactory(Cmp, imports) where a full ngtsc build lists the resolved dependencies'
-const INJECTABLE_FACTORY_WRAPPER =
-  'an @Injectable useFactory is wrapped in a function expression where Angular emits an arrow function'
 const SET_CLASS_METADATA_IMPORT =
   'Oxc keeps the @Inject import because its setClassMetadata references it; ngtsc emits the same reference but TypeScript elision still drops the import (upstream emit bug)'
 const ALIASED_INJECTABLE =
   'an aliased @Injectable compiles to a broken ɵprov under ngtsc — its needsFactory check compares the written decorator name, so the factory (and setClassMetadata) are never emitted; Oxc emits a working ɵfac (issue #507, kept deliberately)'
 
 const NG_MODULE_SCOPE =
-  'the ngJitMode-guarded ɵɵsetNgModuleScope call Angular emits after an NgModule is missing'
+  'ɵɵsetNgModuleScope runs unguarded where Angular wraps it in `ngJitMode`: Oxc compiles one file at a time and resolves component dependencies at runtime through the scope it registers, so production builds (ngJitMode = false) still need it'
+const NG_MODULE_SCOPE_ORDER = 'ɵɵsetNgModuleScope is emitted before ɵsetClassMetadata where Angular emits it after'
 const DEBUG_INFO_PATH =
   'ɵsetClassDebugInfo filePath is the path Oxc was given (absolute here and in the Vite plugin) where Angular emits it relative to the project root'
 const DEBUG_INFO_LINE =
@@ -67,6 +66,26 @@ export const GLOBAL_KNOWN_DIFFERENCES: Array<{ label: RegExp; reason: string }>
 ]
 
 export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
+  'class-metadata/class-metadata-ngmodule': {
+    fields: [],
+    statements: ['ɵɵsetNgModuleScope(TestableModule)', 'order ɵɵsetNgModuleScope(TestableModule)'],
+    reasons: [NG_MODULE_SCOPE, NG_MODULE_SCOPE_ORDER],
+  },
+  'injector/injector-with-both': {
+    fields: [],
+    statements: ['ɵɵsetNgModuleScope(FullModule)', 'order ɵɵsetNgModuleScope(FullModule)'],
+    reasons: [NG_MODULE_SCOPE, NG_MODULE_SCOPE_ORDER],
+  },
+  'injector/injector-with-imports': {
+    fields: [],
+    statements: ['ɵɵsetNgModuleScope(FeatureModule)', 'order ɵɵsetNgModuleScope(FeatureModule)'],
+    reasons: [NG_MODULE_SCOPE, NG_MODULE_SCOPE_ORDER],
+  },
+  'injector/injector-with-spread-declarations': {
+    fields: [],
+    statements: ['ɵɵsetNgModuleScope(SpreadModule)', 'order ɵɵsetNgModuleScope(SpreadModule)'],
+    reasons: [NG_MODULE_SCOPE, NG_MODULE_SCOPE_ORDER],
+  },
   'animations/animation-metadata-with-change-detection': {
     fields: ['AnimationsWithOnPushComponent.ɵcmp'],
     reasons: [DOM_ONLY, COMPONENT_DEPS],
@@ -167,22 +186,6 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     fields: ['HostDirectivesOnPushComponent.ɵcmp'],
     reasons: [DOM_ONLY, COMPONENT_DEPS],
   },
-  'providers/injectable-use-class-forward-ref': {
-    fields: ['EarlyService.ɵfac'],
-    reasons: [FACTORY],
-  },
-  'providers/injectable-use-class-other': {
-    fields: ['AbstractLogger.ɵfac'],
-    reasons: [FACTORY],
-  },
-  'providers/injectable-use-factory-named-function': {
-    fields: ['FactoryService.ɵfac'],
-    reasons: [FACTORY],
-  },
-  'providers/object-members-injectable-use-factory': {
-    fields: ['ObjectMembersService.ɵprov'],
-    reasons: [INJECTABLE_FACTORY_WRAPPER],
-  },
   'providers/providers-with-change-detection': {
     fields: ['ProvidersWithChangeDetectionComponent.ɵcmp'],
     reasons: [DOM_ONLY],
@@ -300,18 +303,10 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     fields: ['NgDeepAfterSelectorComponent.ɵcmp'],
     reasons: [CSS_WS],
   },
-  'styles/shadow-css-ng-deep-basic': {
-    fields: ['NgDeepBasicComponent.ɵcmp'],
-    reasons: ['a leading space is kept before a ::ng-deep selector'],
-  },
   'styles/shadow-css-ng-deep-with-host': {
     fields: ['NgDeepWithHostComponent.ɵcmp'],
     reasons: [CSS_WS],
   },
-  'styles/shadow-css-polyfill-next-selector': {
-    fields: ['PolyfillNextSelectorComponent.ɵcmp'],
-    reasons: ['a space is added before an empty rule body'],
-  },
   'styles/shadow-css-polyfill-rule': {
     fields: ['PolyfillRuleComponent.ɵcmp'],
     reasons: [

From c84b68ee94c52c15f909ba1841662a156d869215 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 18:32:28 +0800
Subject: [PATCH 34/54] fix(transform): order class metadata before debug info
 and module scope
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ngtsc's compileResults pushes ɵsetClassMetadata, then ɵsetClassDebugInfo,
then the HMR initializer; Oxc emitted the debug info first. For NgModules,
ngtsc's insertMetadataStatement unshifts ɵsetClassMetadata in front of the
ɵmod statements, so it comes before the ɵɵsetNgModuleScope IIFE; Oxc
appended it after.

ɵsetClassDebugInfo's lineNumber now counts line breaks like TypeScript's
computeLineStarts (\r\n, \r, \n, U+2028, U+2029) instead of only \n.

Drops the DEBUG_INFO_ORDER global entry, the NG_MODULE_SCOPE_ORDER
entries and the DEBUG_INFO_LINE entry from the compare known differences.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/class_debug_info/metadata.rs          | 53 +++++++++++++++++++
 .../src/class_debug_info/mod.rs               |  2 +-
 .../src/component/transform.rs                | 52 +++++++++---------
 .../tests/integration_test.rs                 | 36 +++++++++++++
 ...lass_metadata_angular_core_decorators.snap |  9 ++--
 ...on_test__component_with_inline_styles.snap |  8 +--
 ..._test__component_with_multiple_styles.snap |  8 +--
 ...ration_test__component_without_styles.snap |  8 +--
 ...st__event_before_property_in_bindings.snap |  8 +--
 ...st__host_directives_with_host_aliases.snap |  8 +--
 ...__host_directives_with_inputs_outputs.snap |  8 +--
 ...ration_test__ngfor_attribute_ordering.snap |  8 +--
 ...put_from_observable_mixed_with_output.snap |  8 +--
 ...on_test__output_from_observable_piped.snap |  8 +--
 ...ut_from_observable_property_reference.snap |  8 +--
 ...n_test__output_from_observable_simple.snap |  8 +--
 ...st__output_from_observable_with_alias.snap |  8 +--
 ...n_test__selector_attrs_const_emission.snap |  8 +--
 ...__standalone_component_uses_full_mode.snap |  8 +--
 .../e2e/compare/fixtures/known-differences.ts | 27 +++-------
 20 files changed, 184 insertions(+), 107 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/class_debug_info/metadata.rs b/crates/oxc_angular_compiler/src/class_debug_info/metadata.rs
index b49c4d184..6f535f591 100644
--- a/crates/oxc_angular_compiler/src/class_debug_info/metadata.rs
+++ b/crates/oxc_angular_compiler/src/class_debug_info/metadata.rs
@@ -62,3 +62,56 @@ impl<'a> R3ClassDebugInfo<'a> {
         self
     }
 }
+
+/// The 1-indexed line of byte `offset` in `source`, counting line breaks the
+/// way TypeScript's `computeLineStarts` does: `\r\n`, `\r`, `\n`, U+2028 and
+/// U+2029 each end a line.
+///
+/// ngtsc computes `ɵsetClassDebugInfo`'s `lineNumber` with
+/// `getLineAndCharacterOfPosition`, which uses those line starts.
+pub fn line_number_at(source: &str, offset: usize) -> u32 {
+    let bytes = &source.as_bytes()[..offset.min(source.len())];
+    let mut line = 1u32;
+    let mut i = 0;
+    while i < bytes.len() {
+        match bytes[i] {
+            b'\r' => {
+                line += 1;
+                if bytes.get(i + 1) == Some(&b'\n') {
+                    i += 1;
+                }
+            }
+            b'\n' => line += 1,
+            // U+2028 LINE SEPARATOR and U+2029 PARAGRAPH SEPARATOR are
+            // E2 80 A8 / E2 80 A9 in UTF-8.
+            0xE2 if bytes.get(i + 1) == Some(&0x80)
+                && matches!(bytes.get(i + 2), Some(&(0xA8 | 0xA9))) =>
+            {
+                line += 1;
+                i += 2;
+            }
+            _ => {}
+        }
+        i += 1;
+    }
+    line
+}
+
+#[cfg(test)]
+mod tests {
+    use super::line_number_at;
+
+    #[test]
+    fn counts_typescript_line_breaks() {
+        assert_eq!(line_number_at("class A {}", 0), 1);
+        assert_eq!(line_number_at("a\nb\nclass", 4), 3);
+        // `\r\n` is one line break, a lone `\r` is another.
+        assert_eq!(line_number_at("a\r\nb\rclass", 6), 3);
+        // U+2028 and U+2029 end lines too.
+        let src = "a\u{2028}b\u{2029}class";
+        assert_eq!(line_number_at(src, src.find("class").unwrap()), 3);
+        // Other non-ASCII characters do not.
+        let src = "é\u{2027}class";
+        assert_eq!(line_number_at(src, src.find("class").unwrap()), 1);
+    }
+}
diff --git a/crates/oxc_angular_compiler/src/class_debug_info/mod.rs b/crates/oxc_angular_compiler/src/class_debug_info/mod.rs
index 7b2c99005..68148772f 100644
--- a/crates/oxc_angular_compiler/src/class_debug_info/mod.rs
+++ b/crates/oxc_angular_compiler/src/class_debug_info/mod.rs
@@ -18,4 +18,4 @@ mod compiler;
 mod metadata;
 
 pub use compiler::compile_class_debug_info;
-pub use metadata::R3ClassDebugInfo;
+pub use metadata::{R3ClassDebugInfo, line_number_at};
diff --git a/crates/oxc_angular_compiler/src/component/transform.rs b/crates/oxc_angular_compiler/src/component/transform.rs
index 8dcb2de6b..ac08efa7f 100644
--- a/crates/oxc_angular_compiler/src/component/transform.rs
+++ b/crates/oxc_angular_compiler/src/component/transform.rs
@@ -3702,20 +3702,15 @@ pub fn transform_angular_file(
 
                             // Split declarations into two groups:
                             // 1. decls_before_class: child view functions, constants (needed BEFORE class)
-                            // 2. decls_after_class: debug info, metadata, HMR code (references class, needs AFTER)
+                            // 2. decls_after_class: metadata, debug info, HMR code (references class, needs AFTER)
+                            //
+                            // The order follows ngtsc's `compileResults`
+                            // (annotations/common/src/util.ts): class metadata, then
+                            // class debug info, then the HMR initializer.
                             let decls_before_class = compilation_result.declarations_js.clone();
                             let mut decls_after_class = String::new();
 
-                            // Add class debug info (before class metadata, following Angular's order)
-                            if let Some(debug_info_js) = &compilation_result.class_debug_info_js {
-                                if !decls_after_class.is_empty() {
-                                    decls_after_class.push('\n');
-                                }
-                                decls_after_class.push_str(debug_info_js);
-                                decls_after_class.push(';');
-                            }
-
-                            // Add class metadata for TestBed support (after debug info, before HMR)
+                            // Add class metadata for TestBed support (before debug info and HMR)
                             // Only emit when enabled and not in advanced optimizations mode
                             if options.emit_class_metadata && !options.advanced_optimizations {
                                 // List ALL of the class's `@angular/core` decorators, in
@@ -3858,6 +3853,15 @@ pub fn transform_angular_file(
                                 }
                             }
 
+                            // Add class debug info (after class metadata, before HMR)
+                            if let Some(debug_info_js) = &compilation_result.class_debug_info_js {
+                                if !decls_after_class.is_empty() {
+                                    decls_after_class.push('\n');
+                                }
+                                decls_after_class.push_str(debug_info_js);
+                                decls_after_class.push(';');
+                            }
+
                             // Add HMR initializer last
                             if let Some(hmr_js) = &compilation_result.hmr_initializer_js {
                                 if !decls_after_class.is_empty() {
@@ -4306,8 +4310,10 @@ pub fn transform_angular_file(
                             has_injectable,
                         ));
 
-                        // Emit setClassMetadata for TestBed support (overrideModule),
-                        // appended after the NgModule's external declarations.
+                        // Emit setClassMetadata for TestBed support (overrideModule).
+                        // ngtsc's `insertMetadataStatement` (ng_module/src/handler.ts)
+                        // unshifts it in front of the ɵmod statements, so it comes
+                        // before the `ɵɵsetNgModuleScope` IIFE.
                         let metadata = build_set_class_metadata_decls(
                             &allocator,
                             class,
@@ -4320,9 +4326,9 @@ pub fn transform_angular_file(
                         );
                         if !metadata.is_empty() {
                             if !external_decls.is_empty() {
-                                external_decls.push('\n');
+                                external_decls.insert(0, '\n');
                             }
-                            external_decls.push_str(&metadata);
+                            external_decls.insert_str(0, &metadata);
                         }
 
                         // NgModule: external_decls go AFTER the class (they reference the class name)
@@ -5383,7 +5389,7 @@ fn compile_component_full<'a>(
     // Generate class debug info for dev-mode runtime errors
     // This provides class name, file path, and line number for better error messages
     let class_debug_info_js = if !options.advanced_optimizations {
-        use crate::class_debug_info::{R3ClassDebugInfo, compile_class_debug_info};
+        use crate::class_debug_info::{R3ClassDebugInfo, compile_class_debug_info, line_number_at};
         use crate::output::ast::{OutputExpression, ReadVarExpr};
 
         // Create component type expression (reference to the class)
@@ -5392,17 +5398,9 @@ fn compile_component_full<'a>(
             &allocator,
         ));
 
-        // Compute the 1-indexed line number of the class declaration from its byte offset
-        let class_line_number = {
-            let offset = metadata.class_span.start as usize;
-            let mut line = 1u32;
-            for &byte in &source.as_bytes()[..offset.min(source.len())] {
-                if byte == b'\n' {
-                    line += 1;
-                }
-            }
-            line
-        };
+        // The 1-indexed line of the `class` keyword (ngtsc uses `clazz.name.pos`,
+        // which sits right after it), with TypeScript's line-break rules.
+        let class_line_number = line_number_at(source, metadata.class_span.start as usize);
 
         // Build the debug info with the actual class declaration line number
         let debug_info = R3ClassDebugInfo::new(component_type, metadata.class_name.clone())
diff --git a/crates/oxc_angular_compiler/tests/integration_test.rs b/crates/oxc_angular_compiler/tests/integration_test.rs
index 2a0198fcc..c88ebec01 100644
--- a/crates/oxc_angular_compiler/tests/integration_test.rs
+++ b/crates/oxc_angular_compiler/tests/integration_test.rs
@@ -16258,6 +16258,42 @@ export class M {}
 }
 
 #[test]
+fn test_ng_module_class_metadata_precedes_scope() {
+    // ngtsc's `insertMetadataStatement` unshifts ɵsetClassMetadata in front
+    // of the ɵmod statements, so it comes before the ɵɵsetNgModuleScope IIFE.
+    let allocator = Allocator::default();
+    let source = r"
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@NgModule({ imports: [CommonModule] })
+export class M {}
+";
+    let result = transform_angular_file(&allocator, "m.module.ts", source, None, None);
+    assert!(!result.has_errors(), "Should not have errors: {:?}", result.diagnostics);
+    let metadata = result.code.find("ɵsetClassMetadata(M").expect("setClassMetadata");
+    let scope = result.code.find("ɵɵsetNgModuleScope(M").expect("setNgModuleScope");
+    assert!(metadata < scope, "setClassMetadata should come first. Got:\n{}", result.code);
+}
+
+#[test]
+fn test_component_class_metadata_precedes_debug_info() {
+    // ngtsc's `compileResults` pushes the class metadata, then the debug info.
+    // The debug info line counts `\r\n`, `\r`, U+2028 and U+2029 like
+    // TypeScript's `computeLineStarts`.
+    let allocator = Allocator::default();
+    let source = "import { Component } from '@angular/core';\r\n// \u{2028}\r@Component({ selector: 'c', template: '' })\r\nexport class C {}\n";
+    let result = transform_angular_file(&allocator, "c.component.ts", source, None, None);
+    assert!(!result.has_errors(), "Should not have errors: {:?}", result.diagnostics);
+    let metadata = result.code.find("ɵsetClassMetadata(C").expect("setClassMetadata");
+    let debug_info = result.code.find("ɵsetClassDebugInfo(C").expect("setClassDebugInfo");
+    assert!(metadata < debug_info, "setClassMetadata should come first. Got:\n{}", result.code);
+    assert!(
+        result.code.contains("lineNumber:5"),
+        "class is on line 5 by TypeScript's count. Got:\n{}",
+        result.code
+    );
+}
 fn test_jit_true_ng_module_skips_aot() {
     let allocator = Allocator::default();
     let source = r"
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__class_metadata_angular_core_decorators.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__class_metadata_angular_core_decorators.snap
index 0ba00e95e..44c772764 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__class_metadata_angular_core_decorators.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__class_metadata_angular_core_decorators.snap
@@ -2,6 +2,7 @@
 source: crates/oxc_angular_compiler/tests/integration_test.rs
 expression: result.code
 ---
+
 import { Component, Inject, Injectable } from '@angular/core';
 import { Inject as ForeignInject } from 'not-angular';
 import * as i0 from '@angular/core';
@@ -32,10 +33,6 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:TestComponent,selector
     vars:0,template:function TestComponent_Template(rf,ctx) {
     },encapsulation:2});
 }
-(() =>{
-  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(TestComponent,
-      {className:"TestComponent",filePath:"test.component.ts",lineNumber:8}));
-})();
 (() =>{
   (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassMetadata(TestComponent,
       [{type:Component,args:[{selector:"app-test",template:""}]}],() =>[{type:undefined,
@@ -43,3 +40,7 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:TestComponent,selector
           {type:undefined,decorators:[]}],{componentMember:[{type:Component}],knownMember:[{type:Inject,
           args:[TOKEN]}],foreignMember:[]}));
 })();
+(() =>{
+  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(TestComponent,
+      {className:"TestComponent",filePath:"test.component.ts",lineNumber:8}));
+})();
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_inline_styles.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_inline_styles.snap
index 8d7ce9a82..515fd4110 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_inline_styles.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_inline_styles.snap
@@ -20,12 +20,12 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:StyledComponent,select
       }
     },styles:[".container[_ngcontent-%COMP%] { color: red; }"]});
 }
-(() =>{
-  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(StyledComponent,
-      {className:"StyledComponent",filePath:"styled.component.ts",lineNumber:9}));
-})();
 (() =>{
   (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassMetadata(StyledComponent,
       [{type:Component,args:[{selector:"app-styled",template:"<div class=\"container\">Hello</div>",
           styles:[".container { color: red; }"]}]}],null,null));
 })();
+(() =>{
+  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(StyledComponent,
+      {className:"StyledComponent",filePath:"styled.component.ts",lineNumber:9}));
+})();
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_multiple_styles.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_multiple_styles.snap
index 56391a367..d9e63a8fd 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_multiple_styles.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_multiple_styles.snap
@@ -19,13 +19,13 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:MultiStyledComponent,s
       }
     },styles:[".first[_ngcontent-%COMP%] { color: blue; }",".second[_ngcontent-%COMP%] { background: white; }"]});
 }
-(() =>{
-  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(MultiStyledComponent,
-      {className:"MultiStyledComponent",filePath:"multi-styled.component.ts",lineNumber:12}));
-})();
 (() =>{
   (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassMetadata(MultiStyledComponent,
       [{type:Component,args:[{selector:"app-multi-styled",template:"<div>Content</div>",
           styles:[".first { color: blue; }",".second { background: white; }"]}]}],
       null,null));
 })();
+(() =>{
+  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(MultiStyledComponent,
+      {className:"MultiStyledComponent",filePath:"multi-styled.component.ts",lineNumber:12}));
+})();
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_without_styles.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_without_styles.snap
index 928991476..f741d0ea3 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_without_styles.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_without_styles.snap
@@ -19,12 +19,12 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:NoStylesComponent,sele
       }
     },encapsulation:2});
 }
-(() =>{
-  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(NoStylesComponent,
-      {className:"NoStylesComponent",filePath:"no-styles.component.ts",lineNumber:8}));
-})();
 (() =>{
   (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassMetadata(NoStylesComponent,
       [{type:Component,args:[{selector:"app-no-styles",template:"<div>No styles</div>"}]}],
       null,null));
 })();
+(() =>{
+  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(NoStylesComponent,
+      {className:"NoStylesComponent",filePath:"no-styles.component.ts",lineNumber:8}));
+})();
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__event_before_property_in_bindings.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__event_before_property_in_bindings.snap
index ae89c6bf2..bf58a7892 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__event_before_property_in_bindings.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__event_before_property_in_bindings.snap
@@ -27,12 +27,12 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:TestComponent,selector
       if ((rf & 2)) { i0.ɵɵproperty("disabled",ctx.isDisabled); }
     },encapsulation:2});
 }
-(() =>{
-  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(TestComponent,
-      {className:"TestComponent",filePath:"test.component.ts",lineNumber:9}));
-})();
 (() =>{
   (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassMetadata(TestComponent,
       [{type:Component,args:[{selector:"test-comp",template:"<button (click)=\"onClick()\" [disabled]=\"isDisabled\">Click</button>",
           standalone:true}]}],null,null));
 })();
+(() =>{
+  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(TestComponent,
+      {className:"TestComponent",filePath:"test.component.ts",lineNumber:9}));
+})();
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__host_directives_with_host_aliases.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__host_directives_with_host_aliases.snap
index eee3478e1..f8e2ef640 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__host_directives_with_host_aliases.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__host_directives_with_host_aliases.snap
@@ -37,13 +37,13 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:MyComponent,selectors:
         ctx) {
     },dependencies:i0.ɵɵgetComponentDepsFactory(MyComponent),encapsulation:2});
 }
-(() =>{
-  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(MyComponent,
-      {className:"MyComponent",filePath:"test.component.ts",lineNumber:22}));
-})();
 (() =>{
   (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassMetadata(MyComponent,
       [{type:Component,args:[{selector:"my-component",template:"",hostDirectives:[{directive:HostDir,
           inputs:["valueAlias","colorAlias: customColorAlias"],outputs:["openedAlias",
               "closedAlias: customClosedAlias"]}],standalone:false}]}],null,null));
 })();
+(() =>{
+  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(MyComponent,
+      {className:"MyComponent",filePath:"test.component.ts",lineNumber:22}));
+})();
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__host_directives_with_inputs_outputs.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__host_directives_with_inputs_outputs.snap
index a44fe3308..9cf8ada5f 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__host_directives_with_inputs_outputs.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__host_directives_with_inputs_outputs.snap
@@ -35,13 +35,13 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:MyComponent,selectors:
     decls:0,vars:0,template:function MyComponent_Template(rf,ctx) {
     },dependencies:i0.ɵɵgetComponentDepsFactory(MyComponent),encapsulation:2});
 }
-(() =>{
-  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(MyComponent,
-      {className:"MyComponent",filePath:"test.component.ts",lineNumber:22}));
-})();
 (() =>{
   (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassMetadata(MyComponent,
       [{type:Component,args:[{selector:"my-component",template:"",hostDirectives:[{directive:HostDir,
           inputs:["value","color: colorAlias"],outputs:["opened","closed: closedAlias"]}],
           standalone:false}]}],null,null));
 })();
+(() =>{
+  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(MyComponent,
+      {className:"MyComponent",filePath:"test.component.ts",lineNumber:22}));
+})();
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__ngfor_attribute_ordering.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__ngfor_attribute_ordering.snap
index 1975f3673..e124653c5 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__ngfor_attribute_ordering.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__ngfor_attribute_ordering.snap
@@ -32,12 +32,12 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:TestComponent,selector
       if ((rf & 2)) { i0.ɵɵproperty("ngForOf",ctx.items); }
     },encapsulation:2});
 }
-(() =>{
-  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(TestComponent,
-      {className:"TestComponent",filePath:"test.component.ts",lineNumber:9}));
-})();
 (() =>{
   (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassMetadata(TestComponent,
       [{type:Component,args:[{selector:"test-comp",template:"<li *ngFor=\"let item of items\">{{item}}</li>",
           standalone:true}]}],null,null));
 })();
+(() =>{
+  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(TestComponent,
+      {className:"TestComponent",filePath:"test.component.ts",lineNumber:9}));
+})();
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_mixed_with_output.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_mixed_with_output.snap
index a969f13ad..95c057014 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_mixed_with_output.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_mixed_with_output.snap
@@ -19,13 +19,13 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:TestComponent,selector
     ctx) {
 },encapsulation:2});
 }
-(() =>{
-  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(TestComponent,
-      {className:"TestComponent",filePath:"test.component.ts",lineNumber:10}));
-})();
 (() =>{
   (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassMetadata(TestComponent,
       [{type:Component,args:[{selector:"test-comp",standalone:true,template:""}]}],
       null,{clicked:[{type:i0.Output,args:["clicked"]}],queryChanged:[{type:i0.Output,
           args:["queryChanged"]}]}));
 })();
+(() =>{
+  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(TestComponent,
+      {className:"TestComponent",filePath:"test.component.ts",lineNumber:10}));
+})();
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_piped.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_piped.snap
index e2a96f1d6..0261f23dc 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_piped.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_piped.snap
@@ -22,12 +22,12 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:TestComponent,selector
     decls:0,vars:0,template:function TestComponent_Template(rf,ctx) {
     },encapsulation:2});
 }
-(() =>{
-  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(TestComponent,
-      {className:"TestComponent",filePath:"test.component.ts",lineNumber:10}));
-})();
 (() =>{
   (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassMetadata(TestComponent,
       [{type:Component,args:[{selector:"test-comp",standalone:true,template:""}]}],
       null,{queryChanged:[{type:i0.Output,args:["queryChanged"]}]}));
 })();
+(() =>{
+  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(TestComponent,
+      {className:"TestComponent",filePath:"test.component.ts",lineNumber:10}));
+})();
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_property_reference.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_property_reference.snap
index 79d9ea018..0859d2522 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_property_reference.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_property_reference.snap
@@ -17,12 +17,12 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:TestComponent,selector
     decls:0,vars:0,template:function TestComponent_Template(rf,ctx) {
     },encapsulation:2});
 }
-(() =>{
-  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(TestComponent,
-      {className:"TestComponent",filePath:"test.component.ts",lineNumber:10}));
-})();
 (() =>{
   (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassMetadata(TestComponent,
       [{type:Component,args:[{selector:"test-comp",standalone:true,template:""}]}],
       null,{valueChanged:[{type:i0.Output,args:["valueChanged"]}]}));
 })();
+(() =>{
+  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(TestComponent,
+      {className:"TestComponent",filePath:"test.component.ts",lineNumber:10}));
+})();
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_simple.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_simple.snap
index c40e5080b..38748f18c 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_simple.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_simple.snap
@@ -17,12 +17,12 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:TestComponent,selector
     decls:0,vars:0,template:function TestComponent_Template(rf,ctx) {
     },encapsulation:2});
 }
-(() =>{
-  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(TestComponent,
-      {className:"TestComponent",filePath:"test.component.ts",lineNumber:10}));
-})();
 (() =>{
   (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassMetadata(TestComponent,
       [{type:Component,args:[{selector:"test-comp",standalone:true,template:""}]}],
       null,{queryChanged:[{type:i0.Output,args:["queryChanged"]}]}));
 })();
+(() =>{
+  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(TestComponent,
+      {className:"TestComponent",filePath:"test.component.ts",lineNumber:10}));
+})();
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_with_alias.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_with_alias.snap
index 850cef7f4..e08666885 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_with_alias.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__output_from_observable_with_alias.snap
@@ -17,12 +17,12 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:TestComponent,selector
     decls:0,vars:0,template:function TestComponent_Template(rf,ctx) {
     },encapsulation:2});
 }
-(() =>{
-  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(TestComponent,
-      {className:"TestComponent",filePath:"test.component.ts",lineNumber:10}));
-})();
 (() =>{
   (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassMetadata(TestComponent,
       [{type:Component,args:[{selector:"test-comp",standalone:true,template:""}]}],
       null,{_clicked:[{type:i0.Output,args:["clicked"]}]}));
 })();
+(() =>{
+  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(TestComponent,
+      {className:"TestComponent",filePath:"test.component.ts",lineNumber:10}));
+})();
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__selector_attrs_const_emission.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__selector_attrs_const_emission.snap
index 6dc2b12b3..34d3341b1 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__selector_attrs_const_emission.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__selector_attrs_const_emission.snap
@@ -22,12 +22,12 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:BadgeComponent,selecto
   }
 },encapsulation:2});
 }
-(() =>{
-  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(BadgeComponent,
-      {className:"BadgeComponent",filePath:"badge.component.ts",lineNumber:9}));
-})();
 (() =>{
   (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassMetadata(BadgeComponent,
       [{type:Component,args:[{selector:"span[bitBadge]",template:"<ng-content></ng-content>",
           standalone:true}]}],null,null));
 })();
+(() =>{
+  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(BadgeComponent,
+      {className:"BadgeComponent",filePath:"badge.component.ts",lineNumber:9}));
+})();
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__standalone_component_uses_full_mode.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__standalone_component_uses_full_mode.snap
index 5798028e9..1dba0c07a 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__standalone_component_uses_full_mode.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__standalone_component_uses_full_mode.snap
@@ -45,12 +45,12 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:ExternalComponent,sele
       }
     },encapsulation:2});
 }
-(() =>{
-  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(ExternalComponent,
-      {className:"ExternalComponent",filePath:"test.component.ts",lineNumber:9}));
-})();
 (() =>{
   (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassMetadata(ExternalComponent,
       [{type:Component,args:[{selector:"app-external",template:"<div class=\"container\"><h2>{{ title }}</h2><ul>@for (item of items; track item) { <li>{{ item }}</li> }</ul></div>",
           standalone:true}]}],null,null));
 })();
+(() =>{
+  (((typeof ngDevMode === "undefined") || ngDevMode) && i0.ɵsetClassDebugInfo(ExternalComponent,
+      {className:"ExternalComponent",filePath:"test.component.ts",lineNumber:9}));
+})();
diff --git a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
index 06f038422..cdb5ea47b 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
@@ -47,13 +47,8 @@ const ALIASED_INJECTABLE =
 
 const NG_MODULE_SCOPE =
   'ɵɵsetNgModuleScope runs unguarded where Angular wraps it in `ngJitMode`: Oxc compiles one file at a time and resolves component dependencies at runtime through the scope it registers, so production builds (ngJitMode = false) still need it'
-const NG_MODULE_SCOPE_ORDER = 'ɵɵsetNgModuleScope is emitted before ɵsetClassMetadata where Angular emits it after'
 const DEBUG_INFO_PATH =
   'ɵsetClassDebugInfo filePath is the path Oxc was given (absolute here and in the Vite plugin) where Angular emits it relative to the project root'
-const DEBUG_INFO_LINE =
-  'ɵsetClassDebugInfo lineNumber counts only \\n line breaks where TypeScript also counts \\r, U+2028 and U+2029'
-const DEBUG_INFO_ORDER =
-  'ɵsetClassDebugInfo is emitted before ɵsetClassMetadata where Angular emits it after'
 
 /**
  * Differences every fixture may have, matched against the labels `KnownDifference` uses. A
@@ -62,29 +57,28 @@ const DEBUG_INFO_ORDER =
  */
 export const GLOBAL_KNOWN_DIFFERENCES: Array<{ label: RegExp; reason: string }> = [
   { label: /^statement ɵsetClassDebugInfo\([^()]+\)(#\d+)? filePath$/, reason: DEBUG_INFO_PATH },
-  { label: /^statement order ɵsetClassDebugInfo\([^()]+\)(#\d+)?$/, reason: DEBUG_INFO_ORDER },
 ]
 
 export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
   'class-metadata/class-metadata-ngmodule': {
     fields: [],
-    statements: ['ɵɵsetNgModuleScope(TestableModule)', 'order ɵɵsetNgModuleScope(TestableModule)'],
-    reasons: [NG_MODULE_SCOPE, NG_MODULE_SCOPE_ORDER],
+    statements: ['ɵɵsetNgModuleScope(TestableModule)'],
+    reasons: [NG_MODULE_SCOPE],
   },
   'injector/injector-with-both': {
     fields: [],
-    statements: ['ɵɵsetNgModuleScope(FullModule)', 'order ɵɵsetNgModuleScope(FullModule)'],
-    reasons: [NG_MODULE_SCOPE, NG_MODULE_SCOPE_ORDER],
+    statements: ['ɵɵsetNgModuleScope(FullModule)'],
+    reasons: [NG_MODULE_SCOPE],
   },
   'injector/injector-with-imports': {
     fields: [],
-    statements: ['ɵɵsetNgModuleScope(FeatureModule)', 'order ɵɵsetNgModuleScope(FeatureModule)'],
-    reasons: [NG_MODULE_SCOPE, NG_MODULE_SCOPE_ORDER],
+    statements: ['ɵɵsetNgModuleScope(FeatureModule)'],
+    reasons: [NG_MODULE_SCOPE],
   },
   'injector/injector-with-spread-declarations': {
     fields: [],
-    statements: ['ɵɵsetNgModuleScope(SpreadModule)', 'order ɵɵsetNgModuleScope(SpreadModule)'],
-    reasons: [NG_MODULE_SCOPE, NG_MODULE_SCOPE_ORDER],
+    statements: ['ɵɵsetNgModuleScope(SpreadModule)'],
+    reasons: [NG_MODULE_SCOPE],
   },
   'animations/animation-metadata-with-change-detection': {
     fields: ['AnimationsWithOnPushComponent.ɵcmp'],
@@ -139,11 +133,6 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     metadataDiffs: ['AliasedService.setClassMetadata'],
     reasons: [ALIASED_INJECTABLE],
   },
-  'edge-cases/unicode-special-escapes': {
-    fields: [],
-    statements: ['ɵsetClassDebugInfo(UnicodeSpecialEscapesComponent)'],
-    reasons: [DEBUG_INFO_LINE, DEBUG_INFO_PATH],
-  },
   'edge-cases/multiple-custom-decorators': {
     fields: ['MultiDecoratorComponent.ɵcmp'],
     reasons: [DOM_ONLY],

From d4ab5c3a85a1aded761998dacafa712b0d636943 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 18:36:15 +0800
Subject: [PATCH 35/54] feat(vite): load every resource the compiler needs,
 link stylesheets included

What:
- `templateUrl`, `template` and `styleUrl(s)` are now read with the partial
  evaluator (after the old same-file folding), like ngtsc's
  `parseTemplateDeclaration` / `extractStyleUrlsFromExpression`: spreads in
  `styleUrls`, `'a' + B`, a const array, and - with `resolveImportedValues` -
  a const imported from another file.
- New `extract_component_resource_urls` in the crate builds the same consts
  and cross-file resolver as the transform (shared helpers), so the URLs it
  returns are exactly the keys the transform looks up. The NAPI
  `extractComponentUrls(source, filename, options?)` takes the transform's
  `TransformOptions` and uses it.
- `TransformResult.missingLinkUrls` lists template
  `<link rel="stylesheet" href>`s that were not in the resolved styles.
  The plugin reads and preprocesses them through the same code path as
  `styleUrls` (direct styles for cache, watcher and HMR), transforms once
  more, and only hrefs that still cannot be read stay
  COMPONENT_RESOURCE_NOT_FOUND. A missing link no longer sends a fast-path
  file through the URL parse.
- `compileForHmrSync` returns `templateStyleUrls`; the `@ng/component`
  endpoint reads them like `styleUrls` and compiles again, so HMR updates
  keep link styles.

Why:
The plugin extracted URLs without the cross-file resolver, so an imported
`templateUrl` const was silently skipped, and template stylesheet links were
never loaded, so every such component failed with
COMPONENT_RESOURCE_NOT_FOUND. ngtsc (22.2.3, checked on a real program)
resolves both: links relative to the component file, compiled after the
decorator's `styleUrls`.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/component/decorator.rs                |  53 +--
 .../oxc_angular_compiler/src/component/mod.rs |  12 +-
 .../src/component/transform.rs                | 157 +++++++-
 .../src/directive/decorator.rs                |  71 ++++
 .../oxc_angular_compiler/src/directive/mod.rs |   5 +-
 crates/oxc_angular_compiler/src/lib.rs        |  11 +-
 .../tests/component_resource_urls_test.rs     | 282 ++++++++++++++
 napi/angular-compiler/README.md               |  17 +-
 napi/angular-compiler/index.d.ts              |  24 +-
 napi/angular-compiler/src/lib.rs              | 115 +++---
 .../test/component-resources.test.ts          | 289 ++++++++++++++
 napi/angular-compiler/vite-plugin/index.ts    | 353 +++++++++++-------
 12 files changed, 1106 insertions(+), 283 deletions(-)
 create mode 100644 crates/oxc_angular_compiler/tests/component_resource_urls_test.rs
 create mode 100644 napi/angular-compiler/test/component-resources.test.ts

diff --git a/crates/oxc_angular_compiler/src/component/decorator.rs b/crates/oxc_angular_compiler/src/component/decorator.rs
index d4ceea707..10d54aa27 100644
--- a/crates/oxc_angular_compiler/src/component/decorator.rs
+++ b/crates/oxc_angular_compiler/src/component/decorator.rs
@@ -113,7 +113,7 @@ pub fn extract_component_metadata<'a>(
                     // for @Component.template field" in local mode,
                     // "template must be a string" otherwise) — pre-existing.
                     metadata.template =
-                        crate::directive::extract_string_value(allocator, &prop.value, consts);
+                        crate::directive::evaluate_string_value(allocator, &prop.value, consts);
                     // The text between the quotes or backticks.
                     metadata.template_span = match &prop.value {
                         Expression::StringLiteral(lit) => Some(lit.span),
@@ -125,8 +125,12 @@ pub fn extract_component_metadata<'a>(
                     .map(|span| Span::new(span.start + 1, span.end - 1));
                 }
                 "templateUrl" => {
+                    // Evaluated like ngtsc's `parseTemplateDeclaration`, so a
+                    // URL imported from another file resolves when the consts
+                    // carry the cross-file resolver. The resource extractor
+                    // (`extract_component_resource_urls`) reads it the same way.
                     metadata.template_url =
-                        crate::directive::extract_string_value(allocator, &prop.value, consts);
+                        crate::directive::evaluate_string_value(allocator, &prop.value, consts);
                 }
                 "styles" => {
                     // ngtsc's `reflectObjectLiteral` drops computed keys and
@@ -157,13 +161,17 @@ pub fn extract_component_metadata<'a>(
                     }
                 }
                 "styleUrls" | "styleUrl" => {
-                    if let Some(urls) = extract_string_array(allocator, &prop.value, consts) {
-                        metadata.style_urls = urls;
-                    } else if let Some(url) =
-                        crate::directive::extract_string_value(allocator, &prop.value, consts)
-                    {
-                        metadata.style_urls.push(url);
+                    // An array literal replaces the URLs read so far; any
+                    // other value adds to them.
+                    if matches!(prop.value, Expression::ArrayExpression(_)) {
+                        metadata.style_urls.clear();
                     }
+                    crate::directive::evaluate_style_urls(
+                        allocator,
+                        &prop.value,
+                        consts,
+                        &mut metadata.style_urls,
+                    );
                 }
                 "standalone" => {
                     // Only override the implicit value if an explicit boolean is provided
@@ -430,35 +438,6 @@ fn extract_boolean_value(expr: &Expression<'_>) -> Option<bool> {
         _ => None,
     }
 }
-/// Extract an array of strings from an expression.
-///
-/// `${...}` interpolations inside individual template-literal elements are
-/// folded against `consts` (e.g. `` styles: [`:host { color: ${COLOR}; }`] ``)
-/// to match Angular's partial evaluator. Identifier elements (`[STYLE_CONST]`)
-/// are likewise resolved.
-fn extract_string_array<'a>(
-    allocator: &'a Allocator,
-    expr: &Expression<'a>,
-    consts: &StringConsts<'a>,
-) -> Option<Vec<'a, Ident<'a>>> {
-    let Expression::ArrayExpression(arr) = expr else {
-        return None;
-    };
-
-    let mut result = Vec::new_in(&allocator);
-    for element in &arr.elements {
-        // ArrayExpressionElement variants that can hold a value expression all
-        // carry one — funnel them through `as_expression()` and let the shared
-        // resolver decide which shapes fold.
-        let Some(elem_expr) = element.as_expression() else { continue };
-        if let Some(value) = crate::directive::extract_string_value(allocator, elem_expr, consts) {
-            result.push(value);
-        }
-    }
-
-    Some(result)
-}
-
 /// Extract an array of identifiers (for imports).
 fn extract_identifier_array<'a>(
     allocator: &'a Allocator,
diff --git a/crates/oxc_angular_compiler/src/component/mod.rs b/crates/oxc_angular_compiler/src/component/mod.rs
index 4736641f7..88302f601 100644
--- a/crates/oxc_angular_compiler/src/component/mod.rs
+++ b/crates/oxc_angular_compiler/src/component/mod.rs
@@ -37,10 +37,10 @@ pub use metadata::{
 };
 pub use namespace_registry::NamespaceRegistry;
 pub use transform::{
-    CompiledComponent, HmrTemplateCompileOutput, HostMetadataInput, ImportInfo, ImportMap,
-    LinkerHostBindingOutput, LinkerTemplateOutput, ResolvedResources, TemplateCompileOutput,
-    TransformOptions, TransformResult, build_import_map, compile_component_template,
-    compile_for_hmr, compile_host_bindings_for_linker, compile_template_for_hmr,
-    compile_template_for_linker, compile_template_to_js, compile_template_to_js_with_options,
-    transform_angular_file,
+    CompiledComponent, ComponentResourceUrls, HmrTemplateCompileOutput, HostMetadataInput,
+    ImportInfo, ImportMap, LinkerHostBindingOutput, LinkerTemplateOutput, ResolvedResources,
+    TemplateCompileOutput, TransformOptions, TransformResult, build_import_map,
+    compile_component_template, compile_for_hmr, compile_host_bindings_for_linker,
+    compile_template_for_hmr, compile_template_for_linker, compile_template_to_js,
+    compile_template_to_js_with_options, extract_component_resource_urls, transform_angular_file,
 };
diff --git a/crates/oxc_angular_compiler/src/component/transform.rs b/crates/oxc_angular_compiler/src/component/transform.rs
index 8dcb2de6b..a6fd029a8 100644
--- a/crates/oxc_angular_compiler/src/component/transform.rs
+++ b/crates/oxc_angular_compiler/src/component/transform.rs
@@ -340,6 +340,18 @@ pub struct TransformResult {
     /// Compilation diagnostics (errors and warnings).
     pub diagnostics: Vec<OxcDiagnostic>,
 
+    /// Stylesheet `<link>`s in compiled templates (`<link rel="stylesheet"
+    /// href="...">`) whose `href` was not in the resolved styles, as written.
+    ///
+    /// ngtsc loads these like `styleUrls`, relative to the component file.
+    /// They are only known once the template is parsed, so a build tool
+    /// learns them here: it can read them, add them to
+    /// [`ResolvedResources::styles`] and transform again. Each entry also has
+    /// a COMPONENT_RESOURCE_NOT_FOUND error in `diagnostics` (one per
+    /// component that links it), and only resources that were passed are
+    /// checked.
+    pub missing_link_urls: Vec<String>,
+
     /// Number of components found in the file.
     pub component_count: usize,
 
@@ -414,6 +426,12 @@ pub struct HmrTemplateCompileOutput {
     /// These must be included in the HMR update module to avoid constant pool mismatches.
     pub styles: std::vec::Vec<String>,
 
+    /// The `href`s of the template's stylesheet `<link>`s, as written. The
+    /// full transform loads them like `styleUrls` (see
+    /// [`TransformResult::missing_link_urls`]); an HMR caller reads them the
+    /// same way and passes their contents with the component's other styles.
+    pub style_urls: std::vec::Vec<String>,
+
     /// The consts array as JavaScript code.
     /// This must be included in the HMR update module to match the template function's
     /// constant references. Without this, the template may reference indices that don't
@@ -3139,15 +3157,7 @@ pub fn transform_angular_file(
     #[cfg(feature = "cross_file_elision")]
     let cross_file_analyzer: Option<CrossFileAnalyzer> =
         if options.cross_file_elision || options.resolve_imported_values {
-            let file_path = std::path::Path::new(path);
-            let base_dir = options.base_dir.as_deref().or_else(|| file_path.parent());
-            base_dir.map(|base| {
-                CrossFileAnalyzer::new(
-                    base,
-                    options.tsconfig_path.as_deref(),
-                    options.resolve_imported_values,
-                )
-            })
+            new_cross_file_analyzer(path, options)
         } else {
             None
         };
@@ -3207,16 +3217,10 @@ pub fn transform_angular_file(
     // references (e.g. `host: { [ATTR_NAME]: '' }`) the same way the official
     // Angular compiler does. `resolve_imported_values` teaches the evaluator
     // to read imported bindings the way ngtsc's checker does.
-    #[allow(unused_mut)]
-    let mut string_consts = collect_string_consts(allocator, &parser_ret.program);
+    let string_consts = collect_string_consts(allocator, &parser_ret.program);
     #[cfg(feature = "cross_file_elision")]
-    if options.resolve_imported_values
-        && let Some(analyzer) = &cross_file_analyzer
-    {
-        string_consts = string_consts.with_resolver(std::rc::Rc::new(
-            analyzer.value_resolver(std::path::PathBuf::from(path)),
-        ));
-    }
+    let string_consts =
+        with_imported_values(string_consts, cross_file_analyzer.as_ref(), path, options);
 
     // ngtsc's source-file rules (validation/): initializer APIs used outside a
     // class member initializer (UNSUPPORTED_INITIALIZER_API_USAGE).
@@ -3616,6 +3620,9 @@ pub fn transform_angular_file(
                                     class_name, style_url
                                 )));
                             }
+                            result
+                                .missing_link_urls
+                                .extend(compilation_result.missing_link_urls.iter().cloned());
 
                             let component_id = format!("{}@{}", path, class_name);
 
@@ -4780,6 +4787,115 @@ struct FullCompilationResult {
     missing_link_urls: Vec<String>,
 }
 
+/// The analyzer behind both cross-file features (`cross_file_elision`'s
+/// type-only scan and `resolve_imported_values`), resolving modules from
+/// `path`'s directory (or `base_dir`) with `tsconfig_path`'s aliases.
+#[cfg(feature = "cross_file_elision")]
+fn new_cross_file_analyzer(path: &str, options: &TransformOptions) -> Option<CrossFileAnalyzer> {
+    let file_path = std::path::Path::new(path);
+    let base_dir = options.base_dir.as_deref().or_else(|| file_path.parent());
+    base_dir.map(|base| {
+        CrossFileAnalyzer::new(
+            base,
+            options.tsconfig_path.as_deref(),
+            options.resolve_imported_values,
+        )
+    })
+}
+
+/// `string_consts` with `analyzer`'s import value resolver attached when
+/// `resolve_imported_values` is on, so decorator metadata reads a binding
+/// imported from another file the way ngtsc's checker does.
+#[cfg(feature = "cross_file_elision")]
+fn with_imported_values<'a>(
+    string_consts: crate::directive::StringConsts<'a>,
+    analyzer: Option<&CrossFileAnalyzer>,
+    path: &str,
+    options: &TransformOptions,
+) -> crate::directive::StringConsts<'a> {
+    match analyzer {
+        Some(analyzer) if options.resolve_imported_values => string_consts.with_resolver(
+            std::rc::Rc::new(analyzer.value_resolver(std::path::PathBuf::from(path))),
+        ),
+        _ => string_consts,
+    }
+}
+
+/// The external resources the `@Component` classes of a file name.
+#[derive(Debug, Default)]
+pub struct ComponentResourceUrls {
+    /// Each component's `templateUrl`, as written.
+    pub template_urls: Vec<String>,
+    /// Each component's `styleUrl` / `styleUrls` entries, as written.
+    pub style_urls: Vec<String>,
+}
+
+/// The `templateUrl` and `styleUrl(s)` of every `@Component` class in a file:
+/// the files a build tool reads and passes to [`transform_angular_file`] as
+/// [`ResolvedResources`], keyed by these same strings.
+///
+/// The URLs are read exactly as the transform reads them — the same
+/// [`extract_component_metadata`] over the same consts, with the cross-file
+/// resolver attached under the same `options` (`resolve_imported_values`,
+/// `base_dir`, `tsconfig_path`) — so a URL the transform will look up is never
+/// one this skipped (an imported `const TEMPLATE_URL`, say). Stylesheet
+/// `<link>`s inside a template are only known once the template is parsed;
+/// the transform reports the ones it was not given in
+/// [`TransformResult::missing_link_urls`].
+pub fn extract_component_resource_urls(
+    allocator: &Allocator,
+    path: &str,
+    source: &str,
+    options: Option<&TransformOptions>,
+) -> ComponentResourceUrls {
+    let default_options = TransformOptions::default();
+    let options = options.unwrap_or(&default_options);
+
+    let source_type = SourceType::from_path(path).unwrap_or_default();
+    let parser_ret = Parser::new(allocator, source, source_type).parse();
+    let program = &parser_ret.program;
+
+    let import_map = build_import_map(allocator, &program.body, options.resolved_imports.as_ref());
+    #[cfg(feature = "cross_file_elision")]
+    let analyzer =
+        if options.resolve_imported_values { new_cross_file_analyzer(path, options) } else { None };
+    let string_consts = collect_string_consts(allocator, program);
+    #[cfg(feature = "cross_file_elision")]
+    let string_consts = with_imported_values(string_consts, analyzer.as_ref(), path, options);
+
+    let mut urls = ComponentResourceUrls::default();
+    for stmt in &program.body {
+        let class = match stmt {
+            Statement::ClassDeclaration(class) => class.as_ref(),
+            Statement::ExportDefaultDeclaration(export) => match &export.declaration {
+                ExportDefaultDeclarationKind::ClassDeclaration(class) => class.as_ref(),
+                _ => continue,
+            },
+            Statement::ExportDeclaration(export) => match &export.declaration {
+                Declaration::ClassDeclaration(class) => class.as_ref(),
+                _ => continue,
+            },
+            _ => continue,
+        };
+        // `standalone` does not change which URLs a component names.
+        let Some(metadata) = extract_component_metadata(
+            allocator,
+            class,
+            options.implicit_standalone(),
+            &import_map,
+            Some(source),
+            &string_consts,
+        ) else {
+            continue;
+        };
+        if let Some(template_url) = &metadata.template_url {
+            urls.template_urls.push(template_url.to_string());
+        }
+        urls.style_urls.extend(metadata.style_urls.iter().map(ToString::to_string));
+    }
+    urls
+}
+
 /// Compile a component template and generate ɵcmp/ɵfac definitions.
 ///
 /// The `pool_starting_index` parameter is used to ensure constant names don't conflict
@@ -5037,7 +5153,7 @@ fn compile_component_full<'a>(
     // below, like upstream.
     let mut missing_link_urls = Vec::new();
     let template_style_urls: Vec<String> =
-        r3_result.style_urls.iter().map(|url| url.to_string()).collect();
+        r3_result.style_urls.iter().map(ToString::to_string).collect();
     if let Some(resources) = resolved_resources {
         for style_url in &r3_result.style_urls {
             if let Some(style_contents) = resources.styles.get(style_url.as_str()) {
@@ -5937,6 +6053,8 @@ pub fn compile_template_for_hmr<'a>(
 
     // Extract styles from <style> tags in the template
     let styles: std::vec::Vec<String> = r3_result.styles.iter().map(|s| s.to_string()).collect();
+    let style_urls: std::vec::Vec<String> =
+        r3_result.style_urls.iter().map(ToString::to_string).collect();
 
     // Emit the consts array if present
     // The consts array must be included in HMR updates to ensure the template function's
@@ -6006,6 +6124,7 @@ pub fn compile_template_for_hmr<'a>(
         template_js,
         declarations_js,
         styles,
+        style_urls,
         consts_js,
         decls: job.root.decl_count.unwrap_or(0),
         vars: job.root.vars.unwrap_or(0),
diff --git a/crates/oxc_angular_compiler/src/directive/decorator.rs b/crates/oxc_angular_compiler/src/directive/decorator.rs
index 482884037..55dc1122d 100644
--- a/crates/oxc_angular_compiler/src/directive/decorator.rs
+++ b/crates/oxc_angular_compiler/src/directive/decorator.rs
@@ -715,6 +715,77 @@ pub(crate) fn extract_string_value<'a>(
     }
 }
 
+/// A string-valued resource field (`template`, `templateUrl`, a `styleUrl`),
+/// read the way ngtsc does: `evaluator.evaluate(expr)` must give a string.
+///
+/// The forms [`extract_string_value`] folds come first and give the same
+/// result as before. Anything else goes through the partial evaluator, which
+/// reads what ngtsc reads: `'a' + B`, a namespace member, and — when the
+/// consts carry an import value resolver (`resolve_imported_values`) — a
+/// `const` imported from another file. A value that is not a string, or
+/// holds a lone surrogate (which no file name or template text needs), stays
+/// unresolved.
+pub fn evaluate_string_value<'a>(
+    allocator: &'a Allocator,
+    expr: &'a Expression<'a>,
+    consts: &StringConsts<'a>,
+) -> Option<Ident<'a>> {
+    extract_string_value(allocator, expr, consts).or_else(|| {
+        match Evaluator::new(consts).evaluate(expr) {
+            Value::String(value) => string_ident(allocator, &value),
+            _ => None,
+        }
+    })
+}
+
+/// `styleUrls` (or a `styleUrl`), read like ngtsc's
+/// `extractStyleUrlsFromExpression`: an array literal is read entry by entry,
+/// with each spread (`...SHARED_URLS`) read the same way; any other
+/// expression is evaluated whole and may give one string or an array of them.
+///
+/// Where ngtsc reports an entry that is not a string, the entry is skipped,
+/// as [`extract_string_value`]'s callers always did.
+pub fn evaluate_style_urls<'a>(
+    allocator: &'a Allocator,
+    expr: &'a Expression<'a>,
+    consts: &StringConsts<'a>,
+    urls: &mut Vec<'a, Ident<'a>>,
+) {
+    if let Expression::ArrayExpression(array) = expr {
+        for element in &array.elements {
+            if let ArrayExpressionElement::SpreadElement(spread) = element {
+                evaluate_style_urls(allocator, &spread.argument, consts, urls);
+            } else if let Some(element) = element.as_expression()
+                && let Some(url) = evaluate_string_value(allocator, element, consts)
+            {
+                urls.push(url);
+            }
+        }
+        return;
+    }
+    if let Some(url) = extract_string_value(allocator, expr, consts) {
+        urls.push(url);
+        return;
+    }
+    match Evaluator::new(consts).evaluate(expr) {
+        Value::String(value) => urls.extend(string_ident(allocator, &value)),
+        Value::Array(entries) => {
+            for entry in entries {
+                if let Value::String(value) = entry {
+                    urls.extend(string_ident(allocator, &value));
+                }
+            }
+        }
+        _ => {}
+    }
+}
+
+/// An evaluated string as an arena [`Ident`], or `None` when it holds a lone
+/// surrogate (see [`evaluate_string_value`]).
+fn string_ident<'a>(allocator: &'a Allocator, value: &str) -> Option<Ident<'a>> {
+    (!has_lone_surrogate(value)).then(|| Ident::from(allocator.alloc_str(value)))
+}
+
 /// Extract a boolean value from an expression.
 fn extract_boolean_value(expr: &Expression<'_>) -> Option<bool> {
     match expr {
diff --git a/crates/oxc_angular_compiler/src/directive/mod.rs b/crates/oxc_angular_compiler/src/directive/mod.rs
index 7886d6030..b8065e5db 100644
--- a/crates/oxc_angular_compiler/src/directive/mod.rs
+++ b/crates/oxc_angular_compiler/src/directive/mod.rs
@@ -28,8 +28,9 @@ pub use compiler::{
 };
 pub(crate) use decorator::find_directive_decorator;
 pub(crate) use decorator::{
-    HostKey, angular_decorator_config, evaluate_host_metadata, evaluate_styles,
-    extract_string_value, resolve_template_literal, styles_error,
+    HostKey, angular_decorator_config, evaluate_host_metadata, evaluate_string_value,
+    evaluate_style_urls, evaluate_styles, extract_string_value, resolve_template_literal,
+    styles_error,
 };
 pub(crate) use decorator::{
     INPUT_API, InitializerApi, MODEL_API, OUTPUT_API, OUTPUT_FROM_OBSERVABLE_API, QUERY_APIS,
diff --git a/crates/oxc_angular_compiler/src/lib.rs b/crates/oxc_angular_compiler/src/lib.rs
index a08487263..eef79c2a6 100644
--- a/crates/oxc_angular_compiler/src/lib.rs
+++ b/crates/oxc_angular_compiler/src/lib.rs
@@ -64,11 +64,12 @@ pub use transform::{HtmlToR3Transform, html_to_r3::html_ast_to_r3_ast};
 // Re-export component module types for convenience
 pub use component::{
     AngularVersion, ChangeDetectionStrategy, CompiledComponent, ComponentMetadata,
-    HmrTemplateCompileOutput, HostMetadata, HostMetadataInput, ImportInfo, ImportMap,
-    NamespaceRegistry, Prerelease, ResolvedResources, TemplateCompileOutput, TransformOptions,
-    TransformResult, ViewEncapsulation, build_import_map, compile_component_template,
-    compile_for_hmr, compile_template_for_hmr, compile_template_to_js,
-    compile_template_to_js_with_options, extract_component_metadata, transform_angular_file,
+    ComponentResourceUrls, HmrTemplateCompileOutput, HostMetadata, HostMetadataInput, ImportInfo,
+    ImportMap, NamespaceRegistry, Prerelease, ResolvedResources, TemplateCompileOutput,
+    TransformOptions, TransformResult, ViewEncapsulation, build_import_map,
+    compile_component_template, compile_for_hmr, compile_template_for_hmr, compile_template_to_js,
+    compile_template_to_js_with_options, extract_component_metadata,
+    extract_component_resource_urls, transform_angular_file,
 };
 
 // Re-export cross-file elision types when feature is enabled
diff --git a/crates/oxc_angular_compiler/tests/component_resource_urls_test.rs b/crates/oxc_angular_compiler/tests/component_resource_urls_test.rs
new file mode 100644
index 000000000..91e6b8842
--- /dev/null
+++ b/crates/oxc_angular_compiler/tests/component_resource_urls_test.rs
@@ -0,0 +1,282 @@
+//! `extract_component_resource_urls` reads `templateUrl` / `styleUrl(s)` the
+//! way the transform does, and the transform reports the stylesheet `<link>`s
+//! of a template it was not given (`TransformResult::missing_link_urls`), so a
+//! build tool can hand the compiler every resource ngtsc would load.
+
+use oxc_allocator::Allocator;
+use oxc_angular_compiler::{
+    ComponentResourceUrls, ResolvedResources, TransformOptions, TransformResult,
+    compile_template_for_hmr, extract_component_resource_urls, transform_angular_file,
+};
+
+fn extract(path: &str, source: &str, options: &TransformOptions) -> ComponentResourceUrls {
+    let allocator = Allocator::default();
+    extract_component_resource_urls(&allocator, path, source, Some(options))
+}
+
+fn transform(
+    path: &str,
+    source: &str,
+    options: &TransformOptions,
+    resources: &ResolvedResources,
+) -> TransformResult {
+    let allocator = Allocator::default();
+    transform_angular_file(&allocator, path, source, Some(options), Some(resources))
+}
+
+fn resources(templates: &[(&str, &str)], styles: &[(&str, &str)]) -> ResolvedResources {
+    ResolvedResources {
+        templates: templates.iter().map(|&(k, v)| (k.to_owned(), v.to_owned())).collect(),
+        styles: styles.iter().map(|&(k, v)| (k.to_owned(), vec![v.to_owned()])).collect(),
+    }
+}
+
+fn error_messages(result: &TransformResult) -> String {
+    result.diagnostics.iter().map(ToString::to_string).collect::<Vec<_>>().join("\n")
+}
+
+fn compact(text: &str) -> String {
+    text.chars().filter(|c| !c.is_whitespace()).collect()
+}
+
+/// The `styles:[...]` of the `ɵɵdefineComponent` call, whitespace removed.
+fn defined_styles(code: &str) -> String {
+    let compact = compact(code);
+    let start = compact.find("styles:[").expect("styles in ɵcmp");
+    let end = compact[start..].find("\"]").map_or(compact.len(), |i| start + i + 2);
+    compact[start..end].to_string()
+}
+
+#[test]
+fn reads_literal_and_same_file_const_urls() {
+    let urls = extract(
+        "/app/a.component.ts",
+        r"
+import { Component } from '@angular/core';
+const DIR = './a';
+const URLS = [`${DIR}.component.css`, './shared.css'];
+@Component({ selector: 'a-cmp', templateUrl: `${DIR}.component.html`, styleUrls: URLS })
+export class A {}
+@Component({ selector: 'b-cmp', template: '', styleUrl: DIR + '.b.css' })
+export class B {}
+@Component({ selector: 'c-cmp', template: '', styleUrls: ['./c.css', ...URLS] })
+export class C {}
+",
+        &TransformOptions::default(),
+    );
+    assert_eq!(urls.template_urls, vec!["./a.component.html"]);
+    assert_eq!(
+        urls.style_urls,
+        vec![
+            "./a.component.css",
+            "./shared.css",
+            "./a.b.css",
+            "./c.css",
+            "./a.component.css",
+            "./shared.css",
+        ]
+    );
+}
+
+#[test]
+fn skips_values_that_are_not_strings() {
+    let urls = extract(
+        "/app/a.component.ts",
+        r"
+import { Component } from '@angular/core';
+declare const dynamic: string;
+@Component({ selector: 'a-cmp', templateUrl: dynamic, styleUrls: ['./a.css', 1, dynamic] })
+export class A {}
+",
+        &TransformOptions::default(),
+    );
+    assert_eq!(urls.template_urls, Vec::<String>::new());
+    assert_eq!(urls.style_urls, vec!["./a.css"]);
+}
+
+/// The transform looks the URLs up under the strings the extractor returns.
+#[test]
+fn transform_finds_the_resources_under_the_extracted_urls() {
+    let source = r"
+import { Component } from '@angular/core';
+const BASE = './a.component';
+@Component({ selector: 'a-cmp', templateUrl: BASE + '.html', styleUrls: [...[BASE + '.css']] })
+export class A {}
+";
+    let options = TransformOptions::default();
+    let urls = extract("/app/a.component.ts", source, &options);
+    assert_eq!(urls.template_urls, vec!["./a.component.html"]);
+    assert_eq!(urls.style_urls, vec!["./a.component.css"]);
+    let result = transform(
+        "/app/a.component.ts",
+        source,
+        &options,
+        &resources(
+            &[("./a.component.html", "<p>TEMPLATE_MARKER</p>")],
+            &[("./a.component.css", ".STYLE_MARKER { color: red; }")],
+        ),
+    );
+    assert!(!result.has_errors(), "{}", error_messages(&result));
+    assert!(result.code.contains("TEMPLATE_MARKER"), "{}", result.code);
+    assert!(result.code.contains("STYLE_MARKER"), "{}", result.code);
+}
+
+/// ngtsc loads a template's `<link rel="stylesheet">` like a `styleUrl`,
+/// relative to the component file, and compiles it after the `styleUrls`.
+#[test]
+fn reports_and_compiles_template_stylesheet_links() {
+    let source = r#"
+import { Component } from '@angular/core';
+@Component({
+  selector: 'a-cmp',
+  templateUrl: './sub/a.html',
+  styleUrl: './a.css',
+})
+export class A {}
+@Component({
+  selector: 'b-cmp',
+  template: '<link rel="stylesheet" href="./link.css"><link rel="stylesheet" href="https://example.com/x.css"><p>b</p>',
+})
+export class B {}
+"#;
+    let template = r#"<link rel="stylesheet" href="./link.css"><p>a</p>"#;
+    let options = TransformOptions::default();
+
+    let urls = extract("/app/a.component.ts", source, &options);
+    assert_eq!(urls.template_urls, vec!["./sub/a.html"]);
+    assert_eq!(urls.style_urls, vec!["./a.css"]);
+
+    // Without the link: one COMPONENT_RESOURCE_NOT_FOUND per component, and
+    // the hrefs, as written, in `missing_link_urls`. A URL with a scheme is not
+    // a stylesheet the compiler loads.
+    let without = resources(&[("./sub/a.html", template)], &[("./a.css", ".a { color: red; }")]);
+    let result = transform("/app/a.component.ts", source, &options, &without);
+    assert_eq!(result.missing_link_urls, vec!["./link.css", "./link.css"]);
+    assert_eq!(result.diagnostics.len(), 2, "{}", error_messages(&result));
+    assert!(error_messages(&result).contains("COMPONENT_RESOURCE_NOT_FOUND"));
+    assert!(result.dependencies.contains(&"./link.css".to_string()), "{:?}", result.dependencies);
+
+    // With it: compiled after the decorator's `styleUrl`, as ngtsc does.
+    let with = resources(
+        &[("./sub/a.html", template)],
+        &[("./a.css", ".a { color: red; }"), ("./link.css", ".link { color: blue; }")],
+    );
+    let result = transform("/app/a.component.ts", source, &options, &with);
+    assert!(!result.has_errors(), "{}", error_messages(&result));
+    assert_eq!(result.missing_link_urls, Vec::<String>::new());
+    let scope = "[_ngcontent-%COMP%]";
+    assert_eq!(
+        defined_styles(&result.code),
+        compact(&format!(
+            r#"styles: [".a{scope} {{ color: red; }}", ".link{scope} {{ color: blue; }}"]"#
+        ))
+    );
+    let b_start = result.code.find("type:B").or_else(|| result.code.find("type: B")).unwrap();
+    assert!(
+        defined_styles(&result.code[b_start..])
+            .contains(&compact(&format!(".link{scope} {{ color: blue; }}"))),
+        "{}",
+        result.code
+    );
+}
+
+/// No resources passed: the compiler cannot tell a missing link from one the
+/// caller never meant to load, so nothing is reported.
+#[test]
+fn links_are_not_reported_without_resources() {
+    let allocator = Allocator::default();
+    let result = transform_angular_file(
+        &allocator,
+        "/app/a.component.ts",
+        r#"
+import { Component } from '@angular/core';
+@Component({ selector: 'a-cmp', template: '<link rel="stylesheet" href="./link.css">' })
+export class A {}
+"#,
+        None,
+        None,
+    );
+    assert!(!result.has_errors(), "{}", error_messages(&result));
+    assert_eq!(result.missing_link_urls, Vec::<String>::new());
+}
+
+#[test]
+fn hmr_template_compile_lists_stylesheet_links() {
+    let allocator = Allocator::default();
+    let output = compile_template_for_hmr(
+        &allocator,
+        r#"<link rel="stylesheet" href="./a.css"><link rel="stylesheet" href="../b.css"><p>x</p>"#,
+        "A",
+        "/app/a.component.ts",
+        &TransformOptions::default(),
+    )
+    .expect("compiles");
+    assert_eq!(output.style_urls, vec!["./a.css", "../b.css"]);
+}
+
+#[cfg(feature = "cross_file_elision")]
+mod imported {
+    use super::*;
+    use tempfile::TempDir;
+
+    fn write(dir: &std::path::Path, name: &str, content: &str) -> String {
+        let path = dir.join(name);
+        std::fs::create_dir_all(path.parent().unwrap()).unwrap();
+        std::fs::write(&path, content).unwrap();
+        path.to_str().unwrap().to_string()
+    }
+
+    const SOURCE: &str = r"
+import { Component } from '@angular/core';
+import { TEMPLATE_URL, STYLE_URLS } from './urls';
+@Component({ selector: 'a-cmp', templateUrl: TEMPLATE_URL, styleUrls: STYLE_URLS })
+export class A {}
+";
+
+    fn setup() -> (TempDir, String) {
+        let dir = TempDir::new().unwrap();
+        write(
+            dir.path(),
+            "app/urls.ts",
+            "export const TEMPLATE_URL = './a.component.html';\n\
+             export const STYLE_URLS = ['./a.component.css'];\n",
+        );
+        let path = write(dir.path(), "app/a.component.ts", SOURCE);
+        (dir, path)
+    }
+
+    /// ngtsc evaluates `templateUrl` / `styleUrls` with the program-wide
+    /// checker, so a URL imported from another file loads.
+    #[test]
+    fn imported_urls_resolve_with_resolve_imported_values() {
+        let (_dir, path) = setup();
+        let options = TransformOptions { resolve_imported_values: true, ..Default::default() };
+
+        let urls = extract(&path, SOURCE, &options);
+        assert_eq!(urls.template_urls, vec!["./a.component.html"]);
+        assert_eq!(urls.style_urls, vec!["./a.component.css"]);
+
+        let result = transform(
+            &path,
+            SOURCE,
+            &options,
+            &resources(
+                &[("./a.component.html", "<p>IMPORTED_TEMPLATE</p>")],
+                &[("./a.component.css", ".IMPORTED_STYLE { color: red; }")],
+            ),
+        );
+        assert!(!result.has_errors(), "{}", error_messages(&result));
+        assert!(result.code.contains("IMPORTED_TEMPLATE"), "{}", result.code);
+        assert!(result.code.contains("IMPORTED_STYLE"), "{}", result.code);
+    }
+
+    /// Without the resolver the extractor and the transform agree that the
+    /// imported URLs are unknown.
+    #[test]
+    fn imported_urls_stay_unknown_without_the_resolver() {
+        let (_dir, path) = setup();
+        let urls = extract(&path, SOURCE, &TransformOptions::default());
+        assert_eq!(urls.template_urls, Vec::<String>::new());
+        assert_eq!(urls.style_urls, Vec::<String>::new());
+    }
+}
diff --git a/napi/angular-compiler/README.md b/napi/angular-compiler/README.md
index 47f730c53..5723c6225 100644
--- a/napi/angular-compiler/README.md
+++ b/napi/angular-compiler/README.md
@@ -42,11 +42,7 @@ export default defineConfig({
 ### Standalone Transformer
 
 ```typescript
-import {
-  transformAngularFile,
-  compileTemplateSync,
-  extractComponentUrlsSync,
-} from '@oxc-angular/vite'
+import { transformAngularFile, compileTemplateSync, extractComponentUrls } from '@oxc-angular/vite'
 
 // Transform an entire Angular file
 const result = await transformAngularFile(sourceCode, 'app.component.ts', {
@@ -94,11 +90,14 @@ transformAngularFile(
 #### Component Metadata Extraction
 
 ```typescript
-// Extract templateUrl and styleUrls
-extractComponentUrlsSync(
+// Extract templateUrl and styleUrls. Pass the options the file is transformed
+// with (`resolveImportedValues`, `baseDir`, `tsconfigPath`) so the URLs are
+// evaluated the same way, imported constants included.
+extractComponentUrls(
   source: string,
-  filename: string
-): ComponentUrls[]
+  filename: string,
+  options?: TransformOptions
+): Promise<ComponentUrls>
 ```
 
 #### Style Processing
diff --git a/napi/angular-compiler/index.d.ts b/napi/angular-compiler/index.d.ts
index 1a9461bc1..d2b6b2954 100644
--- a/napi/angular-compiler/index.d.ts
+++ b/napi/angular-compiler/index.d.ts
@@ -339,11 +339,13 @@ export declare function extractComponentMetadataSync(
  * Extract templateUrl and styleUrls from all @Component decorators in a file (async).
  *
  * This is the async version of `extractComponentUrlsSync`. Use this when
- * extracting URLs in a non-blocking context.
+ * extracting URLs in a non-blocking context. Pass the `TransformOptions` the
+ * file will be transformed with, so the URLs are read the same way.
  */
 export declare function extractComponentUrls(
   source: string,
   filename: string,
+  options?: TransformOptions | undefined | null,
 ): Promise<ComponentUrls>
 
 /** Extracted component metadata from a `@Component` decorator. */
@@ -572,6 +574,15 @@ export interface HmrCompileResult {
   componentId: string
   /** The compiled template function as JavaScript. */
   templateJs: string
+  /**
+   * The `href` of each stylesheet `<link>` in the template, as written.
+   *
+   * The full transform compiles their contents into the component's styles
+   * (after the decorator's `styleUrls`), so the caller reads them the same
+   * way and compiles again with them in `styles`. `styles` is never
+   * changed here: only the caller can read files.
+   */
+  templateStyleUrls: Array<string>
   /** Compilation errors. */
   errors: Array<OxcError>
 }
@@ -1032,6 +1043,17 @@ export interface TransformResult {
   errors: Array<OxcError>
   /** Compilation warnings. */
   warnings: Array<OxcError>
+  /**
+   * The `href` of each stylesheet `<link>` in a compiled template that was
+   * not in `resolvedResources.styles`, as written.
+   *
+   * ngtsc loads these like `styleUrls`, relative to the component file, but
+   * they are only known once the template is parsed. A build tool can read
+   * them, add them to `resolvedResources.styles` and transform again. Each
+   * one also has a COMPONENT_RESOURCE_NOT_FOUND entry in `errors` (one per
+   * component that links it).
+   */
+  missingLinkUrls: Array<string>
   /**
    * `.d.ts` type declarations for Angular classes.
    *
diff --git a/napi/angular-compiler/src/lib.rs b/napi/angular-compiler/src/lib.rs
index 3919271bc..4061857e4 100644
--- a/napi/angular-compiler/src/lib.rs
+++ b/napi/angular-compiler/src/lib.rs
@@ -398,6 +398,16 @@ pub struct TransformResult {
     /// Compilation warnings.
     pub warnings: Vec<OxcError>,
 
+    /// The `href` of each stylesheet `<link>` in a compiled template that was
+    /// not in `resolvedResources.styles`, as written.
+    ///
+    /// ngtsc loads these like `styleUrls`, relative to the component file, but
+    /// they are only known once the template is parsed. A build tool can read
+    /// them, add them to `resolvedResources.styles` and transform again. Each
+    /// one also has a COMPONENT_RESOURCE_NOT_FOUND entry in `errors` (one per
+    /// component that links it).
+    pub missing_link_urls: Vec<String>,
+
     /// `.d.ts` type declarations for Angular classes.
     ///
     /// Each entry contains the class name and the static member declarations
@@ -706,6 +716,7 @@ pub fn compile_for_hmr_sync(
                 hmr_module,
                 component_id,
                 template_js,
+                template_style_urls: output.style_urls,
                 // Non-fatal pipeline diagnostics (warnings, advice) — the
                 // update module was still generated. Errors come back through
                 // the `Err` arm instead.
@@ -716,6 +727,7 @@ pub fn compile_for_hmr_sync(
             hmr_module: String::new(),
             component_id,
             template_js: String::new(),
+            template_style_urls: Vec::new(),
             errors: OxcError::from_diagnostics(&file_path, &template, diagnostics),
         },
     }
@@ -734,6 +746,14 @@ pub struct HmrCompileResult {
     /// The compiled template function as JavaScript.
     pub template_js: String,
 
+    /// The `href` of each stylesheet `<link>` in the template, as written.
+    ///
+    /// The full transform compiles their contents into the component's styles
+    /// (after the decorator's `styleUrls`), so the caller reads them the same
+    /// way and compiles again with them in `styles`. `styles` is never
+    /// changed here: only the caller can read files.
+    pub template_style_urls: Vec<String>,
+
     /// Compilation errors.
     pub errors: Vec<OxcError>,
 }
@@ -894,84 +914,42 @@ pub struct ComponentUrls {
 
 /// Extract templateUrl and styleUrls from all @Component decorators in a file.
 ///
-/// This parses a TypeScript file and extracts URL references from all
-/// @Component decorators found in the file.
+/// This parses a TypeScript file and reads the URL references of every
+/// @Component decorator in it the way `transformAngularFile` reads them.
 ///
 /// # Arguments
 ///
 /// * `source` - The TypeScript source code
 /// * `filename` - The filename (used for source type detection)
+/// * `options` - The options the file will be transformed with. Only the
+///   decorator-evaluation ones matter (`resolveImportedValues`, `baseDir`,
+///   `tsconfigPath`, `resolvedImports`): with them, a URL held in a `const`
+///   imported from another file is found as the transform will look it up.
 ///
 /// # Returns
 ///
 /// A `ComponentUrls` containing all template and style URLs found.
-pub fn extract_component_urls_sync(source: String, filename: String) -> ComponentUrls {
-    use oxc_angular_compiler::{
-        build_import_map, collect_string_consts, extract_component_metadata,
-    };
-    use oxc_ast::ast::{Declaration, ExportDefaultDeclarationKind, Statement};
-    use oxc_parser::Parser;
-    use oxc_span::SourceType;
-
+pub fn extract_component_urls_sync(
+    source: String,
+    filename: String,
+    options: Option<TransformOptions>,
+) -> ComponentUrls {
     let allocator = Allocator::default();
-    let source_type = SourceType::from_path(&filename).unwrap_or_default();
-
-    let parser_ret = Parser::new(&allocator, &source, source_type).parse();
-    let program = &parser_ret.program;
-
-    // Build import map for component metadata extraction
-    let import_map = build_import_map(&allocator, &program.body, None);
-    let string_consts = collect_string_consts(&allocator, program);
-
-    let mut template_urls = Vec::new();
-    let mut style_urls = Vec::new();
-
-    // Walk statements looking for class declarations
-    for stmt in &program.body {
-        let class = match stmt {
-            Statement::ClassDeclaration(class) => Some(class.as_ref()),
-            Statement::ExportDefaultDeclaration(export) => match &export.declaration {
-                ExportDefaultDeclarationKind::ClassDeclaration(class) => Some(class.as_ref()),
-                _ => None,
-            },
-            Statement::ExportDeclaration(export) => match &export.declaration {
-                Declaration::ClassDeclaration(class) => Some(class.as_ref()),
-                _ => None,
-            },
-            _ => None,
-        };
-
-        if let Some(class) = class {
-            // Extract metadata from @Component decorator
-            // Use implicit_standalone=true (v19+ default) since it doesn't affect URL extraction
-            if let Some(metadata) = extract_component_metadata(
-                &allocator,
-                class,
-                true,
-                &import_map,
-                Some(&source),
-                &string_consts,
-            ) {
-                // Collect template URL
-                if let Some(template_url) = &metadata.template_url {
-                    template_urls.push(template_url.to_string());
-                }
-
-                // Collect style URLs
-                for url in &metadata.style_urls {
-                    style_urls.push(url.to_string());
-                }
-            }
-        }
-    }
-
-    ComponentUrls { template_urls, style_urls }
+    let rust_options: RustTransformOptions = options.unwrap_or_default().into();
+    let urls = oxc_angular_compiler::extract_component_resource_urls(
+        &allocator,
+        &filename,
+        &source,
+        Some(&rust_options),
+    );
+    ComponentUrls { template_urls: urls.template_urls, style_urls: urls.style_urls }
 }
 
 /// Async task for extracting component URLs.
 pub struct ExtractComponentUrlsTask {
     source: String,
     filename: String,
+    options: Option<TransformOptions>,
 }
 
 #[napi]
@@ -980,7 +958,11 @@ impl Task for ExtractComponentUrlsTask {
     type Output = ComponentUrls;
 
     fn compute(&mut self) -> napi::Result<Self::Output> {
-        Ok(extract_component_urls_sync(self.source.clone(), self.filename.clone()))
+        Ok(extract_component_urls_sync(
+            std::mem::take(&mut self.source),
+            std::mem::take(&mut self.filename),
+            self.options.take(),
+        ))
     }
 
     fn resolve(&mut self, _: napi::Env, result: Self::Output) -> napi::Result<Self::JsValue> {
@@ -991,13 +973,15 @@ impl Task for ExtractComponentUrlsTask {
 /// Extract templateUrl and styleUrls from all @Component decorators in a file (async).
 ///
 /// This is the async version of `extractComponentUrlsSync`. Use this when
-/// extracting URLs in a non-blocking context.
+/// extracting URLs in a non-blocking context. Pass the `TransformOptions` the
+/// file will be transformed with, so the URLs are read the same way.
 #[napi]
 pub fn extract_component_urls(
     source: String,
     filename: String,
+    options: Option<TransformOptions>,
 ) -> AsyncTask<ExtractComponentUrlsTask> {
-    AsyncTask::new(ExtractComponentUrlsTask { source, filename })
+    AsyncTask::new(ExtractComponentUrlsTask { source, filename, options })
 }
 
 /// Top-level declarations extracted from a TypeScript file for HMR.
@@ -1265,6 +1249,7 @@ impl Task for TransformAngularFileTask {
             component_decorators: result.component_decorators,
             errors,
             warnings: vec![],
+            missing_link_urls: result.missing_link_urls,
             dts_declarations: result
                 .dts_declarations
                 .into_iter()
diff --git a/napi/angular-compiler/test/component-resources.test.ts b/napi/angular-compiler/test/component-resources.test.ts
new file mode 100644
index 000000000..3e6771caf
--- /dev/null
+++ b/napi/angular-compiler/test/component-resources.test.ts
@@ -0,0 +1,289 @@
+/**
+ * Tests for how the plugin finds a component's external resources.
+ *
+ * - `extractComponentUrls` evaluates `templateUrl` / `styleUrl(s)` with the
+ *   options the file is transformed with, so a URL held in a `const` imported
+ *   from another file is read like ngtsc reads it.
+ * - A template's `<link rel="stylesheet" href="...">` is loaded like a
+ *   `styleUrl` (ngtsc inlines it into `styles`): the transform reports the
+ *   hrefs it was not given, the plugin reads and preprocesses them and
+ *   compiles again. Only hrefs that still cannot be read are reported as
+ *   COMPONENT_RESOURCE_NOT_FOUND. Link stylesheets are direct styles for HMR,
+ *   and the `@ng/component` update module carries them too.
+ */
+import { mkdirSync, mkdtempSync, realpathSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+
+import type { HmrContext, ModuleNode, Plugin } from 'vite'
+import { normalizePath, resolveConfig } from 'vite'
+import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { angular } from '../vite-plugin/index.js'
+
+const spies = vi.hoisted(() => ({
+  extractComponentUrls: undefined as unknown as ReturnType<typeof vi.fn>,
+}))
+
+vi.mock('#binding', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('#binding')>()
+  spies.extractComponentUrls = vi.fn(actual.extractComponentUrls)
+  return { ...actual, extractComponentUrls: spies.extractComponentUrls }
+})
+
+let tempDir: string
+let appDir: string
+
+beforeAll(() => {
+  tempDir = realpathSync(mkdtempSync(join(tmpdir(), 'component-resources-test-')))
+  appDir = join(tempDir, 'src', 'app')
+  mkdirSync(join(appDir, 'sub'), { recursive: true })
+})
+
+afterAll(() => {
+  rmSync(tempDir, { recursive: true, force: true })
+})
+
+beforeEach(() => {
+  spies.extractComponentUrls.mockClear()
+})
+
+function getAngularPlugin() {
+  const plugin = angular({ liveReload: true }).find(
+    (candidate) => candidate.name === '@oxc-angular/vite',
+  )
+  if (!plugin) throw new Error('Failed to find @oxc-angular/vite plugin')
+  return plugin
+}
+
+function createMockServer() {
+  return {
+    watcher: { add: vi.fn(), unwatch: vi.fn(), on: vi.fn(), emit: vi.fn() },
+    ws: { send: vi.fn(), on: vi.fn() },
+    moduleGraph: { getModuleById: vi.fn(() => null), invalidateModule: vi.fn() },
+    middlewares: { use: vi.fn() },
+    config: { root: tempDir },
+  }
+}
+
+async function callPluginHook(hook: any, ...args: unknown[]) {
+  if (!hook) return undefined
+  if (typeof hook === 'function') return hook(...args)
+  return hook.handler(...args)
+}
+
+async function setupPlugin(plugin: Plugin, command: 'serve' | 'build') {
+  const mockServer = createMockServer()
+  await callPluginHook(plugin.config, {}, { command, mode: 'development' })
+  const resolved = await resolveConfig(
+    { configFile: false, root: tempDir, logLevel: 'silent' },
+    command,
+  )
+  await callPluginHook(plugin.configResolved, resolved)
+  if (command === 'serve' && typeof plugin.configureServer === 'function') {
+    await (plugin.configureServer as Function)(mockServer)
+  }
+  return mockServer
+}
+
+async function transform(plugin: Plugin, source: string, path: string) {
+  if (!plugin.transform || typeof plugin.transform === 'function') {
+    throw new Error('Expected plugin transform handler')
+  }
+  const errors: string[] = []
+  const result = (await plugin.transform.handler.call(
+    {
+      error(message: string) {
+        errors.push(message)
+      },
+      warn() {},
+      addWatchFile() {},
+    } as any,
+    source,
+    path,
+  )) as { code: string } | undefined
+  return { code: result?.code ?? '', errors }
+}
+
+function hotUpdate(plugin: Plugin, file: string, server: any) {
+  const ctx = {
+    file: normalizePath(file),
+    timestamp: Date.now(),
+    modules: [{ id: normalizePath(file) }] as unknown as ModuleNode[],
+    read: async () => '',
+    server,
+  } as HmrContext
+  return (plugin.handleHotUpdate as Function).call(plugin, ctx)
+}
+
+async function requestUpdateModule(server: any, componentId: string): Promise<string> {
+  const middleware = (server.middlewares.use as ReturnType<typeof vi.fn>).mock.calls[0]?.[0]
+  expect(middleware, 'expected the @ng/component middleware').toBeDefined()
+  const req = { url: `/@ng/component?c=${encodeURIComponent(componentId)}&t=${Date.now()}` }
+  return new Promise<string>((resolve) => {
+    middleware(
+      req,
+      {
+        statusCode: 200,
+        setHeader() {},
+        end(data: string = '') {
+          resolve(data ?? '')
+        },
+      },
+      () => resolve(''),
+    )
+  })
+}
+
+/** Silences the plugin's "Failed to read" warnings for files a test leaves out. */
+async function withoutWarnings<T>(run: () => Promise<T>): Promise<T> {
+  const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+  try {
+    return await run()
+  } finally {
+    warn.mockRestore()
+  }
+}
+
+describe('resource URLs imported from another file', () => {
+  it('loads a templateUrl and styleUrls held in imported constants', async () => {
+    writeFileSync(
+      join(appDir, 'imported-urls.ts'),
+      `export const TEMPLATE_URL = './imported.component.html'\n` +
+        `export const STYLE_URLS = ['./imported.component.css']\n`,
+    )
+    writeFileSync(join(appDir, 'imported.component.html'), '<p>IMPORTED_TEMPLATE_MARKER</p>')
+    writeFileSync(join(appDir, 'imported.component.css'), '.IMPORTED_STYLE_MARKER { color: red; }')
+
+    const plugin = getAngularPlugin()
+    await setupPlugin(plugin, 'build')
+    const { code, errors } = await transform(
+      plugin,
+      `
+        import { Component } from '@angular/core';
+        import { TEMPLATE_URL, STYLE_URLS } from './imported-urls';
+        @Component({ selector: 'app-imported', templateUrl: TEMPLATE_URL, styleUrls: STYLE_URLS })
+        export class ImportedComponent {}
+      `,
+      join(appDir, 'imported.component.ts'),
+    )
+
+    expect(errors).toEqual([])
+    expect(code).toContain('IMPORTED_TEMPLATE_MARKER')
+    expect(code).toContain('IMPORTED_STYLE_MARKER')
+  })
+})
+
+describe('template stylesheet links', () => {
+  it('compiles a link in an external template, relative to the component file', async () => {
+    // The template lives in `sub/`; ngtsc resolves its links against the
+    // component file all the same.
+    writeFileSync(
+      join(appDir, 'sub', 'linked.component.html'),
+      '<link rel="stylesheet" href="./linked.css"><p>linked</p>',
+    )
+    writeFileSync(join(appDir, 'linked.css'), '.LINK_STYLE_MARKER { color: blue; }')
+    writeFileSync(join(appDir, 'sub', 'linked.css'), '.WRONG_LINK_MARKER { color: red; }')
+    writeFileSync(join(appDir, 'linked.component.css'), '.URL_STYLE_MARKER { color: red; }')
+
+    const plugin = getAngularPlugin()
+    await setupPlugin(plugin, 'build')
+    const { code, errors } = await transform(
+      plugin,
+      `
+        import { Component } from '@angular/core';
+        @Component({
+          selector: 'app-linked',
+          templateUrl: './sub/linked.component.html',
+          styleUrl: './linked.component.css',
+        })
+        export class LinkedComponent {}
+      `,
+      join(appDir, 'linked.component.ts'),
+    )
+
+    expect(errors).toEqual([])
+    expect(code).not.toContain('WRONG_LINK_MARKER')
+    // After the decorator's styleUrl, like ngtsc.
+    expect(code).toMatch(/URL_STYLE_MARKER[^\]]*LINK_STYLE_MARKER/)
+  })
+
+  it('compiles a link in an inline template without parsing for resource URLs', async () => {
+    writeFileSync(join(appDir, 'inline-link.css'), '.INLINE_LINK_MARKER { color: blue; }')
+
+    const plugin = getAngularPlugin()
+    await setupPlugin(plugin, 'build')
+    const { code, errors } = await transform(
+      plugin,
+      `
+        import { Component } from '@angular/core';
+        @Component({
+          selector: 'app-inline-link',
+          template: '<link rel="stylesheet" href="./inline-link.css"><p>inline</p>',
+        })
+        export class InlineLinkComponent {}
+      `,
+      join(appDir, 'inline-link.component.ts'),
+    )
+
+    expect(errors).toEqual([])
+    expect(code).toContain('INLINE_LINK_MARKER')
+    // The link comes from the compiled template, not from the URL parse.
+    expect(spies.extractComponentUrls).not.toHaveBeenCalled()
+  })
+
+  it('reports only the links that still cannot be read', async () => {
+    writeFileSync(join(appDir, 'present-link.css'), '.PRESENT_LINK_MARKER { color: blue; }')
+
+    const plugin = getAngularPlugin()
+    await setupPlugin(plugin, 'build')
+    const { errors } = await withoutWarnings(() =>
+      transform(
+        plugin,
+        `
+          import { Component } from '@angular/core';
+          @Component({
+            selector: 'app-missing-link',
+            template:
+              '<link rel="stylesheet" href="./present-link.css">' +
+              '<link rel="stylesheet" href="./absent-link.css">',
+          })
+          export class MissingLinkComponent {}
+        `,
+        join(appDir, 'missing-link.component.ts'),
+      ),
+    )
+
+    expect(errors).toHaveLength(1)
+    expect(errors[0]).toContain('./absent-link.css')
+    expect(errors[0]).toContain('COMPONENT_RESOURCE_NOT_FOUND')
+  })
+
+  it('hot-updates the component when a linked stylesheet changes', async () => {
+    const stylePath = join(appDir, 'hmr-link.css')
+    const componentPath = join(appDir, 'hmr-link.component.ts')
+    const source = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-hmr-link',
+        template: '<link rel="stylesheet" href="./hmr-link.css"><h1>Hello</h1>',
+      })
+      export class HmrLinkComponent {}
+    `
+    writeFileSync(stylePath, 'h1 { color: red; }')
+    writeFileSync(componentPath, source)
+
+    const plugin = getAngularPlugin()
+    const server = await setupPlugin(plugin, 'serve')
+    const { errors } = await transform(plugin, source, componentPath)
+    expect(errors).toEqual([])
+    expect(server.watcher.add).toHaveBeenCalledWith(stylePath)
+
+    writeFileSync(stylePath, 'h1 { color: green; }')
+    await hotUpdate(plugin, stylePath, server)
+    const body = await requestUpdateModule(server, `${componentPath}@HmrLinkComponent`)
+
+    expect(body).toContain('color: green')
+    expect(body).not.toContain('color: red')
+  })
+})
diff --git a/napi/angular-compiler/vite-plugin/index.ts b/napi/angular-compiler/vite-plugin/index.ts
index ca663fbd9..a15dec215 100644
--- a/napi/angular-compiler/vite-plugin/index.ts
+++ b/napi/angular-compiler/vite-plugin/index.ts
@@ -154,6 +154,19 @@ const ANGULAR_TS_REGEX = /\.tsx?$/
 const TEMPLATE_REGEX = /\.html?$/
 const ANGULAR_COMPONENT_PREFIX = '@ng/component'
 
+/**
+ * `ResolvedResources` as the plugin builds it: NAPI-RS binds its `HashMap`s
+ * to plain objects at runtime, despite the `Map` type in index.d.ts.
+ */
+interface PlainResources {
+  templates: Record<string, string>
+  styles: Record<string, string[]>
+}
+
+function plainResources(resources: ResolvedResources): PlainResources {
+  return resources as unknown as PlainResources
+}
+
 /**
  * The text to report for a compiler diagnostic. Rollup shows only this string, so the
  * help text is appended to it: for a template parse error that is where the error is
@@ -490,18 +503,20 @@ export function angular(options: PluginOptions = {}): Plugin[] {
 
   /**
    * Resolve external template/style URLs and read their contents.
+   *
+   * `transformOptions` are the ones the file is transformed with, so the URLs
+   * are read as the transform will look them up (a `templateUrl` held in a
+   * `const` imported from another file, say).
    */
   async function resolveResources(
     code: string,
     id: string,
+    transformOptions: TransformOptions,
   ): Promise<{ resources: ResolvedResources; dependencies: string[] }> {
-    const { templateUrls, styleUrls } = await extractComponentUrls(code, id)
+    const { templateUrls, styleUrls } = await extractComponentUrls(code, id, transformOptions)
     const dir = dirname(id)
-    const dependencies: string[] = []
-
-    // NAPI-RS expects plain objects for HashMap, not JavaScript Maps
-    const templates: Record<string, string> = {}
-    const styles: Record<string, string[]> = {}
+    const { resources, dependencies } = emptyResources()
+    const { templates, styles } = plainResources(resources)
 
     // Resolve templates
     for (const templateUrl of templateUrls) {
@@ -530,49 +545,65 @@ export function angular(options: PluginOptions = {}): Plugin[] {
 
     // Resolve styles
     for (const styleUrl of styleUrls) {
-      const stylePath = resolve(dir, styleUrl)
-      const normalizedStylePath = normalizePath(stylePath)
-      // Register as a direct style regardless of preprocessing outcome, so the
-      // HMR refresh still runs for styles that initially failed to compile.
-      directStyleUrls.add(normalizedStylePath)
-      dependencies.push(stylePath)
-
-      let content = resourceCache.get(normalizedStylePath)
-      if (!content) {
-        try {
-          content = await readFile(stylePath, 'utf-8')
-          // Preprocess styles (SCSS, Less, etc.)
-          if (resolvedConfig) {
-            try {
-              const processed = await compileStyle(stylePath, content)
-              content = processed.code
-              registerStyleDeps(stylePath, processed.deps)
-            } catch (e) {
-              console.warn(`Failed to preprocess style: ${stylePath}`, e)
-            }
+      await resolveStyle(dir, styleUrl, styles, dependencies)
+    }
+
+    return { resources, dependencies }
+  }
+
+  /**
+   * Read and preprocess one component stylesheet into `styles[styleUrl]`,
+   * resolving `styleUrl` against `dir` (the component file's directory).
+   * Serves decorator `styleUrl(s)` and template stylesheet `<link>`s alike:
+   * both are direct styles of the component, for the cache, the watcher and
+   * HMR. Returns whether the stylesheet could be read.
+   */
+  async function resolveStyle(
+    dir: string,
+    styleUrl: string,
+    styles: Record<string, string[]>,
+    dependencies: string[],
+  ): Promise<boolean> {
+    const stylePath = resolve(dir, styleUrl)
+    const normalizedStylePath = normalizePath(stylePath)
+    // Register as a direct style regardless of preprocessing outcome, so the
+    // HMR refresh still runs for styles that initially failed to compile.
+    directStyleUrls.add(normalizedStylePath)
+    dependencies.push(stylePath)
+
+    let content = resourceCache.get(normalizedStylePath)
+    if (!content) {
+      try {
+        content = await readFile(stylePath, 'utf-8')
+        // Preprocess styles (SCSS, Less, etc.)
+        if (resolvedConfig) {
+          try {
+            const processed = await compileStyle(stylePath, content)
+            content = processed.code
+            registerStyleDeps(stylePath, processed.deps)
+          } catch (e) {
+            console.warn(`Failed to preprocess style: ${stylePath}`, e)
           }
-          resourceCache.set(normalizedStylePath, content)
-        } catch {
-          console.warn(`Failed to read style: ${stylePath}`)
-          continue
         }
+        resourceCache.set(normalizedStylePath, content)
+      } catch {
+        console.warn(`Failed to read style: ${stylePath}`)
+        return false
       }
+    }
 
-      // Watch each transitive dep (it may resolve outside the dev-server
-      // root, e.g. a shared monorepo package), but never register it in
-      // `resourceToComponent`: that map is single-owner per resource, and a
-      // transitive dep would clobber the direct styleUrl/templateUrl mapping
-      // of another component.
-      for (const dep of styleDepsCache.get(normalizedStylePath) ?? []) {
-        if (dep === normalizedStylePath) continue
-        if (watchMode && viteServer) viteServer.watcher?.add?.(dep)
-      }
-
-      styles[styleUrl] = [content]
+    // Watch each transitive dep (it may resolve outside the dev-server
+    // root, e.g. a shared monorepo package), but never register it in
+    // `resourceToComponent`: that map is single-owner per resource, and a
+    // transitive dep would clobber the direct styleUrl/templateUrl mapping
+    // of another component.
+    for (const dep of styleDepsCache.get(normalizedStylePath) ?? []) {
+      if (dep === normalizedStylePath) continue
+      if (watchMode && viteServer) viteServer.watcher?.add?.(dep)
     }
 
-    // Note: NAPI-RS HashMap binds to plain objects at runtime, despite Map type in index.d.ts
-    return { resources: { templates, styles } as unknown as ResolvedResources, dependencies }
+    styles[styleUrl] = [content]
+    return true
   }
 
   /**
@@ -580,10 +611,8 @@ export function angular(options: PluginOptions = {}): Plugin[] {
    * stylesheet.
    */
   function emptyResources(): { resources: ResolvedResources; dependencies: string[] } {
-    return {
-      resources: { templates: {}, styles: {} } as unknown as ResolvedResources,
-      dependencies: [],
-    }
+    const plain: PlainResources = { templates: {}, styles: {} }
+    return { resources: plain as unknown as ResolvedResources, dependencies: [] }
   }
 
   /**
@@ -829,97 +858,110 @@ export function angular(options: PluginOptions = {}): Plugin[] {
                 // point.
                 //
                 // Inline `styles` first, then the resolved `styleUrl(s)`
-                // content appended — the order `resolve_styles` produces in
-                // the compiler, which pushes resolved content onto the
-                // decorator's own `styles`. Whitespace-only entries are
-                // dropped to match Angular's `style.trim().length > 0`.
-                const external =
-                  classMetadata.styleUrls.length > 0
-                    ? await readStyles(classMetadata.styleUrls)
-                    : { contents: [] as string[], complete: true }
-                const merged = [...classMetadata.styles, ...external.contents].filter(
-                  (style) => style.trim().length > 0,
-                )
-                // `complete` guards exactly ONE thing: turning an unknown
-                // answer into a definitive `[]` that wipes live CSS. It is
-                // not a reason to throw away content that WAS read. A
-                // stylesheet that failed while a sibling succeeded is a
-                // PARTIAL update — which is what main always delivered,
-                // because the old `readStyles` swallowed failures in a
-                // `catch` and returned whatever it got. Dropping it would
-                // silently lose every edit to the healthy sibling of a
-                // permanently unreadable stylesheet, and the pending slot is
-                // consumed either way, so nothing retries.
-                //
-                // So: a complete read is definitive and may clear; an
-                // incomplete one falls back to main's rule exactly — send
-                // what was read when it is non-empty, and never send `[]`.
-                //
-                // `complete` speaks only about the filesystem. One more
-                // thing has to hold before an empty answer may CLEAR, and it
-                // is about the SOURCE: this endpoint re-parses `resolvedId`
-                // from disk, while the component was compiled from the `code`
-                // Vite handed `transform`. Those differ whenever another
-                // plugin's `load` / pre-`transform` rewrote the module, or
-                // `fileReplacements` pointed `actualId` at a different file.
-                //
-                // On a disk source the compiler never saw, every `styles`
-                // shape the extractor cannot evaluate (an imported constant,
-                // a call to an imported function) resolves to nothing. Read
-                // as definitive that emits `styles: []` and wipes CSS the
-                // running component genuinely has, from a template edit that
-                // never touched the styles at all.
-                //
-                // `componentMetadataCache` already holds the transform-time
-                // source with the `template:` / `styles:` field VALUES
-                // blanked, and blanking only ever empties a DELIMITED range —
-                // so an expression the strip cannot open survives verbatim
-                // and the two stripped forms disagree exactly when the two
-                // sources disagree outside those fields. Matching strips is
-                // the evidence that the styles read here are the styles the
-                // component compiled with.
-                //
-                // This gates the destructive answer ONLY. Content that WAS
-                // read is still served on a mismatch — no worse than main,
-                // which scanned the same disk source.
-                const compiledFromThisSource = () => {
-                  const cachedStripped = componentMetadataCache.get(fileId)
-                  // `componentDecoratorsByFile` is keyed by the transform id
-                  // like the other per-file maps — `resolvedId` would miss on
-                  // Windows and strip nothing, failing the comparison forever.
-                  return (
-                    cachedStripped !== undefined &&
-                    cachedStripped ===
-                      stripComponentMetadata(source, componentDecoratorsByFile.get(fileId))
+                // content appended, then the template's stylesheet `<link>`s
+                // — the order the compiler produces, which pushes resolved
+                // content onto the decorator's own `styles`. Whitespace-only
+                // entries are dropped to match Angular's
+                // `style.trim().length > 0`.
+                const stylesFor = async (urls: string[]): Promise<string[] | null> => {
+                  const external =
+                    urls.length > 0
+                      ? await readStyles(urls)
+                      : { contents: [] as string[], complete: true }
+                  const merged = [...classMetadata.styles, ...external.contents].filter(
+                    (style) => style.trim().length > 0,
                   )
-                }
-                // `stylesResolved` comes first, ahead of "serve what was
-                // read": the extractor here evaluates `styles` without the
-                // `resolveImportedValues` the transform runs with, so a
-                // component whose styles live in another file extracts
-                // `styles: []` — an UNKNOWN answer, not an empty one. Serving
-                // it as definitive would wipe live CSS that the transform
-                // compiled from the import, and serving `merged` when it is
-                // non-empty is no better: it holds only the styleUrls
-                // content, so the imported inline styles are dropped either
-                // way. An unknown `styles` field makes the merged array
-                // itself unrepresentable, so the answer is `null`.
-                const styles: string[] | null =
-                  classMetadata.stylesResolved &&
-                  (merged.length > 0 || (external.complete && compiledFromThisSource()))
+                  // `complete` guards exactly ONE thing: turning an unknown
+                  // answer into a definitive `[]` that wipes live CSS. It is
+                  // not a reason to throw away content that WAS read. A
+                  // stylesheet that failed while a sibling succeeded is a
+                  // PARTIAL update — which is what main always delivered,
+                  // because the old `readStyles` swallowed failures in a
+                  // `catch` and returned whatever it got. Dropping it would
+                  // silently lose every edit to the healthy sibling of a
+                  // permanently unreadable stylesheet, and the pending slot is
+                  // consumed either way, so nothing retries.
+                  //
+                  // So: a complete read is definitive and may clear; an
+                  // incomplete one falls back to main's rule exactly — send
+                  // what was read when it is non-empty, and never send `[]`.
+                  //
+                  // `complete` speaks only about the filesystem. One more
+                  // thing has to hold before an empty answer may CLEAR, and it
+                  // is about the SOURCE: this endpoint re-parses `resolvedId`
+                  // from disk, while the component was compiled from the `code`
+                  // Vite handed `transform`. Those differ whenever another
+                  // plugin's `load` / pre-`transform` rewrote the module, or
+                  // `fileReplacements` pointed `actualId` at a different file.
+                  //
+                  // On a disk source the compiler never saw, every `styles`
+                  // shape the extractor cannot evaluate (an imported constant,
+                  // a call to an imported function) resolves to nothing. Read
+                  // as definitive that emits `styles: []` and wipes CSS the
+                  // running component genuinely has, from a template edit that
+                  // never touched the styles at all.
+                  //
+                  // `componentMetadataCache` already holds the transform-time
+                  // source with the `template:` / `styles:` field VALUES
+                  // blanked, and blanking only ever empties a DELIMITED range —
+                  // so an expression the strip cannot open survives verbatim
+                  // and the two stripped forms disagree exactly when the two
+                  // sources disagree outside those fields. Matching strips is
+                  // the evidence that the styles read here are the styles the
+                  // component compiled with.
+                  //
+                  // This gates the destructive answer ONLY. Content that WAS
+                  // read is still served on a mismatch — no worse than main,
+                  // which scanned the same disk source.
+                  const compiledFromThisSource = () => {
+                    const cachedStripped = componentMetadataCache.get(fileId)
+                    // `componentDecoratorsByFile` is keyed by the transform id
+                    // like the other per-file maps — `resolvedId` would miss on
+                    // Windows and strip nothing, failing the comparison forever.
+                    return (
+                      cachedStripped !== undefined &&
+                      cachedStripped ===
+                        stripComponentMetadata(source, componentDecoratorsByFile.get(fileId))
+                    )
+                  }
+                  // `stylesResolved` comes first, ahead of "serve what was
+                  // read": the extractor here evaluates `styles` without the
+                  // `resolveImportedValues` the transform runs with, so a
+                  // component whose styles live in another file extracts
+                  // `styles: []` — an UNKNOWN answer, not an empty one. Serving
+                  // it as definitive would wipe live CSS that the transform
+                  // compiled from the import, and serving `merged` when it is
+                  // non-empty is no better: it holds only the styleUrls
+                  // content, so the imported inline styles are dropped either
+                  // way. An unknown `styles` field makes the merged array
+                  // itself unrepresentable, so the answer is `null`.
+                  return classMetadata.stylesResolved &&
+                    (merged.length > 0 || (external.complete && compiledFromThisSource()))
                     ? merged
                     : null
+                }
 
                 // Same template options as the full transform, which reads
                 // `preserveWhitespaces` from the decorator: without it the
                 // update module strips whitespace the compiled component
                 // keeps, and text nodes shift after every HMR.
-                const result = compileForHmrSync(templateContent, className, resolvedId, styles, {
-                  angularVersion: pluginOptions.angularVersion,
-                  encapsulation: classMetadata.encapsulation,
-                  preserveWhitespaces: classMetadata.preserveWhitespaces,
-                  minifyComponentStyles: getMinifyComponentStyles(),
-                })
+                const compile = (styles: string[] | null) =>
+                  compileForHmrSync(templateContent, className, resolvedId, styles, {
+                    angularVersion: pluginOptions.angularVersion,
+                    encapsulation: classMetadata.encapsulation,
+                    preserveWhitespaces: classMetadata.preserveWhitespaces,
+                    minifyComponentStyles: getMinifyComponentStyles(),
+                  })
+                let result = compile(await stylesFor(classMetadata.styleUrls))
+                // The template's stylesheet `<link>`s are only known once it
+                // is parsed. The full transform compiles them like
+                // `styleUrls` (relative to the component file), so read them
+                // the same way and compile again with them.
+                if (result.templateStyleUrls.length > 0) {
+                  result = compile(
+                    await stylesFor([...classMetadata.styleUrls, ...result.templateStyleUrls]),
+                  )
+                }
 
                 // A failed compile must not be served as an (empty) update
                 // module — that would call `ɵɵreplaceMetadata` with no
@@ -1035,9 +1077,6 @@ export function angular(options: PluginOptions = {}): Plugin[] {
           // retry after the transform covers the rare file that does.
           const mayHaveResourceUrls =
             !pluginOptions.jit && (code.includes('templateUrl') || code.includes('styleUrl'))
-          let { resources, dependencies } = mayHaveResourceUrls
-            ? await resolveResources(code, actualId)
-            : emptyResources()
 
           // Disable HMR for SSR transforms. SSR bundles must not contain HMR
           // initialization code that dynamically imports @ng/component virtual
@@ -1046,7 +1085,8 @@ export function angular(options: PluginOptions = {}): Plugin[] {
           // bundles (see @angular/build application-code-bundle.js).
           const isSSR = !!options?.ssr
 
-          // Transform with Rust compiler
+          // Transform with Rust compiler. `extractComponentUrls` takes the same
+          // options, so it evaluates the URLs exactly as the transform does.
           const transformOptions: TransformOptions = {
             sourcemap: pluginOptions.sourceMap,
             jit: pluginOptions.jit,
@@ -1056,13 +1096,18 @@ export function angular(options: PluginOptions = {}): Plugin[] {
             emitClassMetadata: pluginOptions.emitClassMetadata,
             compilationMode: pluginOptions.compilationMode,
             // Evaluate decorator metadata imported from other files the way
-            // ngtsc's program-wide checker does (`inputs: INPUTS`, `@Input(OPTS)`).
-            // Read files land in `result.dependencies`, tracked below.
+            // ngtsc's program-wide checker does (`inputs: INPUTS`, `@Input(OPTS)`,
+            // `templateUrl: TEMPLATE_URL`). Read files land in
+            // `result.dependencies`, tracked below.
             resolveImportedValues: true,
             baseDir: dirname(actualId),
             tsconfigPath: pluginOptions.tsconfig,
           }
 
+          let { resources, dependencies } = mayHaveResourceUrls
+            ? await resolveResources(code, actualId, transformOptions)
+            : emptyResources()
+
           let result = await transformAngularFile(code, actualId, transformOptions, resources)
 
           // The compiler reads a key the way the parser does, so a component
@@ -1073,12 +1118,42 @@ export function angular(options: PluginOptions = {}): Plugin[] {
           // path therefore reruns the file through the full resolution, which
           // makes the fast path give exactly the old result: with no URL in
           // the file, `resolveResources` would have passed these same empty
-          // resources.
-          if (!pluginOptions.jit && !mayHaveResourceUrls && result.errors.length > 0) {
-            ;({ resources, dependencies } = await resolveResources(code, actualId))
+          // resources. Missing template `<link>`s (one error each) are left
+          // to the step below: the URL extraction cannot find them.
+          if (
+            !pluginOptions.jit &&
+            !mayHaveResourceUrls &&
+            result.errors.length > result.missingLinkUrls.length
+          ) {
+            ;({ resources, dependencies } = await resolveResources(
+              code,
+              actualId,
+              transformOptions,
+            ))
             result = await transformAngularFile(code, actualId, transformOptions, resources)
           }
 
+          // A template's `<link rel="stylesheet" href="...">` is one more
+          // stylesheet of the component: ngtsc loads it like a `styleUrl`,
+          // relative to the component file, and compiles it into `styles`.
+          // Only the transform parses the template, so it reports the hrefs
+          // it was not given; they are read and preprocessed like `styleUrls`
+          // (and are direct styles for HMR), and the file is compiled once
+          // more. Hrefs that still cannot be read stay
+          // COMPONENT_RESOURCE_NOT_FOUND.
+          if (!pluginOptions.jit && result.missingLinkUrls.length > 0) {
+            const { styles } = plainResources(resources)
+            let resolvedAny = false
+            for (const linkUrl of new Set(result.missingLinkUrls)) {
+              if (await resolveStyle(dirname(actualId), linkUrl, styles, dependencies)) {
+                resolvedAny = true
+              }
+            }
+            if (resolvedAny) {
+              result = await transformAngularFile(code, actualId, transformOptions, resources)
+            }
+          }
+
           // Resource deps (templates/styles) plus files the compiler read to
           // resolve imported decorator-metadata values (`result.dependencies`).
           // Those `import` statements are often elided from the emitted JS —

From b25dc37a56ab9dc7644bc737af62fce3bc59b7a6 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 18:45:09 +0800
Subject: [PATCH 36/54] fix(defer): emit the idle trigger timeout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`@defer (on idle(100ms))`, `prefetch on idle(...)` and `hydrate on
idle(...)` parsed the timeout but ingest dropped it, so Oxc emitted
`ɵɵdeferOnIdle()` where ngtsc 22 emits `ɵɵdeferOnIdle(100)`. Ingest now
passes R3IdleDeferredTrigger.timeout through the DeferOn op and reify adds
it as the argument, like Angular's ingestDeferTriggers + reify.

The timeout is a v22 feature: before that Angular's createIdleTrigger
rejects any parameter with `"idle" trigger cannot have parameters`, so the
trigger parser now does the same when an older Angular version is set.

Adds the defer/defer-on-idle-timeout compare fixture.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 crates/oxc_angular_compiler/src/ir/ops.rs     |  2 +-
 .../src/pipeline/ingest.rs                    |  3 +-
 .../pipeline/phases/reify/statements/defer.rs |  7 ++--
 .../src/transform/control_flow.rs             | 39 +++++++++++++------
 .../src/transform/html_to_r3.rs               |  4 +-
 .../tests/integration_test.rs                 | 37 ++++++++++++++++++
 .../defer/defer-with-triggers.fixture.ts      | 25 ++++++++++++
 7 files changed, 100 insertions(+), 17 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/ir/ops.rs b/crates/oxc_angular_compiler/src/ir/ops.rs
index 2d448095f..ba0ad6a4d 100644
--- a/crates/oxc_angular_compiler/src/ir/ops.rs
+++ b/crates/oxc_angular_compiler/src/ir/ops.rs
@@ -1085,7 +1085,7 @@ pub struct DeferOnOp<'a> {
     pub target_slot_view_steps: Option<i32>,
     /// Target name for local ref targeting.
     pub target_name: Option<Ident<'a>>,
-    /// Timer delay.
+    /// Timer delay, or the optional idle timeout.
     pub delay: Option<f64>,
     /// Viewport options (for viewport trigger).
     pub options: Option<Box<'a, IrExpression<'a>>>,
diff --git a/crates/oxc_angular_compiler/src/pipeline/ingest.rs b/crates/oxc_angular_compiler/src/pipeline/ingest.rs
index 2304a4545..780d1d8f5 100644
--- a/crates/oxc_angular_compiler/src/pipeline/ingest.rs
+++ b/crates/oxc_angular_compiler/src/pipeline/ingest.rs
@@ -3484,7 +3484,8 @@ fn ingest_defer_triggers<'a>(
             target_slot: None,
             target_slot_view_steps: None,
             target_name: None,
-            delay: None,
+            // The optional `idle(<time>)` timeout (Angular's `trigger.timeout`).
+            delay: idle_trigger.timeout,
             options: None,
         });
         if let Some(view) = job.view_mut(view_xref) {
diff --git a/crates/oxc_angular_compiler/src/pipeline/phases/reify/statements/defer.rs b/crates/oxc_angular_compiler/src/pipeline/phases/reify/statements/defer.rs
index 6bc8c616f..239975f13 100644
--- a/crates/oxc_angular_compiler/src/pipeline/phases/reify/statements/defer.rs
+++ b/crates/oxc_angular_compiler/src/pipeline/phases/reify/statements/defer.rs
@@ -209,11 +209,12 @@ pub fn create_defer_on_stmt<'a>(
 
     // Build arguments based on trigger kind, matching Angular's reify.ts behavior
     match trigger {
-        DeferTriggerKind::Never | DeferTriggerKind::Idle | DeferTriggerKind::Immediate => {
+        DeferTriggerKind::Never | DeferTriggerKind::Immediate => {
             // No arguments for these triggers
         }
-        DeferTriggerKind::Timer => {
-            // Timer trigger takes the delay as first argument
+        DeferTriggerKind::Timer | DeferTriggerKind::Idle => {
+            // Timer takes its delay as first argument; idle takes its optional
+            // timeout (`idle(100ms)`) when one was given.
             if let Some(d) = delay {
                 args.push(OutputExpression::Literal(Box::new_in(
                     LiteralExpr { value: LiteralValue::Number(d), source_span: None },
diff --git a/crates/oxc_angular_compiler/src/transform/control_flow.rs b/crates/oxc_angular_compiler/src/transform/control_flow.rs
index 8a1ac5949..4a4a45e9d 100644
--- a/crates/oxc_angular_compiler/src/transform/control_flow.rs
+++ b/crates/oxc_angular_compiler/src/transform/control_flow.rs
@@ -863,16 +863,25 @@ fn get_trigger_parameters_start(value: &str, start_position: usize) -> Option<us
 
 /// Parses all triggers from @defer block parameters.
 /// Reference: Angular's r3_deferred_blocks.ts parsePrimaryTriggers function
+///
+/// `supports_idle_timeout` is whether the target Angular version accepts
+/// `idle(<time>)` (v22+); before that `idle` takes no parameters.
 pub fn parse_defer_triggers<'a>(
     allocator: &'a Allocator,
     parameters: &[HtmlBlockParameter<'a>],
     binding_parser: &BindingParser<'a>,
     block_start_span: Span,
+    supports_idle_timeout: bool,
 ) -> DeferTriggerParseResult<'a> {
     let mut triggers = R3DeferredBlockTriggers::default();
     let mut prefetch_triggers = R3DeferredBlockTriggers::default();
     let mut hydrate_triggers = R3DeferredBlockTriggers::default();
     let mut errors = std::vec::Vec::new();
+    let on_trigger = |param: &TriggerParameter<'a>,
+                      triggers: &mut R3DeferredBlockTriggers<'a>,
+                      errors: &mut std::vec::Vec<DeferTriggerError>| {
+        parse_on_trigger(allocator, param, binding_parser, triggers, errors, supports_idle_timeout);
+    };
 
     for param in parameters {
         let expr = param.expression.as_str();
@@ -886,21 +895,15 @@ pub fn parse_defer_triggers<'a>(
         if starts_with_keyword(expr, "when", has_trailing_ws) {
             parse_when_trigger(&param, binding_parser, &mut triggers, &mut errors);
         } else if starts_with_keyword(expr, "on", has_trailing_ws) {
-            parse_on_trigger(allocator, &param, binding_parser, &mut triggers, &mut errors);
+            on_trigger(&param, &mut triggers, &mut errors);
         } else if starts_with_keyword_pair(expr, "prefetch", "when", has_trailing_ws) {
             parse_when_trigger(&param, binding_parser, &mut prefetch_triggers, &mut errors);
         } else if starts_with_keyword_pair(expr, "prefetch", "on", has_trailing_ws) {
-            parse_on_trigger(
-                allocator,
-                &param,
-                binding_parser,
-                &mut prefetch_triggers,
-                &mut errors,
-            );
+            on_trigger(&param, &mut prefetch_triggers, &mut errors);
         } else if starts_with_keyword_pair(expr, "hydrate", "when", has_trailing_ws) {
             parse_when_trigger(&param, binding_parser, &mut hydrate_triggers, &mut errors);
         } else if starts_with_keyword_pair(expr, "hydrate", "on", has_trailing_ws) {
-            parse_on_trigger(allocator, &param, binding_parser, &mut hydrate_triggers, &mut errors);
+            on_trigger(&param, &mut hydrate_triggers, &mut errors);
         } else if is_hydrate_never_pattern(expr) {
             parse_never_trigger(&param, &mut hydrate_triggers, &mut errors);
         } else {
@@ -1053,6 +1056,7 @@ fn parse_on_trigger<'a>(
     binding_parser: &BindingParser<'a>,
     triggers: &mut R3DeferredBlockTriggers<'a>,
     errors: &mut std::vec::Vec<DeferTriggerError>,
+    supports_idle_timeout: bool,
 ) {
     // This is here just to be safe, we shouldn't enter this function
     // in the first place if a block doesn't have the "on" keyword.
@@ -1082,6 +1086,7 @@ fn parse_on_trigger<'a>(
         triggers,
         errors,
         is_hydration_trigger,
+        supports_idle_timeout,
         prefetch_span: param.prefetch_span(),
         on_source_span: param.span_at(on_index, "on".len()),
         hydrate_span: param.hydrate_span(),
@@ -1118,6 +1123,8 @@ struct OnTriggerParser<'p, 'a> {
     triggers: &'p mut R3DeferredBlockTriggers<'a>,
     errors: &'p mut std::vec::Vec<DeferTriggerError>,
     is_hydration_trigger: bool,
+    /// Whether `idle` accepts a timeout parameter (Angular v22+).
+    supports_idle_timeout: bool,
     prefetch_span: Option<Span>,
     on_source_span: Span,
     hydrate_span: Option<Span>,
@@ -1213,7 +1220,7 @@ impl<'a> OnTriggerParser<'_, 'a> {
             Span::new(if is_first_trigger { self.span.start } else { name_start }, end);
 
         let result = match identifier.str_value.as_str() {
-            "idle" => create_idle_trigger(parameters).map(|timeout| {
+            "idle" => create_idle_trigger(parameters, self.supports_idle_timeout).map(|timeout| {
                 let trigger = R3IdleDeferredTrigger {
                     timeout,
                     source_span,
@@ -1519,7 +1526,17 @@ impl<'a> OnTriggerParser<'_, 'a> {
     }
 }
 
-fn create_idle_trigger(parameters: &[ParsedParameter<'_>]) -> Result<Option<f64>, String> {
+fn create_idle_trigger(
+    parameters: &[ParsedParameter<'_>],
+    supports_timeout: bool,
+) -> Result<Option<f64>, String> {
+    // Before v22 `idle` takes no parameters.
+    if !supports_timeout {
+        if !parameters.is_empty() {
+            return Err("\"idle\" trigger cannot have parameters".to_string());
+        }
+        return Ok(None);
+    }
     if parameters.len() > 1 {
         return Err("\"idle\" trigger can only have zero or one parameters".to_string());
     }
diff --git a/crates/oxc_angular_compiler/src/transform/html_to_r3.rs b/crates/oxc_angular_compiler/src/transform/html_to_r3.rs
index ca085d599..cb46cca31 100644
--- a/crates/oxc_angular_compiler/src/transform/html_to_r3.rs
+++ b/crates/oxc_angular_compiler/src/transform/html_to_r3.rs
@@ -2865,12 +2865,14 @@ impl<'a> HtmlToR3Transform<'a> {
 
         let children = self.visit_children(&block.children);
 
-        // Parse defer triggers from block parameters
+        // Parse defer triggers from block parameters. `idle(<time>)` is v22+;
+        // an unknown version is treated as the latest.
         let trigger_result = parse_defer_triggers(
             self.allocator,
             &block.parameters,
             &self.binding_parser,
             block.start_span,
+            self.angular_version.is_none_or(|v| v.major >= 22),
         );
 
         // Report trigger parsing errors via diagnostics
diff --git a/crates/oxc_angular_compiler/tests/integration_test.rs b/crates/oxc_angular_compiler/tests/integration_test.rs
index c88ebec01..d46527bef 100644
--- a/crates/oxc_angular_compiler/tests/integration_test.rs
+++ b/crates/oxc_angular_compiler/tests/integration_test.rs
@@ -595,6 +595,43 @@ fn test_defer_on_viewport() {
     insta::assert_snapshot!("defer_on_viewport", js);
 }
 
+#[test]
+fn test_defer_idle_timeout() {
+    // Angular's reify passes `trigger.timeout` to every idle instruction
+    // (`on`, `prefetch on` and `hydrate on`) when one is given.
+    let js = compile_template_to_js(
+        "@defer (on idle(100ms); prefetch on idle(2s)) {a} @defer (on idle; hydrate on idle(250)) {b}",
+        "TestComponent",
+    );
+    for expected in [
+        "i0.ɵɵdeferOnIdle(100);",
+        "i0.ɵɵdeferPrefetchOnIdle(2000);",
+        "i0.ɵɵdeferOnIdle();",
+        "i0.ɵɵdeferHydrateOnIdle(250);",
+    ] {
+        assert!(js.contains(expected), "expected `{expected}` in:\n{js}");
+    }
+}
+
+#[test]
+fn test_defer_idle_timeout_needs_v22() {
+    // Before v22, Angular's `createIdleTrigger` rejects any parameter.
+    let allocator = Allocator::default();
+    let template = "@defer (on idle(100ms)) {a}";
+    let html_result = HtmlParser::new(&allocator, template, "test.html").parse();
+    let options = TransformOptions {
+        angular_version: Some(AngularVersion::new(21, 2, 0)),
+        ..TransformOptions::default()
+    };
+    let r3_result =
+        HtmlToR3Transform::new(&allocator, template, options).transform(&html_result.nodes);
+    let errors: Vec<_> = r3_result.errors.iter().map(|e| e.msg.as_str()).collect();
+    assert!(
+        errors.iter().any(|e| e.contains("\"idle\" trigger cannot have parameters")),
+        "expected the pre-v22 idle parameter error, got: {errors:?}"
+    );
+}
+
 /// Reproduces voidzero-dev/oxc-angular-compiler#289 (aligned with Angular's
 /// local-compilation behavior): a `@defer` block on a component whose lazy
 /// dependency is declared in the `@Component.deferredImports` array must emit
diff --git a/napi/angular-compiler/e2e/compare/fixtures/defer/defer-with-triggers.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/defer/defer-with-triggers.fixture.ts
index 8ce41ad3d..1739a5f22 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/defer/defer-with-triggers.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/defer/defer-with-triggers.fixture.ts
@@ -118,4 +118,29 @@ export class DeferImmediateComponent {}
     `.trim(),
     expectedFeatures: ['ɵɵdefer', 'ɵɵdeferOnImmediate'],
   },
+  {
+    name: 'defer-on-idle-timeout',
+    category: 'defer',
+    description: '@defer with idle timeouts on the main, prefetch and hydrate triggers',
+    className: 'DeferIdleTimeoutComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-defer-on-idle-timeout',
+  standalone: true,
+  template: \`
+    @defer (on idle(100ms); prefetch on idle(2s)) {
+      <div>Loaded when idle</div>
+    }
+    @defer (on idle; hydrate on idle(250)) {
+      <div>Hydrated when idle</div>
+    }
+  \`,
+})
+export class DeferIdleTimeoutComponent {}
+    `.trim(),
+    expectedFeatures: ['ɵɵdefer', 'ɵɵdeferOnIdle', 'ɵɵdeferPrefetchOnIdle', 'ɵɵdeferHydrateOnIdle'],
+  },
 ]

From d4aff2a9a5302f0549a82bd6672b87db51167237 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 18:50:55 +0800
Subject: [PATCH 37/54] fix(host): align host bindings and hostDirectives with
 ngtsc

Host attributes, properties and listeners now follow ngtsc's rules, and
hostDirectives is read and emitted the way Angular does it.

What changed:
- hostAttrs order: HostBindingInput.attributes is an insertion-ordered
  IndexMap (it was an FxHashMap, so the order was hash order). Every
  host kind is also sorted like JS object keys: array-index keys
  ('2', '[10]') first, ascending, then the rest as written.
- A static `class`/`style` in `host:` is added after the other
  attributes only when it is non-empty, as in createHostBindingsFunction.
- One shared host merge (directive/metadata.rs merge_host_bindings) for
  @Directive and @Component: `host:` entries go in first and each
  @HostBinding/@HostListener replaces the entry with the same key where
  it was (ngtsc's extractHostBindings). Before, members were appended,
  so a key bound in both places produced two listeners/bindings.
- hostDirectives is read through the Evaluator (evaluate_host_directives),
  shared by both decorators: constant arrays, spreads, constant
  `directive`/mapping values and @angular/core forwardRef all resolve.
  Mappings follow parseMappingStringArray (keyed by field, last alias
  wins, only the first two `:` parts count).
- One createHostDirectivesFeatureArg port for directives and components:
  an entry is the bare class unless `inputs` or `outputs` is written
  (even empty), and a forward reference wraps the whole array in
  `function () { return [...] }`. Directives used to always emit
  `{ directive }` and wrap each forward ref in `forwardRef()`.
  R3HostDirectiveMetadata and HostDirectiveMetadata gain
  `has_mapping_keys` to carry the "key was written" fact.

Why: these were documented differences against ngtsc (hostAttrs order,
HostDirectivesFeature `{ directive }` shape) plus duplicate host
listeners/bindings when `host:` and member decorators used one key.

Tests: new compare fixtures (host-bindings/host-order-and-merge,
host-directives/host-directives-evaluated) checked against ngtsc 22.2,
more attributes in host-spread-and-constant, Rust unit and integration
tests. The HOST_ATTRS_ORDER and empty-mappings known-differences
entries are removed.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/component/decorator.rs                | 343 ++---------
 .../src/component/definition.rs               |  86 +--
 .../src/component/metadata.rs                 |   6 +
 .../src/component/transform.rs                |  48 +-
 .../src/directive/compiler.rs                 | 169 ++----
 .../src/directive/decorator.rs                | 545 +++++++++---------
 .../src/directive/metadata.rs                 | 170 ++++--
 .../oxc_angular_compiler/src/directive/mod.rs |  10 +-
 .../src/directive/property_decorators.rs      |   2 +-
 .../src/pipeline/ingest.rs                    |  10 +-
 .../tests/integration_test.rs                 | 111 ++++
 .../tests/partial_directive_test.rs           |   2 +
 .../host-order-and-merge.fixture.ts           | 223 +++++++
 .../host-spread-and-constant.fixture.ts       |   7 +-
 .../host-directives-evaluated.fixture.ts      | 249 ++++++++
 .../e2e/compare/fixtures/known-differences.ts |  18 +-
 16 files changed, 1156 insertions(+), 843 deletions(-)
 create mode 100644 napi/angular-compiler/e2e/compare/fixtures/host-bindings/host-order-and-merge.fixture.ts
 create mode 100644 napi/angular-compiler/e2e/compare/fixtures/host-directives/host-directives-evaluated.fixture.ts

diff --git a/crates/oxc_angular_compiler/src/component/decorator.rs b/crates/oxc_angular_compiler/src/component/decorator.rs
index d4ceea707..4f2b17251 100644
--- a/crates/oxc_angular_compiler/src/component/decorator.rs
+++ b/crates/oxc_angular_compiler/src/component/decorator.rs
@@ -18,9 +18,8 @@ use super::metadata::{
 };
 use super::transform::ImportMap;
 use crate::directive::{
-    HostKey, StringConsts, extract_host_bindings_in, extract_host_listeners_in,
-    extract_input_metadata_in, extract_output_metadata_in, merge_by_class_property,
-    parse_decorator_io,
+    HostKey, MemberHostBindings, StringConsts, evaluate_host_directives, extract_input_metadata_in,
+    extract_output_metadata_in, merge_by_class_property, merge_host_bindings, parse_decorator_io,
 };
 use crate::output::oxc_converter::convert_oxc_expression;
 use crate::util::is_metadata_property;
@@ -261,48 +260,17 @@ pub fn extract_component_metadata<'a>(
         }
     }
 
-    // Extract host bindings and listeners from @HostBinding/@HostListener decorators on class members
-    // These are merged with any host metadata from the @Component({ host: {} }) property
-    //
-    // Divergence from ngtsc (pre-existing merge structure): upstream assigns
-    // member entries into `bindings.properties[name]` / `bindings.listeners`
-    // [eventName], overwriting same-named `host:` entries so one binding per
-    // key remains. Here they are appended instead, so a key declared in both
-    // emits two bindings — both listeners fire, and both property ops emit
-    // (the member's, applied last, still wins like upstream).
-    let host_bindings = extract_host_bindings_in(allocator, class, Some(consts));
-    let host_listeners = extract_host_listeners_in(allocator, class, Some(consts));
-
-    if !host_bindings.is_empty() || !host_listeners.is_empty() {
+    // Merge @HostBinding/@HostListener members into the `host:` bindings the
+    // way ngtsc's `extractHostBindings` does (shared with @Directive).
+    let members = MemberHostBindings::of(allocator, class, Some(consts));
+    if !members.is_empty() || metadata.host.is_some() {
         let host = metadata.host.get_or_insert_with(|| HostMetadata::new(allocator));
-
-        // Add @HostBinding properties
-        // Wrap with brackets: "class.active" -> "[class.active]"
-        for (host_prop, class_prop) in host_bindings {
-            let wrapped_key =
-                Ident::from(allocator.alloc_str(&format!("[{}]", host_prop.as_str())));
-            host.properties.push((wrapped_key, class_prop));
-        }
-
-        // Add @HostListener events
-        // Wrap event name with parentheses and build method expression with args
-        // Reference: Angular's shared.ts:713 - `bindings.listeners[eventName] = \`${member.name}(${args.join(',')})\``
-        for (event_name, method_name, args) in host_listeners {
-            // Wrap event name: "click" -> "(click)"
-            let wrapped_key =
-                Ident::from(allocator.alloc_str(&format!("({})", event_name.as_str())));
-
-            // Build method expression with args: "handleClick" + ["$event"] -> "handleClick($event)"
-            let method_expr = if args.is_empty() {
-                Ident::from(allocator.alloc_str(&format!("{}()", method_name.as_str())))
-            } else {
-                let args_str: String =
-                    args.iter().map(|a| a.as_str()).collect::<std::vec::Vec<_>>().join(",");
-                Ident::from(allocator.alloc_str(&format!("{}({})", method_name.as_str(), args_str)))
-            };
-
-            host.listeners.push((wrapped_key, method_expr));
-        }
+        merge_host_bindings(
+            &mut host.properties,
+            &mut host.listeners,
+            &mut host.attributes,
+            members,
+        );
     }
 
     // Detect if the component extends another class
@@ -559,282 +527,37 @@ fn extract_host_metadata<'a>(
     Some(host)
 }
 
-/// Extract host directives from a hostDirectives array expression.
-///
-/// Divergence from ngtsc's `extractHostDirectives`: upstream evaluates the
-/// expression with the partial evaluator (a const or spread array works, a
-/// non-array is an error). Here only a literal `ArrayExpression` is read and
-/// anything else yields no host directives, with no diagnostic.
-///
-/// Handles the following patterns:
-/// - Simple identifier: `hostDirectives: [TooltipDirective]`
-/// - Object with directive: `hostDirectives: [{ directive: ColorDirective }]`
-/// - Object with mappings: `hostDirectives: [{ directive: D, inputs: ['color', 'bgColor'], outputs: ['changed'] }]`
-/// - Forward ref: `hostDirectives: [forwardRef(() => MyDirective)]`
-///
-/// Reference: packages/compiler-cli/src/ngtsc/annotations/directive/src/shared.ts:1873-1985
+/// Extract host directives from a `hostDirectives` expression, read through
+/// the evaluator like ngtsc's `extractHostDirectives` (see
+/// [`crate::directive::evaluate_host_directives`]).
 fn extract_host_directives<'a>(
     allocator: &'a Allocator,
-    expr: &Expression<'a>,
+    expr: &'a Expression<'a>,
     import_map: &ImportMap<'a>,
     consts: &StringConsts<'a>,
 ) -> Vec<'a, HostDirectiveMetadata<'a>> {
-    let mut result = Vec::new_in(&allocator);
-
-    let Expression::ArrayExpression(arr) = expr else {
-        return result;
-    };
-
-    for element in &arr.elements {
-        if let Some(meta) = extract_single_host_directive(allocator, element, import_map, consts) {
-            result.push(meta);
-        }
-    }
-
-    result
-}
-
-/// Extract a single host directive from an array element.
-///
-/// Handles:
-/// - Identifier: `TooltipDirective`
-/// - Object: `{ directive: ColorDirective, inputs: [...], outputs: [...] }`
-/// - ForwardRef call: `forwardRef(() => MyDirective)`
-fn extract_single_host_directive<'a>(
-    allocator: &'a Allocator,
-    element: &ArrayExpressionElement<'a>,
-    import_map: &ImportMap<'a>,
-    consts: &StringConsts<'a>,
-) -> Option<HostDirectiveMetadata<'a>> {
-    match element {
-        // Simple identifier: TooltipDirective
-        ArrayExpressionElement::Identifier(id) => {
-            let name: Ident<'a> = id.name.clone().into();
-            let mut meta = HostDirectiveMetadata::new(allocator, name.clone());
-            // Look up the source module from the import map
-            if let Some(import_info) = import_map.get(&name) {
-                meta.source_module = Some(import_info.source_module.clone());
-            }
-            Some(meta)
-        }
-
-        // Object expression: { directive: ColorDirective, inputs: [...], outputs: [...] }
-        ArrayExpressionElement::ObjectExpression(obj) => {
-            let mut directive_name: Option<Ident<'a>> = None;
-            let mut inputs = Vec::new_in(&allocator);
-            let mut outputs = Vec::new_in(&allocator);
-            let mut is_forward_reference = false;
-
-            for prop in &obj.properties {
-                if let ObjectPropertyKind::ObjectProperty(prop) = prop
-                    && is_metadata_property(prop)
-                {
-                    let Some(key_name) = get_property_key_name(&prop.key, consts) else {
-                        continue;
-                    };
-
-                    match key_name.as_str() {
-                        "directive" => {
-                            // Extract directive class name
-                            // Can be identifier or forwardRef call
-                            let (name, is_forward_ref) = extract_directive_reference(&prop.value);
-                            directive_name = name;
-                            is_forward_reference = is_forward_ref;
-                        }
-                        "inputs" => {
-                            // Extract input mappings
-                            inputs = extract_io_mappings(allocator, &prop.value);
-                        }
-                        "outputs" => {
-                            // Extract output mappings
-                            outputs = extract_io_mappings(allocator, &prop.value);
-                        }
-                        _ => {
-                            // Unknown property - ignore
-                        }
-                    }
-                }
-            }
-
-            directive_name.map(|name| {
-                let mut meta = HostDirectiveMetadata::new(allocator, name.clone());
-                // Look up the source module from the import map
-                if let Some(import_info) = import_map.get(&name) {
-                    meta.source_module = Some(import_info.source_module.clone());
-                }
-                meta.inputs = inputs;
-                meta.outputs = outputs;
-                meta.is_forward_reference = is_forward_reference;
-                meta
-            })
-        }
-
-        // ForwardRef call: forwardRef(() => MyDirective)
-        ArrayExpressionElement::CallExpression(call) => {
-            if is_forward_ref_call(&call.callee) {
-                if let Some(name) = extract_forward_ref_directive_name(call.arguments.first()) {
-                    let mut meta = HostDirectiveMetadata::new(allocator, name.clone());
-                    // Look up the source module from the import map
-                    if let Some(import_info) = import_map.get(&name) {
-                        meta.source_module = Some(import_info.source_module.clone());
-                    }
-                    meta.is_forward_reference = true;
-                    return Some(meta);
-                }
-            }
-            None
-        }
-
-        _ => None,
-    }
-}
-
-/// Extract a directive reference from an expression.
-///
-/// Returns the directive class name and whether it's a forward reference.
-fn extract_directive_reference<'a>(expr: &Expression<'a>) -> (Option<Ident<'a>>, bool) {
-    match expr {
-        // Simple identifier: ColorDirective
-        Expression::Identifier(id) => (Some(id.name.clone().into()), false),
-
-        // ForwardRef call: forwardRef(() => ColorDirective)
-        Expression::CallExpression(call) => {
-            if is_forward_ref_call(&call.callee) {
-                (extract_forward_ref_directive_name(call.arguments.first()), true)
-            } else {
-                (None, false)
-            }
+    let entries = evaluate_host_directives(allocator, expr, consts);
+    let mut result = Vec::with_capacity_in(entries.len(), &allocator);
+    for entry in entries {
+        let has_mapping_keys = entry.has_mapping_keys();
+        let mut meta = HostDirectiveMetadata::new(allocator, entry.name);
+        // Look up the source module from the import map
+        if let Some(import_info) = import_map.get(&entry.name) {
+            meta.source_module = Some(import_info.source_module);
         }
-
-        _ => (None, false),
-    }
-}
-
-/// Check if a callee is a forwardRef call.
-fn is_forward_ref_call(callee: &Expression<'_>) -> bool {
-    match callee {
-        Expression::Identifier(id) => id.name == "forwardRef",
-        _ => false,
-    }
-}
-
-/// Extract the directive name from a forwardRef argument.
-///
-/// Handles: `forwardRef(() => MyDirective)`
-fn extract_forward_ref_directive_name<'a>(arg: Option<&Argument<'a>>) -> Option<Ident<'a>> {
-    let arg = arg?;
-    match arg {
-        // forwardRef(() => MyDirective)
-        Argument::ArrowFunctionExpression(arrow) => {
-            // Expression body: () => MyDirective
-            if let Some(Expression::Identifier(id)) = arrow.get_expression() {
-                return Some(id.name.clone().into());
-            }
-            // Block body with single ExpressionStatement (parity with pre-0.144)
-            if let Some(body) = arrow.get_function_body() {
-                if let Some(oxc_ast::ast::Statement::ExpressionStatement(stmt)) =
-                    body.statements.first()
-                {
-                    if let Expression::Identifier(id) = &stmt.expression {
-                        return Some(id.name.clone().into());
-                    }
-                }
-            }
-            None
+        meta.is_forward_reference = entry.is_forward_reference;
+        meta.has_mapping_keys = has_mapping_keys;
+        if let Some(inputs) = entry.inputs {
+            meta.inputs = inputs;
         }
-        _ => None,
-    }
-}
-
-/// Extract input/output mappings from an array expression.
-///
-/// Handles two formats:
-/// - Simple string: `["color"]` - same public and internal name
-/// - Mapping string: `["color: bgColor"]` - public name mapped to internal name
-///
-/// Returns Vec of (publicName, internalName) pairs.
-///
-/// Divergence: ngtsc evaluates the array with the partial evaluator, so a
-/// const or a spread works; here only a literal `ArrayExpression` is read.
-fn extract_io_mappings<'a>(
-    allocator: &'a Allocator,
-    expr: &Expression<'a>,
-) -> Vec<'a, (Ident<'a>, Ident<'a>)> {
-    let mut result = Vec::new_in(&allocator);
-
-    let Expression::ArrayExpression(arr) = expr else {
-        return result;
-    };
-
-    for element in &arr.elements {
-        if let Some((public_name, internal_name)) = parse_mapping_element(allocator, element) {
-            result.push((public_name, internal_name));
+        if let Some(outputs) = entry.outputs {
+            meta.outputs = outputs;
         }
+        result.push(meta);
     }
-
     result
 }
 
-/// Parse a single mapping element from an input/output array.
-///
-/// Handles:
-/// - Simple string: `"color"` -> ("color", "color")
-/// - Mapping string: `"color: bgColor"` -> ("bgColor", "color")
-/// - Tuple array: `["color", "bgColor"]` -> ("bgColor", "color")
-fn parse_mapping_element<'a>(
-    allocator: &'a Allocator,
-    element: &ArrayExpressionElement<'a>,
-) -> Option<(Ident<'a>, Ident<'a>)> {
-    match element {
-        // Simple string: "color" - same public and internal name
-        ArrayExpressionElement::StringLiteral(lit) => {
-            let value = lit.value.as_str()?;
-
-            // Check for mapping format: "internalName: publicName"
-            if let Some(colon_pos) = value.find(':') {
-                let internal_name = value[..colon_pos].trim();
-                let public_name = value[colon_pos + 1..].trim();
-                Some((
-                    Ident::from(allocator.alloc_str(public_name)),
-                    Ident::from(allocator.alloc_str(internal_name)),
-                ))
-            } else {
-                // Same name for both
-                Some((Ident::from(value), Ident::from(value)))
-            }
-        }
-
-        // Tuple array: ["internalName", "publicName"]
-        ArrayExpressionElement::ArrayExpression(arr) => {
-            let elements = &arr.elements;
-            if elements.len() >= 2 {
-                let internal = match elements.first() {
-                    Some(ArrayExpressionElement::StringLiteral(lit)) => {
-                        lit.value.as_str().map(Ident::from)
-                    }
-                    _ => None,
-                };
-                let public = match elements.get(1) {
-                    Some(ArrayExpressionElement::StringLiteral(lit)) => {
-                        lit.value.as_str().map(Ident::from)
-                    }
-                    _ => None,
-                };
-                if let (Some(internal_name), Some(public_name)) = (internal, public) {
-                    return Some((public_name, internal_name));
-                }
-            }
-            None
-        }
-
-        _ => None,
-    }
-}
-
-// =============================================================================
-// Constructor Dependency Extraction
-// =============================================================================
-
 /// Check if a class has an `ngOnChanges` method.
 ///
 /// This is used to determine if the component implements the `OnChanges` interface
@@ -2238,7 +1961,7 @@ mod tests {
     #[test]
     fn test_extract_host_directives_forward_ref() {
         let code = r#"
-            import {Component} from '@angular/core';
+            import {Component, forwardRef} from '@angular/core';
             @Component({
                 selector: 'app-test',
                 template: '',
@@ -2256,7 +1979,7 @@ mod tests {
     #[test]
     fn test_extract_host_directives_forward_ref_in_object() {
         let code = r#"
-            import {Component} from '@angular/core';
+            import {Component, forwardRef} from '@angular/core';
             @Component({
                 selector: 'app-test',
                 template: '',
diff --git a/crates/oxc_angular_compiler/src/component/definition.rs b/crates/oxc_angular_compiler/src/component/definition.rs
index 51202036f..ff0c56ea4 100644
--- a/crates/oxc_angular_compiler/src/component/definition.rs
+++ b/crates/oxc_angular_compiler/src/component/definition.rs
@@ -25,7 +25,8 @@ use super::metadata::{
 use super::namespace_registry::NamespaceRegistry;
 use super::transform::TransformOptions;
 use crate::directive::{
-    create_host_directive_mappings_array, create_inputs_literal, create_outputs_literal,
+    R3HostDirectiveMetadata, create_host_directives_feature_arg, create_inputs_literal,
+    create_outputs_literal,
 };
 use crate::factory::create_invalid_factory_call;
 use crate::output::ast::{
@@ -1169,7 +1170,8 @@ fn create_directive_reference<'a>(
 
 /// Create the host directives argument array.
 ///
-/// Format depends on whether directives have input/output mappings:
+/// Builds each directive reference (namespaced for imports) and hands them to
+/// the `createHostDirectivesFeatureArg` port the directive compiler uses:
 /// - Simple: [Directive1, Directive2] or [i1.ExternalDir] for imports
 /// - With mappings: [{ directive: Directive1, inputs: ['prop', 'alias'] }]
 /// - Forward ref: function() { return [Directive1] }
@@ -1180,75 +1182,17 @@ fn create_host_directives_arg<'a>(
     host_directives: &[HostDirectiveMetadata<'a>],
     namespace_registry: &mut NamespaceRegistry<'a>,
 ) -> OutputExpression<'a> {
-    let mut expressions: OxcVec<'a, OutputExpression<'a>> =
-        OxcVec::with_capacity_in(host_directives.len(), &allocator);
-    let mut has_forward_ref = false;
-
-    for directive in host_directives {
-        if directive.is_forward_reference {
-            has_forward_ref = true;
-        }
-
-        // Create the directive reference (potentially namespaced)
-        let directive_ref = create_directive_reference(allocator, directive, namespace_registry);
-
-        if !directive.has_mappings() {
-            // Simple case: just the directive type
-            expressions.push(directive_ref);
-        } else {
-            // Complex case: object with directive, inputs, outputs
-            let mut entries: OxcVec<'a, LiteralMapEntry<'a>> = OxcVec::new_in(&allocator);
-
-            // directive: DirectiveClass (or i1.DirectiveClass for imports)
-            entries.push(LiteralMapEntry::new(Ident::from("directive"), directive_ref, false));
-
-            // inputs: ['internalName', 'publicName', ...]
-            if !directive.inputs.is_empty() {
-                let inputs_array =
-                    create_host_directive_mappings_array(allocator, &directive.inputs);
-                entries.push(LiteralMapEntry::new(Ident::from("inputs"), inputs_array, false));
-            }
-
-            // outputs: ['internalName', 'publicName', ...]
-            if !directive.outputs.is_empty() {
-                let outputs_array =
-                    create_host_directive_mappings_array(allocator, &directive.outputs);
-                entries.push(LiteralMapEntry::new(Ident::from("outputs"), outputs_array, false));
-            }
-
-            expressions.push(OutputExpression::LiteralMap(Box::new_in(
-                LiteralMapExpr { entries, source_span: None },
-                &allocator,
-            )));
-        }
-    }
-
-    let array_expr = OutputExpression::LiteralArray(Box::new_in(
-        LiteralArrayExpr { entries: expressions, source_span: None },
-        &allocator,
-    ));
-
-    // If there's a forward reference, wrap in: function() { return [directives] }
-    if has_forward_ref {
-        let mut statements: OxcVec<'a, OutputStatement<'a>> =
-            OxcVec::with_capacity_in(1, &allocator);
-        statements.push(OutputStatement::Return(Box::new_in(
-            ReturnStatement { value: array_expr, source_span: None },
-            &allocator,
-        )));
-
-        OutputExpression::Function(Box::new_in(
-            FunctionExpr {
-                name: None,
-                params: OxcVec::new_in(&allocator),
-                statements,
-                source_span: None,
-            },
-            &allocator,
-        ))
-    } else {
-        array_expr
-    }
+    let entries: std::vec::Vec<_> = host_directives
+        .iter()
+        .map(|directive| R3HostDirectiveMetadata {
+            directive: create_directive_reference(allocator, directive, namespace_registry),
+            is_forward_reference: directive.is_forward_reference,
+            has_mapping_keys: directive.has_mapping_keys,
+            inputs: OxcVec::from_iter_in(directive.inputs.iter().copied(), &allocator),
+            outputs: OxcVec::from_iter_in(directive.outputs.iter().copied(), &allocator),
+        })
+        .collect();
+    create_host_directives_feature_arg(allocator, &entries)
 }
 
 /// Generate `ɵɵExternalStylesFeature(['style.css', ...])` expression.
diff --git a/crates/oxc_angular_compiler/src/component/metadata.rs b/crates/oxc_angular_compiler/src/component/metadata.rs
index 2c098b0ee..4e9258362 100644
--- a/crates/oxc_angular_compiler/src/component/metadata.rs
+++ b/crates/oxc_angular_compiler/src/component/metadata.rs
@@ -578,6 +578,11 @@ pub struct HostDirectiveMetadata<'a> {
 
     /// Whether this is a forward reference (requires wrapping in a function).
     pub is_forward_reference: bool,
+
+    /// Whether `inputs` or `outputs` was written, even as an empty array.
+    /// ngtsc keeps those as non-null mappings, so the entry is passed to
+    /// `ɵɵHostDirectivesFeature` as `{ directive }` instead of the bare class.
+    pub has_mapping_keys: bool,
 }
 
 impl<'a> HostDirectiveMetadata<'a> {
@@ -589,6 +594,7 @@ impl<'a> HostDirectiveMetadata<'a> {
             inputs: Vec::new_in(&allocator),
             outputs: Vec::new_in(&allocator),
             is_forward_reference: false,
+            has_mapping_keys: false,
         }
     }
 
diff --git a/crates/oxc_angular_compiler/src/component/transform.rs b/crates/oxc_angular_compiler/src/component/transform.rs
index 8dcb2de6b..74910f0b5 100644
--- a/crates/oxc_angular_compiler/src/component/transform.rs
+++ b/crates/oxc_angular_compiler/src/component/transform.rs
@@ -6189,45 +6189,29 @@ fn convert_host_metadata_to_input<'a>(
     }
 
     // Convert static attributes: "role" -> OutputExpression::Literal
-    // This matches TypeScript which uses `o.literal(value)` for host attributes
-    let mut attributes: FxHashMap<Ident<'a>, crate::output::ast::OutputExpression<'a>> =
-        FxHashMap::default();
-
-    for (key, value) in host.attributes.iter() {
-        // Create a literal string expression for static attributes
-        let expr = crate::output::ast::OutputExpression::Literal(oxc_allocator::Box::new_in(
+    // This matches TypeScript which uses `o.literal(value)` for host attributes.
+    // They are in the order `merge_host_bindings` put them in.
+    let literal = |value: &Ident<'a>| {
+        crate::output::ast::OutputExpression::Literal(oxc_allocator::Box::new_in(
             crate::output::ast::LiteralExpr {
                 value: crate::output::ast::LiteralValue::String(value.clone()),
                 source_span: None,
             },
             &allocator,
-        ));
-        attributes.insert(key.clone(), expr);
-    }
-
-    // Add special attributes (class_attr, style_attr) to the attributes map.
-    // This matches Angular's compiler.ts lines 501-510 which adds these to attributes
-    // before passing to the ingestion phase.
-    if let Some(ref style_attr) = host.style_attr {
-        let expr = crate::output::ast::OutputExpression::Literal(oxc_allocator::Box::new_in(
-            crate::output::ast::LiteralExpr {
-                value: crate::output::ast::LiteralValue::String(style_attr.clone()),
-                source_span: None,
-            },
-            &allocator,
-        ));
-        attributes.insert(Ident::from("style"), expr);
+        ))
+    };
+    let mut attributes = crate::pipeline::ingest::HostAttributes::default();
+    for (key, value) in &host.attributes {
+        attributes.insert(*key, literal(value));
     }
 
-    if let Some(ref class_attr) = host.class_attr {
-        let expr = crate::output::ast::OutputExpression::Literal(oxc_allocator::Box::new_in(
-            crate::output::ast::LiteralExpr {
-                value: crate::output::ast::LiteralValue::String(class_attr.clone()),
-                source_span: None,
-            },
-            &allocator,
-        ));
-        attributes.insert(Ident::from("class"), expr);
+    // Like Angular's `createHostBindingsFunction`, a non-empty static style,
+    // then class, goes after the other attributes (an empty one is dropped).
+    let special = [("style", &host.style_attr), ("class", &host.class_attr)];
+    for (name, value) in special {
+        if let Some(value) = value.as_ref().filter(|v| !v.is_empty()) {
+            attributes.insert(Ident::from(name), literal(value));
+        }
     }
 
     HostBindingInput { component_name, component_selector, properties, attributes, events }
diff --git a/crates/oxc_angular_compiler/src/directive/compiler.rs b/crates/oxc_angular_compiler/src/directive/compiler.rs
index 3e102173b..bdb061d60 100644
--- a/crates/oxc_angular_compiler/src/directive/compiler.rs
+++ b/crates/oxc_angular_compiler/src/directive/compiler.rs
@@ -17,7 +17,6 @@
 use oxc_allocator::{Allocator, Box, Vec};
 use oxc_span::Span;
 use oxc_str::Ident;
-use rustc_hash::FxHashMap;
 
 use super::metadata::{
     R3DirectiveMetadata, R3HostDirectiveMetadata, R3HostMetadata, R3InputMetadata,
@@ -30,7 +29,7 @@ use crate::output::ast::{
 };
 use crate::parser::expression::BindingParser;
 use crate::pipeline::emit::{HostBindingCompilationResult, compile_host_bindings};
-use crate::pipeline::ingest::{HostBindingInput, ingest_host_binding_with_version};
+use crate::pipeline::ingest::{HostAttributes, HostBindingInput, ingest_host_binding_with_version};
 use crate::pipeline::selector::{
     parse_selector_to_r3_selector as parse_css_to_r3, r3_selector_to_output_expr,
 };
@@ -309,11 +308,8 @@ fn add_features<'a>(
 
     // HostDirectivesFeature (before InheritDefinitionFeature)
     if !metadata.host_directives.is_empty() {
-        let host_directives_arg = create_host_directives_feature_arg(
-            allocator,
-            core_namespace,
-            &metadata.host_directives,
-        );
+        let host_directives_arg =
+            create_host_directives_feature_arg(allocator, &metadata.host_directives);
         let mut args = Vec::new_in(&allocator);
         args.push(host_directives_arg);
         features.push(create_feature_call(
@@ -727,30 +723,26 @@ fn convert_r3_host_metadata_to_input<'a>(
         });
     }
 
-    // Copy attributes directly - they are already OutputExpressions
-    // Handle special style_attr and class_attr if present
-    let mut attributes: FxHashMap<Ident<'a>, OutputExpression<'a>> = FxHashMap::default();
+    // Copy attributes directly - they are already OutputExpressions, in the
+    // order `merge_host_bindings` put them in.
+    let mut attributes = HostAttributes::default();
 
     for (key, value) in host.attributes.iter() {
         // Use clone_in to deep clone the OutputExpression with the allocator
         attributes.insert(key.clone(), value.clone_in(allocator));
     }
 
-    // Add special attributes if present
-    if let Some(ref style_attr) = host.style_attr {
-        let expr = OutputExpression::Literal(Box::new_in(
-            LiteralExpr { value: LiteralValue::String(style_attr.clone()), source_span: None },
-            &allocator,
-        ));
-        attributes.insert(Ident::from("style"), expr);
-    }
-
-    if let Some(ref class_attr) = host.class_attr {
-        let expr = OutputExpression::Literal(Box::new_in(
-            LiteralExpr { value: LiteralValue::String(class_attr.clone()), source_span: None },
-            &allocator,
-        ));
-        attributes.insert(Ident::from("class"), expr);
+    // Like `createHostBindingsFunction`, a non-empty static style, then class,
+    // goes after the other attributes (an empty one is dropped).
+    let special = [("style", &host.style_attr), ("class", &host.class_attr)];
+    for (name, value) in special {
+        if let Some(value) = value.as_ref().filter(|v| !v.is_empty()) {
+            let expr = OutputExpression::Literal(Box::new_in(
+                LiteralExpr { value: LiteralValue::String(*value), source_span: None },
+                &allocator,
+            ));
+            attributes.insert(Ident::from(name), expr);
+        }
     }
 
     HostBindingInput {
@@ -906,97 +898,61 @@ fn create_feature_ref<'a>(
     ))
 }
 
-/// Creates the host directives feature argument.
-fn create_host_directives_feature_arg<'a>(
+/// Creates the `ɵɵHostDirectivesFeature` argument.
+///
+/// Shared between the directive and component compilers, mirroring Angular's
+/// `createHostDirectivesFeatureArg` in `view/compiler.ts`:
+/// - an entry without `inputs` and `outputs` is the bare directive;
+///   otherwise it's `{ directive, inputs?, outputs? }`, with an empty mapping
+///   left out;
+/// - when any entry is a forward reference, the whole array is wrapped in
+///   `function () { return [...]; }`.
+pub fn create_host_directives_feature_arg<'a>(
     allocator: &'a Allocator,
-    core_namespace: &'a str,
     host_directives: &[R3HostDirectiveMetadata<'a>],
 ) -> OutputExpression<'a> {
-    let mut items = Vec::new_in(&allocator);
+    let mut items = Vec::with_capacity_in(host_directives.len(), &allocator);
+    let mut has_forward_ref = false;
 
     for hd in host_directives {
-        let mut entries = Vec::new_in(&allocator);
-
-        // directive
-        let directive_expr = if hd.is_forward_reference {
-            // Wrap in forwardRef()
-            let mut args = Vec::new_in(&allocator);
-
-            let fn_params = Vec::new_in(&allocator);
-            let mut fn_body = Vec::new_in(&allocator);
-            fn_body.push(OutputStatement::Return(Box::new_in(
-                crate::output::ast::ReturnStatement {
-                    value: hd.directive.clone_in(allocator),
-                    source_span: None,
-                },
+        let directive = hd.directive.clone_in(allocator);
+        // Non-empty mappings were written too, whatever built the metadata.
+        if hd.has_mapping_keys || !hd.inputs.is_empty() || !hd.outputs.is_empty() {
+            let mut entries = Vec::new_in(&allocator);
+            entries.push(LiteralMapEntry::new(Ident::from("directive"), directive, false));
+            if !hd.inputs.is_empty() {
+                let inputs_array = create_host_directive_mappings_array(allocator, &hd.inputs);
+                entries.push(LiteralMapEntry::new(Ident::from("inputs"), inputs_array, false));
+            }
+            if !hd.outputs.is_empty() {
+                let outputs_array = create_host_directive_mappings_array(allocator, &hd.outputs);
+                entries.push(LiteralMapEntry::new(Ident::from("outputs"), outputs_array, false));
+            }
+            items.push(OutputExpression::LiteralMap(Box::new_in(
+                LiteralMapExpr { entries, source_span: None },
                 &allocator,
             )));
-
-            let arrow_fn = OutputExpression::Function(Box::new_in(
-                FunctionExpr {
-                    name: None,
-                    params: fn_params,
-                    statements: fn_body,
-                    source_span: None,
-                },
-                &allocator,
-            ));
-
-            args.push(arrow_fn);
-
-            let forward_ref = OutputExpression::ReadProp(Box::new_in(
-                ReadPropExpr {
-                    receiver: Box::new_in(
-                        OutputExpression::ReadVar(Box::new_in(
-                            ReadVarExpr { name: Ident::from(core_namespace), source_span: None },
-                            &allocator,
-                        )),
-                        &allocator,
-                    ),
-                    name: Ident::from(Identifiers::FORWARD_REF),
-                    optional: false,
-                    source_span: None,
-                },
-                &allocator,
-            ));
-
-            OutputExpression::InvokeFunction(Box::new_in(
-                InvokeFunctionExpr {
-                    fn_expr: Box::new_in(forward_ref, &allocator),
-                    args,
-                    pure: false,
-                    optional: false,
-                    source_span: None,
-                },
-                &allocator,
-            ))
         } else {
-            hd.directive.clone_in(allocator)
-        };
-
-        entries.push(LiteralMapEntry::new(Ident::from("directive"), directive_expr, false));
-
-        // inputs (if any)
-        if !hd.inputs.is_empty() {
-            let inputs_array = create_host_directive_mappings_array(allocator, &hd.inputs);
-            entries.push(LiteralMapEntry::new(Ident::from("inputs"), inputs_array, false));
-        }
-
-        // outputs (if any)
-        if !hd.outputs.is_empty() {
-            let outputs_array = create_host_directive_mappings_array(allocator, &hd.outputs);
-            entries.push(LiteralMapEntry::new(Ident::from("outputs"), outputs_array, false));
+            items.push(directive);
         }
-
-        items.push(OutputExpression::LiteralMap(Box::new_in(
-            LiteralMapExpr { entries, source_span: None },
-            &allocator,
-        )));
+        has_forward_ref |= hd.is_forward_reference;
     }
 
-    OutputExpression::LiteralArray(Box::new_in(
+    let array = OutputExpression::LiteralArray(Box::new_in(
         LiteralArrayExpr { entries: items, source_span: None },
         &allocator,
+    ));
+    if !has_forward_ref {
+        return array;
+    }
+    let mut statements = Vec::with_capacity_in(1, &allocator);
+    statements.push(OutputStatement::Return(Box::new_in(
+        crate::output::ast::ReturnStatement { value: array, source_span: None },
+        &allocator,
+    )));
+    OutputExpression::Function(Box::new_in(
+        FunctionExpr { name: None, params: Vec::new_in(&allocator), statements, source_span: None },
+        &allocator,
     ))
 }
 
@@ -1004,9 +960,8 @@ fn create_host_directives_feature_arg<'a>(
 ///
 /// Format: `['internalName', 'publicName', 'internalName2', 'publicName2']`
 ///
-/// Shared between directive and component compilers, mirroring Angular's
-/// `createHostDirectivesMappingArray` in `view/compiler.ts`.
-pub(crate) fn create_host_directive_mappings_array<'a>(
+/// Mirrors Angular's `createHostDirectivesMappingArray` in `view/compiler.ts`.
+fn create_host_directive_mappings_array<'a>(
     allocator: &'a Allocator,
     mappings: &[(Ident<'a>, Ident<'a>)],
 ) -> OutputExpression<'a> {
@@ -1534,6 +1489,7 @@ mod tests {
         host_directives.push(R3HostDirectiveMetadata {
             directive: directive_expr,
             is_forward_reference: false,
+            has_mapping_keys: true,
             inputs: host_directive_inputs,
             outputs: Vec::new_in(&&allocator),
         });
@@ -1599,6 +1555,7 @@ mod tests {
         host_directives.push(R3HostDirectiveMetadata {
             directive: directive_expr,
             is_forward_reference: false,
+            has_mapping_keys: true,
             inputs: Vec::new_in(&&allocator),
             outputs: host_directive_outputs,
         });
diff --git a/crates/oxc_angular_compiler/src/directive/decorator.rs b/crates/oxc_angular_compiler/src/directive/decorator.rs
index 482884037..cf4143a3c 100644
--- a/crates/oxc_angular_compiler/src/directive/decorator.rs
+++ b/crates/oxc_angular_compiler/src/directive/decorator.rs
@@ -20,6 +20,7 @@ use super::metadata::{
     R3DirectiveMetadata, R3DirectiveMetadataBuilder, R3HostDirectiveMetadata, R3HostMetadata,
     R3InputMetadata,
 };
+use super::property_decorators::try_unwrap_forward_ref;
 use crate::factory::R3DependencyMetadata;
 use crate::output::ast::{OutputAstBuilder, OutputExpression, ReadVarExpr};
 use crate::output::oxc_converter::convert_oxc_expression;
@@ -184,10 +185,14 @@ pub fn extract_directive_metadata<'a>(
                         }
                     }
                     "hostDirectives" => {
-                        let host_directives =
-                            extract_host_directives(allocator, &prop.value, consts);
-                        for hd in host_directives {
-                            builder = builder.add_host_directive(hd);
+                        for entry in evaluate_host_directives(allocator, &prop.value, consts) {
+                            builder = builder.add_host_directive(R3HostDirectiveMetadata {
+                                directive: OutputAstBuilder::variable(allocator, entry.name),
+                                is_forward_reference: entry.is_forward_reference,
+                                has_mapping_keys: entry.has_mapping_keys(),
+                                inputs: entry.inputs.unwrap_or_else(|| Vec::new_in(&allocator)),
+                                outputs: entry.outputs.unwrap_or_else(|| Vec::new_in(&allocator)),
+                            });
                         }
                     }
                     _ => {
@@ -198,7 +203,12 @@ pub fn extract_directive_metadata<'a>(
         }
     }
 
-    // Extract @Input/@Output/@HostBinding/@HostListener from class members
+    // Extract @Input/@Output/@HostBinding/@HostListener from class members.
+    // The members merge into the `host:` bindings (ngtsc's
+    // `extractHostBindings`), so those go in first.
+    if let Some(decorator_host) = host_from_decorator {
+        builder = builder.host(decorator_host);
+    }
     builder = builder.extract_from_class_in(allocator, class, source_text, Some(consts));
 
     // Detect if ngOnChanges lifecycle hook is implemented
@@ -221,8 +231,6 @@ pub fn extract_directive_metadata<'a>(
         builder = builder.deps(deps);
     }
 
-    // Now we need to merge host metadata from decorator with host metadata from class members
-    // The builder already has host data from extract_from_class, we need to merge the decorator host
     let mut metadata = builder.build()?;
 
     // `queries:` from the decorator come after the member queries, as in ngtsc.
@@ -247,36 +255,6 @@ pub fn extract_directive_metadata<'a>(
         metadata.outputs = merge_by_class_property(io.outputs, fields, |o| o.0.as_str());
     }
 
-    // Merge host metadata from decorator into the existing host metadata
-    //
-    // Divergence from ngtsc (pre-existing merge structure): upstream reads the
-    // `host:` metadata first and lets member @HostBinding/@HostListener
-    // overwrite same-named keys (`bindings.properties[name] = ...`), keeping
-    // one binding per key. Here member entries were collected first and the
-    // `host:` entries are appended, so a key declared in both emits two
-    // bindings and the `host:` value applies last — the winner is reversed.
-    if let Some(decorator_host) = host_from_decorator {
-        // Merge properties
-        for prop in decorator_host.properties {
-            metadata.host.properties.push(prop);
-        }
-        // Merge listeners
-        for listener in decorator_host.listeners {
-            metadata.host.listeners.push(listener);
-        }
-        // Merge attributes
-        for attr in decorator_host.attributes {
-            metadata.host.attributes.push(attr);
-        }
-        // Set class and style attrs if not already set
-        if decorator_host.class_attr.is_some() && metadata.host.class_attr.is_none() {
-            metadata.host.class_attr = decorator_host.class_attr;
-        }
-        if decorator_host.style_attr.is_some() && metadata.host.style_attr.is_none() {
-            metadata.host.style_attr = decorator_host.style_attr;
-        }
-    }
-
     Some(metadata)
 }
 
@@ -2080,260 +2058,152 @@ fn extract_host_metadata<'a>(
     Some(host)
 }
 
-/// Extract host directives from a hostDirectives array expression.
-///
-/// Divergence from ngtsc's `extractHostDirectives`: upstream evaluates the
-/// expression with the partial evaluator (a const or spread array works, a
-/// non-array is an error). Here only a literal `ArrayExpression` is read and
-/// anything else yields no host directives, with no diagnostic.
-///
-/// Handles the following patterns:
-/// - Simple identifier: `hostDirectives: [TooltipDirective]`
-/// - Object with directive: `hostDirectives: [{ directive: ColorDirective }]`
-/// - Object with mappings: `hostDirectives: [{ directive: D, inputs: ['color', 'bgColor'], outputs: ['changed'] }]`
-/// - Forward ref: `hostDirectives: [forwardRef(() => MyDirective)]`
-///
-/// Reference: packages/compiler-cli/src/ngtsc/annotations/directive/src/shared.ts:1873-1985
-fn extract_host_directives<'a>(
-    allocator: &'a Allocator,
-    expr: &Expression<'a>,
-    consts: &StringConsts<'a>,
-) -> Vec<'a, R3HostDirectiveMetadata<'a>> {
-    let mut result = Vec::new_in(&allocator);
-
-    let Expression::ArrayExpression(arr) = expr else {
-        return result;
-    };
+/// One `hostDirectives` entry, as ngtsc's `extractHostDirectives` reads it.
+pub struct HostDirectiveEntry<'a> {
+    /// The name the directive class is referenced by in this file: its own
+    /// name, or the local name of its import.
+    pub name: Ident<'a>,
+    /// Written as `forwardRef(() => X)` (ngtsc's synthetic reference).
+    pub is_forward_reference: bool,
+    /// The `inputs` mappings as (publicName, internalName) pairs, or `None`
+    /// when the entry has no `inputs` key.
+    pub inputs: Option<Vec<'a, (Ident<'a>, Ident<'a>)>>,
+    /// The `outputs` mappings, like `inputs`.
+    pub outputs: Option<Vec<'a, (Ident<'a>, Ident<'a>)>>,
+}
 
-    for element in &arr.elements {
-        if let Some(meta) = extract_single_host_directive(allocator, element, consts) {
-            result.push(meta);
-        }
+impl HostDirectiveEntry<'_> {
+    /// Whether `inputs` or `outputs` was written, even as an empty array.
+    pub fn has_mapping_keys(&self) -> bool {
+        self.inputs.is_some() || self.outputs.is_some()
     }
-
-    result
 }
 
-/// Extract a single host directive from an array element.
-fn extract_single_host_directive<'a>(
+/// Reads a `hostDirectives` array the way ngtsc's `extractHostDirectives`
+/// does: through the partial evaluator, so a constant, a spread, a constant
+/// `directive` or mapping array all work, and with its forward-ref resolver,
+/// so `forwardRef(() => X)` (`@angular/core`'s) resolves to `X`.
+///
+/// Divergences: ngtsc reports a non-array, an entry that isn't a class
+/// reference and a mapping that isn't a string array; here they are skipped.
+/// A `forwardRef` is only seen where it's written in the array literal itself
+/// or as the `directive` of an object entry (also one read from a constant);
+/// a bare `forwardRef` element inside a constant array is skipped.
+/// A `[internalName, publicName]` tuple is accepted as a mapping.
+pub fn evaluate_host_directives<'a>(
     allocator: &'a Allocator,
-    element: &ArrayExpressionElement<'a>,
+    expr: &'a Expression<'a>,
     consts: &StringConsts<'a>,
-) -> Option<R3HostDirectiveMetadata<'a>> {
-    match element {
-        // Simple identifier: TooltipDirective
-        ArrayExpressionElement::Identifier(id) => Some(R3HostDirectiveMetadata {
-            directive: OutputAstBuilder::variable(allocator, id.name.clone().into()),
-            is_forward_reference: false,
-            inputs: Vec::new_in(&allocator),
-            outputs: Vec::new_in(&allocator),
-        }),
-
-        // Object expression: { directive: ColorDirective, inputs: [...], outputs: [...] }
-        ArrayExpressionElement::ObjectExpression(obj) => {
-            let mut directive_expr = None;
-            let mut inputs = Vec::new_in(&allocator);
-            let mut outputs = Vec::new_in(&allocator);
-            let mut is_forward_reference = false;
-
-            for prop in &obj.properties {
-                if let ObjectPropertyKind::ObjectProperty(prop) = prop
-                    && is_metadata_property(prop)
-                {
-                    let Some(key_name) = get_property_key_name(&prop.key, consts) else {
-                        continue;
-                    };
+) -> std::vec::Vec<HostDirectiveEntry<'a>> {
+    let evaluator = Evaluator::new(consts);
 
-                    match key_name.as_str() {
-                        "directive" => {
-                            let (expr, is_forward_ref) =
-                                extract_directive_reference(allocator, &prop.value);
-                            directive_expr = expr;
-                            is_forward_reference = is_forward_ref;
+    // Each element's value, with the expression it was written as when that's
+    // in the array literal.
+    let mut elements: std::vec::Vec<(Value<'a>, Option<&'a Expression<'a>>)> = std::vec::Vec::new();
+    match expr.get_inner_expression() {
+        Expression::ArrayExpression(array) => {
+            for element in &array.elements {
+                match element {
+                    ArrayExpressionElement::SpreadElement(spread) => {
+                        if let Value::Array(values) = evaluator.evaluate(&spread.argument) {
+                            elements.extend(values.into_iter().map(|value| (value, None)));
                         }
-                        "inputs" => {
-                            inputs = extract_io_mappings(allocator, &prop.value);
-                        }
-                        "outputs" => {
-                            outputs = extract_io_mappings(allocator, &prop.value);
-                        }
-                        _ => {}
+                    }
+                    ArrayExpressionElement::Elision(_) => elements.push((Value::Undefined, None)),
+                    element => {
+                        let element = element.to_expression();
+                        elements.push((evaluator.evaluate(element), Some(element)));
                     }
                 }
             }
-
-            directive_expr.map(|directive| R3HostDirectiveMetadata {
-                directive,
-                is_forward_reference,
-                inputs,
-                outputs,
-            })
         }
-
-        // ForwardRef call: forwardRef(() => MyDirective)
-        ArrayExpressionElement::CallExpression(call) => {
-            if is_forward_ref_call(&call.callee) {
-                if let Some(name) = extract_forward_ref_directive_name(call.arguments.first()) {
-                    return Some(R3HostDirectiveMetadata {
-                        directive: OutputAstBuilder::variable(allocator, name),
-                        is_forward_reference: true,
-                        inputs: Vec::new_in(&allocator),
-                        outputs: Vec::new_in(&allocator),
-                    });
-                }
+        _ => {
+            if let Value::Array(values) = evaluator.evaluate(expr) {
+                elements.extend(values.into_iter().map(|value| (value, None)));
             }
-            None
         }
-
-        _ => None,
     }
-}
-
-/// Extract a directive reference from an expression.
-///
-/// Returns the directive expression and whether it's a forward reference.
-fn extract_directive_reference<'a>(
-    allocator: &'a Allocator,
-    expr: &Expression<'a>,
-) -> (Option<crate::output::ast::OutputExpression<'a>>, bool) {
-    match expr {
-        // Simple identifier: ColorDirective
-        Expression::Identifier(id) => {
-            (Some(OutputAstBuilder::variable(allocator, id.name.clone().into())), false)
-        }
 
-        // ForwardRef call: forwardRef(() => ColorDirective)
-        Expression::CallExpression(call) => {
-            if is_forward_ref_call(&call.callee) {
-                if let Some(name) = extract_forward_ref_directive_name(call.arguments.first()) {
-                    return (Some(OutputAstBuilder::variable(allocator, name)), true);
-                }
-            }
-            (None, false)
+    // The class a directive reference names, and whether it's a forward ref.
+    let directive = |value: &Value<'a>, written: Option<&'a Expression<'a>>| {
+        if let Some(inner) = written.and_then(|e| try_unwrap_forward_ref(e, Some(consts))) {
+            return host_directive_name(allocator, &evaluator.evaluate(inner)).map(|n| (n, true));
         }
+        host_directive_name(allocator, value).map(|name| (name, false))
+    };
 
-        _ => (None, false),
-    }
-}
-
-/// Check if a callee is a forwardRef call.
-fn is_forward_ref_call(callee: &Expression<'_>) -> bool {
-    match callee {
-        Expression::Identifier(id) => id.name == "forwardRef",
-        _ => false,
-    }
-}
-
-/// Extract the directive name from a forwardRef argument.
-///
-/// Handles: `forwardRef(() => MyDirective)`
-fn extract_forward_ref_directive_name<'a>(arg: Option<&Argument<'a>>) -> Option<Ident<'a>> {
-    let arg = arg?;
-    match arg {
-        Argument::ArrowFunctionExpression(arrow) => {
-            // Expression body: () => MyDirective
-            if let Some(Expression::Identifier(id)) = arrow.get_expression() {
-                return Some(id.name.clone().into());
-            }
-            // Block body with single ExpressionStatement (parity with pre-0.144)
-            if let Some(body) = arrow.get_function_body() {
-                if let Some(oxc_ast::ast::Statement::ExpressionStatement(stmt)) =
-                    body.statements.first()
-                {
-                    if let Expression::Identifier(id) = &stmt.expression {
-                        return Some(id.name.clone().into());
-                    }
-                }
+    elements
+        .into_iter()
+        .filter_map(|(value, written)| {
+            if let Value::Object(_) = &value {
+                let reference = value.prop("directive")?;
+                let (name, is_forward_reference) = directive(&reference.value, reference.expr)?;
+                let mappings =
+                    |key| value.prop(key).map(|p| host_directive_mappings(allocator, &p.value));
+                Some(HostDirectiveEntry {
+                    name,
+                    is_forward_reference,
+                    inputs: mappings("inputs"),
+                    outputs: mappings("outputs"),
+                })
+            } else {
+                let (name, is_forward_reference) = directive(&value, written)?;
+                Some(HostDirectiveEntry { name, is_forward_reference, inputs: None, outputs: None })
             }
-            None
-        }
-        _ => None,
-    }
+        })
+        .collect()
 }
 
-/// Extract input/output mappings from an array expression.
-///
-/// Handles two formats:
-/// - Simple string: `["color"]` - same public and internal name
-/// - Mapping string: `["color: bgColor"]` - internal name mapped to public name
-///
-/// Returns Vec of (publicName, internalName) pairs.
-///
-/// Divergence: ngtsc evaluates the array with the partial evaluator, so a
-/// const or a spread works; here only a literal `ArrayExpression` is read.
-fn extract_io_mappings<'a>(
-    allocator: &'a Allocator,
-    expr: &Expression<'a>,
-) -> Vec<'a, (Ident<'a>, Ident<'a>)> {
-    let mut result = Vec::new_in(&allocator);
-
-    let Expression::ArrayExpression(arr) = expr else {
-        return result;
+/// The name a host directive class reference is written by in this file.
+fn host_directive_name<'a>(allocator: &'a Allocator, value: &Value<'a>) -> Option<Ident<'a>> {
+    let name = match value {
+        Value::Reference { name, kind: RefKind::Class(_) | RefKind::Ambient } => name.as_str(),
+        Value::Reference {
+            kind: RefKind::Import { namespace_member: false, local: Some(local) },
+            ..
+        } => local,
+        _ => return None,
     };
-
-    for element in &arr.elements {
-        if let Some((public_name, internal_name)) = parse_mapping_element(allocator, element) {
-            result.push((public_name, internal_name));
-        }
-    }
-
-    result
+    Some(Ident::from(allocator.alloc_str(name)))
 }
 
-/// Parse a single mapping element from an input/output array.
-///
-/// Handles:
-/// - Simple string: `"color"` -> ("color", "color")
-/// - Mapping string: `"color: bgColor"` -> ("bgColor", "color")
-/// - Tuple array: `["color", "bgColor"]` -> ("bgColor", "color")
-fn parse_mapping_element<'a>(
+/// A host directive `inputs` / `outputs` array as (publicName, internalName)
+/// pairs, like ngtsc's `parseMappingStringArray`: `'field'` or
+/// `'field: alias'` (only the first two `:`-separated parts count), collected
+/// into an object keyed by the field, so a field mapped twice keeps its first
+/// position and its last alias, and array-index fields come first.
+fn host_directive_mappings<'a>(
     allocator: &'a Allocator,
-    element: &ArrayExpressionElement<'a>,
-) -> Option<(Ident<'a>, Ident<'a>)> {
-    match element {
-        // Simple string: "color" - same public and internal name
-        ArrayExpressionElement::StringLiteral(lit) => {
-            let value = lit.value.as_str()?;
-
-            // Check for mapping format: "internalName: publicName"
-            if let Some(colon_pos) = value.find(':') {
-                let internal_name = value[..colon_pos].trim();
-                let public_name = value[colon_pos + 1..].trim();
-                Some((
-                    Ident::from(allocator.alloc_str(public_name)),
-                    Ident::from(allocator.alloc_str(internal_name)),
-                ))
-            } else {
-                // Same name for both
-                Some((Ident::from(value), Ident::from(value)))
-            }
-        }
-
-        // Tuple array: ["internalName", "publicName"]
-        ArrayExpressionElement::ArrayExpression(arr) => {
-            let elements = &arr.elements;
-            if elements.len() >= 2 {
-                let internal = match elements.first() {
-                    Some(ArrayExpressionElement::StringLiteral(lit)) => {
-                        lit.value.as_str().map(Ident::from)
-                    }
-                    _ => None,
-                };
-                let public = match elements.get(1) {
-                    Some(ArrayExpressionElement::StringLiteral(lit)) => {
-                        lit.value.as_str().map(Ident::from)
-                    }
-                    _ => None,
-                };
-                if let (Some(internal_name), Some(public_name)) = (internal, public) {
-                    return Some((public_name, internal_name));
+    value: &Value<'a>,
+) -> Vec<'a, (Ident<'a>, Ident<'a>)> {
+    let alloc = |s: &str| Ident::from(allocator.alloc_str(s));
+    // (internalName, publicName) while collecting, keyed like the object.
+    let mut by_field: Vec<'a, (Ident<'a>, Ident<'a>)> = Vec::new_in(&allocator);
+    if let Value::Array(values) = value {
+        for value in values {
+            let (field, alias) = match value {
+                Value::String(mapping) => {
+                    let mut parts = mapping.split(':').map(str::trim);
+                    let field = parts.next().unwrap_or_default();
+                    (field, parts.next().unwrap_or(field))
                 }
+                // `[internalName, publicName]`, which ngtsc rejects.
+                Value::Array(pair) => match pair.as_slice() {
+                    [Value::String(field), Value::String(alias), ..] => {
+                        (field.as_str(), alias.as_str())
+                    }
+                    _ => continue,
+                },
+                _ => continue,
+            };
+            match by_field.iter_mut().find(|(f, _)| f.as_str() == field) {
+                Some(entry) => entry.1 = alloc(alias),
+                None => by_field.push((alloc(field), alloc(alias))),
             }
-            None
         }
-
-        _ => None,
     }
+    super::metadata::sort_like_object_keys(&mut by_field, |key| key);
+    Vec::from_iter_in(by_field.into_iter().map(|(field, alias)| (alias, field)), &allocator)
 }
 
 #[cfg(test)]
@@ -2807,7 +2677,7 @@ mod tests {
     #[test]
     fn test_extract_directive_host_directives_forward_ref() {
         let code = r#"
-            import {Directive} from '@angular/core';
+            import {Directive, forwardRef} from '@angular/core';
             @Directive({
                 selector: '[appTest]',
                 hostDirectives: [forwardRef(() => MyDirective)]
@@ -2911,6 +2781,155 @@ mod tests {
             assert_eq!(meta.host.properties.len(), 2);
             // Should have 2 listeners: from decorator and from @HostListener
             assert_eq!(meta.host.listeners.len(), 2);
+            // `host:` entries come first, like ngtsc's `extractHostBindings`.
+            assert_eq!(meta.host.properties[0].0.as_str(), "[class.highlighted]");
+            assert_eq!(meta.host.listeners[0].0.as_str(), "(focus)");
+        });
+    }
+
+    #[test]
+    fn test_member_host_bindings_replace_host_entries_in_place() {
+        // ngtsc assigns members into the `host:` objects: a member replaces the
+        // entry with the same key where it was, so each key is bound once.
+        let code = r#"
+            import {Directive, HostBinding, HostListener} from '@angular/core';
+            @Directive({
+                selector: '[appTest]',
+                host: {
+                    '[title]': 'hostTitle',
+                    '[id]': 'hostId',
+                    '(click)': 'fromHost()',
+                    '(focus)': 'onFocus()'
+                }
+            })
+            class TestDirective {
+                @HostBinding('tabIndex') tabIndex = 0;
+                @HostBinding('title') memberTitle = '';
+                @HostListener('click', ['$event']) fromMember(e) {}
+                @HostListener('click') later() {}
+            }
+        "#;
+        assert_directive_metadata(code, |meta| {
+            let props: std::vec::Vec<_> =
+                meta.host.properties.iter().map(|(k, v)| (k.as_str(), v.as_str())).collect();
+            assert_eq!(
+                props,
+                [("[title]", "memberTitle"), ("[id]", "hostId"), ("[tabIndex]", "tabIndex")]
+            );
+            let listeners: std::vec::Vec<_> =
+                meta.host.listeners.iter().map(|(k, v)| (k.as_str(), v.as_str())).collect();
+            assert_eq!(listeners, [("(click)", "later()"), ("(focus)", "onFocus()")]);
+        });
+    }
+
+    #[test]
+    fn test_host_integer_keys_come_first() {
+        // Like any JS object key, an array-index key comes first, ascending.
+        let code = r#"
+            import {Directive} from '@angular/core';
+            @Directive({
+                selector: '[appTest]',
+                host: { z: 'a', '10': 'b', '2': 'c', '02': 'd', '[title]': 't', '[3]': 'x' }
+            })
+            class TestDirective {}
+        "#;
+        assert_directive_metadata(code, |meta| {
+            let attrs: std::vec::Vec<_> =
+                meta.host.attributes.iter().map(|(k, _)| k.as_str()).collect();
+            assert_eq!(attrs, ["2", "10", "z", "02"]);
+            let props: std::vec::Vec<_> =
+                meta.host.properties.iter().map(|(k, _)| k.as_str()).collect();
+            assert_eq!(props, ["[3]", "[title]"]);
+        });
+    }
+
+    #[test]
+    fn test_host_directives_through_evaluator() {
+        let code = r#"
+            import {Directive, forwardRef} from '@angular/core';
+            import {Imported as Local} from './imported';
+            class A {}
+            class B {}
+            const SHARED = [A];
+            const INPUTS = ['value: alias', 'other'];
+            const ALIAS = B;
+            @Directive({
+                selector: '[appTest]',
+                hostDirectives: [
+                    ...SHARED,
+                    { directive: ALIAS, inputs: INPUTS },
+                    { directive: A },
+                    { directive: A, outputs: [] },
+                    Local,
+                    forwardRef(() => Later),
+                ]
+            })
+            class TestDirective {}
+            @Directive({ selector: '[later]' }) class Later {}
+        "#;
+        assert_directive_metadata(code, |meta| {
+            let names: std::vec::Vec<_> = meta
+                .host_directives
+                .iter()
+                .map(|hd| match &hd.directive {
+                    OutputExpression::ReadVar(var) => var.name.as_str(),
+                    _ => panic!("expected a variable"),
+                })
+                .collect();
+            assert_eq!(names, ["A", "B", "A", "A", "Local", "Later"]);
+            let mapping_keys: std::vec::Vec<_> =
+                meta.host_directives.iter().map(|hd| hd.has_mapping_keys).collect();
+            assert_eq!(mapping_keys, [false, true, false, true, false, false]);
+            let forward: std::vec::Vec<_> =
+                meta.host_directives.iter().map(|hd| hd.is_forward_reference).collect();
+            assert_eq!(forward, [false, false, false, false, false, true]);
+            let inputs: std::vec::Vec<_> = meta.host_directives[1]
+                .inputs
+                .iter()
+                .map(|(public, internal)| (public.as_str(), internal.as_str()))
+                .collect();
+            assert_eq!(inputs, [("alias", "value"), ("other", "other")]);
+        });
+    }
+
+    #[test]
+    fn test_host_directive_mappings_like_parse_mapping_string_array() {
+        // Keyed by the field: a field mapped twice keeps its first position and
+        // its last alias. Only the first two `:`-separated parts count.
+        let code = r#"
+            import {Directive} from '@angular/core';
+            class Base {}
+            @Directive({
+                selector: '[appTest]',
+                hostDirectives: [{ directive: Base, inputs: ['a: x', 'b', 'a: y', 'c: d: e'] }]
+            })
+            class TestDirective {}
+        "#;
+        assert_directive_metadata(code, |meta| {
+            let inputs: std::vec::Vec<_> = meta.host_directives[0]
+                .inputs
+                .iter()
+                .map(|(public, internal)| (public.as_str(), internal.as_str()))
+                .collect();
+            assert_eq!(inputs, [("y", "a"), ("b", "b"), ("d", "c")]);
+        });
+    }
+
+    #[test]
+    fn test_forward_ref_not_from_core_is_not_unwrapped() {
+        // ngtsc only unwraps `@angular/core`'s forwardRef.
+        let code = r#"
+            import {Directive} from '@angular/core';
+            import {forwardRef} from './my-forward-ref';
+            @Directive({
+                selector: '[appTest]',
+                hostDirectives: [forwardRef(() => Later)]
+            })
+            class TestDirective {}
+            @Directive({ selector: '[later]' }) class Later {}
+        "#;
+        assert_directive_metadata(code, |meta| {
+            assert!(meta.host_directives.is_empty());
         });
     }
 
diff --git a/crates/oxc_angular_compiler/src/directive/metadata.rs b/crates/oxc_angular_compiler/src/directive/metadata.rs
index 39da9cad7..0e88c0a30 100644
--- a/crates/oxc_angular_compiler/src/directive/metadata.rs
+++ b/crates/oxc_angular_compiler/src/directive/metadata.rs
@@ -173,6 +173,128 @@ impl<'a> R3HostMetadata<'a> {
     }
 }
 
+// =============================================================================
+// Host binding merge (shared by @Directive and @Component)
+// =============================================================================
+
+/// The `@HostBinding` and `@HostListener` members of a class, keyed like `host:`
+/// entries: `[hostPropertyName]` → member name, and `(eventName)` →
+/// `member(args)`.
+pub struct MemberHostBindings<'a> {
+    /// `[hostPropertyName]` → member name, for each `@HostBinding`.
+    pub properties: std::vec::Vec<(Ident<'a>, Ident<'a>)>,
+    /// `(eventName)` → `member(args)`, for each `@HostListener`.
+    pub listeners: std::vec::Vec<(Ident<'a>, Ident<'a>)>,
+}
+
+impl<'a> MemberHostBindings<'a> {
+    /// Reads the `@HostBinding` / `@HostListener` members of `class`, in
+    /// member order (the order ngtsc's `filterToMembersWithDecorator` visits).
+    pub fn of(
+        allocator: &'a Allocator,
+        class: &'a Class<'a>,
+        consts: Option<&super::StringConsts<'a>>,
+    ) -> Self {
+        let wrap = |open: char, name: &str, close: char| {
+            Ident::from(allocator.alloc_str(&format!("{open}{name}{close}")))
+        };
+        let properties =
+            super::property_decorators::extract_host_bindings_in(allocator, class, consts)
+                .into_iter()
+                .map(|(host_prop, class_prop)| (wrap('[', host_prop.as_str(), ']'), class_prop))
+                .collect();
+        // `bindings.listeners[eventName] = `${member.name}(${args.join(',')})``
+        let listeners =
+            super::property_decorators::extract_host_listeners_in(allocator, class, consts)
+                .into_iter()
+                .map(|(event_name, method_name, args)| {
+                    let args = args.iter().map(Ident::as_str).collect::<std::vec::Vec<_>>();
+                    let handler = format!("{}({})", method_name.as_str(), args.join(","));
+                    (
+                        wrap('(', event_name.as_str(), ')'),
+                        Ident::from(allocator.alloc_str(&handler)),
+                    )
+                })
+                .collect();
+        Self { properties, listeners }
+    }
+
+    /// Whether the class has no `@HostBinding` / `@HostListener` member.
+    pub fn is_empty(&self) -> bool {
+        self.properties.is_empty() && self.listeners.is_empty()
+    }
+}
+
+/// Merges the `@HostBinding` / `@HostListener` members into the bindings read
+/// from `host:`, the way ngtsc's `extractHostBindings` does, and puts every
+/// kind in the order ngtsc emits it.
+///
+/// ngtsc keeps each kind in a plain object (`parseHostBindings`) and assigns
+/// each member into it (`bindings.properties[name] = ...`), so:
+/// - a member replaces the `host:` entry (or the earlier member) with the same
+///   key, where that entry was, and each key is bound once;
+/// - the entries are in the order they were first written, except that keys
+///   that are array indices (`'2'`, `'[10]'`) come first, in ascending order,
+///   like the keys of any JS object.
+///
+/// Used by both the directive and the component metadata, so `host:` and the
+/// member decorators combine the same way for both.
+pub fn merge_host_bindings<'a, V>(
+    properties: &mut Vec<'a, (Ident<'a>, Ident<'a>)>,
+    listeners: &mut Vec<'a, (Ident<'a>, Ident<'a>)>,
+    attributes: &mut Vec<'a, (Ident<'a>, V)>,
+    members: MemberHostBindings<'a>,
+) {
+    fn upsert<'a>(entries: &mut Vec<'a, (Ident<'a>, Ident<'a>)>, key: Ident<'a>, value: Ident<'a>) {
+        match entries.iter_mut().find(|(k, _)| *k == key) {
+            Some(entry) => entry.1 = value,
+            None => entries.push((key, value)),
+        }
+    }
+    for (key, value) in members.properties {
+        upsert(properties, key, value);
+    }
+    for (key, value) in members.listeners {
+        upsert(listeners, key, value);
+    }
+    sort_like_object_keys(properties, |key| strip_host_key(key, '[', ']'));
+    sort_like_object_keys(listeners, |key| strip_host_key(key, '(', ')'));
+    sort_like_object_keys(attributes, |key| key);
+}
+
+/// `key` without the brackets of a `[property]` / `(event)` host key: the key
+/// ngtsc's `parseHostBindings` stores the binding under.
+fn strip_host_key(key: &str, open: char, close: char) -> &str {
+    key.strip_prefix(open).and_then(|k| k.strip_suffix(close)).unwrap_or(key)
+}
+
+/// Puts `entries` in the order a JS object enumerates the same keys (written
+/// once each): array-index keys first in ascending order, then the rest in
+/// insertion order (ECMAScript's `OrdinaryOwnPropertyKeys`).
+pub(super) fn sort_like_object_keys<'a, V>(
+    entries: &mut Vec<'a, (Ident<'a>, V)>,
+    object_key: impl Fn(&str) -> &str,
+) {
+    // A stable sort, so the other keys keep their order.
+    if entries.iter().any(|(key, _)| array_index(object_key(key.as_str())).is_some()) {
+        entries.sort_by_key(|(key, _)| {
+            array_index(object_key(key.as_str())).map_or((1, 0), |index| (0, index))
+        });
+    }
+}
+
+/// The value of `key` when it's an array index: the canonical decimal form of
+/// an integer below 2³² − 1.
+fn array_index(key: &str) -> Option<u32> {
+    if key.is_empty() || key.len() > 10 || !key.bytes().all(|b| b.is_ascii_digit()) {
+        return None;
+    }
+    if key.len() > 1 && key.starts_with('0') {
+        return None;
+    }
+    key.parse::<u32>().ok().filter(|&n| n != u32::MAX)
+}
+
 /// Host directive metadata.
 ///
 /// Corresponds to Angular's `R3HostDirectiveMetadata` interface.
@@ -184,6 +306,11 @@ pub struct R3HostDirectiveMetadata<'a> {
     /// Whether the expression is a forward reference.
     pub is_forward_reference: bool,
 
+    /// Whether `inputs` or `outputs` was written, even as an empty array.
+    /// ngtsc keeps those as non-null mappings, so the entry is passed to
+    /// `ɵɵHostDirectivesFeature` as `{ directive }` instead of the bare class.
+    pub has_mapping_keys: bool,
+
     /// Inputs from the host directive that will be exposed on the host.
     /// Key: public name, Value: internal name
     pub inputs: Vec<'a, (Ident<'a>, Ident<'a>)>,
@@ -476,39 +603,16 @@ impl<'a> R3DirectiveMetadataBuilder<'a> {
             self = self.add_query(query);
         }
 
-        // Extract host bindings from @HostBinding
-        // Wrap with brackets: "class.active" -> "[class.active]"
-        let host_bindings =
-            super::property_decorators::extract_host_bindings_in(allocator, class, consts);
-        for (host_prop, class_prop) in host_bindings {
-            // Add to host.properties with wrapped key
-            let wrapped_key =
-                Ident::from(allocator.alloc_str(&format!("[{}]", host_prop.as_str())));
-            self.host.properties.push((wrapped_key, class_prop));
-        }
-
-        // Extract host listeners from @HostListener
-        // Wrap event name with parentheses and build method expression with args
-        // Reference: Angular's shared.ts:713 - `bindings.listeners[eventName] = \`${member.name}(${args.join(',')})\``
-        let host_listeners =
-            super::property_decorators::extract_host_listeners_in(allocator, class, consts);
-        for (event_name, method_name, args) in host_listeners {
-            // Wrap event name: "click" -> "(click)"
-            let wrapped_key =
-                Ident::from(allocator.alloc_str(&format!("({})", event_name.as_str())));
-
-            // Build method expression with args: "handleClick" + ["$event"] -> "handleClick($event)"
-            let method_expr = if args.is_empty() {
-                Ident::from(allocator.alloc_str(&format!("{}()", method_name.as_str())))
-            } else {
-                let args_str: String =
-                    args.iter().map(|a| a.as_str()).collect::<std::vec::Vec<_>>().join(",");
-                Ident::from(allocator.alloc_str(&format!("{}({})", method_name.as_str(), args_str)))
-            };
-
-            // Add to host.listeners
-            self.host.listeners.push((wrapped_key, method_expr));
-        }
+        // Merge @HostBinding / @HostListener into the `host:` bindings (set
+        // with `Self::host` beforehand, if any), as ngtsc does.
+        let members = MemberHostBindings::of(allocator, class, consts);
+        let host = &mut self.host;
+        merge_host_bindings(
+            &mut host.properties,
+            &mut host.listeners,
+            &mut host.attributes,
+            members,
+        );
 
         self
     }
diff --git a/crates/oxc_angular_compiler/src/directive/mod.rs b/crates/oxc_angular_compiler/src/directive/mod.rs
index 7886d6030..d2f44635f 100644
--- a/crates/oxc_angular_compiler/src/directive/mod.rs
+++ b/crates/oxc_angular_compiler/src/directive/mod.rs
@@ -21,11 +21,12 @@ mod metadata;
 mod property_decorators;
 mod query;
 
-pub(crate) use compiler::create_host_directive_mappings_array;
+pub(crate) use compiler::create_host_directives_feature_arg;
 pub use compiler::{
     DirectiveCompileResult, compile_directive, compile_directive_from_metadata,
     create_inputs_literal, create_outputs_literal,
 };
+pub(crate) use decorator::evaluate_host_directives;
 pub(crate) use decorator::find_directive_decorator;
 pub(crate) use decorator::{
     HostKey, angular_decorator_config, evaluate_host_metadata, evaluate_styles,
@@ -45,15 +46,16 @@ pub(crate) use dts_type::{quote as ts_string_literal, quote_literal as quote_str
 pub use evaluator::input_transform_types;
 #[cfg(feature = "cross_file_elision")]
 pub(crate) use evaluator::{Evaluator, ImportValueResolver, StaticValue};
+pub(crate) use metadata::{MemberHostBindings, merge_host_bindings};
 pub use metadata::{
     QueryPredicate, R3DirectiveMetadata, R3DirectiveMetadataBuilder, R3HostDirectiveMetadata,
     R3HostMetadata, R3InputMetadata, R3QueryMetadata,
 };
 pub(crate) use property_decorators::{
     angular_class_decorator, angular_member_decorator, angular_param_decorator,
-    decorator_written_name, extract_host_bindings_in, extract_host_listeners_in,
-    is_angular_core_decorator, parse_decorator_queries, try_parse_signal_input,
-    try_parse_signal_model, try_parse_signal_output, unwrap_initializer_api_expr,
+    decorator_written_name, is_angular_core_decorator, parse_decorator_queries,
+    try_parse_signal_input, try_parse_signal_model, try_parse_signal_output,
+    unwrap_initializer_api_expr,
 };
 pub use property_decorators::{
     extract_class_queries, extract_content_queries, extract_host_bindings, extract_host_listeners,
diff --git a/crates/oxc_angular_compiler/src/directive/property_decorators.rs b/crates/oxc_angular_compiler/src/directive/property_decorators.rs
index fd453d00b..b080aca0b 100644
--- a/crates/oxc_angular_compiler/src/directive/property_decorators.rs
+++ b/crates/oxc_angular_compiler/src/directive/property_decorators.rs
@@ -452,7 +452,7 @@ fn extract_boolean_value(expr: &Expression<'_>) -> Option<bool> {
 /// `forwardRef` (a local function, one from another module, `util.forwardRef`)
 /// is kept as written. Without the file's imports (`consts` is `None`), a bare
 /// `forwardRef` is matched by name.
-fn try_unwrap_forward_ref<'a>(
+pub fn try_unwrap_forward_ref<'a>(
     expr: &'a Expression<'a>,
     consts: Option<&super::StringConsts<'_>>,
 ) -> Option<&'a Expression<'a>> {
diff --git a/crates/oxc_angular_compiler/src/pipeline/ingest.rs b/crates/oxc_angular_compiler/src/pipeline/ingest.rs
index 2304a4545..9c1942818 100644
--- a/crates/oxc_angular_compiler/src/pipeline/ingest.rs
+++ b/crates/oxc_angular_compiler/src/pipeline/ingest.rs
@@ -49,7 +49,8 @@ use crate::ir::ops::{
 };
 use crate::output::ast::{OutputExpression, ReadVarExpr};
 use crate::pipeline::compilation::{AliasVariable, ContextVariable};
-use rustc_hash::{FxHashMap, FxHashSet};
+use indexmap::IndexMap;
+use rustc_hash::{FxBuildHasher, FxHashMap, FxHashSet};
 use std::cell::RefCell;
 
 /// Options for ingesting a component template.
@@ -3698,11 +3699,16 @@ pub struct HostBindingInput<'a> {
     pub properties: Vec<'a, R3BoundAttribute<'a>>,
     /// Static host attributes (`attr="value"`).
     /// Uses OutputExpression to match TypeScript's `{[key: string]: o.Expression}`.
-    pub attributes: FxHashMap<Ident<'a>, crate::output::ast::OutputExpression<'a>>,
+    /// Insertion-ordered like that object, since the order is the `hostAttrs` order.
+    pub attributes: HostAttributes<'a>,
     /// Host event bindings (`(event)="handler"`).
     pub events: Vec<'a, R3BoundEvent<'a>>,
 }
 
+/// The static host attributes of a [`HostBindingInput`], in `hostAttrs` order.
+pub type HostAttributes<'a> =
+    IndexMap<Ident<'a>, crate::output::ast::OutputExpression<'a>, FxBuildHasher>;
+
 /// Stores an expression from a host binding and returns an IrExpression that references it.
 fn host_store_and_ref_expr<'a>(
     job: &mut HostBindingCompilationJob<'a>,
diff --git a/crates/oxc_angular_compiler/tests/integration_test.rs b/crates/oxc_angular_compiler/tests/integration_test.rs
index 2a0198fcc..450db4e3d 100644
--- a/crates/oxc_angular_compiler/tests/integration_test.rs
+++ b/crates/oxc_angular_compiler/tests/integration_test.rs
@@ -18074,3 +18074,114 @@ fn test_i18n_attribute_sanitizers_are_version_gated() {
         );
     }
 }
+
+/// `hostAttrs` follow ngtsc's object order: as written, with array-index keys
+/// first, then a non-empty static style and class (an empty one is dropped).
+#[test]
+fn host_attrs_follow_ngtsc_order() {
+    let allocator = Allocator::default();
+    let source = r#"
+import { Directive } from '@angular/core';
+
+@Directive({
+    selector: '[d]',
+    host: { z: 'last', '10': 'ten', role: 'button', '2': 'two', class: '', style: 'color: red' },
+})
+export class D {}
+"#;
+    let result = transform_angular_file(&allocator, "d.ts", source, None, None);
+    assert!(!result.has_errors(), "Should not have errors: {:?}", result.diagnostics);
+    let normalized = result.code.replace([' ', '\n', '\t'], "");
+    assert!(
+        normalized.contains(
+            r#"hostAttrs:["2","two","10","ten","z","last","role","button",2,"color","red"]"#
+        ),
+        "{}",
+        result.code
+    );
+}
+
+/// A `@HostBinding` / `@HostListener` on a key `host:` already binds replaces
+/// that entry where it was written, so the key is bound once (ngtsc's
+/// `extractHostBindings`), for components and directives alike.
+#[test]
+fn host_members_replace_host_entries_once() {
+    let allocator = Allocator::default();
+    let source = r#"
+import { Component, Directive, HostBinding, HostListener } from '@angular/core';
+
+@Component({
+    selector: 'app-c',
+    template: '',
+    host: { '[title]': 'hostTitle', '[id]': 'hostId', '(click)': 'fromHost()' },
+})
+export class C {
+    @HostBinding('title') memberTitle = '';
+    @HostListener('click') fromMember() {}
+}
+
+@Directive({
+    selector: '[d]',
+    host: { '[class.on]': 'flag', '(click)': 'fromHost()' },
+})
+export class D {
+    @HostBinding('class.on') memberFlag = false;
+    @HostListener('click') fromMember() {}
+}
+"#;
+    let result = transform_angular_file(&allocator, "c.ts", source, None, None);
+    assert!(!result.has_errors(), "Should not have errors: {:?}", result.diagnostics);
+    let normalized = result.code.replace([' ', '\n', '\t'], "");
+    assert!(
+        normalized.contains(r#"ɵɵdomProperty("title",ctx.memberTitle)("id",ctx.hostId)"#),
+        "{}",
+        result.code
+    );
+    assert!(normalized.contains(r#"ɵɵclassProp("on",ctx.memberFlag);"#), "{}", result.code);
+    assert!(!normalized.contains("ctx.fromHost()"), "{}", result.code);
+    assert_eq!(normalized.matches("returnctx.fromMember();").count(), 2, "{}", result.code);
+}
+
+/// `createHostDirectivesFeatureArg`: an entry is the bare class unless
+/// `inputs` or `outputs` is written (even empty), and a forward reference
+/// wraps the whole array in a function, for directives as for components.
+#[test]
+fn host_directives_feature_arg_matches_angular() {
+    let allocator = Allocator::default();
+    let source = r#"
+import { Component, Directive, forwardRef } from '@angular/core';
+
+@Directive({ selector: '[basic]' })
+export class BasicDirective {}
+
+const HOST_DIRECTIVES = [BasicDirective, { directive: BasicDirective, inputs: [] }];
+
+@Component({ selector: 'app-c', template: '', hostDirectives: HOST_DIRECTIVES })
+export class C {}
+
+@Directive({
+    selector: '[d]',
+    hostDirectives: [{ directive: BasicDirective }, forwardRef(() => LaterDirective)],
+})
+export class D {}
+
+@Directive({ selector: '[later]' })
+export class LaterDirective {}
+"#;
+    let result = transform_angular_file(&allocator, "c.ts", source, None, None);
+    assert!(!result.has_errors(), "Should not have errors: {:?}", result.diagnostics);
+    let normalized = result.code.replace([' ', '\n', '\t'], "");
+    assert!(
+        normalized
+            .contains(r#"ɵɵHostDirectivesFeature([BasicDirective,{directive:BasicDirective}])"#),
+        "{}",
+        result.code
+    );
+    assert!(
+        normalized.contains(
+            r#"ɵɵHostDirectivesFeature(function(){return[BasicDirective,LaterDirective];})"#
+        ),
+        "{}",
+        result.code
+    );
+}
diff --git a/crates/oxc_angular_compiler/tests/partial_directive_test.rs b/crates/oxc_angular_compiler/tests/partial_directive_test.rs
index 2a1ecf2e7..2891083d5 100644
--- a/crates/oxc_angular_compiler/tests/partial_directive_test.rs
+++ b/crates/oxc_angular_compiler/tests/partial_directive_test.rs
@@ -169,6 +169,7 @@ fn host_directive_with_forward_ref_wraps_directive() {
     let hd = R3HostDirectiveMetadata {
         directive: read_var(&allocator, "FwdHostDir"),
         is_forward_reference: true,
+        has_mapping_keys: false,
         inputs: Vec::new_in(&&allocator),
         outputs: Vec::new_in(&&allocator),
     };
@@ -216,6 +217,7 @@ fn host_directive_with_forward_ref_wraps_directive() {
             v.push(R3HostDirectiveMetadata {
                 directive: read_var(&allocator, "FwdHostDir"),
                 is_forward_reference: true,
+                has_mapping_keys: false,
                 inputs: Vec::new_in(&&allocator),
                 outputs: Vec::new_in(&&allocator),
             });
diff --git a/napi/angular-compiler/e2e/compare/fixtures/host-bindings/host-order-and-merge.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/host-bindings/host-order-and-merge.fixture.ts
new file mode 100644
index 000000000..cb81ca0c6
--- /dev/null
+++ b/napi/angular-compiler/e2e/compare/fixtures/host-bindings/host-order-and-merge.fixture.ts
@@ -0,0 +1,223 @@
+/**
+ * The order of host attributes, properties and listeners, and how `host:` entries merge with
+ * `@HostBinding` / `@HostListener` members.
+ *
+ * ngtsc keeps each kind in a plain object (`parseHostBindings`), so entries stay in the order they
+ * are written, except that integer-like keys come first in ascending order. A member decorator
+ * assigns into the same object (`extractHostBindings`), so it replaces a `host:` entry with the same
+ * key where that entry was, and a key is only bound once.
+ */
+import type { Fixture } from '../types.js'
+
+function fixture(
+  name: string,
+  description: string,
+  className: string,
+  sourceCode: string,
+): Fixture {
+  return {
+    name,
+    category: 'host-bindings',
+    description,
+    className,
+    type: 'full-transform',
+    sourceCode: sourceCode.trim(),
+    expectedFeatures: [],
+  }
+}
+
+export const fixtures: Fixture[] = [
+  fixture(
+    'host-attrs-written-order',
+    'Static host attributes keep the order they are written in',
+    'HostAttrsOrderComponent',
+    `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-host-attrs-order',
+  template: '',
+  host: {
+    role: 'button',
+    tabindex: '0',
+    'aria-hidden': 'true',
+    'data-kind': 'primary',
+    id: 'main',
+  },
+})
+export class HostAttrsOrderComponent {}
+`,
+  ),
+  fixture(
+    'host-attrs-integer-keys',
+    'Integer-like host keys come first, in ascending order, like any JS object key',
+    'HostAttrsIntegerKeysDirective',
+    `
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[appIntegerKeys]',
+  host: {
+    z: 'last',
+    '10': 'ten',
+    '2': 'two',
+    a: 'first',
+    '[20]': 'twenty',
+    '[title]': 'title',
+    '[3]': 'three',
+  },
+})
+export class HostAttrsIntegerKeysDirective {
+  twenty = 1;
+  title = '';
+  three = 3;
+}
+`,
+  ),
+  fixture(
+    'host-attrs-with-class-and-style',
+    'Static class and style are added after the other host attributes',
+    'HostAttrsClassStyleComponent',
+    `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-host-attrs-class-style',
+  template: '',
+  host: {
+    class: 'a b',
+    role: 'region',
+    style: 'color: red',
+    id: 'panel',
+  },
+})
+export class HostAttrsClassStyleComponent {}
+`,
+  ),
+  fixture(
+    'host-attrs-empty-class',
+    'An empty static class or style is not a host attribute',
+    'HostAttrsEmptyClassDirective',
+    `
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[appEmptyClass]',
+  host: { class: '', style: '', role: 'note' },
+})
+export class HostAttrsEmptyClassDirective {}
+`,
+  ),
+  fixture(
+    'host-only-empty-class',
+    'A host with only an empty static class compiles no host bindings',
+    'HostOnlyEmptyClassComponent',
+    `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-only-empty-class',
+  template: '',
+  host: { class: '' },
+})
+export class HostOnlyEmptyClassComponent {}
+`,
+  ),
+  fixture(
+    'host-listener-merged-with-host-component',
+    'A @HostListener replaces a host: listener on the same event, where it was written',
+    'HostListenerMergeComponent',
+    `
+import { Component, HostListener } from '@angular/core';
+
+@Component({
+  selector: 'app-host-listener-merge',
+  template: '',
+  host: { '(click)': 'fromHost()', '(focus)': 'onFocus()' },
+})
+export class HostListenerMergeComponent {
+  fromHost() {}
+  onFocus() {}
+  @HostListener('keydown', ['$event']) onKey(e: any) {}
+  @HostListener('click') fromMember() {}
+}
+`,
+  ),
+  fixture(
+    'host-listener-merged-with-host-directive',
+    'A @HostListener replaces a host: listener on the same event (directive)',
+    'HostListenerMergeDirective',
+    `
+import { Directive, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[appHostListenerMerge]',
+  host: { '(click)': 'fromHost()', '(window:resize)': 'onResize()' },
+})
+export class HostListenerMergeDirective {
+  fromHost() {}
+  onResize() {}
+  @HostListener('click', ['$event']) fromMember(e: any) {}
+  @HostListener('mouseenter') onEnter() {}
+}
+`,
+  ),
+  fixture(
+    'host-binding-merged-with-host-component',
+    'A @HostBinding replaces a host: property on the same key, where it was written',
+    'HostBindingMergeComponent',
+    `
+import { Component, HostBinding } from '@angular/core';
+
+@Component({
+  selector: 'app-host-binding-merge',
+  template: '',
+  host: { '[title]': 'hostTitle', '[id]': 'hostId', '[class.on]': 'flag' },
+})
+export class HostBindingMergeComponent {
+  hostTitle = 'a';
+  hostId = 'b';
+  flag = true;
+  @HostBinding('attr.role') role = 'button';
+  @HostBinding('title') memberTitle = 'c';
+}
+`,
+  ),
+  fixture(
+    'host-binding-merged-with-host-directive',
+    'A @HostBinding replaces a host: property on the same key (directive)',
+    'HostBindingMergeDirective',
+    `
+import { Directive, HostBinding } from '@angular/core';
+
+@Directive({
+  selector: '[appHostBindingMerge]',
+  host: { '[title]': 'hostTitle', '[class.on]': 'flag', role: 'note' },
+})
+export class HostBindingMergeDirective {
+  hostTitle = 'a';
+  flag = true;
+  @HostBinding('class.on') memberFlag = false;
+  @HostBinding('tabIndex') tabIndex = 0;
+}
+`,
+  ),
+  fixture(
+    'host-members-same-key',
+    'Two members bound to the same host key: the later one wins',
+    'HostMembersSameKeyDirective',
+    `
+import { Directive, HostBinding, HostListener } from '@angular/core';
+
+@Directive({ selector: '[appSameKey]' })
+export class HostMembersSameKeyDirective {
+  @HostBinding('title') first = 'a';
+  @HostBinding('id') id = 'x';
+  @HostBinding('title') second = 'b';
+  @HostListener('click') one() {}
+  @HostListener('focus') focus() {}
+  @HostListener('click') two() {}
+}
+`,
+  ),
+]
diff --git a/napi/angular-compiler/e2e/compare/fixtures/host-bindings/host-spread-and-constant.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/host-bindings/host-spread-and-constant.fixture.ts
index f25417596..683b56106 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/host-bindings/host-spread-and-constant.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/host-bindings/host-spread-and-constant.fixture.ts
@@ -1,14 +1,11 @@
 /**
  * `host` metadata that is not a plain literal: a spread of an object, or a host
  * that is itself a constant. ngtsc evaluates the expression statically, so each
- * compiles to the same bindings as the entries written out.
- *
- * Fixtures keep to one plain attribute, because the order of several in
- * `hostAttrs` is a separate documented difference (see known-differences.ts).
+ * compiles to the same bindings as the entries written out, in the same order.
  */
 import type { Fixture } from '../types.js'
 
-const ALL = `{ '(click)': 'go()', '[title]': 't', '[class.x]': 'on', '[style.width]': 'w', '[attr.aria-label]': 't', role: 'button', class: 'a b', style: 'color: red' }`
+const ALL = `{ '(click)': 'go()', '[title]': 't', '[class.x]': 'on', '[style.width]': 'w', '[attr.aria-label]': 't', role: 'button', tabindex: '0', 'data-kind': 'x', class: 'a b', style: 'color: red' }`
 
 function host(
   name: string,
diff --git a/napi/angular-compiler/e2e/compare/fixtures/host-directives/host-directives-evaluated.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/host-directives/host-directives-evaluated.fixture.ts
new file mode 100644
index 000000000..0655f9461
--- /dev/null
+++ b/napi/angular-compiler/e2e/compare/fixtures/host-directives/host-directives-evaluated.fixture.ts
@@ -0,0 +1,249 @@
+/**
+ * `hostDirectives` as ngtsc reads it: through the partial evaluator (constants, spreads,
+ * `forwardRef`), with the shorthand `HostDirectivesFeature` argument rules of
+ * `createHostDirectivesFeatureArg`.
+ *
+ * - An entry without `inputs` and `outputs` is passed as the bare class; once either key is
+ *   written (even as an empty array) it is passed as `{ directive }`.
+ * - A `forwardRef` entry makes the whole argument a `function () { return [...] }`.
+ */
+import type { Fixture } from '../types.js'
+
+function fixture(
+  name: string,
+  description: string,
+  className: string,
+  sourceCode: string,
+): Fixture {
+  return {
+    name,
+    category: 'host-directives',
+    description,
+    className,
+    type: 'full-transform',
+    sourceCode: sourceCode.trim(),
+    expectedFeatures: ['ɵɵHostDirectivesFeature'],
+  }
+}
+
+export const fixtures: Fixture[] = [
+  fixture(
+    'host-directives-object-without-mappings',
+    'An object entry with only `directive` is passed as the bare class',
+    'ObjectNoMappingsComponent',
+    `
+import { Component, Directive } from '@angular/core';
+
+@Directive({ selector: '[basic]' })
+export class BasicDirective {}
+
+@Component({
+  selector: 'app-object-no-mappings',
+  hostDirectives: [{ directive: BasicDirective }],
+  template: '',
+})
+export class ObjectNoMappingsComponent {}
+`,
+  ),
+  fixture(
+    'host-directives-empty-outputs-only',
+    'An empty `outputs` alone still gives `{ directive }`',
+    'EmptyOutputsComponent',
+    `
+import { Component, Directive } from '@angular/core';
+
+@Directive({ selector: '[basic]' })
+export class BasicDirective {}
+
+@Component({
+  selector: 'app-empty-outputs',
+  hostDirectives: [BasicDirective, { directive: BasicDirective, outputs: [] }],
+  template: '',
+})
+export class EmptyOutputsComponent {}
+`,
+  ),
+  fixture(
+    'directive-host-directives-shorthand',
+    'A directive passes a host directive without mappings as the bare class',
+    'ShorthandHostDirective',
+    `
+import { Directive } from '@angular/core';
+
+@Directive({ selector: '[basic]' })
+export class BasicDirective {}
+
+@Directive({
+  selector: '[shorthand]',
+  hostDirectives: [BasicDirective, { directive: BasicDirective }],
+})
+export class ShorthandHostDirective {}
+`,
+  ),
+  fixture(
+    'directive-host-directives-empty-mappings',
+    'A directive passes a host directive with empty mappings as `{ directive }`',
+    'EmptyMappingsHostDirective',
+    `
+import { Directive } from '@angular/core';
+
+@Directive({ selector: '[basic]' })
+export class BasicDirective {}
+
+@Directive({
+  selector: '[emptyMappings]',
+  hostDirectives: [{ directive: BasicDirective, inputs: [], outputs: [] }],
+})
+export class EmptyMappingsHostDirective {}
+`,
+  ),
+  fixture(
+    'host-directives-forward-ref',
+    'A forwardRef entry wraps the whole argument in a function',
+    'ForwardRefHostComponent',
+    `
+import { Component, Directive, forwardRef } from '@angular/core';
+
+@Directive({ selector: '[early]' })
+export class EarlyDirective {}
+
+@Component({
+  selector: 'app-forward-ref-host',
+  hostDirectives: [EarlyDirective, forwardRef(() => LaterDirective)],
+  template: '',
+})
+export class ForwardRefHostComponent {}
+
+@Directive({ selector: '[later]' })
+export class LaterDirective {}
+`,
+  ),
+  fixture(
+    'host-directives-forward-ref-object',
+    'A forwardRef `directive` in an object entry with mappings',
+    'ForwardRefObjectComponent',
+    `
+import { Component, Directive, Input, forwardRef } from '@angular/core';
+
+@Component({
+  selector: 'app-forward-ref-object',
+  hostDirectives: [{ directive: forwardRef(() => LaterDirective), inputs: ['value: alias'] }],
+  template: '',
+})
+export class ForwardRefObjectComponent {}
+
+@Directive({ selector: '[later]' })
+export class LaterDirective {
+  @Input() value = '';
+}
+`,
+  ),
+  fixture(
+    'directive-host-directives-forward-ref',
+    'A directive with a forwardRef host directive wraps the whole argument in a function',
+    'ForwardRefHostDirective',
+    `
+import { Directive, forwardRef } from '@angular/core';
+
+@Directive({
+  selector: '[forwardRefHost]',
+  hostDirectives: [forwardRef(() => LaterDirective)],
+})
+export class ForwardRefHostDirective {}
+
+@Directive({ selector: '[later]' })
+export class LaterDirective {}
+`,
+  ),
+  fixture(
+    'host-directives-const-array',
+    'hostDirectives read from a constant',
+    'ConstHostDirectivesComponent',
+    `
+import { Component, Directive } from '@angular/core';
+
+@Directive({ selector: '[a]' })
+export class ADirective {}
+
+@Directive({ selector: '[b]' })
+export class BDirective {}
+
+const HOST_DIRECTIVES = [ADirective, { directive: BDirective, inputs: [] }];
+
+@Component({
+  selector: 'app-const-host-directives',
+  hostDirectives: HOST_DIRECTIVES,
+  template: '',
+})
+export class ConstHostDirectivesComponent {}
+`,
+  ),
+  fixture(
+    'host-directives-spread',
+    'hostDirectives with a spread constant',
+    'SpreadHostDirectivesComponent',
+    `
+import { Component, Directive } from '@angular/core';
+
+@Directive({ selector: '[a]' })
+export class ADirective {}
+
+@Directive({ selector: '[b]' })
+export class BDirective {}
+
+const SHARED = [ADirective];
+
+@Component({
+  selector: 'app-spread-host-directives',
+  hostDirectives: [...SHARED, BDirective],
+  template: '',
+})
+export class SpreadHostDirectivesComponent {}
+`,
+  ),
+  fixture(
+    'directive-host-directives-const-mappings',
+    'Host directive mappings and the directive read from constants',
+    'ConstMappingsHostDirective',
+    `
+import { Directive, Input, Output, EventEmitter } from '@angular/core';
+
+@Directive({ selector: '[base]' })
+export class BaseDirective {
+  @Input() value = '';
+  @Output() changed = new EventEmitter<string>();
+}
+
+const BASE = BaseDirective;
+const INPUTS = ['value: alias'];
+const OUTPUT = 'changed';
+
+@Directive({
+  selector: '[constMappings]',
+  hostDirectives: [{ directive: BASE, inputs: INPUTS, outputs: [OUTPUT] }],
+})
+export class ConstMappingsHostDirective {}
+`,
+  ),
+  fixture(
+    'host-directives-duplicate-mapping',
+    'A field mapped twice keeps one entry, the last alias, at its first position',
+    'DuplicateMappingComponent',
+    `
+import { Component, Directive, Input } from '@angular/core';
+
+@Directive({ selector: '[base]' })
+export class BaseDirective {
+  @Input() a = '';
+  @Input() b = '';
+}
+
+@Component({
+  selector: 'app-duplicate-mapping',
+  hostDirectives: [{ directive: BaseDirective, inputs: ['a: x', 'b', 'a: y'] }],
+  template: '',
+})
+export class DuplicateMappingComponent {}
+`,
+  ),
+]
diff --git a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
index 06f038422..4cdc9a9bd 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
@@ -32,7 +32,6 @@ export interface KnownDifference {
   reasons: string[]
 }
 
-const HOST_ATTRS_ORDER = 'hostAttrs are emitted in a different order'
 const CSS_WS = 'runs of whitespace inside shimmed selectors are collapsed where Angular keeps them'
 const DEBUG_NAME =
   'signal(), input() and the other signal APIs lack the ngDevMode `debugName` argument ngtsc adds to class fields'
@@ -47,7 +46,8 @@ const ALIASED_INJECTABLE =
 
 const NG_MODULE_SCOPE =
   'ɵɵsetNgModuleScope runs unguarded where Angular wraps it in `ngJitMode`: Oxc compiles one file at a time and resolves component dependencies at runtime through the scope it registers, so production builds (ngJitMode = false) still need it'
-const NG_MODULE_SCOPE_ORDER = 'ɵɵsetNgModuleScope is emitted before ɵsetClassMetadata where Angular emits it after'
+const NG_MODULE_SCOPE_ORDER =
+  'ɵɵsetNgModuleScope is emitted before ɵsetClassMetadata where Angular emits it after'
 const DEBUG_INFO_PATH =
   'ɵsetClassDebugInfo filePath is the path Oxc was given (absolute here and in the Vite plugin) where Angular emits it relative to the project root'
 const DEBUG_INFO_LINE =
@@ -160,10 +160,6 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     ],
     reasons: [DOM_ONLY],
   },
-  'full-transform/full-transform-host-attribute': {
-    fields: ['HostAttributeComponent.ɵcmp'],
-    reasons: [HOST_ATTRS_ORDER],
-  },
   'full-transform/full-transform-onpush': {
     fields: ['OnPushComponent.ɵcmp'],
     reasons: [DOM_ONLY],
@@ -172,16 +168,6 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     fields: ['OnPushComponent.ɵcmp'],
     reasons: [DOM_ONLY],
   },
-  'host-bindings/host-attribute': {
-    fields: ['HostAttributeComponent.ɵcmp'],
-    reasons: [HOST_ATTRS_ORDER],
-  },
-  'host-directives/host-directives-empty-mappings': {
-    fields: ['EmptyMappingsComponent.ɵcmp'],
-    reasons: [
-      'HostDirectivesFeature receives the directive class where Angular passes { directive }',
-    ],
-  },
   'host-directives/host-directives-with-change-detection': {
     fields: ['HostDirectivesOnPushComponent.ɵcmp'],
     reasons: [DOM_ONLY, COMPONENT_DEPS],

From d308b3e200770c4152f0d4b953480c2a7f71f29b Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 18:52:36 +0800
Subject: [PATCH 38/54] fix(vite): read only URL fields for resources; register
 HMR link styles

What:
- `extract_component_resource_urls` no longer runs the whole
  `extract_component_metadata`. A new
  `extract_component_resource_urls_of` finds the `@Component` config and
  evaluates only `templateUrl` / `styleUrl` / `styleUrls`, with the same
  helpers the metadata uses (`component_config`, `read_style_urls`), so the
  URLs stay the transform's keys. The cross-file resolver is lazy, so it
  now reads another file only when a URL names an imported binding.
- `ComponentResourceUrls.value_dependencies` lists the files read for
  that (Rust only), which pins the behaviour in a test.
- The `@ng/component` endpoint registers the template's stylesheet links
  as direct styles of the component (owner maps, watcher, preprocessor
  deps), like the transform's dependency loop.

Why:
- With `resolveImportedValues` (always on in the plugin) an imported
  `host`, `styles`, inputs or ctor token made the extractor read and parse
  that file, then the transform read it again: ~400-500ms per call on a
  large meta.ts, now ~0.1ms.
- A template-only HMR edit that added a `<link rel=stylesheet>` compiled
  the CSS in, but later edits to that CSS sent no component update until
  a full reload. Links a later edit removes stay registered until the
  next transform; an edit to one only sends an extra update.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/component/decorator.rs                | 97 +++++++++++++------
 .../src/component/transform.rs                | 37 ++++---
 .../tests/component_resource_urls_test.rs     | 59 +++++++++++
 .../test/component-resources.test.ts          | 40 ++++++++
 napi/angular-compiler/vite-plugin/index.ts    | 26 +++++
 5 files changed, 216 insertions(+), 43 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/component/decorator.rs b/crates/oxc_angular_compiler/src/component/decorator.rs
index 10d54aa27..702d53a0d 100644
--- a/crates/oxc_angular_compiler/src/component/decorator.rs
+++ b/crates/oxc_angular_compiler/src/component/decorator.rs
@@ -6,7 +6,7 @@
 use oxc_allocator::{Allocator, Vec};
 use oxc_ast::ast::{
     Argument, ArrayExpressionElement, Class, ClassElement, Decorator, Expression,
-    MethodDefinitionKind, ObjectPropertyKind, PropertyKey,
+    MethodDefinitionKind, ObjectExpression, ObjectPropertyKind, PropertyKey,
 };
 use oxc_span::Span;
 use oxc_str::Ident;
@@ -61,21 +61,7 @@ pub fn extract_component_metadata<'a>(
     let class_name: Ident<'a> = class.id.as_ref()?.name.clone().into();
     let class_span = class.span;
 
-    // Find Angular's @Component decorator
-    let component_decorator = find_component_decorator(&class.decorators, consts)?;
-
-    // Get the decorator call arguments
-    let call_expr = match &component_decorator.expression {
-        Expression::CallExpression(call) => call,
-        _ => return None,
-    };
-
-    // Get the first argument (the config object)
-    let config_arg = call_expr.arguments.first()?;
-    let config_obj = match config_arg {
-        Argument::ObjectExpression(obj) => obj,
-        _ => return None,
-    };
+    let config_obj = component_config(class, consts)?;
 
     // Create metadata with defaults (standalone uses implicit_standalone when not explicitly set)
     let mut metadata =
@@ -161,17 +147,7 @@ pub fn extract_component_metadata<'a>(
                     }
                 }
                 "styleUrls" | "styleUrl" => {
-                    // An array literal replaces the URLs read so far; any
-                    // other value adds to them.
-                    if matches!(prop.value, Expression::ArrayExpression(_)) {
-                        metadata.style_urls.clear();
-                    }
-                    crate::directive::evaluate_style_urls(
-                        allocator,
-                        &prop.value,
-                        consts,
-                        &mut metadata.style_urls,
-                    );
+                    read_style_urls(allocator, &prop.value, consts, &mut metadata.style_urls);
                 }
                 "standalone" => {
                     // Only override the implicit value if an explicit boolean is provided
@@ -438,6 +414,73 @@ fn extract_boolean_value(expr: &Expression<'_>) -> Option<bool> {
         _ => None,
     }
 }
+/// The `{...}` config object of `class`'s `@Component(...)`, or `None` when
+/// the class has no `@Component` call with an object literal argument.
+fn component_config<'a>(
+    class: &'a Class<'a>,
+    consts: &StringConsts<'_>,
+) -> Option<&'a ObjectExpression<'a>> {
+    let component_decorator = find_component_decorator(&class.decorators, consts)?;
+    let Expression::CallExpression(call_expr) = &component_decorator.expression else {
+        return None;
+    };
+    match call_expr.arguments.first()? {
+        Argument::ObjectExpression(obj) => Some(obj),
+        _ => None,
+    }
+}
+
+/// One `styleUrl` / `styleUrls` property: an array literal replaces the URLs
+/// read so far; any other value adds to them.
+fn read_style_urls<'a>(
+    allocator: &'a Allocator,
+    value: &'a Expression<'a>,
+    consts: &StringConsts<'a>,
+    urls: &mut Vec<'a, Ident<'a>>,
+) {
+    if matches!(value, Expression::ArrayExpression(_)) {
+        urls.clear();
+    }
+    crate::directive::evaluate_style_urls(allocator, value, consts, urls);
+}
+
+/// The `templateUrl` and `styleUrl(s)` of `class`'s `@Component`, read exactly
+/// as [`extract_component_metadata`] reads them, and `None` exactly when it
+/// gives `None`. Only those properties are evaluated, so the import value
+/// resolver in `consts` (if any) reads another file only when one of them
+/// names an imported binding — never for `host`, `styles`, inputs or deps.
+pub fn extract_component_resource_urls_of<'a>(
+    allocator: &'a Allocator,
+    class: &'a Class<'a>,
+    consts: &StringConsts<'a>,
+) -> Option<(Option<Ident<'a>>, Vec<'a, Ident<'a>>)> {
+    class.id.as_ref()?;
+    let config_obj = component_config(class, consts)?;
+    let mut template_url = None;
+    let mut style_urls = Vec::new_in(&allocator);
+    for prop in &config_obj.properties {
+        if let ObjectPropertyKind::ObjectProperty(prop) = prop
+            && is_metadata_property(prop)
+        {
+            if matches!(&prop.key, PropertyKey::StringLiteral(lit) if lit.value.has_lone_surrogate())
+            {
+                continue;
+            }
+            match get_property_key_name(&prop.key, consts)?.as_str() {
+                "templateUrl" => {
+                    template_url =
+                        crate::directive::evaluate_string_value(allocator, &prop.value, consts);
+                }
+                "styleUrls" | "styleUrl" => {
+                    read_style_urls(allocator, &prop.value, consts, &mut style_urls);
+                }
+                _ => {}
+            }
+        }
+    }
+    Some((template_url, style_urls))
+}
+
 /// Extract an array of identifiers (for imports).
 fn extract_identifier_array<'a>(
     allocator: &'a Allocator,
diff --git a/crates/oxc_angular_compiler/src/component/transform.rs b/crates/oxc_angular_compiler/src/component/transform.rs
index a6fd029a8..a5f2eda57 100644
--- a/crates/oxc_angular_compiler/src/component/transform.rs
+++ b/crates/oxc_angular_compiler/src/component/transform.rs
@@ -4828,6 +4828,9 @@ pub struct ComponentResourceUrls {
     pub template_urls: Vec<String>,
     /// Each component's `styleUrl` / `styleUrls` entries, as written.
     pub style_urls: Vec<String>,
+    /// The files read to resolve an imported URL binding (only with
+    /// `resolve_imported_values`), like [`TransformResult::dependencies`].
+    pub value_dependencies: Vec<String>,
 }
 
 /// The `templateUrl` and `styleUrl(s)` of every `@Component` class in a file:
@@ -4835,10 +4838,14 @@ pub struct ComponentResourceUrls {
 /// [`ResolvedResources`], keyed by these same strings.
 ///
 /// The URLs are read exactly as the transform reads them — the same
-/// [`extract_component_metadata`] over the same consts, with the cross-file
-/// resolver attached under the same `options` (`resolve_imported_values`,
-/// `base_dir`, `tsconfig_path`) — so a URL the transform will look up is never
-/// one this skipped (an imported `const TEMPLATE_URL`, say). Stylesheet
+/// evaluation as [`extract_component_metadata`] over the same consts, with the
+/// cross-file resolver attached under the same `options`
+/// (`resolve_imported_values`, `base_dir`, `tsconfig_path`) — so a URL the
+/// transform will look up is never one this skipped (an imported
+/// `const TEMPLATE_URL`, say). Only the URL properties are evaluated, and the
+/// resolver reads a file only when one of them names an imported binding, so
+/// literal URLs cost no cross-file read even when `host` or `styles` are
+/// imported. Stylesheet
 /// `<link>`s inside a template are only known once the template is parsed;
 /// the transform reports the ones it was not given in
 /// [`TransformResult::missing_link_urls`].
@@ -4855,7 +4862,6 @@ pub fn extract_component_resource_urls(
     let parser_ret = Parser::new(allocator, source, source_type).parse();
     let program = &parser_ret.program;
 
-    let import_map = build_import_map(allocator, &program.body, options.resolved_imports.as_ref());
     #[cfg(feature = "cross_file_elision")]
     let analyzer =
         if options.resolve_imported_values { new_cross_file_analyzer(path, options) } else { None };
@@ -4877,21 +4883,20 @@ pub fn extract_component_resource_urls(
             },
             _ => continue,
         };
-        // `standalone` does not change which URLs a component names.
-        let Some(metadata) = extract_component_metadata(
-            allocator,
-            class,
-            options.implicit_standalone(),
-            &import_map,
-            Some(source),
-            &string_consts,
-        ) else {
+        let Some((template_url, style_urls)) =
+            super::decorator::extract_component_resource_urls_of(allocator, class, &string_consts)
+        else {
             continue;
         };
-        if let Some(template_url) = &metadata.template_url {
+        if let Some(template_url) = template_url {
             urls.template_urls.push(template_url.to_string());
         }
-        urls.style_urls.extend(metadata.style_urls.iter().map(ToString::to_string));
+        urls.style_urls.extend(style_urls.iter().map(ToString::to_string));
+    }
+    #[cfg(feature = "cross_file_elision")]
+    if let Some(analyzer) = &analyzer {
+        urls.value_dependencies.extend(analyzer.take_value_dependencies());
+        urls.value_dependencies.sort_unstable();
     }
     urls
 }
diff --git a/crates/oxc_angular_compiler/tests/component_resource_urls_test.rs b/crates/oxc_angular_compiler/tests/component_resource_urls_test.rs
index 91e6b8842..0fc27db61 100644
--- a/crates/oxc_angular_compiler/tests/component_resource_urls_test.rs
+++ b/crates/oxc_angular_compiler/tests/component_resource_urls_test.rs
@@ -270,6 +270,65 @@ export class A {}
         assert!(result.code.contains("IMPORTED_STYLE"), "{}", result.code);
     }
 
+    /// Only the URL properties are evaluated: literal URLs read no other file
+    /// even when `host`, `styles`, inputs or deps are imported, and an
+    /// imported URL reads just the file that declares it.
+    #[test]
+    fn only_url_properties_read_imported_files() {
+        let dir = TempDir::new().unwrap();
+        write(
+            dir.path(),
+            "app/meta.ts",
+            "export const HOST = { class: 'meta' };
+             export const STYLES = ['.meta {}'];
+             export const INPUTS = ['value'];
+",
+        );
+        let urls_file =
+            write(dir.path(), "app/urls.ts", "export const TEMPLATE_URL = './b.component.html';\n");
+        let options = TransformOptions { resolve_imported_values: true, ..Default::default() };
+
+        let literal = r"
+import { Component, Inject } from '@angular/core';
+import { HOST, STYLES, INPUTS } from './meta';
+@Component({
+  selector: 'a-cmp',
+  templateUrl: './a.component.html',
+  styleUrl: './a.component.css',
+  host: HOST,
+  styles: STYLES,
+  inputs: INPUTS,
+})
+export class A {
+  constructor(@Inject(HOST) host: unknown) {}
+}
+";
+        let path = write(dir.path(), "app/a.component.ts", literal);
+        let urls = extract(&path, literal, &options);
+        assert_eq!(urls.template_urls, vec!["./a.component.html"]);
+        assert_eq!(urls.style_urls, vec!["./a.component.css"]);
+        assert_eq!(urls.value_dependencies, Vec::<String>::new());
+
+        let imported = r"
+import { Component } from '@angular/core';
+import { HOST } from './meta';
+import { TEMPLATE_URL } from './urls';
+@Component({ selector: 'b-cmp', templateUrl: TEMPLATE_URL, host: HOST })
+export class B {}
+";
+        let path = write(dir.path(), "app/b.component.ts", imported);
+        let urls = extract(&path, imported, &options);
+        assert_eq!(urls.template_urls, vec!["./b.component.html"]);
+        assert_eq!(urls.value_dependencies.len(), 1, "{:?}", urls.value_dependencies);
+        assert!(
+            urls.value_dependencies[0].ends_with("urls.ts")
+                && std::path::Path::new(&urls.value_dependencies[0]).canonicalize().unwrap()
+                    == std::path::Path::new(&urls_file).canonicalize().unwrap(),
+            "{:?}",
+            urls.value_dependencies
+        );
+    }
+
     /// Without the resolver the extractor and the transform agree that the
     /// imported URLs are unknown.
     #[test]
diff --git a/napi/angular-compiler/test/component-resources.test.ts b/napi/angular-compiler/test/component-resources.test.ts
index 3e6771caf..6c300a543 100644
--- a/napi/angular-compiler/test/component-resources.test.ts
+++ b/napi/angular-compiler/test/component-resources.test.ts
@@ -286,4 +286,44 @@ describe('template stylesheet links', () => {
     expect(body).toContain('color: green')
     expect(body).not.toContain('color: red')
   })
+
+  it('hot-updates the component when a link added by a template edit later changes', async () => {
+    const templatePath = join(appDir, 'hmr-new-link.component.html')
+    const stylePath = join(appDir, 'hmr-new-link.css')
+    const componentPath = join(appDir, 'hmr-new-link.component.ts')
+    const source = `
+      import { Component } from '@angular/core';
+      @Component({ selector: 'app-hmr-new-link', templateUrl: './hmr-new-link.component.html' })
+      export class HmrNewLinkComponent {}
+    `
+    writeFileSync(templatePath, '<h1>Hello</h1>')
+    writeFileSync(stylePath, 'h1 { color: red; }')
+    writeFileSync(componentPath, source)
+    const componentId = `${componentPath}@HmrNewLinkComponent`
+    const componentUpdates = (server: any) =>
+      server.ws.send.mock.calls.filter(
+        ([message]: any[]) => message?.event === 'angular:component-update',
+      ).length
+
+    const plugin = getAngularPlugin()
+    const server = await setupPlugin(plugin, 'serve')
+    const { errors } = await transform(plugin, source, componentPath)
+    expect(errors).toEqual([])
+    expect(server.watcher.add).not.toHaveBeenCalledWith(stylePath)
+
+    // The template edit adds the link; only the update module is compiled.
+    writeFileSync(templatePath, '<link rel="stylesheet" href="./hmr-new-link.css"><h1>Hello</h1>')
+    await hotUpdate(plugin, templatePath, server)
+    expect(await requestUpdateModule(server, componentId)).toContain('color: red')
+    expect(server.watcher.add).toHaveBeenCalledWith(stylePath)
+
+    // A later edit to the new stylesheet hot-updates the component.
+    const updatesBefore = componentUpdates(server)
+    writeFileSync(stylePath, 'h1 { color: green; }')
+    await hotUpdate(plugin, stylePath, server)
+    expect(componentUpdates(server)).toBe(updatesBefore + 1)
+    const body = await requestUpdateModule(server, componentId)
+    expect(body).toContain('color: green')
+    expect(body).not.toContain('color: red')
+  })
 })
diff --git a/napi/angular-compiler/vite-plugin/index.ts b/napi/angular-compiler/vite-plugin/index.ts
index a15dec215..b6527501a 100644
--- a/napi/angular-compiler/vite-plugin/index.ts
+++ b/napi/angular-compiler/vite-plugin/index.ts
@@ -458,6 +458,27 @@ export function angular(options: PluginOptions = {}): Plugin[] {
     }
   }
 
+  // Register template stylesheet `<link>`s found by an HMR template compile
+  // as direct styles of `owner`, the way `transform` registers its
+  // dependencies: owner maps for `handleHotUpdate`, the watcher, and the
+  // stylesheet's own preprocessor deps. Links a later template edit removes
+  // stay registered until the component `.ts` is transformed again (an edit
+  // to one then sends a harmless extra update).
+  async function registerLinkStyles(owner: string, dir: string, urls: string[]): Promise<void> {
+    if (!watchMode || !viteServer) return
+    for (const url of new Set(urls)) {
+      const stylePath = resolve(dir, url)
+      const normalizedStylePath = normalizePath(stylePath)
+      directStyleUrls.add(normalizedStylePath)
+      resourceToComponent.set(normalizedStylePath, owner)
+      let owners = styleComponentOwners.get(normalizedStylePath)
+      if (!owners) styleComponentOwners.set(normalizedStylePath, (owners = new Set()))
+      owners.add(owner)
+      viteServer.watcher?.add?.(stylePath)
+      await refreshStyleDeps(stylePath)
+    }
+  }
+
   // Component IDs (`filePath@ClassName`) queued for HMR delivery. Populated by
   // `handleHotUpdate` when an external resource or inline template/style change
   // is detected, and consumed by the `@ng/component` HTTP endpoint, which reads
@@ -961,6 +982,11 @@ export function angular(options: PluginOptions = {}): Plugin[] {
                   result = compile(
                     await stylesFor([...classMetadata.styleUrls, ...result.templateStyleUrls]),
                   )
+                  // A template edit can add a link the last full transform
+                  // never saw, and this endpoint is all that runs for it.
+                  // Register the links as this component's direct styles so
+                  // later edits to them hot-update it too.
+                  await registerLinkStyles(fileId, dir, result.templateStyleUrls)
                 }
 
                 // A failed compile must not be served as an (empty) update

From 025137053fc00c8f7510d35a7f54175b8231fda2 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 18:54:35 +0800
Subject: [PATCH 39/54] fix(styles): port Angular's static style parser 1:1

parse_style_string split a static `style` attribute differently from
Angular's parse() (parse_extracted_styles.ts, shared with Domino's
style_parser.js). It is now a direct port, quirks included:

- declarations with an empty value are kept (`a:;` gives `a` = "")
- a `;` before any `name:` does not start a new property, so `x;a:b`
  gives `x;a` and `a:b;;c:d` gives `;c`
- the escaped-quote check reads the quote itself, so a matching quote
  always closes, even after a backslash
- names and values are trimmed like String.prototype.trim, and hyphenate
  lowercases like toLowerCase

The linker's host styleAttribute uses the same parser, as Angular's host
binding job does.

Adds three bindings/style-attr-* compare fixtures (all three mismatched
before) and unit tests checked against Angular 22.2's parse().

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../pipeline/phases/parse_extracted_styles.rs | 195 ++++++++++--------
 .../static-style-attribute.fixture.ts         |  71 +++++++
 2 files changed, 179 insertions(+), 87 deletions(-)
 create mode 100644 napi/angular-compiler/e2e/compare/fixtures/bindings/static-style-attribute.fixture.ts

diff --git a/crates/oxc_angular_compiler/src/pipeline/phases/parse_extracted_styles.rs b/crates/oxc_angular_compiler/src/pipeline/phases/parse_extracted_styles.rs
index 63a140097..1143558f9 100644
--- a/crates/oxc_angular_compiler/src/pipeline/phases/parse_extracted_styles.rs
+++ b/crates/oxc_angular_compiler/src/pipeline/phases/parse_extracted_styles.rs
@@ -200,118 +200,93 @@ pub fn parse_extracted_styles(job: &mut ComponentCompilationJob<'_>) {
 
 /// Parses a CSS style string into property-value pairs.
 ///
-/// Handles:
-/// - Basic syntax: "color: red; height: auto"
-/// - Parentheses: "background: url(foo.png)"
-/// - Quoted values: "content: 'hello'"
+/// A 1:1 port of Angular's `parse()` (`parse_extracted_styles.ts`, shared with
+/// the Domino fork's `style_parser.js`), quirks included:
+/// - `;` and `:` inside parentheses or quotes are part of the value.
+/// - A declaration with an empty value is kept (`a:;` gives `a` = `""`).
+/// - A `;` before any `name:` does not start a new property, so `x;a:b` gives
+///   the property `x;a`, and `a:b;;c:d` gives `;c` for the second one.
+/// - The escaped-quote check reads the quote itself rather than the character
+///   before it, so a matching quote always closes, even after a backslash.
 pub fn parse_style_string(value: &str) -> std::vec::Vec<(String, String)> {
     let mut styles = std::vec::Vec::new();
-    let mut chars = value.chars().peekable();
-
-    let mut paren_depth = 0;
-    let mut quote_char: Option<char> = None;
+    // Every character the parser looks at is ASCII, so byte offsets are char
+    // boundaries and match Angular's UTF-16 offsets for slicing purposes.
+    let bytes = value.as_bytes();
+
+    let mut i = 0;
+    let mut paren_depth = 0i32;
+    // `0` means not inside a quote.
+    let mut quote = 0u8;
+    let mut value_start = 0;
+    let mut prop_start = 0;
+    // Angular's `currentProp` is `string | null`; both `null` and `''` are
+    // falsy, so an empty string stands for both.
     let mut current_prop = String::new();
-    let mut current_value = String::new();
-    let mut in_value = false;
-    let mut prev_char = '\0';
-
-    while let Some(ch) = chars.next() {
-        match ch {
-            '(' => {
-                paren_depth += 1;
-                if in_value {
-                    current_value.push(ch);
-                } else {
-                    current_prop.push(ch);
-                }
-            }
-            ')' => {
-                paren_depth -= 1;
-                if in_value {
-                    current_value.push(ch);
-                } else {
-                    current_prop.push(ch);
-                }
-            }
-            '\'' | '"' => {
-                if quote_char.is_none() {
-                    quote_char = Some(ch);
-                } else if quote_char == Some(ch) && prev_char != '\\' {
-                    quote_char = None;
-                }
-                if in_value {
-                    current_value.push(ch);
-                } else {
-                    current_prop.push(ch);
+    while i < bytes.len() {
+        let token = bytes[i];
+        i += 1;
+        match token {
+            b'(' => paren_depth += 1,
+            b')' => paren_depth -= 1,
+            b'\'' | b'"' => {
+                if quote == 0 {
+                    quote = token;
+                } else if quote == token {
+                    quote = 0;
                 }
             }
-            ':' => {
-                if quote_char.is_none() && paren_depth == 0 && !in_value {
-                    in_value = true;
-                } else if in_value {
-                    current_value.push(ch);
-                } else {
-                    current_prop.push(ch);
-                }
-            }
-            ';' => {
-                if quote_char.is_none() && paren_depth == 0 {
-                    // End of property
-                    let prop = hyphenate(current_prop.trim());
-                    let val = current_value.trim().to_string();
-                    if !prop.is_empty() && !val.is_empty() {
-                        styles.push((prop, val));
-                    }
-                    current_prop.clear();
-                    current_value.clear();
-                    in_value = false;
-                } else if in_value {
-                    current_value.push(ch);
-                } else {
-                    current_prop.push(ch);
-                }
+            b':' if current_prop.is_empty() && paren_depth == 0 && quote == 0 => {
+                current_prop = hyphenate(js_trim(&value[prop_start..i - 1]));
+                value_start = i;
             }
-            _ => {
-                if in_value {
-                    current_value.push(ch);
-                } else {
-                    current_prop.push(ch);
-                }
+            b';' if !current_prop.is_empty()
+                && value_start > 0
+                && paren_depth == 0
+                && quote == 0 =>
+            {
+                let style_val = js_trim(&value[value_start..i - 1]).to_string();
+                styles.push((std::mem::take(&mut current_prop), style_val));
+                prop_start = i;
+                value_start = 0;
             }
+            _ => {}
         }
-        prev_char = ch;
     }
 
-    // Handle last property without trailing semicolon
-    let prop = hyphenate(current_prop.trim());
-    let val = current_value.trim().to_string();
-    if !prop.is_empty() && !val.is_empty() {
-        styles.push((prop, val));
+    if !current_prop.is_empty() && value_start > 0 {
+        let style_val = js_trim(&value[value_start..]).to_string();
+        styles.push((current_prop, style_val));
     }
 
     styles
 }
 
+/// `String.prototype.trim`: Unicode white space and line terminators, plus
+/// U+FEFF but not U+0085.
+fn js_trim(value: &str) -> &str {
+    value.trim_matches(|c: char| (c.is_whitespace() && c != '\u{85}') || c == '\u{FEFF}')
+}
+
 /// Converts camelCase to kebab-case.
 ///
 /// Matches Angular's `hyphenate` function from `parse_extracted_styles.ts`.
-/// Inserts a hyphen before uppercase letters that follow lowercase letters,
-/// then converts the entire string to lowercase.
+/// Inserts a hyphen between an ASCII lowercase letter and a following ASCII
+/// uppercase letter (`/[a-z][A-Z]/g`), then lowercases the whole string like
+/// `String.prototype.toLowerCase`.
 ///
 /// Example: `backgroundColor` -> `background-color`
 pub fn hyphenate(value: &str) -> String {
     let mut result = String::with_capacity(value.len() + 4);
-    let chars: Vec<char> = value.chars().collect();
-
-    for (i, &ch) in chars.iter().enumerate() {
-        // Insert hyphen if current char is uppercase and previous char is lowercase
-        // This matches TypeScript's /[a-z][A-Z]/g regex behavior
-        if ch.is_ascii_uppercase() && i > 0 && chars[i - 1].is_ascii_lowercase() {
+    let mut prev_lower = false;
+    for ch in value.chars() {
+        if ch.is_ascii_uppercase() && prev_lower {
             result.push('-');
         }
-        result.push(ch.to_ascii_lowercase());
+        prev_lower = ch.is_ascii_lowercase();
+        result.push(ch);
     }
-    result
+    result.to_lowercase()
 }
 
 /// Extracts a string value from an IrExpression.
@@ -464,3 +439,49 @@ pub fn parse_extracted_styles_for_host(job: &mut HostBindingCompilationJob<'_>)
         }
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::{hyphenate, parse_style_string};
+
+    /// The `[name, value, name, value, ...]` array Angular's `parse()` returns.
+    fn parse(value: &str) -> std::vec::Vec<String> {
+        parse_style_string(value).into_iter().flat_map(|(k, v)| [k, v]).collect()
+    }
+
+    // Expected values are what Angular 22.2's `parse()` returns for the same input.
+    #[test]
+    fn parses_like_angular_style_parser() {
+        assert_eq!(parse("color: red; height: auto"), ["color", "red", "height", "auto"]);
+        assert_eq!(parse("width:100px;"), ["width", "100px"]);
+        assert!(parse("").is_empty());
+        assert!(parse("color").is_empty());
+        // Empty values are kept.
+        assert_eq!(parse("a:;b:c"), ["a", "", "b", "c"]);
+        assert_eq!(parse("a:"), ["a", ""]);
+        // A `;` before `name:` does not start a new property.
+        assert_eq!(parse("x;a:b"), ["x;a", "b"]);
+        assert_eq!(parse("a:b;;c:d"), ["a", "b", ";c", "d"]);
+        assert_eq!(parse(";a:b"), [";a", "b"]);
+        // An empty name does not take the value; the next `:` starts again.
+        assert_eq!(parse(":a:b"), [":a", "b"]);
+        // `;` and `:` inside parentheses and quotes stay in the value.
+        assert_eq!(
+            parse("background: url(\"a;b:c\"); content: 'x;y'"),
+            ["background", "url(\"a;b:c\")", "content", "'x;y'"]
+        );
+        // A backslash does not keep a matching quote from closing.
+        assert_eq!(parse(r#"content: "a\"; color: red"#), ["content", r#""a\""#, "color", "red"]);
+        // camelCase names are hyphenated.
+        assert_eq!(parse("backgroundColor: red"), ["background-color", "red"]);
+    }
+
+    #[test]
+    fn hyphenates_like_angular() {
+        assert_eq!(hyphenate("backgroundColor"), "background-color");
+        assert_eq!(hyphenate("WebkitAppearance"), "webkit-appearance");
+        assert_eq!(hyphenate("aBC"), "a-bc");
+        // `toLowerCase` lowercases non-ASCII letters too.
+        assert_eq!(hyphenate("ÄB"), "äb");
+    }
+}
diff --git a/napi/angular-compiler/e2e/compare/fixtures/bindings/static-style-attribute.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/bindings/static-style-attribute.fixture.ts
new file mode 100644
index 000000000..aec42bd38
--- /dev/null
+++ b/napi/angular-compiler/e2e/compare/fixtures/bindings/static-style-attribute.fixture.ts
@@ -0,0 +1,71 @@
+/**
+ * Static `style` attributes, which the `parseExtractedStyles` phase splits into
+ * style properties with Angular's `parse()` (style_parser), quirks included.
+ */
+import type { Fixture } from '../types.js'
+
+export const fixtures: Fixture[] = [
+  {
+    name: 'style-attr-empty-value',
+    category: 'bindings',
+    description: 'Declarations with an empty value are kept',
+    className: 'StyleAttrEmptyValueComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-style-attr-empty-value',
+  standalone: true,
+  template: \`
+    <div style="color:;width: 10px">a</div>
+    <span style="height:">b</span>
+  \`,
+})
+export class StyleAttrEmptyValueComponent {}
+    `.trim(),
+    expectedFeatures: ['ɵɵelementStart'],
+  },
+  {
+    name: 'style-attr-stray-semicolons',
+    category: 'bindings',
+    description: 'A semicolon before a property name stays in the name',
+    className: 'StyleAttrStraySemicolonsComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-style-attr-stray-semicolons',
+  standalone: true,
+  template: \`
+    <div style="color: red;;width: 10px">a</div>
+    <span style="x;height: 5px">b</span>
+  \`,
+})
+export class StyleAttrStraySemicolonsComponent {}
+    `.trim(),
+    expectedFeatures: ['ɵɵelementStart'],
+  },
+  {
+    name: 'style-attr-quotes-and-parens',
+    category: 'bindings',
+    description: 'Quotes, escaped quotes and parentheses in style values',
+    className: 'StyleAttrQuotesAndParensComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-style-attr-quotes-and-parens',
+  standalone: true,
+  template: \`
+    <div style="background: url('a;b:c.png'); fontFamily: 'x;y'">a</div>
+    <span style='content: "a\\\\"; color: red'>b</span>
+  \`,
+})
+export class StyleAttrQuotesAndParensComponent {}
+    `.trim(),
+    expectedFeatures: ['ɵɵelementStart'],
+  },
+]

From 39c33efd331221d78d0644f16541a2d6e10aeb53 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 18:54:44 +0800
Subject: [PATCH 40/54] fix(partial): report template errors in partial
 compilation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Partial mode returned the ɵɵngDeclareComponent declaration before the
template was parsed, so a broken template compiled silently and failed
only later in the linker. ngtsc parses the template in every mode: its
errors are reported and compilePartial emits nothing for the class.

The partial branch now runs after the HTML parse and R3 transform, so
their errors are reported the same way as in full mode. The declaration
still carries the template text unchanged.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/component/transform.rs                | 38 +++++++++----------
 .../tests/partial_component_test.rs           | 37 +++++++++++++++++-
 2 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/component/transform.rs b/crates/oxc_angular_compiler/src/component/transform.rs
index ac08efa7f..d3cd335a1 100644
--- a/crates/oxc_angular_compiler/src/component/transform.rs
+++ b/crates/oxc_angular_compiler/src/component/transform.rs
@@ -4850,8 +4850,8 @@ fn compile_component_partial<'a>(
         ng_content_selectors: Vec::new(),
         has_defer_block,
         implicitly_deferred_imports: Vec::new(),
-        // Partial mode never parses the template; the linker collects link
-        // URLs at consumer build time.
+        // Partial mode only parses the template to report its errors; the
+        // linker collects link URLs at consumer build time.
         template_style_urls: Vec::new(),
         missing_link_urls: Vec::new(),
     }
@@ -4959,24 +4959,6 @@ fn compile_component_full<'a>(
 ) -> Result<FullCompilationResult, Vec<OxcDiagnostic>> {
     use oxc_allocator::FromIn;
 
-    // Partial-mode early branch: skip the entire template pipeline.
-    // Partial declarations carry the template as a verbatim string and
-    // let the linker re-parse at consumer build time. Known gap: this also
-    // means template parse errors (incl. `IncompleteBlockOpen`) go unreported
-    // for library builds — upstream ngtsc still parses the template in
-    // declaration mode and surfaces those diagnostics.
-    if matches!(options.compilation_mode, crate::CompilationMode::Partial) {
-        return Ok(compile_component_partial(
-            allocator,
-            namespace_registry.angular_core_ns().as_str(),
-            template,
-            metadata,
-            &view_queries,
-            &content_queries,
-            pool_starting_index,
-        ));
-    }
-
     let mut diagnostics = Vec::new();
 
     // Stage 1: Parse HTML
@@ -5031,6 +5013,22 @@ fn compile_component_full<'a>(
         return Err(diagnostics);
     }
 
+    // Partial mode stops here. Its declaration carries the template as a
+    // verbatim string for the linker to compile at consumer build time, but
+    // ngtsc still parses it first: its template errors are reported and
+    // `compilePartial` emits nothing for the class (handler.ts).
+    if matches!(options.compilation_mode, crate::CompilationMode::Partial) {
+        return Ok(compile_component_partial(
+            allocator,
+            namespace_registry.angular_core_ns().as_str(),
+            template,
+            metadata,
+            &view_queries,
+            &content_queries,
+            pool_starting_index,
+        ));
+    }
+
     // Capture ng-content selectors from the R3 AST for .d.ts generation
     let ng_content_selectors: Vec<String> =
         r3_result.ng_content_selectors.iter().map(|s| s.to_string()).collect();
diff --git a/crates/oxc_angular_compiler/tests/partial_component_test.rs b/crates/oxc_angular_compiler/tests/partial_component_test.rs
index 794599618..d4e98a0ca 100644
--- a/crates/oxc_angular_compiler/tests/partial_component_test.rs
+++ b/crates/oxc_angular_compiler/tests/partial_component_test.rs
@@ -75,14 +75,47 @@ export class ListComponent {
         code.contains(r#"minVersion:"17.0.0""#),
         "expected minVersion:\"17.0.0\" (block syntax), got:\n{code}"
     );
-    // The template stays a string — no instruction emission, no @if
-    // parsing on our side.
+    // The template stays a string — no instruction emission; it is only
+    // parsed to report errors.
     assert!(
         code.contains(r#"template:"@if"#),
         "expected raw @if in template literal, got:\n{code}"
     );
 }
 
+#[test]
+fn broken_template_reports_errors_in_partial_mode() {
+    // ngtsc parses the template in partial mode too: its errors are reported
+    // and `compilePartial` emits no declaration for the class.
+    let allocator = Allocator::default();
+    let source = "import { Component } from '@angular/core';
+
+@Component({ selector: 'app-broken', template: '<div>@if (a) {' })
+export class BrokenComponent {}
+
+@Component({ selector: 'app-binding', template: '<b [x]=\"a +\"></b>' })
+export class BindingComponent {}
+";
+    let options =
+        TransformOptions { compilation_mode: CompilationMode::Partial, ..Default::default() };
+    let result =
+        transform_angular_file(&allocator, "broken.component.ts", source, Some(&options), None);
+    let messages: Vec<_> = result.diagnostics.iter().map(|d| d.message.to_string()).collect();
+    assert!(
+        messages.iter().any(|m| m.contains("Unclosed block \"@if\"")),
+        "expected the HTML parse error, got: {messages:?}"
+    );
+    assert!(
+        messages.iter().any(|m| m.contains("Unexpected end of expression")),
+        "expected the binding parse error, got: {messages:?}"
+    );
+    assert!(
+        !result.code.contains("\u{0275}\u{0275}ngDeclareComponent"),
+        "a broken template must not get a declaration, got:\n{}",
+        result.code
+    );
+}
+
 #[test]
 fn component_styles_emitted_as_string_array() {
     let allocator = Allocator::default();

From f1c43452d4c31333cb3a88bc5d57db163cdfeb2d Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 19:01:35 +0800
Subject: [PATCH 41/54] =?UTF-8?q?fix(ng-module):=20add=20the=20module's=20?=
 =?UTF-8?q?exports=20to=20=C9=B5inj=20imports?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ngtsc adds an NgModule's exports to its injector imports, so the
providers of an exported NgModule are registered even when the module
does not import it. Oxc used only the `imports` expression.

Oxc compiles one file at a time, so it follows ngtsc's local compilation
(ng_module handler `analyze`): the raw `imports` and then the raw
`exports` go into ɵinj imports, an array literal entry by entry and any
other expression as is. A full ngtsc build keeps only exported NgModules
and filters imports by what they resolve to, which needs other files; the
runtime ignores entries that are neither NgModules nor standalone
components. A non-array `imports: SHARED` is now emitted as
`imports: [SHARED]`, as ngtsc does.

Adds the injector/injector-with-exports compare fixture (with the usual
NG_MODULE_SCOPE entry) and a Rust test.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/ng_module/decorator.rs                | 10 ++-
 .../src/ng_module/definition.rs               | 73 +++++++++++++++----
 .../fixtures/injector/basic.fixture.ts        | 25 +++++++
 .../e2e/compare/fixtures/known-differences.ts |  5 ++
 4 files changed, 99 insertions(+), 14 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/ng_module/decorator.rs b/crates/oxc_angular_compiler/src/ng_module/decorator.rs
index e14440f38..13e8da266 100644
--- a/crates/oxc_angular_compiler/src/ng_module/decorator.rs
+++ b/crates/oxc_angular_compiler/src/ng_module/decorator.rs
@@ -43,6 +43,11 @@ pub struct NgModuleMetadata<'a> {
     /// Exported declarations and modules as class names.
     pub exports: Vec<'a, Ident<'a>>,
 
+    /// Raw exports expression. Like ngtsc's local compilation, its elements
+    /// also go into the ɵinj imports, so the providers of exported NgModules
+    /// are registered.
+    pub raw_exports_expr: Option<OutputExpression<'a>>,
+
     /// The `declarations`, `imports` and `exports` expressions as written,
     /// kept only for a list that is not a plain array of class references
     /// (a const array, a spread, a `forRoot()` call...), whose names above
@@ -84,6 +89,7 @@ impl<'a> NgModuleMetadata<'a> {
             imports: Vec::new_in(&allocator),
             raw_imports_expr: None,
             exports: Vec::new_in(&allocator),
+            raw_exports_expr: None,
             declarations_scope_expr: None,
             imports_scope_expr: None,
             exports_scope_expr: None,
@@ -296,9 +302,11 @@ pub(crate) fn extract_ng_module_metadata_in<'a>(
                     if has_forward_refs {
                         metadata.contains_forward_decls = true;
                     }
+                    metadata.raw_exports_expr =
+                        convert_oxc_expression(allocator, &prop.value, source_text);
                     if !is_static {
                         metadata.exports_scope_expr =
-                            convert_oxc_expression(allocator, &prop.value, source_text);
+                            metadata.raw_exports_expr.as_ref().map(|e| e.clone_in(allocator));
                     }
                 }
                 "providers" => {
diff --git a/crates/oxc_angular_compiler/src/ng_module/definition.rs b/crates/oxc_angular_compiler/src/ng_module/definition.rs
index 2887165ad..a94afdf3f 100644
--- a/crates/oxc_angular_compiler/src/ng_module/definition.rs
+++ b/crates/oxc_angular_compiler/src/ng_module/definition.rs
@@ -325,17 +325,34 @@ fn build_injector_metadata<'a>(
         builder = builder.providers(providers.clone_in(allocator));
     }
 
-    // Prefer raw_imports_expr (preserves StoreModule.forRoot(...) and
-    // spread elements needed for ModuleWithProviders resolution).
-    if let Some(raw_imports) = &metadata.raw_imports_expr {
-        builder = builder.raw_imports(raw_imports.clone_in(allocator));
-    } else {
-        for import in &metadata.imports {
-            let import_expr = OutputExpression::ReadVar(oxc_allocator::Box::new_in(
-                ReadVarExpr { name: import.clone(), source_span: None },
-                &allocator,
-            ));
-            builder = builder.add_import(import_expr);
+    // Like ngtsc's local compilation (ng_module/src/handler.ts `analyze`), the
+    // injector imports are the raw `imports` followed by the raw `exports`: an
+    // array literal adds its elements (keeping `StoreModule.forRoot(...)` calls
+    // and spreads), any other expression is added as is. A full ngtsc build
+    // filters both lists by what each reference resolves to, which needs other
+    // files; the runtime ignores entries that are neither NgModules nor
+    // standalone components.
+    for (raw, names) in [
+        (&metadata.raw_imports_expr, &metadata.imports),
+        (&metadata.raw_exports_expr, &metadata.exports),
+    ] {
+        match raw {
+            Some(OutputExpression::LiteralArray(array)) => {
+                for entry in &array.entries {
+                    builder = builder.add_import(entry.clone_in(allocator));
+                }
+            }
+            Some(expr) => builder = builder.add_import(expr.clone_in(allocator)),
+            // The expression could not be converted: fall back to the names.
+            None => {
+                for name in names {
+                    let import_expr = OutputExpression::ReadVar(oxc_allocator::Box::new_in(
+                        ReadVarExpr { name: *name, source_span: None },
+                        &allocator,
+                    ));
+                    builder = builder.add_import(import_expr);
+                }
+            }
         }
     }
 
@@ -792,7 +809,8 @@ mod tests {
         // class without a constructor or a superclass gets a plain factory.
         // Unlike ngtsc the call has no `ngJitMode` guard: Oxc resolves
         // component dependencies at runtime from this scope, so it must run
-        // in production builds too.
+        // in production builds too. ɵinj lists the imports and then the
+        // exports, like ngtsc's local compilation.
         let js = full_module_js(
             r"
             @NgModule({
@@ -808,12 +826,41 @@ mod tests {
             js,
             "M.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({type:M,bootstrap:[A]});\n\
              M.ɵfac = function M_Factory(__ngFactoryType__) {\n  return new (__ngFactoryType__ || M)();\n};\n\
-             M.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({imports:[CommonModule]});\n\
+             M.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({imports:[CommonModule,A]});\n\
              (function() {\n  \
              i0.ɵɵsetNgModuleScope(M,{declarations:[A],imports:[CommonModule],exports:[A]});\n})();"
         );
     }
 
+    #[test]
+    fn test_ng_module_injector_imports_include_exports() {
+        // ngtsc's local compilation adds the raw `imports` and `exports` to
+        // ɵinj: an array literal entry by entry, any other expression as is.
+        // An exported NgModule's providers are registered this way.
+        let inj_line = |code: &str| {
+            full_module_js(code).lines().find(|l| l.starts_with("M.ɵinj")).unwrap().to_string()
+        };
+        assert_eq!(
+            inj_line(
+                "@NgModule({ imports: [SHARED, ...MORE, R.forRoot()], exports: [SharedModule] })
+                 export class M {}"
+            ),
+            "M.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({imports:[SHARED,...MORE,R.forRoot(),SharedModule]});"
+        );
+        assert_eq!(
+            inj_line("@NgModule({ imports: SHARED, exports: EXPORTED }) export class M {}"),
+            "M.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({imports:[SHARED,EXPORTED]});"
+        );
+        assert_eq!(
+            inj_line("@NgModule({ exports: [SharedModule] }) export class M {}"),
+            "M.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({imports:[SharedModule]});"
+        );
+        assert_eq!(
+            inj_line("@NgModule({ imports: [], exports: [] }) export class M {}"),
+            "M.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({});"
+        );
+    }
+
     /// The `ɵmod` line and the `ɵɵsetNgModuleScope` IIFE (if any) of `js`.
     fn mod_and_scope(js: &str) -> (&str, Option<&str>) {
         let mod_line = js.lines().next().unwrap_or_default();
diff --git a/napi/angular-compiler/e2e/compare/fixtures/injector/basic.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/injector/basic.fixture.ts
index 1304efe62..8c2469037 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/injector/basic.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/injector/basic.fixture.ts
@@ -116,6 +116,31 @@ export class SpreadModule {}
     `.trim(),
     expectedFeatures: ['defineInjector', 'defineNgModule', 'ɵɵsetNgModuleScope', 'SHARED'],
   },
+  {
+    type: 'full-transform',
+    name: 'injector-with-exports',
+    category: 'injector',
+    description: 'NgModule whose exports, like its imports, are added to the injector imports',
+    className: 'ExportingModule',
+    sourceCode: `
+import { Component, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({ selector: 'app-a', template: '', standalone: false })
+export class AComponent {}
+
+const SHARED = [CommonModule];
+
+@NgModule({
+  declarations: [AComponent],
+  imports: SHARED,
+  exports: [AComponent, FormsModule],
+})
+export class ExportingModule {}
+    `.trim(),
+    expectedFeatures: ['defineInjector', 'defineNgModule', 'ɵɵsetNgModuleScope', 'FormsModule'],
+  },
   {
     type: 'full-transform',
     name: 'injector-extends-base-without-constructor',
diff --git a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
index cdb5ea47b..14ebcc38a 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
@@ -80,6 +80,11 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     statements: ['ɵɵsetNgModuleScope(SpreadModule)'],
     reasons: [NG_MODULE_SCOPE],
   },
+  'injector/injector-with-exports': {
+    fields: [],
+    statements: ['ɵɵsetNgModuleScope(ExportingModule)'],
+    reasons: [NG_MODULE_SCOPE],
+  },
   'animations/animation-metadata-with-change-detection': {
     fields: ['AnimationsWithOnPushComponent.ɵcmp'],
     reasons: [DOM_ONLY, COMPONENT_DEPS],

From ca5972db1772a7afffd9b37f67a55f96b254deef Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 19:01:57 +0800
Subject: [PATCH 42/54] feat(component): compile DOM-only templates for
 standalone components without imports
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A full ngtsc build compiles the template of a standalone component without
directive dependencies in TemplateCompilationMode.DomOnly (ɵɵdomElementStart,
ɵɵdomListener, ɵɵdomProperty, ɵɵdomTemplate, ...). Oxc always used Full mode,
like ngtsc's local mode, which cannot see what `imports` holds. But a file
alone can prove the scope empty, so Oxc now uses DomOnly when all of these
hold:

- the component is standalone (explicit or the v19+ default);
- `imports` and `deferredImports` are each absent or `[]`, and the decorator
  object has no spread or accessor that could add them (new
  `ComponentMetadata::imports_provably_empty`);
- its own selector (or `ng-component` when it has none) matches nothing in
  its template, `@defer` blocks included: a standalone scope always holds the
  component itself (StandaloneComponentScopeReader), and a selectorless
  node counts as a match;
- not `jit`, and Angular >= 20.1.0-next.3, the first release with DomOnly
  (checked against the published @angular/compiler builds).

Identifiers, spreads, forwardRef, pipe-only or any other imports keep Full
mode. Schemas and hostDirectives do not matter, as in ngtsc. @defer and i18n
need nothing special: reify already mirrors Angular for both. The HMR update
module still compiles in Full mode, which works for every template.

Compare harness: ngtsc's local mode never emits DomOnly, so a fixture without
an explicit `ngtscMode` now takes its reference from a full build when every
component in the file is standalone and has no imports, and from local mode
otherwise. 629 fixtures that broke under local mode match a full build. The
four forwardRef fixtures mix both kinds, so they pin `ngtscMode: 'full'` and
document COMPONENT_DEPS for the importing component. The 12 DOM_ONLY entries
that now match are removed, expectedFeatures that named the old instructions
now name the DOM-only ones, and templates/dom-only.fixture.ts covers bindings,
control flow, @defer, i18n, `imports: []`, hostDirectives and the
self-selector cases (a recursive component keeps Full mode; its missing
self-`dependencies` entry is documented as SELF_DEPENDENCY).

Rust tests that pinned Full mode for standalone components now pin DomOnly,
with new tests for the not-provable cases, own-selector matching and the
version gate. Tests ported from NgModule-based compliance cases compile
their components as `standalone: false`, as upstream does.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/component/decorator.rs                |  14 +
 .../src/component/defer_resolver.rs           |  51 ++++
 .../src/component/metadata.rs                 |  56 ++++
 .../src/component/transform.rs                |  32 ++-
 .../tests/element_name_case_test.rs           |   7 +-
 .../tests/integration_test.rs                 | 266 +++++++++--------
 ...on_test__component_with_inline_styles.snap |   4 +-
 ..._test__component_with_multiple_styles.snap |   4 +-
 ...ration_test__component_without_styles.snap |   4 +-
 ...st__event_before_property_in_bindings.snap |   8 +-
 ...ration_test__ngfor_attribute_ordering.snap |   8 +-
 ...t_without_imports_uses_dom_only_mode.snap} |  12 +-
 .../edge-cases/forwardref-import.fixture.ts   |   8 +
 .../fixtures/full-transform/basic.fixture.ts  |  26 +-
 .../e2e/compare/fixtures/hmr/basic.fixture.ts |   4 +-
 .../e2e/compare/fixtures/known-differences.ts |  85 +++---
 .../e2e/compare/fixtures/runner.ts            |  78 ++++-
 .../fixtures/templates/dom-only.fixture.ts    | 272 ++++++++++++++++++
 .../e2e/compare/fixtures/types.ts             |   4 +-
 napi/angular-compiler/test/transform.test.ts  |   5 +-
 20 files changed, 726 insertions(+), 222 deletions(-)
 rename crates/oxc_angular_compiler/tests/snapshots/{integration_test__standalone_component_uses_full_mode.snap => integration_test__standalone_component_without_imports_uses_dom_only_mode.snap} (88%)
 create mode 100644 napi/angular-compiler/e2e/compare/fixtures/templates/dom-only.fixture.ts

diff --git a/crates/oxc_angular_compiler/src/component/decorator.rs b/crates/oxc_angular_compiler/src/component/decorator.rs
index d4ceea707..aa4be8f57 100644
--- a/crates/oxc_angular_compiler/src/component/decorator.rs
+++ b/crates/oxc_angular_compiler/src/component/decorator.rs
@@ -81,6 +81,10 @@ pub fn extract_component_metadata<'a>(
     let mut metadata =
         ComponentMetadata::new(allocator, class_name, class_span, implicit_standalone);
 
+    // Whether `imports` and `deferredImports` are provably empty; a spread or
+    // accessor this loop skips could add them.
+    let mut imports_provably_empty = true;
+
     // Parse each property in the config object
     for prop in &config_obj.properties {
         if let ObjectPropertyKind::ObjectProperty(prop) = prop
@@ -187,6 +191,7 @@ pub fn extract_component_metadata<'a>(
                     }
                 }
                 "imports" => {
+                    imports_provably_empty &= is_empty_array_literal(&prop.value);
                     // For standalone components, we need:
                     // 1. The identifier list for local analysis
                     metadata.imports = extract_identifier_array(allocator, &prop.value);
@@ -195,6 +200,7 @@ pub fn extract_component_metadata<'a>(
                         convert_oxc_expression(allocator, &prop.value, source_text);
                 }
                 "deferredImports" => {
+                    imports_provably_empty &= is_empty_array_literal(&prop.value);
                     // Symbols explicitly opted into lazy loading via `@defer`.
                     // Mirrors Angular's `@Component.deferredImports` field; in
                     // local compilation this is the only source of deferrable
@@ -258,8 +264,11 @@ pub fn extract_component_metadata<'a>(
                     // Unknown property - ignore
                 }
             }
+        } else {
+            imports_provably_empty = false;
         }
     }
+    metadata.imports_provably_empty = imports_provably_empty;
 
     // Extract host bindings and listeners from @HostBinding/@HostListener decorators on class members
     // These are merged with any host metadata from the @Component({ host: {} }) property
@@ -423,6 +432,11 @@ fn get_property_key_name<'a>(
     }
 }
 
+/// Whether `expr` is the array literal `[]`.
+fn is_empty_array_literal(expr: &Expression<'_>) -> bool {
+    matches!(expr, Expression::ArrayExpression(array) if array.elements.is_empty())
+}
+
 /// Extract a boolean value from an expression.
 fn extract_boolean_value(expr: &Expression<'_>) -> Option<bool> {
     match expr {
diff --git a/crates/oxc_angular_compiler/src/component/defer_resolver.rs b/crates/oxc_angular_compiler/src/component/defer_resolver.rs
index 73a988b6f..f9d53d259 100644
--- a/crates/oxc_angular_compiler/src/component/defer_resolver.rs
+++ b/crates/oxc_angular_compiler/src/component/defer_resolver.rs
@@ -275,6 +275,57 @@ pub(super) fn implicitly_deferred_imports<'a>(
         .collect()
 }
 
+/// Whether any element or template anywhere in the template (`@defer` blocks
+/// included) matches one of `selectors`, as ngc's `R3TargetBinder` matches a
+/// scope's directives. A selectorless component or directive counts as a
+/// match, since nothing here can tell what it resolves to.
+pub(super) fn template_may_match_selectors(
+    nodes: &[R3Node<'_>],
+    selectors: &[CssSelector],
+) -> bool {
+    struct Matcher<'s> {
+        selectors: &'s [CssSelector],
+        matched: bool,
+    }
+
+    impl Matcher<'_> {
+        fn record(&mut self, element: &CssSelector) {
+            self.matched |= self.selectors.iter().any(|selector| selector.matches(element));
+        }
+    }
+
+    impl<'a> R3Visitor<'a> for Matcher<'_> {
+        fn visit_element(&mut self, element: &R3Element<'a>) {
+            self.matched |= !element.directives.is_empty();
+            self.record(&element_selector(
+                &element.name,
+                &element.attributes,
+                &element.inputs,
+                &element.outputs,
+            ));
+            self.visit_element_children(element);
+        }
+
+        fn visit_template(&mut self, template: &R3Template<'a>) {
+            self.matched |= !template.directives.is_empty();
+            self.record(&template_selector(template));
+            self.visit_template_children(template);
+        }
+
+        fn visit_component(&mut self, _component: &R3Component<'a>) {
+            self.matched = true;
+        }
+
+        fn visit_directive(&mut self, _directive: &R3Directive<'a>) {
+            self.matched = true;
+        }
+    }
+
+    let mut matcher = Matcher { selectors, matched: false };
+    visit_all(&mut matcher, nodes);
+    matcher.matched
+}
+
 /// An element as Angular matches directives against it
 /// (`createCssSelectorFromNode` and `getAttrsForDirectiveMatching` in
 /// `packages/compiler/src/render3/view/util.ts`): its static attributes with
diff --git a/crates/oxc_angular_compiler/src/component/metadata.rs b/crates/oxc_angular_compiler/src/component/metadata.rs
index 2c098b0ee..9d9a116d5 100644
--- a/crates/oxc_angular_compiler/src/component/metadata.rs
+++ b/crates/oxc_angular_compiler/src/component/metadata.rs
@@ -219,6 +219,24 @@ impl AngularVersion {
         self.is_at_least(22, 0, 0)
     }
 
+    /// Check if this version compiles component templates in DOM-only mode
+    /// (v20.1.0-next.3+).
+    ///
+    /// From that release a full build compiles the template of a standalone
+    /// component without directive dependencies with `ɵɵdomElementStart`,
+    /// `ɵɵdomListener`, `ɵɵdomProperty` and the other DOM-only instructions
+    /// (`TemplateCompilationMode.DomOnly`). `20.1.0-next.2` and earlier always
+    /// use the full instructions.
+    pub fn supports_dom_only_templates(&self) -> bool {
+        if self.major == 20 && self.minor == 1 && self.patch == 0 {
+            return match self.prerelease {
+                None => true,
+                Some(prerelease) => prerelease >= Prerelease::Next(3),
+            };
+        }
+        self.is_at_least(20, 1, 0)
+    }
+
     /// Check if this version's `ShadowCss` still runs the legacy Shadow DOM
     /// polyfill passes (before v22.0.0-rc.0).
     ///
@@ -529,6 +547,17 @@ pub struct ComponentMetadata<'a> {
     /// requires cross-file selector info OXC doesn't have.
     pub deferred_imports: Vec<'a, Ident<'a>>,
 
+    /// `true` when the decorator provably brings nothing into the template's
+    /// scope: `imports` and `deferredImports` are each absent or an empty
+    /// array literal, and the config object has no spread that could add
+    /// them. `false` when unknown.
+    ///
+    /// A standalone component whose scope is provably empty can only match
+    /// itself in its template, which is what a full ngtsc build checks before
+    /// compiling the template in DOM-only mode (`hasDirectiveDependencies` in
+    /// `packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts`).
+    pub imports_provably_empty: bool,
+
     /// Animation triggers for the component.
     ///
     /// Corresponds to the `animations` property in `@Component`.
@@ -834,6 +863,7 @@ impl<'a> ComponentMetadata<'a> {
             declaration_list_emit_mode: DeclarationListEmitMode::default(),
             raw_imports: None,
             deferred_imports: Vec::new_in(&allocator),
+            imports_provably_empty: false,
             animations: None,
             schemas: Vec::new_in(&allocator),
             is_signal: false,
@@ -952,6 +982,32 @@ mod tests {
         }
     }
 
+    #[test]
+    fn dom_only_templates_start_at_20_1_0_next_3() {
+        let parse = |s| AngularVersion::parse(s).unwrap();
+
+        for version in [
+            parse("20.1.0-next.3"),
+            parse("20.1.0-rc.0"),
+            parse("20.1.0"),
+            parse("20.3.4"),
+            parse("21.0.0-next.0"),
+            parse("22.2.2"),
+        ] {
+            assert!(version.supports_dom_only_templates(), "{version:?}");
+        }
+
+        for version in [
+            parse("19.2.0"),
+            parse("20.0.7"),
+            parse("20.1.0-next.2"),
+            // Unknown tags parse to `Other`, below `next`.
+            parse("20.1.0-beta.1"),
+        ] {
+            assert!(!version.supports_dom_only_templates(), "{version:?}");
+        }
+    }
+
     #[test]
     fn shadow_css_polyfills_end_at_22_0_0_rc_0() {
         let parse = |s| AngularVersion::parse(s).unwrap();
diff --git a/crates/oxc_angular_compiler/src/component/transform.rs b/crates/oxc_angular_compiler/src/component/transform.rs
index 8dcb2de6b..e4a7da7dc 100644
--- a/crates/oxc_angular_compiler/src/component/transform.rs
+++ b/crates/oxc_angular_compiler/src/component/transform.rs
@@ -5060,13 +5060,33 @@ fn compile_component_full<'a>(
     // Build ingest options from metadata and transform options
     let component_name_atom = Ident::from_in(metadata.class_name.as_str(), &allocator);
 
-    // OXC is a single-file compiler, equivalent to Angular's local compilation mode.
-    // In local compilation mode, Angular ALWAYS sets hasDirectiveDependencies=true,
-    // so DomOnly mode is never used for component templates.
-    // See: angular/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts:1257
+    // A full ngtsc build compiles the template in DomOnly mode when the
+    // component is standalone and nothing in its template scope matches
+    // (`hasDirectiveDependencies` in
+    // angular/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts,
+    // read by `compileComponentFromMetadata`). Its local mode assumes
+    // dependencies, since it cannot see the imported classes. OXC can prove
+    // the scope empty only when `imports` and `deferredImports` are absent or
+    // `[]`: a standalone scope then holds just the component itself
+    // (`StandaloneComponentScopeReader`), with its selector, or
+    // `ng-component` when it has none. Anything less certain stays Full,
+    // which works for every template.
     //
-    // Note: DomOnly mode is still used for host bindings (separate code path).
-    let mode = TemplateCompilationMode::Full;
+    // Note: DomOnly mode is always used for host bindings (separate code path).
+    let mode = if metadata.standalone
+        && metadata.imports_provably_empty
+        && !options.jit
+        && options.angular_version.is_none_or(|v| v.supports_dom_only_templates())
+        && !super::defer_resolver::template_may_match_selectors(
+            &r3_result.nodes,
+            &crate::pipeline::selector::CssSelector::parse(
+                metadata.selector.as_ref().map_or("ng-component", |s| s.as_str()),
+            ),
+        ) {
+        TemplateCompilationMode::DomOnly
+    } else {
+        TemplateCompilationMode::Full
+    };
 
     // Reject overlap between `imports: [X]` and `deferredImports: [X]` —
     // a symbol must be either eager OR deferrable, never both. Mirrors
diff --git a/crates/oxc_angular_compiler/tests/element_name_case_test.rs b/crates/oxc_angular_compiler/tests/element_name_case_test.rs
index f97ba0227..da8b1096c 100644
--- a/crates/oxc_angular_compiler/tests/element_name_case_test.rs
+++ b/crates/oxc_angular_compiler/tests/element_name_case_test.rs
@@ -7,7 +7,10 @@
 //! template with no error.
 //!
 //! The expected output is ngtsc 22.2.2's for the same template (the default is
-//! the latest release line), in this emitter's spelling.
+//! the latest release line), in this emitter's spelling. The components are
+//! declared `standalone: false` so their templates use the full instructions
+//! (`ɵɵelementStart`) rather than the DOM-only ones a standalone component
+//! without dependencies gets.
 
 use oxc_allocator::Allocator;
 use oxc_angular_compiler::{
@@ -29,7 +32,7 @@ fn definition(template: &str) -> String {
 fn definition_for(template: &str, angular_version: Option<AngularVersion>) -> String {
     let source = format!(
         "import {{ Component }} from '@angular/core';\n\
-         @Component({{ selector: 'x', template: `{template}` }})\n\
+         @Component({{ selector: 'x', standalone: false, template: `{template}` }})\n\
          export class X {{ t = ''; on = true; items: any[] = []; go(..._a: any[]) {{}} }}\n"
     );
     let allocator = Allocator::default();
diff --git a/crates/oxc_angular_compiler/tests/integration_test.rs b/crates/oxc_angular_compiler/tests/integration_test.rs
index 2a0198fcc..fc79334b1 100644
--- a/crates/oxc_angular_compiler/tests/integration_test.rs
+++ b/crates/oxc_angular_compiler/tests/integration_test.rs
@@ -1669,14 +1669,12 @@ export class TestComponent {
 // ============================================================================
 
 #[test]
-fn test_standalone_component_uses_full_mode() {
-    // OXC operates as a single-file compiler, equivalent to Angular's local compilation mode.
-    // In local compilation mode, Angular ALWAYS sets hasDirectiveDependencies=true,
-    // which means DomOnly mode is never used for component templates.
-    // See: angular/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts:1257
-    //
-    // This test ensures standalone components with no imports use Full mode instructions
-    // (ɵɵelementStart) NOT DomOnly mode instructions (ɵɵdomElementStart).
+fn test_standalone_component_without_imports_uses_dom_only_mode() {
+    // A full ngtsc build compiles a standalone component without directive
+    // dependencies in DomOnly mode (`hasDirectiveDependencies` in
+    // angular/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts).
+    // Without `imports` the template scope holds only the component itself,
+    // which this template does not use, so Oxc can prove the same.
     let allocator = Allocator::default();
     let source = r#"
 import { Component } from '@angular/core';
@@ -1695,22 +1693,10 @@ export class ExternalComponent {
     let result = transform_angular_file(&allocator, "test.component.ts", source, None, None);
 
     assert!(!result.has_errors(), "Should not have errors: {:?}", result.diagnostics);
+    assert!(result.code.contains("ɵɵdomElementStart"), "{}", result.code);
+    assert!(!result.code.contains("ɵɵelementStart"), "{}", result.code);
 
-    // Must use Full mode instructions (elementStart), not DomOnly (domElementStart)
-    assert!(
-        !result.code.contains("domElementStart"),
-        "Standalone component should use Full mode (elementStart), not DomOnly mode (domElementStart).\n\
-         OXC operates in local compilation mode where hasDirectiveDependencies is always true.\n\
-         Output:\n{}",
-        result.code
-    );
-    assert!(
-        result.code.contains("elementStart"),
-        "Expected Full mode instruction ɵɵelementStart in output.\nOutput:\n{}",
-        result.code
-    );
-
-    insta::assert_snapshot!("standalone_component_uses_full_mode", result.code);
+    insta::assert_snapshot!("standalone_component_without_imports_uses_dom_only_mode", result.code);
 }
 
 // ============================================================================
@@ -4941,7 +4927,7 @@ export class TestComponent {
 }
 ";
 
-    // OXC always uses Full mode (elementStart, not domElementStart)
+    // Any import keeps Full mode (elementStart, not domElementStart)
     let result = transform_angular_file(&allocator, "test.ts", source, None, None);
 
     // Should use elementStart (Full mode), NOT domElementStart (DomOnly mode)
@@ -4957,15 +4943,22 @@ export class TestComponent {
     );
 }
 
-/// Test that standalone components WITHOUT imports use Full mode (local compilation).
-///
-/// OXC is a single-file compiler, equivalent to Angular's local compilation mode.
-/// In local compilation mode, Angular ALWAYS sets hasDirectiveDependencies=true,
-/// so DomOnly mode is never used for component templates.
-/// See: angular/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts:1257
-#[test]
-fn test_dom_only_mode_not_used_for_standalone_without_imports() {
+/// Compiles `source` and returns whether its component template used the
+/// DOM-only instructions, checking that it used one mode throughout.
+fn compiles_dom_only(source: &str, options: Option<&ComponentTransformOptions>) -> bool {
     let allocator = Allocator::default();
+    let result = transform_angular_file(&allocator, "test.ts", source, options, None);
+    assert!(!result.has_errors(), "Should not have errors: {:?}", result.diagnostics);
+    let dom_only = result.code.contains("ɵɵdomElement");
+    let full = result.code.contains("ɵɵelement");
+    assert!(dom_only != full, "Expected exactly one template mode. Output:\n{}", result.code);
+    dom_only
+}
+
+/// A standalone component without imports uses DomOnly mode, like a full
+/// ngtsc build.
+#[test]
+fn test_dom_only_mode_used_for_standalone_without_imports() {
     let source = r"
 import { Component } from '@angular/core';
 
@@ -4980,19 +4973,7 @@ import { Component } from '@angular/core';
 export class TestComponent {}
 ";
 
-    let result = transform_angular_file(&allocator, "test.ts", source, None, None);
-
-    // OXC in local compilation mode: always Full mode for component templates
-    assert!(
-        result.code.contains("ɵɵelementStart"),
-        "Standalone component without imports should use ɵɵelementStart (Full mode). Output:\n{}",
-        result.code
-    );
-    assert!(
-        !result.code.contains("ɵɵdomElementStart"),
-        "Standalone component without imports should NOT use ɵɵdomElementStart. Output:\n{}",
-        result.code
-    );
+    assert!(compiles_dom_only(source, None));
 }
 
 /// Test that non-standalone components use Full mode.
@@ -5192,22 +5173,11 @@ fn test_animation_enter_string_literal_only_in_embedded_view() {
     insta::assert_snapshot!("animation_enter_string_literal_only_embedded_view", js);
 }
 
-/// Test that implicit standalone components (no `standalone` in decorator) use Full mode.
-///
-/// Angular 19+ defaults `standalone` to `true` when not specified. However, OXC performs
-/// single-file compilation without NgModule context. Angular's ngtsc (in local compilation
-/// mode) always sets `hasDirectiveDependencies = true` because it can't fully inspect
-/// dependencies. OXC should do the same: only use DomOnly mode when `standalone: true`
-/// is EXPLICITLY set in the decorator.
-///
-/// Components that rely on the implicit default may be declared in NgModules, which
-/// Angular's global compilation handles by setting `hasDirectiveDependencies =
-/// !isStandalone || ...`. Without NgModule context, OXC must be conservative.
-///
-/// See: angular/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts:1326-1339
+/// Implicitly standalone components (Angular 19+ default) use DomOnly mode too:
+/// ngtsc reads `isStandalone` the same way, and declaring such a component in
+/// an NgModule is an error.
 #[test]
-fn test_dom_only_mode_not_used_for_implicit_standalone() {
-    let allocator = Allocator::default();
+fn test_dom_only_mode_used_for_implicit_standalone() {
     let source = r"
 import { Component } from '@angular/core';
 
@@ -5221,34 +5191,17 @@ import { Component } from '@angular/core';
 export class TestComponent {}
 ";
 
-    // Angular version 19+ defaults standalone to true, but implicit standalone
-    // should NOT trigger DomOnly mode because the component might be in an NgModule
     let options = ComponentTransformOptions {
         angular_version: Some(AngularVersion::new(21, 0, 0)),
         ..Default::default()
     };
-    let result = transform_angular_file(&allocator, "test.ts", source, Some(&options), None);
-
-    // Should use Full mode (elementStart), NOT DomOnly (domElementStart)
-    assert!(
-        result.code.contains("ɵɵelementStart"),
-        "Implicit standalone component should use ɵɵelementStart (Full mode). Output:\n{}",
-        result.code
-    );
-    assert!(
-        !result.code.contains("ɵɵdomElementStart"),
-        "Implicit standalone component should NOT use ɵɵdomElementStart (DomOnly). Output:\n{}",
-        result.code
-    );
+    assert!(compiles_dom_only(source, Some(&options)));
 }
 
-/// Test that implicit standalone components with empty imports also use Full mode.
-///
-/// Even with an empty `imports: []` array, if `standalone` is not explicitly set,
-/// OXC should use Full mode to be safe.
+/// `imports: []` brings nothing into scope, so an implicitly standalone
+/// component keeps DomOnly mode.
 #[test]
-fn test_dom_only_mode_not_used_for_implicit_standalone_with_empty_imports() {
-    let allocator = Allocator::default();
+fn test_dom_only_mode_used_for_implicit_standalone_with_empty_imports() {
     let source = r"
 import { Component } from '@angular/core';
 
@@ -5264,27 +5217,12 @@ export class TestComponent {}
         angular_version: Some(AngularVersion::new(21, 0, 0)),
         ..Default::default()
     };
-    let result = transform_angular_file(&allocator, "test.ts", source, Some(&options), None);
-
-    // Implicit standalone + empty imports should still use Full mode
-    assert!(
-        result.code.contains("ɵɵelementStart"),
-        "Implicit standalone with empty imports should use Full mode. Output:\n{}",
-        result.code
-    );
-    assert!(
-        !result.code.contains("ɵɵdomElementStart"),
-        "Implicit standalone with empty imports should NOT use DomOnly. Output:\n{}",
-        result.code
-    );
+    assert!(compiles_dom_only(source, Some(&options)));
 }
 
-/// Test that standalone components with empty imports use Full mode (local compilation).
-///
-/// OXC always uses Full mode for component templates, matching Angular's local compilation.
+/// Empty `imports` and `deferredImports` keep DomOnly mode.
 #[test]
-fn test_dom_only_mode_not_used_for_standalone_with_empty_imports() {
-    let allocator = Allocator::default();
+fn test_dom_only_mode_used_for_standalone_with_empty_imports() {
     let source = r"
 import { Component } from '@angular/core';
 
@@ -5292,29 +5230,116 @@ import { Component } from '@angular/core';
   selector: 'app-test',
   standalone: true,
   imports: [],
+  deferredImports: [],
   template: `<div>Hello</div>`
 })
 export class TestComponent {}
 ";
 
-    let result = transform_angular_file(&allocator, "test.ts", source, None, None);
+    assert!(compiles_dom_only(source, None));
+}
 
-    // OXC in local compilation mode: always Full mode for component templates
-    assert!(
-        result.code.contains("ɵɵelementStart"),
-        "Standalone with empty imports should use ɵɵelementStart (Full mode). Output:\n{}",
-        result.code
-    );
-    assert!(
-        !result.code.contains("ɵɵdomElementStart"),
-        "Standalone with empty imports should NOT use ɵɵdomElementStart. Output:\n{}",
-        result.code
-    );
+/// Anything Oxc cannot prove empty keeps Full mode: imports through an
+/// identifier, a spread, `forwardRef`, `deferredImports`, or a spread in the
+/// decorator object that could add them.
+#[test]
+fn test_full_mode_used_when_imports_are_not_provably_empty() {
+    for config in [
+        "imports: SHARED,",
+        "imports: [...SHARED],",
+        "imports: [forwardRef(() => Other)],",
+        "deferredImports: [Other],",
+        "imports: [] as any[],",
+        "...BASE,",
+    ] {
+        let source = format!(
+            "import {{ Component, forwardRef }} from '@angular/core';\n\
+             const SHARED: any[] = [];\n\
+             const BASE = {{}};\n\
+             class Other {{}}\n\
+             @Component({{ selector: 'app-test', {config} template: '<div>@defer {{ <p>x</p> }}</div>' }})\n\
+             export class TestComponent {{}}\n"
+        );
+        assert!(!compiles_dom_only(&source, None), "`{config}` should keep Full mode");
+    }
 }
 
-/// Test that standalone components with ONLY pipe imports use Full mode (local compilation).
+/// A standalone scope holds the component itself, so a template that uses its
+/// own selector has a directive dependency and keeps Full mode — anywhere in the
+/// template, `@defer` blocks included. Without a selector the component matches
+/// `ng-component`, ngtsc's default.
+#[test]
+fn test_full_mode_used_when_template_matches_own_selector() {
+    for (selector, template) in [
+        ("selector: 'app-tree',", "<span>x</span>@if (on) { <app-tree /> }"),
+        (
+            "selector: 'app-tree',",
+            "<span>x</span>@defer { <app-tree /> } @placeholder { <i>p</i> }",
+        ),
+        ("selector: '[appTree]',", "<span>x</span><ng-template appTree></ng-template>"),
+        ("selector: 'app-tree, [appTree]',", "<div appTree></div>"),
+        ("selector: '.tree',", "<div class=\"a tree\"></div>"),
+        ("", "<span>x</span><ng-component></ng-component>"),
+    ] {
+        let source = format!(
+            "import {{ Component }} from '@angular/core';\n\
+             @Component({{ {selector} template: `{template}` }})\n\
+             export class TreeComponent {{ on = true; }}\n"
+        );
+        assert!(
+            !compiles_dom_only(&source, None),
+            "`{selector}` `{template}` should keep Full mode"
+        );
+    }
+
+    for (selector, template) in [
+        ("selector: 'app-tree:not(.leaf)',", "<app-tree class=\"leaf\"></app-tree>"),
+        ("selector: '[appTree]',", "<div appTreeX></div>"),
+        ("selector: 'app-tree',", "<div>app-tree</div><span>x</span>"),
+        ("", "<div></div>"),
+    ] {
+        let source = format!(
+            "import {{ Component }} from '@angular/core';\n\
+             @Component({{ {selector} template: `{template}` }})\n\
+             export class TreeComponent {{}}\n"
+        );
+        assert!(
+            compiles_dom_only(&source, None),
+            "`{selector}` `{template}` should use DomOnly mode"
+        );
+    }
+}
+
+/// DomOnly templates start at Angular 20.1.0-next.3.
+#[test]
+fn test_dom_only_mode_is_version_gated() {
+    let source = r"
+import { Component } from '@angular/core';
+
+@Component({ selector: 'app-test', standalone: true, template: `<div (click)='go()'>Hello</div>` })
+export class TestComponent { go() {} }
+";
+    for (version, dom_only) in [
+        ("19.2.0", false),
+        ("20.0.7", false),
+        ("20.1.0-next.2", false),
+        ("20.1.0-next.3", true),
+        ("20.1.0", true),
+        ("22.2.2", true),
+    ] {
+        let options = ComponentTransformOptions {
+            angular_version: AngularVersion::parse(version),
+            ..Default::default()
+        };
+        assert_eq!(compiles_dom_only(source, Some(&options)), dom_only, "{version}");
+    }
+}
+
+/// Test that standalone components with ONLY pipe imports use Full mode.
 ///
-/// OXC always uses Full mode for component templates, matching Angular's local compilation.
+/// A full ngtsc build would use DomOnly mode here (pipes are not directive
+/// dependencies), but Oxc cannot tell an imported pipe from a directive within
+/// one file, so any import keeps Full mode, like ngtsc's local compilation.
 #[test]
 fn test_dom_only_mode_not_used_for_standalone_with_pipe_only_imports() {
     let allocator = Allocator::default();
@@ -5335,7 +5360,7 @@ export class TestComponent {
 
     let result = transform_angular_file(&allocator, "test.ts", source, None, None);
 
-    // OXC in local compilation mode: always Full mode for component templates
+    // Any import keeps Full mode
     assert!(
         result.code.contains("ɵɵelementStart"),
         "Standalone with pipe-only imports should use ɵɵelementStart (Full mode). Output:\n{}",
@@ -5348,9 +5373,8 @@ export class TestComponent {
     );
 }
 
-/// Test that multiple pipe-only imports also use Full mode (local compilation).
-///
-/// OXC always uses Full mode for component templates, matching Angular's local compilation.
+/// Test that multiple pipe-only imports also use Full mode, as Oxc cannot tell
+/// imported pipes from directives.
 #[test]
 fn test_dom_only_mode_not_used_for_standalone_with_multiple_pipe_imports() {
     let allocator = Allocator::default();
@@ -5369,7 +5393,7 @@ export class TestComponent {}
 
     let result = transform_angular_file(&allocator, "test.ts", source, None, None);
 
-    // OXC in local compilation mode: always Full mode for component templates
+    // Any import keeps Full mode
     assert!(
         result.code.contains("ɵɵelementStart"),
         "Multiple pipe-only imports should use Full mode. Output:\n{}",
@@ -17935,12 +17959,14 @@ fn test_lone_surrogate_host_listener_argument_is_diagnostic() {
 // sanitizer by `resolveI18nAttrSanitizers` (19.2.23 / 20.3.22 / 21.2.15 / 22+).
 
 /// Compiles `template` in a component for `version` and returns the code with
-/// all whitespace removed.
+/// all whitespace removed. The component is `standalone: false`, like the
+/// compliance test cases ported here, so the template uses the full
+/// instructions.
 fn compile_component_compact(template: &str, version: Option<AngularVersion>) -> String {
     let allocator = Allocator::default();
     let source = format!(
         "import {{ Component }} from '@angular/core';\n\
-         @Component({{ selector: 'my-component', template: {template:?} }})\n\
+         @Component({{ selector: 'my-component', standalone: false, template: {template:?} }})\n\
          export class MyComponent {{}}\n"
     );
     let options = ComponentTransformOptions { angular_version: version, ..Default::default() };
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_inline_styles.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_inline_styles.snap
index 8d7ce9a82..6e1b1c58d 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_inline_styles.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_inline_styles.snap
@@ -14,9 +14,9 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:StyledComponent,select
     decls:2,vars:0,consts:[[1,"container"]],template:function StyledComponent_Template(rf,
         ctx) {
       if ((rf & 1)) {
-        i0.ɵɵelementStart(0,"div",0);
+        i0.ɵɵdomElementStart(0,"div",0);
         i0.ɵɵtext(1,"Hello");
-        i0.ɵɵelementEnd();
+        i0.ɵɵdomElementEnd();
       }
     },styles:[".container[_ngcontent-%COMP%] { color: red; }"]});
 }
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_multiple_styles.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_multiple_styles.snap
index 56391a367..f1ccaa1cd 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_multiple_styles.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_multiple_styles.snap
@@ -13,9 +13,9 @@ static ɵfac = function MultiStyledComponent_Factory(__ngFactoryType__) {
 static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:MultiStyledComponent,selectors:[["app-multi-styled"]],
     decls:2,vars:0,template:function MultiStyledComponent_Template(rf,ctx) {
       if ((rf & 1)) {
-        i0.ɵɵelementStart(0,"div");
+        i0.ɵɵdomElementStart(0,"div");
         i0.ɵɵtext(1,"Content");
-        i0.ɵɵelementEnd();
+        i0.ɵɵdomElementEnd();
       }
     },styles:[".first[_ngcontent-%COMP%] { color: blue; }",".second[_ngcontent-%COMP%] { background: white; }"]});
 }
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_without_styles.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_without_styles.snap
index 928991476..043120b2d 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_without_styles.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__component_without_styles.snap
@@ -13,9 +13,9 @@ static ɵfac = function NoStylesComponent_Factory(__ngFactoryType__) {
 static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:NoStylesComponent,selectors:[["app-no-styles"]],
     decls:2,vars:0,template:function NoStylesComponent_Template(rf,ctx) {
       if ((rf & 1)) {
-        i0.ɵɵelementStart(0,"div");
+        i0.ɵɵdomElementStart(0,"div");
         i0.ɵɵtext(1,"No styles");
-        i0.ɵɵelementEnd();
+        i0.ɵɵdomElementEnd();
       }
     },encapsulation:2});
 }
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__event_before_property_in_bindings.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__event_before_property_in_bindings.snap
index ae89c6bf2..c5631910e 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__event_before_property_in_bindings.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__event_before_property_in_bindings.snap
@@ -17,14 +17,14 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:TestComponent,selector
     vars:1,consts:[[3,"click","disabled"]],template:function TestComponent_Template(rf,
         ctx) {
       if ((rf & 1)) {
-        i0.ɵɵelementStart(0,"button",0);
-        i0.ɵɵlistener("click",function TestComponent_Template_button_click_0_listener() {
+        i0.ɵɵdomElementStart(0,"button",0);
+        i0.ɵɵdomListener("click",function TestComponent_Template_button_click_0_listener() {
           return ctx.onClick();
         });
         i0.ɵɵtext(1,"Click");
-        i0.ɵɵelementEnd();
+        i0.ɵɵdomElementEnd();
       }
-      if ((rf & 2)) { i0.ɵɵproperty("disabled",ctx.isDisabled); }
+      if ((rf & 2)) { i0.ɵɵdomProperty("disabled",ctx.isDisabled); }
     },encapsulation:2});
 }
 (() =>{
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__ngfor_attribute_ordering.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__ngfor_attribute_ordering.snap
index 1975f3673..af6a5631c 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__ngfor_attribute_ordering.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__ngfor_attribute_ordering.snap
@@ -8,9 +8,9 @@ import * as i0 from '@angular/core';
 
 function TestComponent_li_0_Template(rf,ctx) {
   if ((rf & 1)) {
-    i0.ɵɵelementStart(0,"li");
+    i0.ɵɵdomElementStart(0,"li");
     i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
+    i0.ɵɵdomElementEnd();
   }
   if ((rf & 2)) {
     const item_r1 = ctx.$implicit;
@@ -28,8 +28,8 @@ static ɵfac = function TestComponent_Factory(__ngFactoryType__) {
 static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:TestComponent,selectors:[["test-comp"]],decls:1,
     vars:1,consts:[[4,"ngFor","ngForOf"]],template:function TestComponent_Template(rf,
         ctx) {
-      if ((rf & 1)) { i0.ɵɵtemplate(0,TestComponent_li_0_Template,2,1,"li",0); }
-      if ((rf & 2)) { i0.ɵɵproperty("ngForOf",ctx.items); }
+      if ((rf & 1)) { i0.ɵɵdomTemplate(0,TestComponent_li_0_Template,2,1,"li",0); }
+      if ((rf & 2)) { i0.ɵɵdomProperty("ngForOf",ctx.items); }
     },encapsulation:2});
 }
 (() =>{
diff --git a/crates/oxc_angular_compiler/tests/snapshots/integration_test__standalone_component_uses_full_mode.snap b/crates/oxc_angular_compiler/tests/snapshots/integration_test__standalone_component_without_imports_uses_dom_only_mode.snap
similarity index 88%
rename from crates/oxc_angular_compiler/tests/snapshots/integration_test__standalone_component_uses_full_mode.snap
rename to crates/oxc_angular_compiler/tests/snapshots/integration_test__standalone_component_without_imports_uses_dom_only_mode.snap
index 5798028e9..61db2f18e 100644
--- a/crates/oxc_angular_compiler/tests/snapshots/integration_test__standalone_component_uses_full_mode.snap
+++ b/crates/oxc_angular_compiler/tests/snapshots/integration_test__standalone_component_without_imports_uses_dom_only_mode.snap
@@ -8,9 +8,9 @@ import * as i0 from '@angular/core';
 
 function ExternalComponent_For_5_Template(rf,ctx) {
   if ((rf & 1)) {
-    i0.ɵɵelementStart(0,"li");
+    i0.ɵɵdomElementStart(0,"li");
     i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
+    i0.ɵɵdomElementEnd();
   }
   if ((rf & 2)) {
     const item_r1 = ctx.$implicit;
@@ -30,12 +30,12 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:ExternalComponent,sele
     decls:6,vars:1,consts:[[1,"container"]],template:function ExternalComponent_Template(rf,
         ctx) {
       if ((rf & 1)) {
-        i0.ɵɵelementStart(0,"div",0)(1,"h2");
+        i0.ɵɵdomElementStart(0,"div",0)(1,"h2");
         i0.ɵɵtext(2);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(3,"ul");
+        i0.ɵɵdomElementEnd();
+        i0.ɵɵdomElementStart(3,"ul");
         i0.ɵɵrepeaterCreate(4,ExternalComponent_For_5_Template,2,1,"li",null,i0.ɵɵrepeaterTrackByIdentity);
-        i0.ɵɵelementEnd()();
+        i0.ɵɵdomElementEnd()();
       }
       if ((rf & 2)) {
         i0.ɵɵadvance(2);
diff --git a/napi/angular-compiler/e2e/compare/fixtures/edge-cases/forwardref-import.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/edge-cases/forwardref-import.fixture.ts
index 21735dc72..709f47626 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/edge-cases/forwardref-import.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/edge-cases/forwardref-import.fixture.ts
@@ -10,6 +10,8 @@ import type { Fixture } from '../types.js'
 export const fixtures: Fixture[] = [
   {
     name: 'forwardref-basic-import',
+    // The components it imports have no imports of their own and compile like a full build.
+    ngtscMode: 'full',
     category: 'edge-cases',
     description: 'Basic forwardRef in imports array',
     className: 'ForwardRefBasicImportComponent',
@@ -36,6 +38,8 @@ export class ChildComponent {}
   },
   {
     name: 'forwardref-multiple-imports',
+    // The components it imports have no imports of their own and compile like a full build.
+    ngtscMode: 'full',
     category: 'edge-cases',
     description: 'Multiple forwardRef in imports',
     className: 'ForwardRefMultipleImportsComponent',
@@ -72,6 +76,8 @@ export class ComponentC {}
   },
   {
     name: 'forwardref-mixed-imports',
+    // The components it imports have no imports of their own and compile like a full build.
+    ngtscMode: 'full',
     category: 'edge-cases',
     description: 'Mix of regular and forwardRef imports',
     className: 'ForwardRefMixedImportsComponent',
@@ -138,6 +144,8 @@ export class TreeNodeComponent {
   },
   {
     name: 'forwardref-with-template',
+    // The components it imports have no imports of their own and compile like a full build.
+    ngtscMode: 'full',
     category: 'edge-cases',
     description: 'forwardRef with multiple lazy-loaded components',
     className: 'ForwardRefWithTemplateComponent',
diff --git a/napi/angular-compiler/e2e/compare/fixtures/full-transform/basic.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/full-transform/basic.fixture.ts
index ff6e1a5d5..859a41c28 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/full-transform/basic.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/full-transform/basic.fixture.ts
@@ -44,7 +44,7 @@ export class BasicComponent {
 }
     `.trim(),
     template: `<div>{{ message }}</div>`,
-    expectedFeatures: ['ɵɵelementStart', 'ɵɵtext', 'ɵɵtextInterpolate1'],
+    expectedFeatures: ['ɵɵdomElementStart', 'ɵɵtext', 'ɵɵtextInterpolate1'],
   },
 
   {
@@ -65,7 +65,7 @@ export class CustomSelectorComponent {}
     `.trim(),
     template: `<span>Custom selector component</span>`,
     selector: 'my-custom-selector',
-    expectedFeatures: ['ɵɵelement'],
+    expectedFeatures: ['ɵɵdomElement'],
   },
 
   // ==========================================================================
@@ -92,7 +92,7 @@ export class InputComponent {
 }
     `.trim(),
     template: `<div [title]="title">{{ value }}</div>`,
-    expectedFeatures: ['ɵɵelementStart', 'ɵɵproperty', 'ɵɵtextInterpolate1'],
+    expectedFeatures: ['ɵɵdomElementStart', 'ɵɵdomProperty', 'ɵɵtextInterpolate1'],
   },
 
   {
@@ -118,7 +118,7 @@ export class OutputComponent {
 }
     `.trim(),
     template: `<button (click)="onClick()">Click me</button>`,
-    expectedFeatures: ['ɵɵelementStart', 'ɵɵlistener'],
+    expectedFeatures: ['ɵɵdomElementStart', 'ɵɵdomListener'],
   },
 
   // ==========================================================================
@@ -145,7 +145,7 @@ export class NoEncapsulationComponent {}
     template: `<div class="global">Global styles</div>`,
     encapsulation: 'None',
     // encapsulation only appears in full component definition, not template output
-    expectedFeatures: ['ɵɵelement'],
+    expectedFeatures: ['ɵɵdomElement'],
   },
 
   {
@@ -168,7 +168,7 @@ export class ShadowDomComponent {}
     template: `<div class="shadow">Shadow DOM content</div>`,
     encapsulation: 'ShadowDom',
     // encapsulation only appears in full component definition, not template output
-    expectedFeatures: ['ɵɵelement'],
+    expectedFeatures: ['ɵɵdomElement'],
   },
 
   {
@@ -194,7 +194,7 @@ export class OnPushComponent {
     template: `<div>{{ data }}</div>`,
     changeDetection: 'OnPush',
     // changeDetection only appears in full component definition, not template output
-    expectedFeatures: ['ɵɵelementStart', 'ɵɵtextInterpolate1'],
+    expectedFeatures: ['ɵɵdomElementStart', 'ɵɵtextInterpolate1'],
   },
 
   // ==========================================================================
@@ -230,7 +230,7 @@ export class HostPropertyComponent {
       '[style.opacity]': 'opacity',
     },
     // Template output is simple div element
-    expectedFeatures: ['ɵɵelement'],
+    expectedFeatures: ['ɵɵdomElement'],
   },
 
   {
@@ -262,7 +262,7 @@ export class HostListenerComponent {
       '(keydown.enter)': 'handleEnter()',
     },
     // Host listeners appear in hostBindings, not template - template is simple element
-    expectedFeatures: ['ɵɵelement'],
+    expectedFeatures: ['ɵɵdomElement'],
   },
 
   {
@@ -295,7 +295,7 @@ export class HostAttributeComponent {
       '[attr.aria-label]': 'label',
     },
     // Template output is simple span element
-    expectedFeatures: ['ɵɵelement'],
+    expectedFeatures: ['ɵɵdomElement'],
   },
 
   // ==========================================================================
@@ -530,7 +530,7 @@ export class LetDeclarationsComponent {
     @let tripled = value * 3;
     <div>Value: {{ value }}, Doubled: {{ doubled }}, Tripled: {{ tripled }}</div>
   `,
-    expectedFeatures: ['ɵɵdeclareLet', 'ɵɵelementStart'],
+    expectedFeatures: ['ɵɵdeclareLet', 'ɵɵdomElementStart'],
   },
 
   // ==========================================================================
@@ -715,7 +715,7 @@ export class PreserveWhitespaceComponent {}
     `.trim(),
     template: `<pre>  preserved   whitespace  </pre>`,
     preserveWhitespaces: true,
-    expectedFeatures: ['ɵɵelementStart', 'ɵɵtext'],
+    expectedFeatures: ['ɵɵdomElementStart', 'ɵɵtext'],
   },
 
   // ==========================================================================
@@ -847,6 +847,6 @@ export class StyledComponent {
   `,
     styles: [`.container { padding: 1rem; }`, `.title { font-size: 2rem; font-weight: bold; }`],
     // styles: array only appears in component definition, not template output
-    expectedFeatures: ['ɵɵelementStart', 'ɵɵtextInterpolate1'],
+    expectedFeatures: ['ɵɵdomElementStart', 'ɵɵtextInterpolate1'],
   },
 ]
diff --git a/napi/angular-compiler/e2e/compare/fixtures/hmr/basic.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/hmr/basic.fixture.ts
index 50cd51714..c7d084c01 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/hmr/basic.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/hmr/basic.fixture.ts
@@ -30,7 +30,7 @@ export const fixtures: Fixture[] = [
     description: 'HMR with property binding',
     className: 'HmrPropertyComponent',
     template: `<div [title]="title" [hidden]="isHidden">Content</div>`,
-    expectedFeatures: ['ɵɵdefineComponent', 'ɵɵproperty'],
+    expectedFeatures: ['ɵɵdefineComponent', 'ɵɵdomProperty'],
   },
 
   {
@@ -39,7 +39,7 @@ export const fixtures: Fixture[] = [
     description: 'HMR with event binding',
     className: 'HmrEventComponent',
     template: `<button (click)="onClick($event)">Click me</button>`,
-    expectedFeatures: ['ɵɵdefineComponent', 'ɵɵlistener'],
+    expectedFeatures: ['ɵɵdefineComponent', 'ɵɵdomListener'],
   },
 
   {
diff --git a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
index 06f038422..36801f414 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
@@ -40,6 +40,8 @@ const DOM_ONLY =
   'templates use ɵɵelementStart/ɵɵlistener where a full ngtsc build of a standalone component without directive dependencies emits the DOM-only ɵɵdomElementStart/ɵɵdomListener'
 const COMPONENT_DEPS =
   'dependencies use the local-compilation ɵɵgetComponentDepsFactory(Cmp, imports) where a full ngtsc build lists the resolved dependencies'
+const SELF_DEPENDENCY =
+  'a standalone component without imports that uses its own selector in its template has no `dependencies` where a full ngtsc build lists the component itself (ngtsc local mode omits it too)'
 const SET_CLASS_METADATA_IMPORT =
   'Oxc keeps the @Inject import because its setClassMetadata references it; ngtsc emits the same reference but TypeScript elision still drops the import (upstream emit bug)'
 const ALIASED_INJECTABLE =
@@ -47,7 +49,8 @@ const ALIASED_INJECTABLE =
 
 const NG_MODULE_SCOPE =
   'ɵɵsetNgModuleScope runs unguarded where Angular wraps it in `ngJitMode`: Oxc compiles one file at a time and resolves component dependencies at runtime through the scope it registers, so production builds (ngJitMode = false) still need it'
-const NG_MODULE_SCOPE_ORDER = 'ɵɵsetNgModuleScope is emitted before ɵsetClassMetadata where Angular emits it after'
+const NG_MODULE_SCOPE_ORDER =
+  'ɵɵsetNgModuleScope is emitted before ɵsetClassMetadata where Angular emits it after'
 const DEBUG_INFO_PATH =
   'ɵsetClassDebugInfo filePath is the path Oxc was given (absolute here and in the Vite plugin) where Angular emits it relative to the project root'
 const DEBUG_INFO_LINE =
@@ -126,52 +129,36 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     ],
     reasons: [SET_CLASS_METADATA_IMPORT],
   },
-  'component-meta/change-detection-default': {
-    fields: ['ChangeDetectionDefaultComponent.ɵcmp'],
-    reasons: [DOM_ONLY],
-  },
-  'component-meta/change-detection-onpush': {
-    fields: ['ChangeDetectionOnPushComponent.ɵcmp'],
-    reasons: [DOM_ONLY],
-  },
   'edge-cases/aliased-injectable': {
     fields: ['AliasedService.ɵfac'],
     metadataDiffs: ['AliasedService.setClassMetadata'],
     reasons: [ALIASED_INJECTABLE],
   },
-  'edge-cases/unicode-special-escapes': {
-    fields: [],
-    statements: ['ɵsetClassDebugInfo(UnicodeSpecialEscapesComponent)'],
-    reasons: [DEBUG_INFO_LINE, DEBUG_INFO_PATH],
+  'edge-cases/forwardref-basic-import': {
+    fields: ['ForwardRefBasicImportComponent.ɵcmp'],
+    reasons: [COMPONENT_DEPS],
   },
-  'edge-cases/multiple-custom-decorators': {
-    fields: ['MultiDecoratorComponent.ɵcmp'],
-    reasons: [DOM_ONLY],
+  'edge-cases/forwardref-mixed-imports': {
+    fields: ['ForwardRefMixedImportsComponent.ɵcmp'],
+    reasons: [COMPONENT_DEPS],
   },
-  'edge-cases/single-custom-decorator': {
-    fields: ['MyComponent.ɵcmp'],
-    reasons: [DOM_ONLY],
+  'edge-cases/forwardref-multiple-imports': {
+    fields: ['ForwardRefMultipleImportsComponent.ɵcmp'],
+    reasons: [COMPONENT_DEPS],
   },
-  'full-transform/full-transform-complex': {
+  'edge-cases/forwardref-with-template': {
+    fields: ['ForwardRefWithTemplateComponent.ɵcmp'],
+    reasons: [COMPONENT_DEPS],
+  },
+  'edge-cases/unicode-special-escapes': {
     fields: [],
-    functions: [
-      'ComplexComponent_Conditional_0_Template',
-      'ComplexComponent_Conditional_1_For_1_Template',
-    ],
-    reasons: [DOM_ONLY],
+    statements: ['ɵsetClassDebugInfo(UnicodeSpecialEscapesComponent)'],
+    reasons: [DEBUG_INFO_LINE, DEBUG_INFO_PATH],
   },
   'full-transform/full-transform-host-attribute': {
     fields: ['HostAttributeComponent.ɵcmp'],
     reasons: [HOST_ATTRS_ORDER],
   },
-  'full-transform/full-transform-onpush': {
-    fields: ['OnPushComponent.ɵcmp'],
-    reasons: [DOM_ONLY],
-  },
-  'full-transform/transform-api-onpush': {
-    fields: ['OnPushComponent.ɵcmp'],
-    reasons: [DOM_ONLY],
-  },
   'host-bindings/host-attribute': {
     fields: ['HostAttributeComponent.ɵcmp'],
     reasons: [HOST_ATTRS_ORDER],
@@ -186,23 +173,11 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     fields: ['HostDirectivesOnPushComponent.ɵcmp'],
     reasons: [DOM_ONLY, COMPONENT_DEPS],
   },
-  'providers/providers-with-change-detection': {
-    fields: ['ProvidersWithChangeDetectionComponent.ɵcmp'],
-    reasons: [DOM_ONLY],
-  },
-  'regressions/class-debug-info-change-detection': {
-    fields: ['OnPushDebugInfoComponent.ɵcmp'],
-    reasons: [DOM_ONLY],
-  },
   'regressions/formfield-alias-repro': {
     fields: ['AppComponent.ɵcmp'],
     classes: ['AppComponent'],
     reasons: [COMPONENT_DEPS, DEBUG_NAME],
   },
-  'schemas/schemas-with-change-detection': {
-    fields: ['SchemasWithOnPushComponent.ɵcmp'],
-    reasons: [DOM_ONLY],
-  },
   'styles/shadow-css-child-combinator': {
     fields: ['ChildCombinatorComponent.ɵcmp'],
     reasons: [CSS_WS],
@@ -337,14 +312,6 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     fields: ['WhereWithHostComponent.ɵcmp'],
     reasons: [CSS_WS],
   },
-  'styles/style-onpush-encapsulation': {
-    fields: ['OnPushStyleComponent.ɵcmp'],
-    reasons: [DOM_ONLY],
-  },
-  'styles/style-onpush-none': {
-    fields: ['OnPushNoneStyleComponent.ɵcmp'],
-    reasons: [DOM_ONLY],
-  },
   'templates/arrow-control-flow-expressions': {
     fields: [],
     classes: ['ArrowControlFlowExpressionsComponent'],
@@ -539,6 +506,18 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     fields: ['CaseRawTextComponent.ɵcmp'],
     reasons: [CSS_WS],
   },
+  'templates/dom-only-empty-imports': {
+    fields: ['DomOnlyEmptyImportsComponent.ɵcmp'],
+    reasons: [COMPONENT_DEPS],
+  },
+  'templates/dom-only-not-for-default-selector-self-reference': {
+    fields: ['DefaultSelectorComponent.ɵcmp'],
+    reasons: [SELF_DEPENDENCY],
+  },
+  'templates/dom-only-not-for-self-reference': {
+    fields: ['TreeComponent.ɵcmp'],
+    reasons: [SELF_DEPENDENCY],
+  },
   'templates/ng-arrow-function-dollar-event': {
     fields: [],
     classes: ['NgArrowFunctionDollarEventComponent'],
diff --git a/napi/angular-compiler/e2e/compare/fixtures/runner.ts b/napi/angular-compiler/e2e/compare/fixtures/runner.ts
index 9c2133ac1..f990f68f0 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/runner.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/runner.ts
@@ -13,12 +13,14 @@ import { cpus } from 'os'
 import { VERSION as ANGULAR_VERSION } from '@angular/compiler'
 import { compileFactory, Severity } from '@oxc-angular/vite/api'
 import pLimit from 'p-limit'
+import ts from 'typescript'
 
 import { compareFullFileSemantically, type ImportDiff } from '../src/compare.js'
 import {
   compileWithNgtsc,
   generateComponentSource,
   printDiagnosticWarningSummary,
+  type NgtscMode,
 } from '../src/compilers/angular-ngtsc.js'
 import { compileWithOxcFullFile } from '../src/compilers/oxc.js'
 import { discoverFixtures } from './index.js'
@@ -47,6 +49,76 @@ const FIXTURE_TSCONFIG_PATH = join(dirname(fileURLToPath(import.meta.url)), '..'
 function ngtscFilePath(filePath: string): string {
   return join(dirname(FIXTURE_TSCONFIG_PATH), filePath)
 }
+
+/**
+ * The ngtsc mode a fixture's reference output comes from: its `ngtscMode`, or else `full` when
+ * the file has components and each is standalone and provably imports nothing, and `local`
+ * otherwise.
+ *
+ * The file alone shows such a component has no directive dependencies, so Oxc compiles its
+ * template like a full build does, with the DOM-only instructions; ngtsc's local mode assumes
+ * dependencies and never uses them. Any other component needs what local mode assumes about
+ * the imports it cannot see.
+ */
+function referenceNgtscMode(fixture: Fixture, source: string): NgtscMode {
+  if (fixture.ngtscMode) {
+    return fixture.ngtscMode
+  }
+  const file = ts.createSourceFile('fixture.ts', source, ts.ScriptTarget.Latest)
+  let components = 0
+  let allWithoutImports = true
+  const visit = (node: ts.Node): void => {
+    if (ts.isClassDeclaration(node)) {
+      for (const decorator of ts.getDecorators(node) ?? []) {
+        const call = decorator.expression
+        if (
+          ts.isCallExpression(call) &&
+          ts.isIdentifier(call.expression) &&
+          call.expression.text === 'Component'
+        ) {
+          components++
+          const config = call.arguments[0]
+          if (
+            config === undefined ||
+            !ts.isObjectLiteralExpression(config) ||
+            !isStandaloneWithoutImports(config)
+          ) {
+            allWithoutImports = false
+          }
+        }
+      }
+    }
+    ts.forEachChild(node, visit)
+  }
+  visit(file)
+  return components > 0 && allWithoutImports ? 'full' : 'local'
+}
+
+/**
+ * Whether a `@Component` config is standalone and its `imports` and `deferredImports` are each
+ * absent or `[]`, with no spread or shorthand property that could hide them.
+ */
+function isStandaloneWithoutImports(config: ts.ObjectLiteralExpression): boolean {
+  return config.properties.every((property) => {
+    if (!ts.isPropertyAssignment(property)) {
+      return false
+    }
+    const key =
+      ts.isIdentifier(property.name) || ts.isStringLiteral(property.name)
+        ? property.name.text
+        : undefined
+    if (key === 'standalone') {
+      return property.initializer.kind !== ts.SyntaxKind.FalseKeyword
+    }
+    if (key === 'imports' || key === 'deferredImports') {
+      return (
+        ts.isArrayLiteralExpression(property.initializer) &&
+        property.initializer.elements.length === 0
+      )
+    }
+    return true
+  })
+}
 import type {
   Fixture,
   FixtureResult,
@@ -316,7 +388,7 @@ async function testComponentFixture(fixture: Fixture, verbose?: boolean): Promis
   try {
     const result = await compileWithNgtsc(source, ngtscFilePath(filePath), {
       tsconfigPath: FIXTURE_TSCONFIG_PATH,
-      mode: fixture.ngtscMode,
+      mode: referenceNgtscMode(fixture, source),
     })
     tsOutput = {
       code: result.code,
@@ -524,7 +596,7 @@ async function testFullTransformFixture(
   const tsStart = performance.now()
   try {
     const result = await compileWithNgtsc(fixture.sourceCode, ngtscFilePath(filePath), {
-      mode: fixture.ngtscMode,
+      mode: referenceNgtscMode(fixture, fixture.sourceCode),
       tsconfigPath: FIXTURE_TSCONFIG_PATH,
     })
     tsOutput = {
@@ -696,7 +768,7 @@ async function testClassMetadataFixture(
   const tsStart = performance.now()
   try {
     const result = await compileWithNgtsc(fixture.sourceCode, filePath, {
-      mode: fixture.ngtscMode,
+      mode: referenceNgtscMode(fixture, fixture.sourceCode),
       tsconfigPath: FIXTURE_TSCONFIG_PATH,
     })
     tsOutput = {
diff --git a/napi/angular-compiler/e2e/compare/fixtures/templates/dom-only.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/templates/dom-only.fixture.ts
new file mode 100644
index 000000000..c913109bd
--- /dev/null
+++ b/napi/angular-compiler/e2e/compare/fixtures/templates/dom-only.fixture.ts
@@ -0,0 +1,272 @@
+/**
+ * DOM-only template instructions.
+ *
+ * A full ngtsc build compiles the template of a standalone component without directive
+ * dependencies with `ɵɵdomElementStart`, `ɵɵdomListener`, `ɵɵdomProperty` and the other DOM-only
+ * instructions (`TemplateCompilationMode.DomOnly`). Oxc does the same when the file alone proves
+ * it: the component is standalone, its `imports` and `deferredImports` are absent or `[]`, and
+ * its own selector matches nothing in its template. These fixtures compare against a full build
+ * (the runner's default for such files).
+ */
+import type { Fixture } from '../types.js'
+
+export const fixtures: Fixture[] = [
+  {
+    name: 'dom-only-bindings',
+    category: 'templates',
+    description: 'Elements, containers, listeners and bindings in a DOM-only template',
+    className: 'DomOnlyBindingsComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dom-only-bindings',
+  template: \`
+    <div class="box" [title]="title" [attr.data-id]="id" [class.active]="active"
+         [style.width.px]="width" [aria-label]="label" [innerHTML]="html"
+         (click)="onClick($event)" (window:resize)="onResize()"></div>
+    <input #field [value]="title" (input)="title = field.value" />
+    <ng-container>{{ title }}</ng-container>
+    <ng-template #tpl><span [id]="id">in template</span></ng-template>
+    <a [href]="url" (keydown.enter)="onClick($event)">link</a>
+    <section [@fade]="active" (@fade.done)="onResize()"></section>
+    <p animate.enter="fade-in">animated</p>
+  \`,
+  host: {
+    '[title]': 'title',
+    '(click)': 'onClick($event)',
+  },
+})
+export class DomOnlyBindingsComponent {
+  title = 'hello';
+  id = 1;
+  active = true;
+  width = 10;
+  label = 'label';
+  html = '<b>x</b>';
+  url = '/home';
+  onClick(_event: unknown) {}
+  onResize() {}
+}
+    `.trim(),
+    expectedFeatures: [
+      'ɵɵdomElementStart',
+      'ɵɵdomElement',
+      'ɵɵdomElementContainerStart',
+      'ɵɵdomTemplate',
+      'ɵɵdomListener',
+      'ɵɵdomProperty',
+    ],
+  },
+  {
+    name: 'dom-only-control-flow',
+    category: 'templates',
+    description: 'Control flow blocks and @let in a DOM-only template',
+    className: 'DomOnlyControlFlowComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dom-only-control-flow',
+  template: \`
+    @let total = items.length;
+    @if (total > 0) {
+      <ul>
+        @for (item of items; track item.id; let i = $index) {
+          <li (click)="select(item)" [class.even]="i % 2 === 0">{{ item.name }}</li>
+        } @empty {
+          <li>none</li>
+        }
+      </ul>
+    } @else {
+      <p>empty</p>
+    }
+    @switch (mode) {
+      @case ('a') { <span>A</span> }
+      @default { <span>other</span> }
+    }
+  \`,
+})
+export class DomOnlyControlFlowComponent {
+  items = [{ id: 1, name: 'one' }];
+  mode = 'a';
+  select(_item: unknown) {}
+}
+    `.trim(),
+    expectedFeatures: ['ɵɵdomElementStart', 'ɵɵdomListener', 'ɵɵconditionalCreate'],
+  },
+  {
+    name: 'dom-only-defer',
+    category: 'templates',
+    description: '@defer blocks with no dependencies in a DOM-only template',
+    className: 'DomOnlyDeferComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dom-only-defer',
+  template: \`
+    @defer (on viewport; prefetch on idle) {
+      <div (click)="load()">{{ title }}</div>
+    } @placeholder {
+      <span>placeholder</span>
+    } @loading (minimum 100ms) {
+      <span>loading</span>
+    } @error {
+      <span>error</span>
+    }
+    @defer (hydrate on interaction) {
+      <p [title]="title">hydrated</p>
+    }
+  \`,
+})
+export class DomOnlyDeferComponent {
+  title = 'deferred';
+  load() {}
+}
+    `.trim(),
+    expectedFeatures: ['ɵɵdefer', 'ɵɵdomElementStart', 'ɵɵdomListener'],
+  },
+  {
+    name: 'dom-only-i18n',
+    category: 'templates',
+    description: 'i18n blocks, attributes and ICUs in a DOM-only template',
+    className: 'DomOnlyI18nComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dom-only-i18n',
+  template: \`
+    <div i18n>Hello {{ name }} <b (click)="greet()">bold</b></div>
+    <span i18n-title title="Static title" [attr.lang]="lang"></span>
+    <p i18n>{count, plural, =0 {none} =1 {one <i>item</i>} other {{{ count }} items}}</p>
+  \`,
+})
+export class DomOnlyI18nComponent {
+  name = 'world';
+  lang = 'en';
+  count = 2;
+  greet() {}
+}
+    `.trim(),
+    expectedFeatures: ['ɵɵi18nStart', 'ɵɵdomElementStart', 'ɵɵdomListener'],
+  },
+  {
+    name: 'dom-only-empty-imports',
+    category: 'templates',
+    description: 'imports: [] keeps a standalone component DOM-only',
+    className: 'DomOnlyEmptyImportsComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dom-only-empty-imports',
+  standalone: true,
+  imports: [],
+  template: '<button (click)="go()" [disabled]="busy">go</button>',
+})
+export class DomOnlyEmptyImportsComponent {
+  busy = false;
+  go() {}
+}
+    `.trim(),
+    expectedFeatures: ['ɵɵdomElementStart', 'ɵɵdomListener', 'ɵɵdomProperty'],
+  },
+  {
+    name: 'dom-only-host-directives',
+    category: 'templates',
+    description: 'hostDirectives apply to the host element, so the template stays DOM-only',
+    className: 'DomOnlyHostDirectivesComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component, Directive } from '@angular/core';
+
+@Directive({ selector: '[appTooltip]' })
+export class TooltipDirective {}
+
+@Component({
+  selector: 'app-dom-only-host-directives',
+  hostDirectives: [TooltipDirective],
+  template: '<span appTooltip (mouseenter)="show()">hover</span>',
+})
+export class DomOnlyHostDirectivesComponent {
+  show() {}
+}
+    `.trim(),
+    expectedFeatures: ['ɵɵdomElementStart', 'ɵɵdomListener'],
+  },
+  {
+    name: 'dom-only-not-for-self-reference',
+    category: 'templates',
+    description: 'A component that uses its own selector has itself as a directive dependency',
+    className: 'TreeComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-tree',
+  template: \`
+    <span (click)="toggle()">{{ depth }}</span>
+    @if (depth < 3) {
+      <app-tree [depth]="depth + 1"></app-tree>
+    }
+  \`,
+})
+export class TreeComponent {
+  @Input() depth = 0;
+  toggle() {}
+}
+    `.trim(),
+    expectedFeatures: ['ɵɵelementStart', 'ɵɵlistener', 'ɵɵproperty'],
+  },
+  {
+    name: 'dom-only-not-for-default-selector-self-reference',
+    category: 'templates',
+    description: 'A component without a selector matches <ng-component> in its own template',
+    className: 'DefaultSelectorComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  template: \`
+    <span (click)="toggle()">self</span>
+    @if (nested) {
+      <ng-component></ng-component>
+    }
+  \`,
+})
+export class DefaultSelectorComponent {
+  nested = false;
+  toggle() {}
+}
+    `.trim(),
+    expectedFeatures: ['ɵɵelementStart', 'ɵɵlistener'],
+  },
+  {
+    name: 'dom-only-self-selector-not-matched',
+    category: 'templates',
+    description: 'A selector that its own template does not match stays DOM-only',
+    className: 'NotSelectorComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-not:not(.skip)',
+  template: '<app-not class="skip" (click)="go()">a</app-not><div app-not>b</div>',
+})
+export class NotSelectorComponent {
+  go() {}
+}
+    `.trim(),
+    expectedFeatures: ['ɵɵdomElementStart', 'ɵɵdomListener'],
+  },
+]
diff --git a/napi/angular-compiler/e2e/compare/fixtures/types.ts b/napi/angular-compiler/e2e/compare/fixtures/types.ts
index 3c97a7147..7a76a12ee 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/types.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/types.ts
@@ -202,7 +202,9 @@ export interface Fixture {
   filePath?: string
 
   /**
-   * ngtsc compilation mode for the reference output (default: 'local').
+   * ngtsc compilation mode for the reference output. The default is 'full' when every component
+   * in the file is standalone and has no `imports` or `deferredImports` (Oxc then compiles it
+   * like a full build, with the DOM-only template instructions), and 'local' otherwise.
    *
    * 'local' (`experimental-local`) is fast, but it differs from a real build wherever ngtsc
    * needs more than the file itself; use 'full' for fixtures that depend on that.
diff --git a/napi/angular-compiler/test/transform.test.ts b/napi/angular-compiler/test/transform.test.ts
index 1ddd7cd34..0b2edc8d4 100644
--- a/napi/angular-compiler/test/transform.test.ts
+++ b/napi/angular-compiler/test/transform.test.ts
@@ -614,6 +614,7 @@ describe('object spread in template bindings', () => {
 })
 
 describe('capitalised element names', () => {
+  // Standalone without imports, so the templates use the DOM-only instructions.
   it('compiles <View> as an element instead of dropping the template', async () => {
     const source = `import { Component } from '@angular/core';
 @Component({ selector: 'x', template: '<View><text>hi</text></View>' })
@@ -623,7 +624,7 @@ export class X {}`
 
     expect(result.errors).toHaveLength(0)
     expect(result.code).toMatch(/decls:\s*3/)
-    expect(result.code).toMatch(/ɵɵelementStart\(0,\s*"View"\)\(1,\s*"text"\)/)
+    expect(result.code).toMatch(/ɵɵdomElementStart\(0,\s*"View"\)\(1,\s*"text"\)/)
     expect(result.code).toMatch(/ɵɵtext\(2,\s*"hi"\)/)
   })
 
@@ -636,7 +637,7 @@ export class X {}`
 
     expect(result.errors).toHaveLength(0)
     expect(result.code).toMatch(/decls:\s*5/)
-    expect(result.code).toMatch(/ɵɵelementStart\(0,\s*"UL"\)\(1,\s*"LI"\)/)
+    expect(result.code).toMatch(/ɵɵdomElementStart\(0,\s*"UL"\)\(1,\s*"LI"\)/)
   })
 })
 

From 67cf8a70a192e4b6141f199fe09ae78ff9eec112 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 19:09:26 +0800
Subject: [PATCH 43/54] fix(styles): port ShadowCss selector scoping to match
 Angular's whitespace

Oxc collapsed the whitespace inside shimmed selectors, where Angular keeps
what its regexes produce: `_applySelectorScope` writes every combinator part
as `${scopedPart} ${separator} `, so `.dark :host` becomes
`.dark   [_nghost]` and `a > b` becomes `a[c]    > b[c]`. 31 compare
fixtures carried this difference.

The selector layer of encapsulation.rs is now a direct port of
shadow_css.ts instead of ad-hoc string handling:

- `_insertPolyfillHostInCssText`, `_convertColonHost` and
  `_convertColonHostContext` run in Angular's order and emit the
  `-shadowcsshost` markers, matched case-insensitively like the `gim`
  regexes. Host-context permutations come out in Angular's order.
- `_scopeSelector`, `_applySelectorScope`, `_scopeSelectorPart`,
  `_applySimpleSelectorScope` and `SafeSelector` keep the
  `_shouldScopeIndicator` state, the `_selectorSplitRe` list split (so a
  newline after a comma is kept), the separator regex with its
  parenthesis lookahead, and strings escaped as in `escapeInStrings`.
- `_stripScopingSelectors` replaces the old strip helper for `@font-face`
  and `@page` bodies.

Angular 22.2.0-next.2 added CSS nesting support to ShadowCss. Gated on
that version (latest when no version is given): a lone `&` and rules
without a block stay unscoped, and a rule body with no nested rule (or under
a `::ng-deep` selector) has its host marker and deep combinators stripped.
Nested rules are still not scoped.

Two deliberate differences stay: comment placeholders are not scoped as
selector text, and a newline or tab between compound selectors is still a
descendant combinator (#175); Angular leaves the left side unscoped there.

A differential run of 6100 generated and spec inputs against
@angular/compiler 22.2.2, 22.2.0-next.1/next.2 and 22.1.8 now matches
except for those two cases and nested rules. The fixed known-differences
entries (CSS_WS, the selector list newline, the :host-context order and
the 22.2 rule body strip) are removed, and new fixtures and Rust tests pin
the exact output.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/styles/encapsulation.rs               | 2967 ++++++-----------
 .../tests/shadow_css_test.rs                  |  182 +-
 .../e2e/compare/fixtures/known-differences.ts |  142 +-
 .../fixtures/styles/shadow-css.fixture.ts     |   64 +
 4 files changed, 1342 insertions(+), 2013 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/styles/encapsulation.rs b/crates/oxc_angular_compiler/src/styles/encapsulation.rs
index 997697166..b8aee5aa7 100644
--- a/crates/oxc_angular_compiler/src/styles/encapsulation.rs
+++ b/crates/oxc_angular_compiler/src/styles/encapsulation.rs
@@ -26,9 +26,9 @@
 //! - `::ng-deep` → removed (deprecated but still supported)
 //! - Media queries, keyframes, etc. → preserved
 
-use std::ops::Range;
+use std::{fmt::Write as _, ops::Range};
 
-use crate::component::AngularVersion;
+use crate::component::{AngularVersion, Prerelease};
 
 /// Comments are replaced by `%COMMENT<n>%` placeholders during processing,
 /// where `<n>` is the comment's index in the extracted list.
@@ -86,6 +86,7 @@ fn strip_comment_placeholders(s: &str) -> (String, String) {
 // Polyfill host markers (matching Angular's shadow_css.ts)
 const POLYFILL_HOST: &str = "-shadowcsshost";
 const POLYFILL_HOST_NO_COMBINATOR: &str = "-shadowcsshost-no-combinator";
+const POLYFILL_HOST_CONTEXT: &str = "-shadowcsscontext";
 
 /// Push a single UTF-8 character starting at byte position `i` from `source` into `result`.
 /// Returns the number of bytes consumed (1 for ASCII, 2-4 for multi-byte).
@@ -113,191 +114,113 @@ fn push_utf8_char(result: &mut String, source: &str, i: usize) -> usize {
 // SafeSelector - Escapes problematic CSS patterns before processing
 // =============================================================================
 
-/// SafeSelector escapes problematic patterns before selector processing
-/// and restores them after. This prevents attribute selector contents,
-/// escaped characters, and :nth-*() expressions from being misinterpreted.
-///
-/// Port of Angular's `SafeSelector` class from shadow_css.ts.
+/// Port of Angular's `SafeSelector`: hides attribute selectors, backslash
+/// escapes and `:nth-*()` arguments behind placeholders while a selector is
+/// split on combinators, so the spaces, `+` and `~` inside them are not taken
+/// for combinators.
+#[derive(Default)]
 struct SafeSelector {
     placeholders: Vec<String>,
     content: String,
 }
 
 impl SafeSelector {
-    /// Creates a new SafeSelector, escaping problematic patterns.
     fn new(selector: &str) -> Self {
         let mut placeholders = Vec::new();
-        let mut index = 0;
-        let mut result = selector.to_string();
-
-        // 1. Escape attribute selectors WITH VALUES: [attr="va lue"] -> __ph-N__
-        // This prevents spaces inside attribute values from being treated as combinators.
-        // We only escape selectors with values (=, ~=, |=, ^=, $=, *=) because:
-        // - Simple attribute presence [attr] doesn't contain problematic characters
-        // - Our generated selectors like [hosta] and [contenta] need to remain visible
-        //   for host detection in contains_host_attr_at_top_level()
-        {
-            let mut new_result = String::new();
-            let bytes = result.as_bytes();
-            let len = bytes.len();
-            let mut i = 0;
-            while i < len {
-                if bytes[i] == b'[' {
-                    // Found start of attribute selector
-                    let attr_start = i;
-                    let mut j = i + 1;
-                    let mut has_value_op = false;
-
-                    // Scan until we find ] or end of string
-                    while j < len && bytes[j] != b']' {
-                        // Check for value operators: =, ~=, |=, ^=, $=, *=
-                        if bytes[j] == b'=' {
-                            has_value_op = true;
-                        } else if j + 1 < len
-                            && bytes[j + 1] == b'='
-                            && matches!(bytes[j], b'~' | b'|' | b'^' | b'$' | b'*')
-                        {
-                            has_value_op = true;
-                        }
-                        j += 1;
-                    }
-
-                    if j < len && bytes[j] == b']' && has_value_op {
-                        // Found attribute selector with value - escape it
-                        let attr_end = j + 1;
-                        let attr_selector = &result[attr_start..attr_end];
-                        let placeholder = format!("__ph-{}__", index);
-                        placeholders.push(attr_selector.to_string());
-                        index += 1;
-                        new_result.push_str(&placeholder);
-                        i = attr_end;
-                    } else {
-                        // Simple attribute selector without value - keep as-is
-                        new_result.push('[');
-                        i += 1;
-                    }
-                } else {
-                    i += push_utf8_char(&mut new_result, &result, i);
-                }
-            }
-            result = new_result;
-        }
-
-        // 2. Escape backslash sequences: \: -> __esc-ph-N__
-        // This handles escaped special characters (e.g., .foo\:bar for class "foo:bar")
-        {
-            let mut new_result = String::new();
-            let bytes = result.as_bytes();
-            let len = bytes.len();
-            let mut i = 0;
-            while i < len {
-                if bytes[i] == b'\\' && i + 1 < len {
-                    // Found escape sequence - capture both backslash and next char
-                    let placeholder = format!("__esc-ph-{}__", index);
-                    let escape_seq = &result[i..i + 2];
-                    placeholders.push(escape_seq.to_string());
-                    index += 1;
-                    new_result.push_str(&placeholder);
-                    i += 2;
-                } else {
-                    i += push_utf8_char(&mut new_result, &result, i);
-                }
-            }
-            result = new_result;
-        }
-
-        // 3. Escape :nth-*() expressions: :nth-child(2n + 1) -> :nth-child__ph-N__
-        // This prevents + and spaces inside nth expressions from being treated as combinators.
-        // We need to handle nested parens like :nth-child(3n of :not(p, a), :is(.foo))
-        // Use manual parsing to find matching closing paren (handles any nesting level).
-        let mut new_result = String::new();
-        let mut chars_iter = result.char_indices().peekable();
-
-        while let Some((i, c)) = chars_iter.next() {
-            // Look for :nth-* pattern
-            if c == ':' {
-                let remaining = &result[i..];
-                if remaining.starts_with(":nth-") {
-                    // Find the pseudo name (e.g., :nth-child, :nth-of-type)
-                    let pseudo_end = remaining[5..]
-                        .find(|c: char| !c.is_alphanumeric() && c != '-')
-                        .map(|pos| 5 + pos)
-                        .unwrap_or(remaining.len());
-
-                    let pseudo = &remaining[..pseudo_end];
-
-                    // Check if followed by (
-                    if remaining[pseudo_end..].starts_with('(') {
-                        let paren_start = i + pseudo_end;
-                        // Find matching closing paren
-                        let mut depth = 1;
-                        let mut paren_end = paren_start + 1;
-                        for (j, ch) in result[paren_start + 1..].char_indices() {
-                            match ch {
-                                '(' => depth += 1,
-                                ')' => {
-                                    depth -= 1;
-                                    if depth == 0 {
-                                        paren_end = paren_start + 1 + j;
-                                        break;
-                                    }
-                                }
-                                _ => {}
-                            }
-                        }
 
-                        if depth == 0 {
-                            // Found matching paren - escape the content
-                            let content = &result[paren_start + 1..paren_end];
-                            let placeholder = format!("__ph-{}__", index);
-                            placeholders.push(format!("({})", content));
-                            index += 1;
-
-                            new_result.push_str(pseudo);
-                            new_result.push_str(&placeholder);
-
-                            // Skip past the processed characters
-                            while let Some(&(idx, _)) = chars_iter.peek() {
-                                if idx <= paren_end {
-                                    chars_iter.next();
-                                } else {
-                                    break;
-                                }
-                            }
-                            continue;
-                        }
-                    }
-                }
-            }
-            new_result.push(c);
+        // `/(\[[^\]]*\])/g` -> `__ph-N__`
+        let mut escaped = String::with_capacity(selector.len());
+        let mut rest = selector;
+        while let Some(open) = rest.find('[') {
+            let Some(close) = rest[open..].find(']').map(|i| open + i) else {
+                break;
+            };
+            escaped.push_str(&rest[..open]);
+            let _ = write!(escaped, "__ph-{}__", placeholders.len());
+            placeholders.push(rest[open..=close].to_string());
+            rest = &rest[close + 1..];
+        }
+        escaped.push_str(rest);
+
+        // `/(\\.)/g` -> `__esc-ph-N__` (`.` stops at line terminators)
+        let selector = escaped;
+        let mut escaped = String::with_capacity(selector.len());
+        let mut chars = selector.chars().peekable();
+        while let Some(c) = chars.next() {
+            if c == '\\'
+                && let Some(&next) = chars.peek()
+                && !is_js_line_terminator(next)
+            {
+                chars.next();
+                let _ = write!(escaped, "__esc-ph-{}__", placeholders.len());
+                placeholders.push(format!("\\{next}"));
+            } else {
+                escaped.push(c);
+            }
+        }
+
+        // `nthRegex`, `/(:nth-[-\w]+)<_parenSuffix>/g` -> `$1__ph-N__`
+        let selector = escaped;
+        let bytes = selector.as_bytes();
+        let mut content = String::with_capacity(selector.len());
+        let mut copied = 0;
+        let mut at = 0;
+        while let Some(found) = selector[at..].find(":nth-").map(|i| at + i) {
+            let name_end = found
+                + ":nth-".len()
+                + bytes[found + ":nth-".len()..]
+                    .iter()
+                    .take_while(|b| b.is_ascii_alphanumeric() || matches!(b, b'_' | b'-'))
+                    .count();
+            let close = (name_end > found + ":nth-".len())
+                .then(|| match_paren_suffix(&selector, name_end))
+                .flatten();
+            let Some(close) = close else {
+                at = found + 1;
+                continue;
+            };
+            content.push_str(&selector[copied..name_end]);
+            let _ = write!(content, "__ph-{}__", placeholders.len());
+            placeholders.push(selector[name_end..=close].to_string());
+            copied = close + 1;
+            at = close + 1;
         }
-        result = new_result;
-
-        SafeSelector { placeholders, content: result }
-    }
+        content.push_str(&selector[copied..]);
 
-    /// Returns the escaped content for processing.
-    fn content(&self) -> &str {
-        &self.content
+        Self { placeholders, content }
     }
 
-    /// Restores the original patterns from placeholders.
+    /// `content.replace(/__(?:ph|esc-ph)-(\d+)__/g, (_ph, index) => this.placeholders[+index])`.
+    ///
+    /// A single pass: a placeholder inside a restored value stays as it is.
     fn restore(&self, content: &str) -> String {
-        let mut result = content.to_string();
-
-        // Restore placeholders in reverse order to avoid index shifting issues
-        // Replace __ph-N__ patterns
-        for (idx, replacement) in self.placeholders.iter().enumerate().rev() {
-            let placeholder = format!("__ph-{}__", idx);
-            result = result.replace(&placeholder, replacement);
-        }
-
-        // Replace __esc-ph-N__ patterns
-        for (idx, replacement) in self.placeholders.iter().enumerate().rev() {
-            let placeholder = format!("__esc-ph-{}__", idx);
-            result = result.replace(&placeholder, replacement);
+        let mut result = String::with_capacity(content.len());
+        let mut copied = 0;
+        let mut from = 0;
+        while let Some(at) = content[from..].find("__").map(|i| from + i) {
+            let rest = &content[at + 2..];
+            let body = rest.strip_prefix("ph-").or_else(|| rest.strip_prefix("esc-ph-"));
+            let parsed = body.and_then(|body| {
+                let digits = body.bytes().take_while(u8::is_ascii_digit).count();
+                (digits > 0 && body[digits..].starts_with("__")).then(|| {
+                    let end = content.len() - body.len() + digits + 2;
+                    (&body[..digits], end)
+                })
+            });
+            let Some((index, end)) = parsed else {
+                from = at + 1;
+                continue;
+            };
+            result.push_str(&content[copied..at]);
+            // An out-of-range index restores as `undefined`, as in JavaScript.
+            match index.parse::<usize>().ok().and_then(|i| self.placeholders.get(i)) {
+                Some(placeholder) => result.push_str(placeholder),
+                None => result.push_str("undefined"),
+            }
+            copied = end;
+            from = end;
         }
-
+        result.push_str(&content[copied..]);
         result
     }
 }
@@ -336,7 +259,9 @@ pub fn shim_css_text(css: &str, content_attr: &str, host_attr: &str) -> String {
 /// `None` means the latest Angular release. Versions before v22.0.0-rc.0 also
 /// run the legacy Shadow DOM polyfill passes (`polyfill-next-selector`,
 /// `polyfill-rule`, `polyfill-unscoped-rule`, `::shadow`, `::content`); see
-/// [`AngularVersion::uses_shadow_css_polyfills`].
+/// [`AngularVersion::uses_shadow_css_polyfills`]. Versions before
+/// v22.2.0-next.2 predate the CSS nesting support of `ShadowCss`: they scope
+/// a lone `&` and rules without a block, and keep rule bodies as written.
 pub fn shim_css_text_for_version(
     css: &str,
     content_attr: &str,
@@ -365,11 +290,12 @@ pub fn shim_css_text_for_version(
         result = remove_unscoped_rules(&result);
     }
 
-    // Step 3: Handle :host-context() - must be done before :host
-    result = convert_colon_host_context(&result, content_attr, host_attr);
-
-    // Step 4: Handle :host selectors
-    result = convert_colon_host(&result, host_attr);
+    // Step 3: Replace `:host-context(...)` and `:host` with polyfill markers,
+    // then expand them like `_scopeCssText`: `:host` first, then
+    // `:host-context()`. The markers become attributes during scoping.
+    result = insert_polyfill_host(&result);
+    result = convert_colon_host(&result);
+    result = convert_colon_host_context(&result);
 
     // Step 5: Handle ::shadow and ::content (removed in v22)
     if legacy_polyfills {
@@ -383,7 +309,8 @@ pub fn shim_css_text_for_version(
 
     // Step 7: Scope all selectors with the content attribute
     if !content_attr.is_empty() {
-        result = scope_selectors(&result, content_attr, host_attr);
+        let css_nesting = has_css_nesting_support(angular_version);
+        result = scope_selectors(&result, content_attr, host_attr, css_nesting);
     }
 
     // Step 8: Append unscoped rules (without scoping)
@@ -394,7 +321,7 @@ pub fn shim_css_text_for_version(
     // Step 9: Trim, then restore comments. Angular's `_scopeCssText` trims
     // before the comments come back, so newlines kept from a leading or
     // trailing comment survive.
-    restore_comments(result.trim(), &comments)
+    restore_comments(js_trim(&result), &comments)
 }
 
 /// Extract comments and replace them with placeholders.
@@ -966,701 +893,431 @@ pub fn encapsulate_style_for_version(
 }
 
 // =============================================================================
-// Host selector processing
+// JavaScript regex semantics
 // =============================================================================
+//
+// `ShadowCss` is written with regular expressions, and its output (whitespace
+// included) follows from exactly what each one matches. The helpers below
+// reproduce the JavaScript behaviour those expressions rely on.
+
+/// JavaScript's `\s`, which is also what `String.prototype.trim` strips.
+fn is_js_space(c: char) -> bool {
+    matches!(
+        c,
+        '\t' | '\n' | '\u{000B}' | '\u{000C}' | '\r' | ' ' | '\u{00A0}' | '\u{1680}' | '\u{2000}'
+            ..='\u{200A}'
+                | '\u{2028}'
+                | '\u{2029}'
+                | '\u{202F}'
+                | '\u{205F}'
+                | '\u{3000}'
+                | '\u{FEFF}'
+    )
+}
+
+/// JavaScript's `String.prototype.trim`.
+fn js_trim(s: &str) -> &str {
+    s.trim_matches(is_js_space)
+}
+
+/// A JavaScript line terminator: what `.` never matches and where `^` matches
+/// under the `m` flag.
+fn is_js_line_terminator(c: char) -> bool {
+    matches!(c, '\n' | '\r' | '\u{2028}' | '\u{2029}')
+}
+
+/// Whether `s` has `pattern` at byte `at`, ignoring ASCII case (the `i` flag).
+fn starts_with_ignore_ascii_case(s: &str, at: usize, pattern: &str) -> bool {
+    s.as_bytes()
+        .get(at..at + pattern.len())
+        .is_some_and(|bytes| bytes.eq_ignore_ascii_case(pattern.as_bytes()))
+}
+
+/// The first byte offset at or after `from` where `pattern` (ASCII) occurs,
+/// ignoring ASCII case.
+fn find_ignore_ascii_case(s: &str, from: usize, pattern: &str) -> Option<usize> {
+    let last = s.len().checked_sub(pattern.len())?;
+    (from..=last).find(|&at| starts_with_ignore_ascii_case(s, at, pattern))
+}
+
+/// Replace every occurrence of `pattern` (ASCII) for which `accept` holds on the
+/// text after it, ignoring ASCII case, like `s.replace(/pattern(?=...)/gi, with)`.
+fn replace_ignore_ascii_case(
+    s: &str,
+    pattern: &str,
+    with: &str,
+    accept: impl Fn(&str) -> bool,
+) -> String {
+    let mut result = String::with_capacity(s.len());
+    let mut copied = 0;
+    let mut from = 0;
+    while let Some(at) = find_ignore_ascii_case(s, from, pattern) {
+        let end = at + pattern.len();
+        if accept(&s[end..]) {
+            result.push_str(&s[copied..at]);
+            result.push_str(with);
+            copied = end;
+            from = end;
+        } else {
+            from = at + 1;
+        }
+    }
+    result.push_str(&s[copied..]);
+    result
+}
 
-/// Convert :host-context() selectors with permutation generation.
-///
-/// For a single `:host-context(.dark)`:
-///   - `.dark[host_attr], .dark [host_attr]`
+/// Whether the text at byte `from` closes an enclosing parenthesis, i.e. matches
+/// `[^)(]*(?:\([^)(]*(?:\([^)(]*(?:\([^)(]*\)[^)(]*)*\)[^)(]*)*\)[^)(]*)*\)`.
 ///
-/// For `:host-context(.one,.two)` (comma-separated inside):
-///   - `.one[host_attr], .one [host_attr], .two[host_attr], .two [host_attr]`
-///
-/// For multiple `:host-context(.a):host-context(.b)`:
-///   - Generates all permutations: `.a.b`, `.a .b`, `.b .a`
-///   - Each with host variants: `perm[host]` and `perm [host]`
-///
-/// When otherSelectors contains `:host`, only one variant per permutation is generated.
-///
-/// See: packages/compiler/src/shadow_css.ts `_combineHostContextSelectors`
-fn convert_colon_host_context(css: &str, content_attr: &str, host_attr: &str) -> String {
-    // IMPORTANT: We must process :host-context only within each CSS rule's selector,
-    // not across the entire CSS. Otherwise, multiple :host-context rules will be
-    // combined exponentially, causing massive output explosion.
-    //
-    // Strategy: Scan through CSS, identify each selector (text before `{`, back to
-    // the previous `{` or `}`), process :host-context only within that selector,
-    // then continue to the next rule. Angular's pattern ends at the next `{` and
-    // applies at any depth, so selectors nested in `@media`/`@supports` count too.
-    // Text that ends at a `}` is a declaration list and is copied as is.
-
-    let mut result = String::with_capacity(css.len() * 2);
-    let mut chars = css.chars();
-    let mut current_selector = String::new();
-    let mut in_string = false;
-    let mut string_char = '"';
-
-    while let Some(c) = chars.next() {
-        // Handle string literals
-        if in_string || c == '"' || c == '\'' {
-            current_selector.push(c);
-            if !in_string {
-                in_string = true;
-                string_char = c;
-            } else if c == '\\' {
-                // An escaped character (`\"`, `\'`, `\\`) never ends the string.
-                if let Some(next_c) = chars.next() {
-                    current_selector.push(next_c);
+/// `_selectorSplitRe` and the combinator separator of `_applySelectorScope`
+/// use it as a negative lookahead to skip commas and combinators inside
+/// parentheses. Groups before the closing parenthesis may nest three deep.
+fn closes_enclosing_paren(s: &str, from: usize) -> bool {
+    let mut depth = 0u32;
+    for &b in &s.as_bytes()[from..] {
+        match b {
+            b'(' => {
+                depth += 1;
+                if depth > 3 {
+                    return false;
                 }
-            } else if c == string_char {
-                in_string = false;
             }
-            continue;
+            b')' => {
+                if depth == 0 {
+                    return true;
+                }
+                depth -= 1;
+            }
+            _ => {}
         }
+    }
+    false
+}
 
-        match c {
-            '{' => {
-                // End of selector - process :host-context in this selector only
-                let processed_selector = convert_colon_host_context_in_selector(
-                    &current_selector,
-                    content_attr,
-                    host_attr,
-                );
-                result.push_str(&processed_selector);
-                current_selector.clear();
-                result.push('{');
+/// Match Angular's `_parenSuffix`, `\(((?:\((?:\([^)(]*\)|[^)(]*)+?\)|[^)(]*)+?)\)`,
+/// at byte `at`: a parenthesized group whose content nests at most two deep.
+/// Returns the byte offset of the closing `)`.
+fn match_paren_suffix(s: &str, at: usize) -> Option<usize> {
+    let bytes = s.as_bytes();
+    if bytes.get(at) != Some(&b'(') {
+        return None;
+    }
+    let mut depth = 0u32;
+    for (i, &b) in bytes.iter().enumerate().skip(at + 1) {
+        match b {
+            b'(' => {
+                depth += 1;
+                if depth > 2 {
+                    return None;
+                }
             }
-            '}' => {
-                result.push_str(&current_selector);
-                current_selector.clear();
-                result.push('}');
+            b')' => {
+                if depth == 0 {
+                    return Some(i);
+                }
+                depth -= 1;
             }
-            _ => current_selector.push(c),
+            _ => {}
         }
     }
-
-    // Handle any remaining selector content
-    if !current_selector.is_empty() {
-        let processed_selector =
-            convert_colon_host_context_in_selector(&current_selector, content_attr, host_attr);
-        result.push_str(&processed_selector);
-    }
-
-    result
-}
-
-/// Process :host-context within a single CSS selector (before the `{`).
-/// This is called once per CSS rule, preventing exponential multiplication across rules.
-fn convert_colon_host_context_in_selector(
-    selector: &str,
-    content_attr: &str,
-    host_attr: &str,
-) -> String {
-    // Split by top-level commas to handle selector lists
-    // (commas not inside parentheses)
-    let parts: Vec<&str> = split_by_top_level_comma_str(selector);
-
-    let results: Vec<String> = parts
-        .iter()
-        .map(|part| convert_colon_host_context_in_part(part, content_attr, host_attr))
-        .collect();
-
-    results.join(",")
+    None
 }
 
-/// Split a string by top-level commas (not inside parentheses or braces).
-fn split_by_top_level_comma_str(s: &str) -> Vec<&str> {
-    let mut result = Vec::new();
-    let mut start = 0;
-    let mut paren_depth: u32 = 0;
-    let mut brace_depth: u32 = 0;
-
-    for (i, c) in s.char_indices() {
-        match c {
-            '(' => paren_depth += 1,
-            ')' => paren_depth = paren_depth.saturating_sub(1),
-            '{' => brace_depth += 1,
-            '}' => brace_depth = brace_depth.saturating_sub(1),
-            ',' if paren_depth == 0 && brace_depth == 0 => {
-                result.push(&s[start..i]);
-                start = i + 1;
+/// Port of `ShadowCss._splitOnTopLevelCommas`: split on commas outside
+/// parentheses, stopping at an unbalanced `)` when `return_on_closing_paren`.
+fn split_on_top_level_commas(text: &str, return_on_closing_paren: bool) -> Vec<&str> {
+    let mut parts = Vec::new();
+    let mut parens = 0i32;
+    let mut prev = 0;
+    for (i, b) in text.bytes().enumerate() {
+        match b {
+            b'(' => parens += 1,
+            b')' => {
+                parens -= 1;
+                if parens < 0 && return_on_closing_paren {
+                    parts.push(&text[prev..i]);
+                    return parts;
+                }
+            }
+            b',' if parens == 0 => {
+                parts.push(&text[prev..i]);
+                prev = i + 1;
             }
             _ => {}
         }
     }
-    result.push(&s[start..]);
-    result
+    parts.push(&text[prev..]);
+    parts
 }
 
-/// Process :host-context in a single selector part.
-/// Returns true if `after` (the text following a `:host-context` token) begins a
-/// non-empty argument list — `(` then, ignoring whitespace, a character other than
-/// `)`. Mirrors Angular v22's `/:host-context(?=\(\s*[^)\s])/`.
-fn is_nonempty_host_context_arg(after: &str) -> bool {
-    let Some(rest) = after.strip_prefix('(') else {
-        return false;
-    };
-    matches!(rest.trim_start().chars().next(), Some(c) if c != ')')
-}
+// =============================================================================
+// Host selector processing
+// =============================================================================
 
-/// Finds the byte offset of the first `:host-context` that is a real context
-/// selector (followed by a non-empty argument list).
-fn find_valid_host_context(s: &str) -> Option<usize> {
-    let marker = ":host-context";
-    let mut from = 0;
-    while let Some(rel) = s[from..].find(marker) {
-        let pos = from + rel;
-        if is_nonempty_host_context_arg(&s[pos + marker.len()..]) {
-            return Some(pos);
+/// Port of `_insertPolyfillHostInCssText`: `:host-context` followed by a
+/// non-empty argument list becomes `-shadowcsscontext`, then every other
+/// `:host` becomes `-shadowcsshost`, ignoring case. A bare or empty
+/// `:host-context` is left literal and scoped like any pseudo-class.
+fn insert_polyfill_host(css: &str) -> String {
+    // `/:host-context(?=\(\s*[^)\s])/gim`
+    let css = replace_ignore_ascii_case(css, ":host-context", POLYFILL_HOST_CONTEXT, |after| {
+        after
+            .strip_prefix('(')
+            .and_then(|arg| arg.trim_start_matches(is_js_space).chars().next())
+            .is_some_and(|c| c != ')')
+    });
+    // `/:host(?!\-context)/gim`
+    replace_ignore_ascii_case(&css, ":host", POLYFILL_HOST, |after| {
+        !starts_with_ignore_ascii_case(after, 0, "-context")
+    })
+}
+
+/// Port of `_convertColonHost`: rewrite every `-shadowcsshost(<selector>)<rest>`
+/// (`_cssColonHostRe`, rest running to the next `,` or `{`) into
+/// `-shadowcsshost-no-combinator<selector><rest>`.
+///
+/// `:host(.a)` becomes `-shadowcsshost-no-combinator.a`; a `:host(...)` whose
+/// argument is a selector list is put back as a literal `:host(...)`.
+fn convert_colon_host(css: &str) -> String {
+    let mut result = String::with_capacity(css.len());
+    let mut copied = 0;
+    while let Some(at) = find_ignore_ascii_case(css, copied, POLYFILL_HOST) {
+        let after_marker = at + POLYFILL_HOST.len();
+        let (host_selectors, other_start) = match match_paren_suffix(css, after_marker) {
+            Some(close) => (&css[after_marker + 1..close], close + 1),
+            None => ("", after_marker),
+        };
+        let other_end = css[other_start..].find([',', '{']).map_or(css.len(), |i| other_start + i);
+        let other_selectors = &css[other_start..other_end];
+
+        result.push_str(&css[copied..at]);
+        let parts = split_on_top_level_commas(host_selectors, true);
+        if !host_selectors.is_empty() && parts.len() > 1 {
+            result.push_str(":host(");
+            result.push_str(host_selectors);
+            result.push(')');
+        } else {
+            result.push_str(POLYFILL_HOST_NO_COMBINATOR);
+            let trimmed = js_trim(parts[0]);
+            // `trimmedHostSelector.replace(_polyfillHost, '')`: first occurrence only.
+            result.push_str(&trimmed.replacen(POLYFILL_HOST, "", 1));
         }
-        from = pos + marker.len();
+        result.push_str(other_selectors);
+        copied = other_end;
     }
-    None
+    result.push_str(&css[copied..]);
+    result
 }
 
-fn convert_colon_host_context_in_part(css: &str, content_attr: &str, host_attr: &str) -> String {
-    let attr = if host_attr.is_empty() {
-        format!("[{}]", content_attr)
-    } else {
-        format!("[{}]", host_attr)
-    };
-
-    // Find the first :host-context that is actually a context selector, i.e. one
-    // followed by a non-empty argument list. Angular v22 leaves bare
-    // `:host-context`, `:host-context()` and `:host-context( )` literal, so any
-    // such occurrence before the first real one is preserved as a prefix.
-    let host_context_marker = ":host-context";
-    let Some(hc_global_start) = find_valid_host_context(css) else {
-        return css.to_string();
-    };
-
-    // Check if there's a :where() or :is() immediately before the :host-context
-    // Pattern: something:where(:host-context...) or :where(:host-context...)
-    let before_hc = &css[..hc_global_start];
-    let (pseudo_prefix, prefix_start) = find_pseudo_function_before(before_hc);
-
-    // Everything before the pseudo-function (or before :host-context if no pseudo)
-    let preserved_prefix = &css[..prefix_start];
-
-    // The part to process starts from prefix_start
-    let to_process = &css[prefix_start..];
-
-    // Find where the replacement region starts in to_process
-    let hc_local_start = to_process.find(host_context_marker).unwrap_or(0);
-
-    // Build context selector groups by processing all :host-context instances
-    let mut selector_groups: Vec<Vec<String>> = vec![vec![]];
-    let mut current_pos = hc_local_start;
-    let to_process_bytes = to_process.as_bytes();
-
-    while current_pos < to_process.len() {
-        // Find next :host-context
-        let Some(hc_start) = to_process[current_pos..].find(host_context_marker) else {
-            break;
+/// Port of `_convertColonHostContext`: expand every `-shadowcsscontext(...)`
+/// into the selectors `:host-context()` can match.
+///
+/// Like Angular, the whole stylesheet is split on top-level commas and each
+/// piece is rewritten on its own; the rewrite of a piece stops at the next `{`.
+fn convert_colon_host_context(css: &str) -> String {
+    split_on_top_level_commas(css, false)
+        .into_iter()
+        .map(convert_colon_host_context_in_selector_part)
+        .collect::<Vec<_>>()
+        .join(",")
+}
+
+/// Port of `_convertColonHostContextInSelectorPart`: replace every match of
+/// `_cssColonHostContextReGlobal`, `(:(where|is)\()?(-shadowcsscontext<parens>([^{]*))`
+/// (case-insensitive), with its expansion.
+fn convert_colon_host_context_in_selector_part(css: &str) -> String {
+    let bytes = css.as_bytes();
+    let mut result = String::with_capacity(css.len());
+    let mut copied = 0;
+    let mut at = 0;
+    while at < bytes.len() {
+        let prefix_len = if starts_with_ignore_ascii_case(css, at, ":where(") {
+            7
+        } else if starts_with_ignore_ascii_case(css, at, ":is(") {
+            4
+        } else {
+            0
+        };
+        let context_at = if prefix_len > 0 && is_host_context_call(css, at + prefix_len) {
+            Some(at + prefix_len)
+        } else if is_host_context_call(css, at) {
+            Some(at)
+        } else {
+            None
         };
-        let hc_start = current_pos + hc_start;
+        let Some(context_at) = context_at else {
+            at += 1;
+            continue;
+        };
+        let end = css[context_at..].find('{').map_or(css.len(), |i| context_at + i);
+        result.push_str(&css[copied..at]);
+        result.push_str(&expand_host_context(&css[at..end], &css[at..context_at]));
+        copied = end;
+        at = end;
+    }
+    result.push_str(&css[copied..]);
+    result
+}
 
-        let after_marker = hc_start + host_context_marker.len();
+/// Whether `-shadowcsscontext(...)` (with valid `_parenSuffix` parentheses)
+/// starts at byte `at`, ignoring case.
+fn is_host_context_call(css: &str, at: usize) -> bool {
+    starts_with_ignore_ascii_case(css, at, POLYFILL_HOST_CONTEXT)
+        && match_paren_suffix(css, at + POLYFILL_HOST_CONTEXT.len()).is_some()
+}
 
-        // Check if followed by (
-        if after_marker >= to_process.len() || to_process_bytes[after_marker] != b'(' {
-            // :host-context with no parens (edge case)
-            // Just skip this :host-context marker and move on
-            current_pos = after_marker;
+/// The replacement callback of `_convertColonHostContextInSelectorPart`.
+///
+/// `selector_text` is the whole match; `pseudo_prefix` is the `:where(` or
+/// `:is(` it starts with, if any. Each `-shadowcsscontext(a, b)` multiplies the
+/// selector groups; the text after the last one is the "other selectors".
+fn expand_host_context(selector_text: &str, pseudo_prefix: &str) -> String {
+    let mut groups: Vec<Vec<&str>> = vec![vec![]];
+    let mut selector_text = selector_text;
+    while let Some(start) = selector_text.find(POLYFILL_HOST_CONTEXT) {
+        let after_prefix = &selector_text[start + POLYFILL_HOST_CONTEXT.len()..];
+        let Some(args) = after_prefix.strip_prefix('(') else {
+            selector_text = after_prefix;
             continue;
-        }
-
-        // Find matching closing paren using balanced matching
-        let paren_start = after_marker + 1;
-        let Some(paren_end) = find_matching_paren(to_process, paren_start) else {
-            break; // Unbalanced
         };
-
-        // Extract the content inside parentheses
-        let inner_content = &to_process[paren_start..paren_end];
-
-        // Split by top-level commas (for :host-context(.a, .b))
-        let comma_separated: Vec<String> = split_by_top_level_comma_str(inner_content)
-            .iter()
-            .map(|s| s.trim().to_string())
-            .filter(|s| !s.is_empty())
-            .collect();
-
-        if !comma_separated.is_empty() {
-            // Duplicate groups for cartesian product
-            let original_length = selector_groups.len();
-            for _ in 1..comma_separated.len() {
-                for i in 0..original_length {
-                    selector_groups.push(selector_groups[i].clone());
-                }
+        let mut context_selectors = Vec::new();
+        let mut end = 0;
+        for selector in split_on_top_level_commas(args, true) {
+            end += selector.len() + 1;
+            let trimmed = js_trim(selector);
+            if !trimmed.is_empty() {
+                context_selectors.push(trimmed);
             }
-
-            // Add each selector to the appropriate group
-            for (i, selector) in comma_separated.iter().enumerate() {
-                for j in 0..original_length {
-                    selector_groups[j + i * original_length].push(selector.clone());
-                }
+        }
+        let groups_len = groups.len();
+        repeat_groups(&mut groups, context_selectors.len());
+        for (i, selector) in context_selectors.iter().enumerate() {
+            for j in 0..groups_len {
+                groups[j + i * groups_len].push(selector);
             }
         }
-
-        current_pos = paren_end + 1;
+        // `afterPrefix.substring(endIndex + 1)`
+        selector_text = after_prefix.get(end + 1..).unwrap_or("");
     }
-
-    // Angular v22: a `:host-context` that is not followed by a non-empty argument
-    // list (bare `:host-context`, `:host-context()`, `:host-context( )`) is no longer
-    // treated as a context selector. It is left literal so the regular selector
-    // scoping prefixes it with the content attribute, e.g.
-    // `:host-context .inner` -> `[contenta]:host-context .inner[contenta]`.
-    if selector_groups.is_empty() || selector_groups[0].is_empty() {
-        return css.to_string();
-    }
-
-    // The "other selectors" are everything after the last :host-context()
-    // Stop at '{' to not include the declaration block
-    let remaining_after = &to_process[current_pos..];
-    let other_end = remaining_after.find('{').unwrap_or(remaining_after.len());
-    let other_selectors = &remaining_after[..other_end];
-
-    // Check if :host appears in other_selectors (before :host conversion)
-    let other_has_host = other_selectors.contains(":host");
-
-    // Generate combined selectors
-    let results: Vec<String> = selector_groups
-        .iter()
-        .flat_map(|group| {
-            combine_host_context_selectors_with_other(
-                group,
-                other_selectors,
-                &pseudo_prefix,
-                &attr,
-                other_has_host,
-            )
+    groups
+        .into_iter()
+        .map(|context_selectors| {
+            combine_host_context_selectors(context_selectors, selector_text, pseudo_prefix)
         })
-        .collect();
-
-    // Append the part after other_selectors (the { and everything after)
-    let suffix = &remaining_after[other_end..];
-    format!("{}{}{}", preserved_prefix, results.join(", "), suffix)
-}
-
-/// Find :where() or :is() immediately before :host-context.
-/// Returns (pseudo_prefix like ":where(", position where it starts).
-fn find_pseudo_function_before(before_hc: &str) -> (String, usize) {
-    // Check if ends with :where( or :is(
-    for prefix in &[":where(", ":is("] {
-        if before_hc.ends_with(prefix) {
-            let start = before_hc.len() - prefix.len();
-            return (prefix.to_string(), start);
-        }
-    }
-    (String::new(), before_hc.len())
+        .collect::<Vec<_>>()
+        .join(", ")
 }
 
-/// Find the matching closing parenthesis, handling nested parens.
-/// Returns the index of the closing paren (exclusive).
-fn find_matching_paren(s: &str, start: usize) -> Option<usize> {
-    let mut depth = 1;
-    let bytes = s.as_bytes();
-
-    for i in start..bytes.len() {
-        match bytes[i] {
-            b'(' => depth += 1,
-            b')' => {
-                depth -= 1;
-                if depth == 0 {
-                    return Some(i);
-                }
-            }
-            _ => {}
+/// Port of `repeatGroups`: append `multiples - 1` copies of the groups.
+fn repeat_groups<T: Clone>(groups: &mut Vec<Vec<T>>, multiples: usize) {
+    let len = groups.len();
+    for _ in 1..multiples {
+        for j in 0..len {
+            groups.push(groups[j].clone());
         }
     }
-    None
 }
 
-/// Combine host-context selectors with other selectors, respecting the Angular algorithm.
-fn combine_host_context_selectors_with_other(
-    context_selectors: &[String],
+/// Port of `_combineHostContextSelectors`.
+///
+/// For context selectors `.a`, `.b` the host may sit under or on any of them,
+/// so this builds `.a.b`, `.a .b` and `.b .a` (in Angular's order), each once
+/// with the host marker attached and once as a descendant, unless the other
+/// selectors already contain the host.
+fn combine_host_context_selectors(
+    mut context_selectors: Vec<&str>,
     other_selectors: &str,
     pseudo_prefix: &str,
-    host_attr: &str,
-    other_has_host: bool,
-) -> Vec<String> {
-    if context_selectors.is_empty() {
-        // No context selectors - just return host marker + other
-        return vec![format!("{}{}{}", pseudo_prefix, host_attr, other_selectors)];
+) -> String {
+    let host_marker = POLYFILL_HOST_NO_COMBINATOR;
+    let other_selectors_has_host =
+        find_ignore_ascii_case(other_selectors, 0, POLYFILL_HOST).is_some();
+    let Some(last) = context_selectors.pop() else {
+        return format!("{host_marker}{other_selectors}");
+    };
+    let mut combined = vec![last.to_string()];
+    while let Some(context_selector) = context_selectors.pop() {
+        let len = combined.len();
+        combined.resize(len * 3, String::new());
+        for i in 0..len {
+            let previous = std::mem::take(&mut combined[i]);
+            combined[len * 2 + i] = format!("{previous} {context_selector}");
+            combined[len + i] = format!("{context_selector} {previous}");
+            combined[i] = format!("{context_selector}{previous}");
+        }
     }
-
-    // Generate permutations (compound, ancestor, descendant forms)
-    let permutations = combine_host_context_selectors(context_selectors);
-
-    permutations
+    combined
         .iter()
-        .flat_map(|perm| {
-            if other_has_host {
-                // If other selectors contain :host, only one variant
-                vec![format!("{}{}{}", pseudo_prefix, perm, other_selectors)]
+        .map(|s| {
+            if other_selectors_has_host {
+                format!("{pseudo_prefix}{s}{other_selectors}")
             } else {
-                // Two variants: compound (selector[host]) and descendant (selector [host])
-                // Note: if pseudo_prefix is set, other_selectors already includes the closing paren
-                vec![
-                    format!("{}{}{}{}", pseudo_prefix, perm, host_attr, other_selectors),
-                    format!("{}{} {}{}", pseudo_prefix, perm, host_attr, other_selectors),
-                ]
+                format!(
+                    "{pseudo_prefix}{s}{host_marker}{other_selectors}, {pseudo_prefix}{s} {host_marker}{other_selectors}"
+                )
             }
         })
-        .collect()
+        .collect::<Vec<_>>()
+        .join(",")
 }
 
-/// Combine multiple host-context selectors into all permutations.
-///
-/// For selectors [".a", ".b"], generates:
-///   - ".a.b" (compound)
-///   - ".a .b" (.a ancestor)
-///   - ".b .a" (.b ancestor)
-///
-/// For selectors [".a", ".b", ".c"], generates 9 permutations.
-///
-/// See: packages/compiler/src/shadow_css.ts `_combineHostContextSelectors`
-fn combine_host_context_selectors(context_selectors: &[String]) -> Vec<String> {
-    if context_selectors.is_empty() {
-        return vec![];
-    }
-
-    if context_selectors.len() == 1 {
-        return vec![context_selectors[0].clone()];
-    }
-
-    // Work from right to left as the TypeScript implementation does
-    let mut selectors = context_selectors.to_vec();
-    // Safety: We checked len >= 2 above, so pop() will succeed
-    let Some(last) = selectors.pop() else {
-        return vec![];
-    };
-    let mut combined: Vec<String> = vec![last];
-
-    while let Some(context_selector) = selectors.pop() {
-        let length = combined.len();
-        let mut new_combined: Vec<String> = Vec::with_capacity(length * 3);
+/// Convert shadow DOM selectors (::shadow, ::content, etc.)
+/// Note: ::ng-deep, >>>, /deep/ are handled during scoping, not here.
+fn convert_shadow_dom_selectors(css: &str) -> String {
+    // These shadow DOM selectors are converted to spaces
+    // Note: ::ng-deep and >>> are handled in scope_selector_list, not here
+    css.replace("::shadow", " ").replace("::content", " ")
+}
 
-        for i in 0..length {
-            let previous = &combined[i];
+// =============================================================================
+// Selector scoping
+// =============================================================================
 
-            // Compound form (no space): contextSelector + previousSelectors
-            new_combined.push(format!("{}{}", context_selector, previous));
+/// At-rules whose bodies hold rules that are scoped like top-level ones.
+/// Matches Angular's `scopedAtRuleIdentifiers`.
+const SCOPED_AT_RULES: &[&str] =
+    &["@media", "@supports", "@document", "@layer", "@container", "@scope", "@starting-style"];
 
-            // Ancestor form (with space): contextSelector + ' ' + previousSelectors
-            new_combined.push(format!("{} {}", context_selector, previous));
+/// At-rules whose bodies are kept unscoped but have `::ng-deep`, `>>>`,
+/// `/deep/` and `:host` stripped (e.g. `@page { ::ng-deep @top-left {} }`).
+/// Every other block at-rule (`@keyframes`, `@property`, `@counter-style`,
+/// `@font-feature-values`, unknown ones...) keeps its body exactly as written.
+const STRIP_SCOPING_AT_RULES: &[&str] = &["@font-face", "@page"];
 
-            // Descendant form (with space): previousSelectors + ' ' + contextSelector
-            new_combined.push(format!("{} {}", previous, context_selector));
-        }
+/// Scope all CSS selectors with the content attribute (`_scopeSelectors`).
+///
+/// `css_nesting` turns on the v22.2 behaviour, see [`has_css_nesting_support`].
+fn scope_selectors(css: &str, content_attr: &str, host_attr: &str, css_nesting: bool) -> String {
+    let mut scoper = SelectorScoper::new(content_attr, host_attr, css_nesting);
+    let mut result = String::with_capacity(css.len() * 2);
+    let mut chars = css.chars().peekable();
+    let mut in_at_rule_header = false;
+    let mut at_rule_depth: u32 = 0;
+    let mut in_string = false;
+    let mut string_char = '"';
+    let mut current_selector = String::new();
+    let mut in_comment = false;
+    let mut in_declaration = false;
+    let mut declaration_depth: u32 = 0;
+    let mut declaration_start = 0; // Where the current rule body starts in `result`
+    let mut rule_has_deep_combinator = false; // Its selector holds `::ng-deep`/`>>>`/`/deep/`
+    let mut at_rule_header = String::new(); // Collect the at-rule header text
+    let mut in_unscoped_at_rule = false; // Inside an at-rule whose body is not scoped
+    let mut strip_unscoped_body = false; // Strip ::ng-deep/:host from that body (@font-face/@page)
+    let mut unscoped_depth: u32 = 0; // Brace depth inside the unscoped at-rule
+    let mut unscoped_content = String::new(); // Collected body of the unscoped at-rule
 
-        combined = new_combined;
-    }
-
-    combined
-}
-
-/// Convert :host selectors.
-///
-/// `:host` becomes `[host_attr]`
-/// `:host(.active)` becomes `.active[host_attr]`
-/// Converts `:host` selectors to use polyfill markers.
-///
-/// This function implements Angular's marker-based approach:
-/// 1. Replace `:host` with `POLYFILL_HOST` marker
-/// 2. Process `POLYFILL_HOST(...)` patterns (direct parens)
-/// 3. Process `POLYFILL_HOST` followed by selectors until comma/brace
-///
-/// The actual conversion from markers to host attributes happens later
-/// in `scope_selectors`, after the selector is split by combinators.
-///
-/// Key insight: matching stops at COMMAS, not closing parens of pseudo-functions.
-/// This ensures `:host:not(:host.foo, :host.bar)` is processed correctly.
-/// Replace `:host` with the polyfill marker, skipping the `:host` that begins a
-/// `:host-context` token (mirrors Angular's `_colonHostRe = /:host(?!\-context)/`).
-fn replace_colon_host_marker(css: &str) -> String {
-    let mut result = String::with_capacity(css.len());
-    let mut rest = css;
-    while let Some(pos) = rest.find(":host") {
-        let after = &rest[pos + ":host".len()..];
-        result.push_str(&rest[..pos]);
-        if after.starts_with("-context") {
-            // Leave `:host-context` literal; copy `:host` through unchanged.
-            result.push_str(":host");
-        } else {
-            result.push_str(POLYFILL_HOST);
-        }
-        rest = after;
-    }
-    result.push_str(rest);
-    result
-}
-
-fn convert_colon_host(css: &str, _host_attr: &str) -> String {
-    // Step 1: Replace `:host` with the marker, but NOT the `:host` inside
-    // `:host-context` (Angular v22's `/:host(?!\-context)/`). A bare/empty
-    // `:host-context` is left literal here and scoped with the content attr later.
-    let mut result = replace_colon_host_marker(css);
-
-    // Step 2: Process POLYFILL_HOST(...) patterns - direct parens after marker
-    result = process_host_with_parens(&result);
-
-    // Step 3: Process POLYFILL_HOST followed by selectors until comma/brace
-    // This uses global matching that stops at commas (like Angular's _cssColonHostRe)
-    result = process_host_with_selectors(&result);
-
-    // Note: Marker-to-attr conversion happens in scope_selectors, not here.
-    // This is because Angular does the conversion AFTER splitting by combinators.
-
-    result
-}
-
-/// Process POLYFILL_HOST(...) patterns where parens immediately follow the marker.
-fn process_host_with_parens(css: &str) -> String {
-    let mut result = css.to_string();
-    let pattern = format!("{}(", POLYFILL_HOST);
-
-    loop {
-        let Some(host_start) = result.find(&pattern) else {
-            break;
-        };
-
-        let paren_start = host_start + pattern.len();
-
-        // Find matching closing paren
-        let mut paren_depth = 1;
-        let mut paren_end = paren_start;
-        for (i, c) in result[paren_start..].char_indices() {
-            match c {
-                '(' => paren_depth += 1,
-                ')' => {
-                    paren_depth -= 1;
-                    if paren_depth == 0 {
-                        paren_end = paren_start + i;
-                        break;
-                    }
-                }
-                _ => {}
-            }
-        }
-
-        if paren_depth != 0 {
-            break; // Unbalanced parens
-        }
-
-        let inner_content = &result[paren_start..paren_end];
-        let after_host = &result[paren_end + 1..];
-
-        // Get other selectors until comma or brace
-        let other_end = after_host.find(|c: char| c == '{' || c == ',').unwrap_or(after_host.len());
-        let other_selectors = &after_host[..other_end];
-
-        // Split inner by top-level commas
-        let inner_selectors = split_by_top_level_comma(inner_content);
-
-        let replacement = if inner_selectors.len() > 1 {
-            // Angular v22: a `:host(...)` whose argument is a selector list (top-level
-            // commas) is left untouched as a literal `:host(...)`. The later selector
-            // scoping then prefixes it with the content attribute, e.g.
-            // `:host(.a, .b)` -> `[contenta]:host(.a, .b)`.
-            let restored = inner_content.replace(POLYFILL_HOST, ":host");
-            format!(":host({restored}){other_selectors}")
-        } else {
-            // Single selector: convert to the no-combinator host form.
-            inner_selectors
-                .iter()
-                .map(|sel| {
-                    let trimmed = sel.trim();
-                    if trimmed.is_empty() {
-                        return String::new();
-                    }
-                    let stripped = trimmed.replace(POLYFILL_HOST, "");
-                    format!("{}{}{}", POLYFILL_HOST_NO_COMBINATOR, stripped, other_selectors)
-                })
-                .filter(|s| !s.is_empty())
-                .collect::<Vec<_>>()
-                .join(",")
-        };
-        result = format!("{}{}{}", &result[..host_start], replacement, &after_host[other_end..]);
-    }
-
-    result
-}
-
-/// Process POLYFILL_HOST followed by selectors until comma/brace.
-/// This matches Angular's _cssColonHostRe behavior with global matching.
-fn process_host_with_selectors(css: &str) -> String {
-    let mut result = String::with_capacity(css.len() * 2);
-    let mut remaining = css;
-
-    while !remaining.is_empty() {
-        // Find next POLYFILL_HOST
-        let Some(host_pos) = remaining.find(POLYFILL_HOST) else {
-            result.push_str(remaining);
-            break;
-        };
-
-        // Add everything before the marker
-        result.push_str(&remaining[..host_pos]);
-        remaining = &remaining[host_pos..];
-
-        // Check if this is already POLYFILL_HOST_NO_COMBINATOR
-        if remaining.starts_with(POLYFILL_HOST_NO_COMBINATOR) {
-            // Already processed, keep as-is
-            result.push_str(POLYFILL_HOST_NO_COMBINATOR);
-            remaining = &remaining[POLYFILL_HOST_NO_COMBINATOR.len()..];
-            continue;
-        }
-
-        // Skip the POLYFILL_HOST marker
-        remaining = &remaining[POLYFILL_HOST.len()..];
-
-        // Check if followed by ( - already handled by process_host_with_parens
-        if remaining.starts_with('(') {
-            // This shouldn't happen if process_host_with_parens ran first,
-            // but handle it just in case by keeping the marker
-            result.push_str(POLYFILL_HOST);
-            continue;
-        }
-
-        // Find selectors until comma or brace (Angular's [^,{]* pattern)
-        let mut selector_end = 0;
-        for (i, c) in remaining.char_indices() {
-            if c == ',' || c == '{' {
-                break;
-            }
-            selector_end = i + c.len_utf8();
-        }
-
-        let other_selectors = &remaining[..selector_end];
-        remaining = &remaining[selector_end..];
-
-        // Convert to POLYFILL_HOST_NO_COMBINATOR + selectors
-        result.push_str(POLYFILL_HOST_NO_COMBINATOR);
-        result.push_str(other_selectors);
-    }
-
-    result
-}
-
-/// Split a string by top-level commas (not inside parentheses).
-fn split_by_top_level_comma(s: &str) -> Vec<&str> {
-    let mut result = Vec::new();
-    let mut start = 0;
-    let mut paren_depth: u32 = 0;
-
-    for (i, c) in s.char_indices() {
-        match c {
-            '(' => paren_depth += 1,
-            ')' => paren_depth = paren_depth.saturating_sub(1),
-            ',' if paren_depth == 0 => {
-                result.push(&s[start..i]);
-                start = i + 1;
-            }
-            _ => {}
-        }
-    }
-    result.push(&s[start..]);
-    result
-}
-
-/// Reorder a selector to put the host attribute before any pseudo-selectors.
-/// Uses the pattern ([^:\)]*)(:*)(.*)
-/// Examples:
-/// - ":before" -> "[attr]:before"
-/// - ".active" -> ".active[attr]"
-/// - ".active:before" -> ".active[attr]:before"
-/// - ":not(.x)" -> "[attr]:not(.x)"
-/// Reorders a selector to insert the host attribute at the correct position.
-/// Matches Angular's pattern: /([^:\)]*)(:*)(.*)/
-/// - before: everything before first colon or close paren
-/// - colon: any colons at that position
-/// - after: everything else
-fn reorder_selector_with_attr(selector: &str, attr: &str) -> String {
-    if attr.is_empty() {
-        return selector.to_string();
-    }
-
-    // Find the first colon or close paren that's not inside brackets
-    let mut bracket_depth: u32 = 0;
-    let mut split_pos = None;
-    let chars: Vec<char> = selector.chars().collect();
-
-    for (i, c) in chars.iter().enumerate() {
-        match c {
-            '[' => bracket_depth += 1,
-            ']' => bracket_depth = bracket_depth.saturating_sub(1),
-            ':' | ')' if bracket_depth == 0 => {
-                split_pos = Some(i);
-                break;
-            }
-            _ => {}
-        }
-    }
-
-    if let Some(pos) = split_pos {
-        let before: String = chars[..pos].iter().collect();
-        let after: String = chars[pos..].iter().collect();
-        format!("{}{}{}", before, attr, after)
-    } else {
-        format!("{}{}", selector, attr)
-    }
-}
-
-/// Convert shadow DOM selectors (::shadow, ::content, etc.)
-/// Note: ::ng-deep, >>>, /deep/ are handled during scoping, not here.
-fn convert_shadow_dom_selectors(css: &str) -> String {
-    // These shadow DOM selectors are converted to spaces
-    // Note: ::ng-deep and >>> are handled in scope_selector_list, not here
-    css.replace("::shadow", " ").replace("::content", " ")
-}
-
-// =============================================================================
-// Selector scoping
-// =============================================================================
-
-/// At-rules whose bodies hold rules that are scoped like top-level ones.
-/// Matches Angular's `scopedAtRuleIdentifiers`.
-const SCOPED_AT_RULES: &[&str] =
-    &["@media", "@supports", "@document", "@layer", "@container", "@scope", "@starting-style"];
-
-/// At-rules whose bodies are kept unscoped but have `::ng-deep`, `>>>`,
-/// `/deep/` and `:host` stripped (e.g. `@page { ::ng-deep @top-left {} }`).
-/// Every other block at-rule (`@keyframes`, `@property`, `@counter-style`,
-/// `@font-feature-values`, unknown ones...) keeps its body exactly as written.
-const STRIP_SCOPING_AT_RULES: &[&str] = &["@font-face", "@page"];
-
-/// Scope all CSS selectors with the content attribute.
-fn scope_selectors(css: &str, content_attr: &str, host_attr: &str) -> String {
-    let mut result = String::with_capacity(css.len() * 2);
-    let mut chars = css.chars().peekable();
-    let mut in_at_rule_header = false;
-    let mut at_rule_depth: u32 = 0;
-    let mut in_string = false;
-    let mut string_char = '"';
-    let mut current_selector = String::new();
-    let mut in_comment = false;
-    let mut in_declaration = false;
-    let mut declaration_depth: u32 = 0;
-    let mut at_rule_header = String::new(); // Collect the at-rule header text
-    let mut in_unscoped_at_rule = false; // Inside an at-rule whose body is not scoped
-    let mut strip_unscoped_body = false; // Strip ::ng-deep/:host from that body (@font-face/@page)
-    let mut unscoped_depth: u32 = 0; // Brace depth inside the unscoped at-rule
-    let mut unscoped_content = String::new(); // Collected body of the unscoped at-rule
-
-    // Where comment and string text goes in the current state.
-    macro_rules! sink {
-        () => {
-            if in_unscoped_at_rule {
-                &mut unscoped_content
-            } else if in_at_rule_header || in_declaration {
-                &mut result
-            } else {
-                &mut current_selector
-            }
-        };
+    // Where comment and string text goes in the current state.
+    macro_rules! sink {
+        () => {
+            if in_unscoped_at_rule {
+                &mut unscoped_content
+            } else if in_at_rule_header || in_declaration {
+                &mut result
+            } else {
+                &mut current_selector
+            }
+        };
     }
 
     while let Some(c) = chars.next() {
@@ -1710,7 +1367,7 @@ fn scope_selectors(css: &str, content_attr: &str, host_attr: &str) -> String {
                 if unscoped_depth == 0 {
                     if strip_unscoped_body {
                         // Strip ::ng-deep, >>>, /deep/, and :host from the collected content
-                        result.push_str(&strip_scoping_selectors(&unscoped_content, host_attr));
+                        result.push_str(&strip_scoping_selectors(&unscoped_content));
                     } else {
                         result.push_str(&unscoped_content);
                     }
@@ -1780,27 +1437,39 @@ fn scope_selectors(css: &str, content_attr: &str, host_attr: &str) -> String {
 
         // If inside a declaration block, just copy content directly
         if in_declaration {
-            result.push(c);
             if c == '{' {
                 declaration_depth += 1;
             } else if c == '}' {
                 declaration_depth -= 1;
                 if declaration_depth == 0 {
                     in_declaration = false;
+                    // From v22.2 a body is either scoped as nested rules or has
+                    // its scoping selectors stripped. Nested rules are not
+                    // scoped yet, so such a body is kept as written.
+                    if css_nesting
+                        && (rule_has_deep_combinator
+                            || !has_nested_block(&result[declaration_start..]))
+                    {
+                        let body = result.split_off(declaration_start);
+                        result.push_str(&strip_scoping_selectors(&body));
+                    }
                 }
             }
+            result.push(c);
             continue;
         }
 
         // Regular selector parsing
         if c == '{' {
             // End of selector, scope it
-            let scoped = scope_selector_list(&current_selector, content_attr, host_attr);
+            rule_has_deep_combinator = contains_deep_combinator(&current_selector);
+            let scoped = scope_rule_selector(&current_selector, &mut scoper);
             result.push_str(&scoped);
             result.push('{');
             current_selector.clear();
             in_declaration = true;
             declaration_depth = 1;
+            declaration_start = result.len();
         } else if c == '}' {
             // A stray `}`: keep the text before it unscoped, in place.
             result.push_str(&current_selector);
@@ -1811,956 +1480,680 @@ fn scope_selectors(css: &str, content_attr: &str, host_attr: &str) -> String {
         }
     }
 
-    // Handle any remaining content
-    if !current_selector.trim().is_empty() {
-        result.push_str(&current_selector);
-    }
-
-    result
-}
-
-// =============================================================================
-// Scoping Context - Implements Angular's _shouldScopeIndicator pattern
-// =============================================================================
-
-/// Context for tracking scoping state across recursive calls.
-/// This implements Angular's `_shouldScopeIndicator` pattern.
-///
-/// The key insight is:
-/// - Selectors BEFORE :host should NOT be scoped (they match ancestor elements)
-/// - Selectors AFTER :host SHOULD be scoped (they match component descendants)
-/// - This state must persist across recursive calls into pseudo-functions
-#[derive(Clone)]
-struct ScopingContext<'a> {
-    content_attr: &'a str,
-    host_attr: &'a str,
-    /// The host marker string, e.g., "[hosta]"
-    host_marker: String,
-    /// Whether selector parts should be scoped.
-    /// - None: not yet determined
-    /// - Some(false): don't scope (before :host)
-    /// - Some(true): do scope (after :host or no :host in selector)
-    should_scope_indicator: Option<bool>,
-    /// Whether this is the parent (top-level) selector call
-    is_parent_selector: bool,
-}
-
-impl<'a> ScopingContext<'a> {
-    fn new(content_attr: &'a str, host_attr: &'a str, is_parent: bool) -> Self {
-        let host_marker =
-            if host_attr.is_empty() { String::new() } else { format!("[{}]", host_attr) };
-        Self {
-            content_attr,
-            host_attr,
-            host_marker,
-            should_scope_indicator: None,
-            is_parent_selector: is_parent,
-        }
-    }
-
-    /// Create a child context for recursive calls (not a parent selector)
-    fn child(&self) -> Self {
-        Self {
-            content_attr: self.content_attr,
-            host_attr: self.host_attr,
-            host_marker: self.host_marker.clone(),
-            should_scope_indicator: self.should_scope_indicator,
-            is_parent_selector: false,
-        }
-    }
-
-    /// Check if a selector contains the host marker (either the actual attr or polyfill markers)
-    fn contains_host(&self, selector: &str) -> bool {
-        // Check for actual host attribute marker like [a-host]
-        let has_attr_marker = !self.host_marker.is_empty() && selector.contains(&self.host_marker);
-        // Also check for polyfill markers (-shadowcsshost or -shadowcsshost-no-combinator)
-        let has_polyfill_marker = selector.contains(POLYFILL_HOST);
-        has_attr_marker || has_polyfill_marker
-    }
-
-    /// Initialize or update the scoping indicator based on Angular's logic:
-    /// if (isParentSelector || this._shouldScopeIndicator) {
-    ///   this._shouldScopeIndicator = !hasHost;
-    /// }
-    /// Note: In JavaScript, `_shouldScopeIndicator` uses truthiness:
-    /// - undefined → falsy
-    /// - false → falsy
-    /// - true → truthy
-    /// So we only reinitialize if parent OR indicator is already true (not just Some).
-    fn initialize_scoping(&mut self, has_host: bool) {
-        if self.is_parent_selector || self.should_scope_indicator == Some(true) {
-            self.should_scope_indicator = Some(!has_host);
-        }
-    }
-
-    /// Update the indicator when we encounter :host in a part
-    /// this._shouldScopeIndicator = this._shouldScopeIndicator || partContainsHost
-    fn update_on_host_found(&mut self) {
-        self.should_scope_indicator = Some(true);
-    }
-
-    /// Check if we should scope a part
-    fn should_scope(&self) -> bool {
-        self.should_scope_indicator.unwrap_or(true)
-    }
-
-    /// Check if a selector contains the -no-combinator marker
-    fn contains_polyfill_host_no_combinator(&self, selector: &str) -> bool {
-        selector.contains(POLYFILL_HOST_NO_COMBINATOR)
-    }
-
-    /// Convert polyfill host markers to actual host attributes.
-    /// This implements Angular's _applySimpleSelectorScope logic.
-    fn apply_simple_selector_scope(&self, selector: &str) -> String {
-        // Note: This function should ONLY be called when the selector contains
-        // polyfill host markers. The caller must check contains_polyfill_host first.
-
-        let mut result = selector.to_string();
-
-        // Process -shadowcsshost-no-combinator patterns with reordering
-        loop {
-            let Some(marker_pos) = result.find(POLYFILL_HOST_NO_COMBINATOR) else {
-                break;
-            };
-
-            let after_marker = &result[marker_pos + POLYFILL_HOST_NO_COMBINATOR.len()..];
-
-            // Find end of attached selector (until whitespace or comma)
-            let mut selector_end = 0;
-            for (i, c) in after_marker.char_indices() {
-                if c.is_whitespace() || c == ',' {
-                    break;
-                }
-                selector_end = i + c.len_utf8();
-            }
-
-            let attached_selector = &after_marker[..selector_end];
-
-            // Apply reordering: before + host_attr + after
-            let converted = reorder_selector_with_attr(attached_selector, &self.host_marker);
-
-            result =
-                format!("{}{}{}", &result[..marker_pos], converted, &after_marker[selector_end..]);
-        }
-
-        // Replace remaining POLYFILL_HOST with host_marker
-        result.replace(POLYFILL_HOST, &self.host_marker)
-    }
-}
-
-/// Scope a comma-separated list of selectors.
-fn scope_selector_list(selector_list: &str, content_attr: &str, host_attr: &str) -> String {
-    // Create the parent context for this top-level call
-    let ctx = ScopingContext::new(content_attr, host_attr, true);
-    scope_selector_list_with_context(selector_list, &ctx)
-}
-
-/// Scope a selector list with a given context (allows recursive calls to share state)
-fn scope_selector_list_with_context(selector_list: &str, parent_ctx: &ScopingContext) -> String {
-    // Preserve leading and trailing whitespace
-    let leading: &str = &selector_list[..selector_list.len() - selector_list.trim_start().len()];
-    let trimmed = selector_list.trim();
-    if trimmed.is_empty() {
-        return selector_list.to_string();
-    }
-    let trailing: &str = &selector_list[selector_list.trim_end().len()..];
-
-    // Create SafeSelector to escape problematic patterns
-    // (attribute selectors, escaped characters, :nth-*() expressions)
-    let safe_selector = SafeSelector::new(trimmed);
-    let safe_content = safe_selector.content();
-
-    // Split by comma (respecting parentheses)
-    let selectors = split_by_comma(safe_content);
-    let scoped: Vec<String> = selectors
-        .iter()
-        .map(|s| {
-            // Each comma-separated selector gets its own context copy
-            let mut ctx = parent_ctx.clone();
-            scope_complex_selector_with_context(s.trim(), &mut ctx)
-        })
-        .collect();
-
-    let scoped_result = scoped.join(", ");
-
-    // Restore escaped patterns
-    let restored = safe_selector.restore(&scoped_result);
-
-    format!("{}{}{}", leading, restored, trailing)
-}
-
-/// Split a string by top-level commas (not inside parentheses).
-fn split_by_comma(s: &str) -> Vec<&str> {
-    let mut result = Vec::new();
-    let mut start = 0;
-    let mut paren_depth: u32 = 0;
-
-    for (i, c) in s.char_indices() {
-        match c {
-            '(' => paren_depth += 1,
-            ')' => paren_depth = paren_depth.saturating_sub(1),
-            ',' if paren_depth == 0 => {
-                result.push(&s[start..i]);
-                start = i + 1;
-            }
-            _ => {}
-        }
-    }
-
-    result.push(&s[start..]);
-    result
-}
-
-/// Scope a complex selector (may contain combinators).
-/// Scope a complex selector (may contain combinators).
-///
-/// For `one two > three`, we scope each simple selector: `one[attr] two[attr] > three[attr]`
-///
-/// ::ng-deep, >>>, /deep/ are handled specially: parts AFTER these deep combinators
-/// are NOT scoped - they "escape" the encapsulation.
-fn scope_complex_selector_with_context(selector: &str, ctx: &mut ScopingContext) -> String {
-    if selector.is_empty() {
-        return String::new();
-    }
-
-    // Don't scope keyframe selectors
-    if is_keyframe_selector(selector) {
-        return selector.to_string();
-    }
-
-    // Split by deep combinators (::ng-deep, >>>, /deep/)
-    // Parts after the deep combinator are NOT scoped
-    let deep_parts = split_by_deep_combinators(selector);
-
-    let shallow_part = deep_parts[0];
-    let other_parts = &deep_parts[1..];
-
-    // Initialize scoping based on whether the shallow part contains :host
-    let has_host = ctx.contains_host(shallow_part);
-    ctx.initialize_scoping(has_host);
-
-    // Scope only the shallow part (before ::ng-deep)
-    let scoped_shallow = scope_shallow_selector_with_context(shallow_part, ctx);
-
-    // Join with the unscoped other parts (after ::ng-deep becomes a space)
-    if other_parts.is_empty() {
-        scoped_shallow
-    } else {
-        format!("{} {}", scoped_shallow, other_parts.join(" "))
-    }
-}
-
-/// Scope a shallow selector with context tracking.
-/// Implements Angular's _scopeSelector logic with _shouldScopeIndicator.
-fn scope_shallow_selector_with_context(selector: &str, ctx: &mut ScopingContext) -> String {
-    if selector.is_empty() {
-        return String::new();
-    }
-
-    // Split by combinators while preserving them
-    let parts = split_by_combinators(selector);
-
-    let mut result = String::new();
-    for (part, combinator) in parts {
-        let trimmed = part.trim();
-        if trimmed.is_empty() {
-            if !combinator.is_empty() {
-                result.push_str(&normalize_combinator(combinator));
-            }
-            continue;
-        }
-
-        // Check if this part contains the host marker
-        let part_has_host = ctx.contains_host(trimmed);
-
-        // Update the scoping indicator: once we see :host, subsequent parts should be scoped
-        // Angular: this._shouldScopeIndicator = this._shouldScopeIndicator || partContainsHost
-        // IMPORTANT: Angular only updates for parts INSIDE the loop (parts with combinators after).
-        // The final part (after the loop) does NOT get this update - the pseudo-function handler
-        // updates internally as it processes each pseudo-function.
-        if part_has_host && !combinator.is_empty() {
-            ctx.update_on_host_found();
-        }
-
-        // Scope the part based on the indicator
-        let scoped = scope_selector_part_with_context(trimmed, ctx, part_has_host);
-
-        result.push_str(&scoped);
-        if !combinator.is_empty() {
-            result.push_str(&normalize_combinator_with_context(combinator, trimmed));
-        }
-    }
-
-    result
-}
-
-/// Normalize combinator spacing, taking into account hex escape sequences.
-/// When the preceding part ends with a hex escape (escape placeholder + hex digits),
-/// we need to output extra spaces to preserve the hex escape terminator.
-fn normalize_combinator_with_context(combinator: &str, preceding_part: &str) -> String {
-    let trimmed = combinator.trim();
-    if trimmed.is_empty() {
-        // Just whitespace - check if we need extra spaces for hex escape termination
-        if ends_with_hex_escape_pattern(preceding_part) {
-            // Output 3 spaces: original escape terminator + combinator space + extra for clarity
-            "   ".to_string()
-        } else {
-            " ".to_string()
-        }
-    } else {
-        // Non-space combinator (>, +, ~) - add spaces around it
-        format!(" {} ", trimmed)
-    }
-}
-
-/// Check if a selector part ends with a hex escape pattern.
-/// This detects patterns like `__esc-ph-N__` followed by hex digits.
-fn ends_with_hex_escape_pattern(s: &str) -> bool {
-    // Look for __esc-ph-N__ followed by optional hex digits at the end
-    if let Some(esc_pos) = s.rfind("__esc-ph-") {
-        // Find the end of the placeholder (the closing __)
-        let after_start = esc_pos + 9; // length of "__esc-ph-"
-        if let Some(rel_end) = s[after_start..].find("__") {
-            let placeholder_end = after_start + rel_end + 2;
-            // Check if remaining chars (after placeholder) are all hex digits
-            let remaining = &s[placeholder_end..];
-            !remaining.is_empty() && remaining.chars().all(|c| c.is_ascii_hexdigit())
-        } else {
-            false
-        }
-    } else {
-        false
-    }
-}
-
-/// Scope a single selector part, respecting the context's should_scope indicator.
-fn scope_selector_part_with_context(
-    selector: &str,
-    ctx: &mut ScopingContext,
-    part_has_host: bool,
-) -> String {
-    if selector.is_empty() {
-        return String::new();
-    }
-
-    // Detach any comment placeholders before anything inspects the selector.
-    // A comment can be glued straight onto the selector text (PostCSS reprints
-    // `/* why */\n.foo` as `/* why */.foo`), and every check below is a
-    // whole-string match: with `%COMMENT0%` still attached, `:where(.one)`
-    // stops looking like a pure pseudo-function and gets scoped as
-    // `[content]:where(.one)` instead of `:where(.one[content])` - which is a
-    // real cascade change, since `:where()` contributes no specificity. The
-    // placeholders restore to blank text, so re-emitting them in front is
-    // enough.
-    if selector.contains(COMMENT_PLACEHOLDER_PREFIX) {
-        // `%COMMENT` without a valid index isn't ours - fall through and treat
-        // it as ordinary selector text.
-        let (stripped, placeholders) = strip_comment_placeholders(selector);
-        if !placeholders.is_empty() {
-            if stripped.trim().is_empty() {
-                // Nothing but placeholder(s) - no real selector to scope. Must
-                // not fall through, or a lone comment would become a bare
-                // `[content]` matching every element in the component.
-                return selector.to_string();
-            }
-            return placeholders + &scope_selector_part_with_context(&stripped, ctx, part_has_host);
-        }
-    }
-
-    // If this part IS the host marker, don't add content attr
-    if !ctx.host_marker.is_empty() && selector.trim() == ctx.host_marker {
-        return selector.to_string();
-    }
-
-    // Check if this is a pseudo-function (:where, :is)
-    // These need special handling - we may need to scope their contents
-    if let Some(scoped) = try_scope_pseudo_function_with_context(selector, ctx) {
-        return scoped;
-    }
-
-    // If the selector is NOT purely pseudo-functions but contains host,
-    // update the indicator. This matches Angular's else branch in
-    // _pseudoFunctionAwareScopeSelectorPart.
-    if part_has_host {
-        ctx.update_on_host_found();
-    }
-
-    // Handle polyfill host markers (Angular's _scopeSelectorPart with host markers)
-    if ctx.contains_polyfill_host_no_combinator(selector) {
-        let mut scoped = ctx.apply_simple_selector_scope(selector);
-
-        // If marker is inside a pseudo-function (not outside), also add content attr
-        // Angular uses: if (!p.match(_polyfillHostNoCombinatorOutsidePseudoFunction))
-        // which matches if the marker is NOT followed by [^(]*\) - i.e., IS inside parens
-        if !is_marker_outside_pseudo_function(selector) && !ctx.content_attr.is_empty() {
-            // Add content attr using the reorder pattern
-            scoped = scope_simple_selector(&scoped, ctx.content_attr);
-        }
-        return scoped;
-    }
-
-    // For parts containing the host marker at top level but with other content,
-    // we need to scope the parts after the host
-    if part_has_host && contains_host_attr_at_top_level(selector, ctx.host_attr) {
-        return scope_after_host_with_context(selector, ctx);
-    }
-
-    // Only scope if the indicator says we should
-    if !ctx.should_scope() {
-        return selector.to_string();
-    }
-
-    // Apply the content attribute
-    scope_simple_selector(selector, ctx.content_attr)
-}
-
-/// Check if the polyfill host marker is outside any pseudo-function parentheses.
-/// Returns true if marker is at top level (not inside parens).
-fn is_marker_outside_pseudo_function(selector: &str) -> bool {
-    // Find the marker position
-    let Some(marker_pos) = selector.find(POLYFILL_HOST_NO_COMBINATOR) else {
-        return false;
-    };
-
-    // Check if after the marker, there's a closing paren before an opening paren
-    // Angular regex: (?![^(]*\)) - negative lookahead for [^(]*\)
-    // This means "not followed by (any non-open-paren chars) then close-paren"
-    let after_marker = &selector[marker_pos + POLYFILL_HOST_NO_COMBINATOR.len()..];
-
-    // If we find ) before ( (or no paren at all), marker is inside parens -> return false
-    // If we find ( before ) (or only () pairs), marker is outside -> return true
-    let mut paren_depth = 0;
-    for c in after_marker.chars() {
-        match c {
-            '(' => {
-                paren_depth += 1;
-            }
-            ')' => {
-                if paren_depth == 0 {
-                    // Found closing paren without matching open -> marker is inside parens
-                    return false;
-                }
-                paren_depth -= 1;
-            }
-            _ => {}
-        }
-    }
-    // No unmatched closing paren found -> marker is outside parens
-    true
-}
-
-/// Try to scope pseudo-functions (:where, :is, :has, :not) with context tracking.
-/// Returns None if the selector has other parts before the pseudo-function.
-///
-/// This is the context-aware version that implements Angular's `_pseudoFunctionAwareScopeSelectorPart`.
-fn try_scope_pseudo_function_with_context(
-    selector: &str,
-    ctx: &mut ScopingContext,
-) -> Option<String> {
-    let trimmed = selector.trim();
-
-    // Collect all outer :where() and :is() selectors only.
-    // Angular only scopes inside these pseudo-functions, not :has() or :not().
-    // For :has() and :not(), the content attr goes BEFORE the pseudo-function.
-
-    // Find all pseudo-function parts
-    let mut pseudo_parts: Vec<String> = Vec::new();
-    let mut last_end = 0;
-    let bytes = trimmed.as_bytes();
-
-    let mut search_from = 0;
-    while let Some(mat) = find_where_or_is(trimmed, search_from) {
-        let match_start = mat.start;
-
-        // If there's content before this pseudo-function that's not another pseudo-function,
-        // this selector has other parts
-        if match_start > last_end {
-            let between = &trimmed[last_end..match_start];
-            if !between.is_empty() {
-                // There's content between pseudo-functions - not a pure pseudo-function selector
-                return None;
-            }
-        }
-
-        // Find the matching closing paren
-        let paren_start = mat.end;
-        let mut paren_depth: u32 = 1;
-        let mut paren_end = paren_start;
-
-        for i in paren_start..bytes.len() {
-            match bytes[i] {
-                b'(' => paren_depth += 1,
-                b')' => {
-                    paren_depth -= 1;
-                    if paren_depth == 0 {
-                        paren_end = i;
-                        break;
-                    }
-                }
-                _ => {}
-            }
-        }
-
-        if paren_depth != 0 {
-            return None; // Unbalanced parens
-        }
-
-        // Capture the full pseudo-function including content
-        pseudo_parts.push(trimmed[match_start..=paren_end].to_string());
-        last_end = paren_end + 1;
-        search_from = last_end;
-    }
-
-    // Check if the entire selector is made up of pseudo-functions
-    if pseudo_parts.is_empty() {
-        return None;
-    }
-
-    let joined: String = pseudo_parts.join("");
-    if joined != trimmed {
-        return None; // Selector has other parts
-    }
-
-    // Process each pseudo-function
-    let scoped_parts: Vec<String> = pseudo_parts
-        .iter()
-        .map(|part| {
-            // Extract the pseudo-function name and inner content
-            let Some(pm) = find_where_or_is(part, 0) else {
-                return part.clone();
-            };
-
-            let prefix_without_paren = &part[..pm.end - 1]; // e.g., ":where"
-            let inner = &part[pm.end..part.len() - 1]; // Content inside parens
-
-            // Check if inner content contains host marker - update context if so
-            if ctx.contains_host(inner) {
-                ctx.update_on_host_found();
-            }
-
-            // Create a child context for recursive scoping
-            let child_ctx = ctx.child();
-
-            // Recursively scope the inner content
-            let scoped_inner = scope_selector_list_with_context(inner, &child_ctx);
-
-            // Update parent context from child if host was found
-            if child_ctx.should_scope_indicator == Some(true) {
-                ctx.update_on_host_found();
-            }
-
-            format!("{}({})", prefix_without_paren, scoped_inner)
-        })
-        .collect();
-
-    Some(scoped_parts.join(""))
-}
-
-/// Scope a simple selector by adding the content attribute.
-fn scope_simple_selector(selector: &str, content_attr: &str) -> String {
-    if selector.is_empty() {
-        return String::new();
-    }
-
-    // Comment placeholders are detached in `scope_selector_part_with_context`,
-    // which is upstream of every caller of this function, so the selector text
-    // here is already placeholder-free.
-
-    // Already has the content attribute
-    let attr = format!("[{}]", content_attr);
-    if selector.contains(&attr) {
-        return selector.to_string();
-    }
-
-    // Don't scope keyframe selectors
-    if is_keyframe_selector(selector) {
-        return selector.to_string();
-    }
-
-    // Handle pseudo-elements first (::before, ::after, etc.)
-    if let Some(pseudo_pos) = find_pseudo_element_start(selector) {
-        let (base, pseudo) = selector.split_at(pseudo_pos);
-        return format!("{}{}{}", base, attr, pseudo);
-    }
-
-    // Handle pseudo-classes (:hover, :first-child, etc.)
-    if let Some(pseudo_pos) = find_pseudo_class_start(selector) {
-        let (base, pseudo) = selector.split_at(pseudo_pos);
-        if base.is_empty() {
-            return format!("{}{}", attr, selector);
-        }
-        return format!("{}{}{}", base, attr, pseudo);
+    // Handle any remaining content
+    if !current_selector.trim().is_empty() {
+        result.push_str(&current_selector);
     }
 
-    format!("{}{}", selector, attr)
+    result
 }
 
-/// Normalize combinator spacing to match Angular's format.
-/// Angular outputs ` separator ` for all combinators.
-fn normalize_combinator(combinator: &str) -> String {
-    let trimmed = combinator.trim();
-    if trimmed.is_empty() {
-        // Just whitespace - return single space
-        " ".to_string()
-    } else {
-        // Non-space combinator (>, +, ~) - add spaces around it
-        format!(" {} ", trimmed)
-    }
-}
+// =============================================================================
+// Selector scoping - port of `_scopeSelector` and `_applySelectorScope`
+// =============================================================================
 
-/// Check if the host attr appears at the top level (not inside parentheses).
-fn contains_host_attr_at_top_level(selector: &str, host_attr: &str) -> bool {
-    let host_marker = format!("[{}]", host_attr);
-    let mut depth: u32 = 0;
-    let chars: Vec<char> = selector.chars().collect();
-    let marker_chars: Vec<char> = host_marker.chars().collect();
+/// Whether this Angular version's `ShadowCss` has its CSS nesting support
+/// (v22.2.0-next.2+).
+///
+/// From that release a selector part that is just `&` is left unscoped, a rule
+/// without a declaration block (`.a;`) is no longer scoped, and a rule body
+/// with no nested rule (or one under a `::ng-deep` selector) has its scoping
+/// selectors stripped like an `@font-face` body. Oxc does not scope nested
+/// rules yet, so a body holding them is kept as written.
+fn has_css_nesting_support(version: Option<AngularVersion>) -> bool {
+    let Some(version) = version else {
+        return true;
+    };
+    if (version.major, version.minor, version.patch) == (22, 2, 0) {
+        return match version.prerelease {
+            None | Some(Prerelease::Rc(_)) => true,
+            Some(Prerelease::Next(n)) => n >= 2,
+            Some(Prerelease::Other) => false,
+        };
+    }
+    version.is_at_least(22, 2, 0)
+}
+
+/// Scopes the selectors of one stylesheet, carrying the state Angular keeps on
+/// its `ShadowCss` instance (`_shouldScopeIndicator`, `_safeSelector`).
+struct SelectorScoper<'a> {
+    /// The content attribute, e.g. `_ngcontent-%COMP%` (`scopeSelector`).
+    scope_selector: &'a str,
+    /// The host attribute, e.g. `_nghost-%COMP%` (`hostSelector`).
+    host_selector: &'a str,
+    /// `[scopeSelector]` with any `[is=...]` unwrapped, appended to scoped parts.
+    attr_name: String,
+    /// Whether a selector part that is only `&` stays unscoped (v22.2+).
+    css_nesting: bool,
+    /// `_shouldScopeIndicator`: whether parts are scoped. Parts before a
+    /// `:host` match ancestors of the host and stay unscoped.
+    should_scope: bool,
+    /// `_safeSelector` of the current top-level selector.
+    safe_selector: SafeSelector,
+}
+
+impl<'a> SelectorScoper<'a> {
+    fn new(scope_selector: &'a str, host_selector: &'a str, css_nesting: bool) -> Self {
+        Self {
+            scope_selector,
+            host_selector,
+            attr_name: format!("[{}]", unwrap_is_attribute(scope_selector)),
+            css_nesting,
+            should_scope: false,
+            safe_selector: SafeSelector::default(),
+        }
+    }
+
+    /// Port of `_scopeSelector`: scope each selector of a list (`, `-joined),
+    /// leaving everything after a `::ng-deep`, `>>>` or `/deep/` unscoped.
+    fn scope_selector(&mut self, selector: &str, is_parent_selector: bool) -> String {
+        let mut result = String::with_capacity(selector.len() * 2);
+        for (i, part) in split_selector_list(selector).into_iter().enumerate() {
+            if i > 0 {
+                result.push_str(", ");
+            }
+            let mut deep_parts = split_on_deep_combinators(part).into_iter();
+            let shallow_part = deep_parts.next().unwrap_or_default();
+            if self.selector_needs_scoping(shallow_part) {
+                result.push_str(&self.apply_selector_scope(shallow_part, is_parent_selector));
+            } else {
+                result.push_str(shallow_part);
+            }
+            for other_part in deep_parts {
+                result.push(' ');
+                result.push_str(other_part);
+            }
+        }
+        result
+    }
 
-    for i in 0..chars.len() {
-        match chars[i] {
-            '(' => depth += 1,
-            ')' => depth = depth.saturating_sub(1),
-            _ if depth == 0 && i + marker_chars.len() <= chars.len() => {
-                // Check if marker starts at this position
-                if chars[i..i + marker_chars.len()] == marker_chars[..] {
-                    return true;
+    /// Port of `_selectorNeedsScoping`: false when some line of the selector
+    /// already starts with the content attribute (`_makeScopeMatcher` builds
+    /// `^(attr)([>\s~+[.,{:][\s\S]*)?$` with the `m` flag).
+    fn selector_needs_scoping(&self, selector: &str) -> bool {
+        let mut line = selector;
+        loop {
+            if let Some(after) = line.strip_prefix(self.scope_selector) {
+                match after.chars().next() {
+                    None => return false,
+                    Some(c)
+                        if is_js_space(c)
+                            || matches!(c, '>' | '~' | '+' | '[' | '.' | ',' | '{' | ':') =>
+                    {
+                        return false;
+                    }
+                    Some(_) => {}
                 }
             }
-            _ => {}
+            match line.char_indices().find(|&(_, c)| is_js_line_terminator(c)) {
+                Some((i, c)) => line = &line[i + c.len_utf8()..],
+                None => return true,
+            }
         }
     }
-    false
-}
 
-/// Split a selector by combinators (space, >, +, ~).
-/// Returns pairs of (selector_part, combinator_with_spaces).
-fn split_by_combinators(selector: &str) -> Vec<(&str, &str)> {
-    let mut result = Vec::new();
-    let char_indices: Vec<(usize, char)> = selector.char_indices().collect();
-    let mut start = 0_usize; // byte index into selector
-    let mut i = 0_usize; // index into char_indices
-    let mut paren_depth: u32 = 0;
-    let mut bracket_depth: u32 = 0;
-
-    while i < char_indices.len() {
-        let (byte_pos, ch) = char_indices[i];
-        match ch {
-            '(' => paren_depth += 1,
-            ')' => paren_depth = paren_depth.saturating_sub(1),
-            '[' => bracket_depth += 1,
-            ']' => bracket_depth = bracket_depth.saturating_sub(1),
-            ' ' | '\n' | '\t' | '\r' | '>' | '+' | '~'
-                if paren_depth == 0 && bracket_depth == 0 =>
+    /// Port of `_applySelectorScope`.
+    ///
+    /// The selector is split on the combinator separator
+    /// `/( |>|\+|~(?!=))(?!<inside parens>)\s*/g`, and every part is emitted as
+    /// `` `${scopedPart} ${separator} ` ``. That is where Angular's runs of
+    /// spaces come from: `a > b` is split at the space (`a`) and again at the
+    /// `>` (an empty part), giving `a[c]    > b[c]`.
+    fn apply_selector_scope(&mut self, selector: &str, is_parent_selector: bool) -> String {
+        let escaped;
+        let selector = if is_parent_selector {
+            self.safe_selector = SafeSelector::new(selector);
+            escaped = self.safe_selector.content.clone();
+            escaped.as_str()
+        } else {
+            selector
+        };
+
+        let has_host = selector.contains(POLYFILL_HOST_NO_COMBINATOR);
+        // Only reset at the top level, or while scoping is on.
+        if is_parent_selector || self.should_scope {
+            self.should_scope = !has_host;
+        }
+
+        let mut scoped = String::with_capacity(selector.len() * 2);
+        // Oxc deviation (#175): a newline, tab, carriage return or form feed
+        // is a descendant combinator too. Angular only splits on a space, so
+        // `:host:hover\n.child` leaves `.child` unscoped and `.foo\n.bar` keeps
+        // `.foo` unscoped. Whitespace that starts the selector (`.a,\n.b`) is
+        // not a combinator, so it is kept exactly as Angular keeps it.
+        let leading = selector.len() - selector.trim_start_matches(is_js_space).len();
+        let mut start = 0;
+        let mut from = 0;
+        while let Some((at, separator, end)) = find_combinator_separator(selector, from, leading) {
+            from = end;
+            let part = &selector[start..at];
+            // A space between a hex escape and a following hex digit (`.\fc ber`
+            // for `.über`) terminates the escape; it is not a combinator.
+            if has_escape_placeholder(part)
+                && selector.as_bytes().get(at + 1).is_some_and(u8::is_ascii_hexdigit)
             {
-                // A space following an escaped hex value and followed by another hex character
-                // (ie: ".\fc ber" for ".über") is not a separator between 2 selectors
-                // Check: if the part ends with an escape placeholder AND next char is hex
-                let part = &selector[start..byte_pos];
-                let next_char_is_hex = i + 1 < char_indices.len()
-                    && ch == ' '
-                    && char_indices[i + 1].1.is_ascii_hexdigit();
-                let part_ends_with_esc_placeholder = part.contains("__esc-ph-");
-
-                if next_char_is_hex && part_ends_with_esc_placeholder {
-                    // This space is part of a CSS hex escape sequence, not a combinator
-                    i += 1;
-                    continue;
+                continue;
+            }
+            let scoped_part = self.scope_pseudo_function_aware_part(part);
+            scoped.push_str(&scoped_part);
+            scoped.push(' ');
+            scoped.push(separator);
+            scoped.push(' ');
+            start = end;
+        }
+        let scoped_part = self.scope_pseudo_function_aware_part(&selector[start..]);
+        scoped.push_str(&scoped_part);
+        self.safe_selector.restore(&scoped)
+    }
+
+    /// Port of `_pseudoFunctionAwareScopeSelectorPart`: a part made only of
+    /// `:where(...)`/`:is(...)` has the selectors inside scoped instead.
+    fn scope_pseudo_function_aware_part(&mut self, part: &str) -> String {
+        // Oxc deviation: comment placeholders are detached first. Angular scopes
+        // them as selector text (`.a /* c */ .b` gets a bare `[content]` part
+        // for the comment, and a comment glued to `:where(.one)` turns it into
+        // `[content]:where(.one)`, which changes specificity). The placeholders
+        // restore to blank text or the comment, so they go back in front.
+        if part.contains(COMMENT_PLACEHOLDER_PREFIX) {
+            let (stripped, placeholders) = strip_comment_placeholders(part);
+            if !placeholders.is_empty() {
+                if js_trim(&stripped).is_empty() {
+                    return part.to_string();
                 }
-
-                // Found a potential combinator
-                let part_end = byte_pos;
-
-                // Collect the combinator (may include spaces around it)
-                let combinator_start = byte_pos;
-                while i < char_indices.len()
-                    && matches!(char_indices[i].1, ' ' | '\n' | '\t' | '\r' | '>' | '+' | '~')
-                {
-                    i += 1;
+                return placeholders + &self.scope_pseudo_function_aware_part(&stripped);
+            }
+        }
+
+        // `_cssPrefixWithPseudoSelectorFunction.exec` loop, collecting each
+        // `:where(`/`:is(` up to its balancing `)`.
+        let bytes = part.as_bytes();
+        let mut pseudo_parts: Vec<(usize, usize)> = Vec::new();
+        let mut last_index = 0;
+        while let Some((start, open_end)) = find_where_or_is(part, last_index) {
+            let mut opened = 1;
+            let mut index = open_end;
+            while index < bytes.len() {
+                let c = bytes[index];
+                index += 1;
+                if c == b'(' {
+                    opened += 1;
+                } else if c == b')' {
+                    opened -= 1;
+                    if opened == 0 {
+                        break;
+                    }
                 }
-
-                let combinator_end =
-                    if i < char_indices.len() { char_indices[i].0 } else { selector.len() };
-
-                // Always push the part, even if empty (to preserve leading combinators)
-                result.push((
-                    &selector[start..part_end],
-                    &selector[combinator_start..combinator_end],
-                ));
-                start = combinator_end;
-                continue;
             }
-            _ => {}
+            pseudo_parts.push((start, index));
+            last_index = index;
+        }
+
+        // `pseudoSelectorParts.join('') === selectorPart`
+        let covers_part = pseudo_parts.first().map_or(0, |&(start, _)| start) == 0
+            && pseudo_parts.windows(2).all(|w| w[0].1 == w[1].0)
+            && pseudo_parts.last().map_or(0, |&(_, end)| end) == part.len();
+        if covers_part {
+            let mut scoped = String::with_capacity(part.len() * 2);
+            for &(start, end) in &pseudo_parts {
+                let pseudo_part = &part[start..end];
+                let function_len =
+                    if starts_with_ignore_ascii_case(pseudo_part, 0, ":where(") { 7 } else { 4 };
+                // `selectorPart.slice(cssPseudoSelectorFunction.length, -1)`
+                let inner_end =
+                    pseudo_part.char_indices().next_back().map_or(0, |(i, _)| i).max(function_len);
+                let selector_to_scope = &pseudo_part[function_len..inner_end];
+                if selector_to_scope.contains(POLYFILL_HOST_NO_COMBINATOR) {
+                    self.should_scope = true;
+                }
+                let scoped_inner = self.scope_selector(selector_to_scope, false);
+                scoped.push_str(&pseudo_part[..function_len]);
+                scoped.push_str(&scoped_inner);
+                scoped.push(')');
+            }
+            scoped
+        } else {
+            self.should_scope = self.should_scope || part.contains(POLYFILL_HOST_NO_COMBINATOR);
+            if self.should_scope { self.scope_selector_part(part) } else { part.to_string() }
         }
-        i += 1;
     }
 
-    // Add the last part
-    if start < selector.len() {
-        result.push((&selector[start..], ""));
+    /// Port of the `_scopeSelectorPart` closure of `_applySelectorScope`.
+    fn scope_selector_part(&self, part: &str) -> String {
+        let trimmed = js_trim(part);
+        if trimmed.is_empty() || (self.css_nesting && trimmed == "&") {
+            return part.to_string();
+        }
+        if part.contains(POLYFILL_HOST_NO_COMBINATOR) {
+            let scoped = apply_simple_selector_scope(part, self.host_selector);
+            if has_host_marker_outside_parens(part) {
+                scoped
+            } else {
+                // A host marker inside a pseudo-function, e.g. `:not(:host)`:
+                // the part also gets the content attribute.
+                insert_before_first_colon(&scoped, &self.attr_name)
+            }
+        } else {
+            let without_host = replace_ignore_ascii_case(part, POLYFILL_HOST, "", |_| true);
+            if without_host.is_empty() {
+                trimmed.to_string()
+            } else {
+                insert_before_first_colon(&without_host, &self.attr_name)
+            }
+        }
     }
+}
 
+/// `scopeSelector.replace(/\[is=([^\]]*)\]/g, (_, ...parts) => parts[0])`.
+fn unwrap_is_attribute(scope_selector: &str) -> String {
+    let mut result = String::with_capacity(scope_selector.len());
+    let mut rest = scope_selector;
+    while let Some(at) = rest.find("[is=") {
+        let value_start = at + "[is=".len();
+        let Some(close) = rest[value_start..].find(']') else {
+            break;
+        };
+        result.push_str(&rest[..at]);
+        result.push_str(&rest[value_start..value_start + close]);
+        rest = &rest[value_start + close + 1..];
+    }
+    result.push_str(rest);
     result
 }
 
-/// Split a selector by deep combinators (`>>>`, `/deep/`, `::ng-deep`).
-/// Returns the parts between the deep combinators.
-/// Parts after the first deep combinator are not scoped.
-fn split_by_deep_combinators(selector: &str) -> Vec<&str> {
-    let mut result = Vec::new();
+/// Split a selector list on `_selectorSplitRe`: a comma outside parentheses
+/// together with one optional space on either side. Other whitespace around
+/// the comma (a newline, say) stays in the selectors.
+fn split_selector_list(selector: &str) -> Vec<&str> {
     let bytes = selector.as_bytes();
-    let len = bytes.len();
+    let mut parts = Vec::new();
     let mut start = 0;
-    let mut i = 0;
-
-    while i < len {
-        // Check for `>>>` (3 chars)
-        if i + 3 <= len
-            && selector.is_char_boundary(i)
-            && selector.is_char_boundary(i + 3)
-            && &selector[i..i + 3] == ">>>"
-        {
-            result.push(&selector[start..i]);
-            i += 3;
-            // Skip trailing whitespace
-            while i < len && bytes[i].is_ascii_whitespace() {
-                i += 1;
-            }
-            start = i;
-            continue;
-        }
-
-        // Check for `/deep/` (6 chars)
-        if i + 6 <= len
-            && selector.is_char_boundary(i)
-            && selector.is_char_boundary(i + 6)
-            && &selector[i..i + 6] == "/deep/"
-        {
-            result.push(&selector[start..i]);
-            i += 6;
-            // Skip trailing whitespace
-            while i < len && bytes[i].is_ascii_whitespace() {
-                i += 1;
-            }
-            start = i;
+    let mut at = 0;
+    while at < bytes.len() {
+        let comma = if bytes[at] == b' ' && bytes.get(at + 1) == Some(&b',') {
+            at + 1
+        } else if bytes[at] == b',' {
+            at
+        } else {
+            at += 1;
             continue;
-        }
-
-        // Check for `::ng-deep` (9 chars)
-        if i + 9 <= len
-            && selector.is_char_boundary(i)
-            && selector.is_char_boundary(i + 9)
-            && &selector[i..i + 9] == "::ng-deep"
-        {
-            result.push(&selector[start..i]);
-            i += 9;
-            // Skip trailing whitespace
-            while i < len && bytes[i].is_ascii_whitespace() {
-                i += 1;
-            }
-            start = i;
+        };
+        if closes_enclosing_paren(selector, comma + 1) {
+            at += 1;
             continue;
         }
-
-        i += 1;
-    }
-
-    // Add the remaining part
-    if start <= len {
-        result.push(&selector[start..]);
+        let end = if bytes.get(comma + 1) == Some(&b' ') { comma + 2 } else { comma + 1 };
+        parts.push(&selector[start..at]);
+        start = end;
+        at = end;
     }
+    parts.push(&selector[start..]);
+    parts
+}
 
-    // If nothing was split, return the original selector as the only element
-    if result.is_empty() {
-        result.push(selector);
+/// `part.split(/(?:>>>)|(?:\/deep\/)|(?:::ng-deep)/g)`.
+fn split_on_deep_combinators(part: &str) -> Vec<&str> {
+    let bytes = part.as_bytes();
+    let mut parts = Vec::new();
+    let mut start = 0;
+    let mut at = 0;
+    while at < bytes.len() {
+        let len = deep_combinator_len(&bytes[at..]);
+        if len > 0 {
+            parts.push(&part[start..at]);
+            at += len;
+            start = at;
+        } else {
+            at += 1;
+        }
     }
-
-    result
+    parts.push(&part[start..]);
+    parts
 }
 
-/// Scope descendants after :host in a selector with context.
-fn scope_after_host_with_context(selector: &str, ctx: &mut ScopingContext) -> String {
-    if ctx.host_marker.is_empty() {
-        return selector.to_string();
+/// The length of the `>>>`, `/deep/` or `::ng-deep` that `bytes` starts with, or 0.
+fn deep_combinator_len(bytes: &[u8]) -> usize {
+    if bytes.starts_with(b">>>") {
+        3
+    } else if bytes.starts_with(b"/deep/") {
+        6
+    } else if bytes.starts_with(b"::ng-deep") {
+        9
+    } else {
+        0
     }
+}
 
-    if let Some(pos) = selector.find(&ctx.host_marker) {
-        let after_host = &selector[pos + ctx.host_marker.len()..];
-        let before_host = &selector[..pos];
-        let before_and_host = &selector[..pos + ctx.host_marker.len()];
+/// Whether a selector contains `::ng-deep`, `>>>` or `/deep/`.
+fn contains_deep_combinator(selector: &str) -> bool {
+    let bytes = selector.as_bytes();
+    (0..bytes.len()).any(|at| deep_combinator_len(&bytes[at..]) > 0)
+}
 
-        // Parts before :host should NOT be scoped
-        // Parts after :host SHOULD be scoped
-        // So we mark that we've seen host
-        ctx.update_on_host_found();
+/// Find the next combinator separator at or after byte `from`, matching
+/// `/( |>|\+|~(?!=))(?!<closes an enclosing paren>)\s*/g`, plus (from byte
+/// `other_whitespace_from` on) a newline, tab, carriage return or form feed,
+/// which is reported as a space.
+/// Returns its start, the separator character and the end of the trailing
+/// whitespace.
+fn find_combinator_separator(
+    selector: &str,
+    from: usize,
+    other_whitespace_from: usize,
+) -> Option<(usize, char, usize)> {
+    let bytes = selector.as_bytes();
+    (from..bytes.len()).find_map(|at| {
+        let b = bytes[at];
+        let separator = match b {
+            b' ' | b'>' | b'+' => b,
+            b'~' if bytes.get(at + 1) != Some(&b'=') => b,
+            b'\n' | b'\t' | b'\r' | b'\x0C' if at >= other_whitespace_from => b' ',
+            _ => return None,
+        };
+        if closes_enclosing_paren(selector, at + 1) {
+            return None;
+        }
+        let rest = &selector[at + 1..];
+        let end = selector.len() - rest.trim_start_matches(is_js_space).len();
+        Some((at, char::from(separator), end))
+    })
+}
 
-        // Check if what follows is a pseudo-selector directly attached (no combinator)
-        let after_trimmed = after_host.trim_start();
-        if after_trimmed.is_empty() {
-            // Handle any content before :host - it should NOT be scoped
-            if before_host.is_empty() {
-                return selector.to_string();
-            }
-            // Return before (unscoped) + host
-            return selector.to_string();
-        }
-
-        // If after_host starts with a pseudo-selector (: but not preceded by a combinator),
-        // it's directly attached to the host and shouldn't be scoped
-        let first_char = after_trimmed.chars().next();
-        if first_char == Some(':') {
-            // Check if there's a combinator somewhere after the pseudo-selector
-            let parts = split_by_combinators(after_trimmed);
-            if parts.len() == 1 && parts[0].1.is_empty() {
-                // Only one part with no combinator - it's all pseudo-selectors on the host
-                return selector.to_string();
-            }
+/// Whether `s` contains a `SafeSelector` escape placeholder (`/__esc-ph-(\d+)__/`).
+fn has_escape_placeholder(s: &str) -> bool {
+    s.match_indices("__esc-ph-").any(|(at, m)| {
+        let rest = &s[at + m.len()..];
+        let digits = rest.bytes().take_while(u8::is_ascii_digit).count();
+        digits > 0 && rest[digits..].starts_with("__")
+    })
+}
 
-            // There are combinators - scope everything after the first combinator
-            let mut scoped_after = String::new();
-            let mut found_combinator = false;
-            for (part, combinator) in parts {
-                if !found_combinator {
-                    // First part (pseudo-selector attached to host) - don't scope
-                    scoped_after.push_str(part);
-                    if !combinator.is_empty()
-                        && combinator.chars().any(|c| {
-                            c == ' '
-                                || c == '\n'
-                                || c == '\t'
-                                || c == '\r'
-                                || c == '>'
-                                || c == '+'
-                                || c == '~'
-                        })
-                    {
-                        found_combinator = true;
-                    }
-                    scoped_after.push_str(&normalize_combinator_with_context(combinator, part));
-                } else {
-                    // Parts after combinator - scope them
-                    let trimmed = part.trim();
-                    if !trimmed.is_empty() {
-                        scoped_after.push_str(&scope_simple_selector(trimmed, ctx.content_attr));
-                    }
-                    if !combinator.is_empty() {
-                        scoped_after.push_str(&normalize_combinator_with_context(combinator, part));
-                    }
-                }
-            }
-            return format!("{}{}", before_and_host, scoped_after);
+/// Find `:where(` or `:is(` (ignoring case) at or after byte `from`.
+/// Returns the match start and the offset just past its `(`.
+fn find_where_or_is(s: &str, from: usize) -> Option<(usize, usize)> {
+    let bytes = s.as_bytes();
+    (from..bytes.len()).find_map(|at| {
+        if bytes[at] != b':' {
+            None
+        } else if starts_with_ignore_ascii_case(s, at, ":where(") {
+            Some((at, at + 7))
+        } else if starts_with_ignore_ascii_case(s, at, ":is(") {
+            Some((at, at + 4))
+        } else {
+            None
+        }
+    })
+}
+
+/// `s.match(/([^:]*)(:*)([\s\S]*)/)` reassembled as `before + attr + colons + after`.
+fn insert_before_first_colon(s: &str, attr: &str) -> String {
+    let at = s.find(':').unwrap_or(s.len());
+    format!("{}{attr}{}", &s[..at], &s[at..])
+}
+
+/// Whether some host marker in `part` is outside parentheses: the
+/// `-shadowcsshost-no-combinator(?![^(]*\))` test of `_scopeSelectorPart`
+/// (a marker is inside when a `)` comes before the next `(`).
+fn has_host_marker_outside_parens(part: &str) -> bool {
+    part.match_indices(POLYFILL_HOST_NO_COMBINATOR).any(|(at, m)| {
+        let rest = &part[at + m.len()..];
+        match (rest.find('('), rest.find(')')) {
+            (_, None) => true,
+            (None, Some(_)) => false,
+            (Some(open), Some(close)) => open < close,
+        }
+    })
+}
+
+/// Port of `_applySimpleSelectorScope` for a part holding a host marker:
+/// each `-shadowcsshost-no-combinator<compound>` becomes the compound with
+/// `[host]` inserted before its first `:` or `)`, then any remaining
+/// `-shadowcsshost` becomes `[host]`.
+fn apply_simple_selector_scope(selector: &str, host_selector: &str) -> String {
+    let replace_by = format!("[{host_selector}]");
+    let mut result = selector.to_string();
+    // `_polyfillHostNoCombinatorRe`: `/-shadowcsshost-no-combinator([^\s,]*)/`
+    while let Some(at) = result.find(POLYFILL_HOST_NO_COMBINATOR) {
+        let compound_start = at + POLYFILL_HOST_NO_COMBINATOR.len();
+        let compound_end = result[compound_start..]
+            .find(|c: char| is_js_space(c) || c == ',')
+            .map_or(result.len(), |i| compound_start + i);
+        let compound = &result[compound_start..compound_end];
+        // `/([^:\)]*)(:*)(.*)/` -> `before + replaceBy + colon + after`
+        let split = compound.find([':', ')']).unwrap_or(compound.len());
+        let replaced = format!("{}{replace_by}{}", &compound[..split], &compound[split..]);
+        result.replace_range(at..compound_end, &replaced);
+    }
+    replace_ignore_ascii_case(&result, POLYFILL_HOST, &replace_by, |_| true)
+}
+
+/// Scope the selector of one rule like `_scopeSelectors` does.
+///
+/// `raw` is the text between the previous rule and this rule's `{`. Like
+/// `processRules`' `_ruleRe`, it is split into rules at `;`, and each rule
+/// keeps its leading whitespace and comments and its trailing whitespace
+/// around the selector. Only the last one owns the block; the rules before it
+/// have none and are only scoped before v22.2.
+fn scope_rule_selector(raw: &str, scoper: &mut SelectorScoper) -> String {
+    let segments = split_outside_strings(raw, b';');
+    let mut result = String::with_capacity(raw.len() * 2);
+    let last = segments.len() - 1;
+    for (i, segment) in segments.into_iter().enumerate() {
+        if i > 0 {
+            result.push(';');
+        }
+        if i < last && scoper.css_nesting {
+            result.push_str(segment);
+        } else {
+            result.push_str(&scope_one_rule_selector(segment, scoper));
         }
+    }
+    result
+}
 
-        // Normal case: what follows is not a pseudo-selector, scope it
-        let parts = split_by_combinators(after_host);
-        let mut scoped_after = String::new();
-        for (part, combinator) in parts {
-            let trimmed = part.trim();
-            if !trimmed.is_empty() {
-                scoped_after.push_str(&scope_simple_selector(trimmed, ctx.content_attr));
-            }
-            if !combinator.is_empty() {
-                scoped_after.push_str(&normalize_combinator_with_context(combinator, part));
-            }
+/// Scope the selector inside `raw` (`_ruleRe`'s
+/// `(\s*(?:%COMMENT%\s*)*)([^;\{\}]+?)(\s*)`), keeping the text around it.
+fn scope_one_rule_selector(raw: &str, scoper: &mut SelectorScoper) -> String {
+    let mut lead = 0;
+    loop {
+        lead = raw.len() - raw[lead..].trim_start_matches(is_js_space).len();
+        match find_comment_placeholder(raw, lead) {
+            Some((range, _)) if range.start == lead => lead = range.end,
+            _ => break,
         }
-
-        format!("{}{}", before_and_host, scoped_after)
-    } else {
-        selector.to_string()
+    }
+    let end = raw.trim_end_matches(is_js_space).len();
+    if lead < end {
+        let selector = &raw[lead..end];
+        let scoped = if selector.contains(['"', '\'']) {
+            unescape_in_strings(&scoper.scope_selector(&escape_in_strings(selector), true))
+        } else {
+            scoper.scope_selector(selector, true)
+        };
+        return format!("{}{scoped}{}", &raw[..lead], &raw[end..]);
+    }
+    // Only whitespace and comments: the regex backtracks so that the selector
+    // is the last whitespace character. A trailing comment placeholder is left
+    // alone (see `scope_pseudo_function_aware_part`).
+    match raw.char_indices().next_back() {
+        Some((at, c)) if is_js_space(c) => {
+            let scoped = scoper.scope_selector(&raw[at..], true);
+            format!("{}{scoped}", &raw[..at])
+        }
+        _ => raw.to_string(),
     }
 }
 
-/// Find the start position of a pseudo-element (::).
-fn find_pseudo_element_start(s: &str) -> Option<usize> {
-    let char_indices: Vec<(usize, char)> = s.char_indices().collect();
-    let mut i = 0;
-    let mut in_brackets: u32 = 0;
-
-    while i < char_indices.len() {
-        let (byte_pos, ch) = char_indices[i];
-        match ch {
-            '[' => in_brackets += 1,
-            ']' => in_brackets = in_brackets.saturating_sub(1),
-            ':' if in_brackets == 0
-                && i + 1 < char_indices.len()
-                && char_indices[i + 1].1 == ':' =>
-            {
-                return Some(byte_pos);
-            }
-            _ => {}
+/// For each byte of `css`, whether it is inside a quoted string the way
+/// `escapeInStrings` sees it (a backslash skips the next character; the
+/// quotes themselves are outside).
+fn string_mask(css: &str) -> Vec<bool> {
+    let bytes = css.as_bytes();
+    let mut mask = vec![false; bytes.len()];
+    let mut quote = None;
+    let mut at = 0;
+    while at < bytes.len() {
+        let b = bytes[at];
+        if b == b'\\' {
+            at += 2;
+            continue;
         }
-        i += 1;
+        match quote {
+            Some(q) if b == q => quote = None,
+            Some(_) => mask[at] = true,
+            None if b == b'"' || b == b'\'' => quote = Some(b),
+            None => {}
+        }
+        at += 1;
     }
-    None
+    mask
 }
 
-/// Find the start position of a pseudo-class (:), including pseudo-functions.
-/// The caller decides how to handle pseudo-functions vs regular pseudo-classes.
-fn find_pseudo_class_start(s: &str) -> Option<usize> {
-    let char_indices: Vec<(usize, char)> = s.char_indices().collect();
-    let mut i = 0;
-    let mut in_brackets: u32 = 0;
-
-    while i < char_indices.len() {
-        let (byte_pos, ch) = char_indices[i];
-        match ch {
-            '[' => in_brackets += 1,
-            ']' => in_brackets = in_brackets.saturating_sub(1),
-            ':' if in_brackets == 0 => {
-                // Check it's not :: (pseudo-element) - those are handled separately
-                if i + 1 < char_indices.len() && char_indices[i + 1].1 == ':' {
-                    return None;
-                }
-                return Some(byte_pos);
-            }
-            _ => {}
+const SEMI_IN_PLACEHOLDER: &str = "%SEMI_IN_PLACEHOLDER%";
+const COMMA_IN_PLACEHOLDER: &str = "%COMMA_IN_PLACEHOLDER%";
+const COLON_IN_PLACEHOLDER: &str = "%COLON_IN_PLACEHOLDER%";
+
+/// Port of `escapeInStrings` for a selector: `processRules` hides the `;`, `,`
+/// and `:` inside quoted strings, so `a[title="a,b"]` is not split at the comma.
+fn escape_in_strings(selector: &str) -> String {
+    let mask = string_mask(selector);
+    let mut escaped = String::with_capacity(selector.len());
+    for (at, c) in selector.char_indices() {
+        match c {
+            ';' if mask[at] => escaped.push_str(SEMI_IN_PLACEHOLDER),
+            ',' if mask[at] => escaped.push_str(COMMA_IN_PLACEHOLDER),
+            ':' if mask[at] => escaped.push_str(COLON_IN_PLACEHOLDER),
+            _ => escaped.push(c),
         }
-        i += 1;
     }
-    None
+    escaped
 }
 
-/// Result of finding a pseudo-function match.
-struct PseudoFunctionMatch {
-    /// Start position of the match (at the `:`)
-    start: usize,
-    /// End position of the match (after the `(`)
-    end: usize,
+/// Port of `unescapeInStrings`, undoing [`escape_in_strings`].
+fn unescape_in_strings(selector: &str) -> String {
+    selector
+        .replace(COMMA_IN_PLACEHOLDER, ",")
+        .replace(SEMI_IN_PLACEHOLDER, ";")
+        .replace(COLON_IN_PLACEHOLDER, ":")
 }
 
-/// Find `:where(` or `:is(` pattern starting from a given position.
-/// Returns the match info if found, or None.
-fn find_where_or_is(s: &str, start_from: usize) -> Option<PseudoFunctionMatch> {
-    let bytes = s.as_bytes();
-    let len = bytes.len();
-    let mut i = start_from;
+/// Split `css` at every `delimiter` outside quoted strings.
+fn split_outside_strings(css: &str, delimiter: u8) -> Vec<&str> {
+    let mask = string_mask(css);
+    let mut parts = Vec::new();
+    let mut start = 0;
+    for (at, &b) in css.as_bytes().iter().enumerate() {
+        if b == delimiter && !mask[at] {
+            parts.push(&css[start..at]);
+            start = at + 1;
+        }
+    }
+    parts.push(&css[start..]);
+    parts
+}
 
-    while i < len {
-        if bytes[i] == b':' {
-            // Check for `:where(`
-            if i + 7 <= len && &s[i..i + 7] == ":where(" {
-                return Some(PseudoFunctionMatch { start: i, end: i + 7 });
-            }
-            // Check for `:is(`
-            if i + 4 <= len && &s[i..i + 4] == ":is(" {
-                return Some(PseudoFunctionMatch { start: i, end: i + 4 });
+/// Whether a rule body holds a nested block (`rule.content.includes('{')`,
+/// braces inside strings excluded).
+fn has_nested_block(body: &str) -> bool {
+    let mask = string_mask(body);
+    body.bytes().enumerate().any(|(at, b)| b == b'{' && !mask[at])
+}
+
+/// Port of `_stripScopingSelectors`, used for bodies that cannot be scoped
+/// (`@font-face`, `@page` and, from v22.2, rule bodies).
+///
+/// In every rule of `css` (nested blocks are left alone) `>>>`, `/deep/` and
+/// `::ng-deep` become a space, and then so does the first host marker
+/// together with the compound selector attached to it.
+fn strip_scoping_selectors(css: &str) -> String {
+    let mask = string_mask(css);
+    let bytes = css.as_bytes();
+    let mut result = String::with_capacity(css.len());
+    let mut depth = 0u32;
+    let mut segment_start = 0;
+    let mut at = 0;
+    while at < bytes.len() {
+        let b = bytes[at];
+        if b == b'\\' {
+            at += 2;
+            continue;
+        }
+        if !mask[at] {
+            match b {
+                b'{' => {
+                    if depth == 0 {
+                        result.push_str(&strip_rule_scoping(
+                            &css[segment_start..at],
+                            &mask[segment_start..at],
+                        ));
+                        segment_start = at;
+                    }
+                    depth += 1;
+                }
+                b'}' if depth > 0 => {
+                    depth -= 1;
+                    if depth == 0 {
+                        result.push_str(&css[segment_start..=at]);
+                        segment_start = at + 1;
+                    }
+                }
+                b'}' | b';' if depth == 0 => {
+                    result.push_str(&strip_rule_scoping(
+                        &css[segment_start..at],
+                        &mask[segment_start..at],
+                    ));
+                    segment_start = at;
+                }
+                _ => {}
             }
         }
-        i += 1;
+        at += 1;
     }
-    None
+    if depth == 0 {
+        result.push_str(&strip_rule_scoping(&css[segment_start..], &mask[segment_start..]));
+    } else {
+        result.push_str(&css[segment_start..]);
+    }
+    result
 }
 
-/// Check if a selector is a keyframe selector (from, to, or percentage).
-fn is_keyframe_selector(selector: &str) -> bool {
-    let trimmed = selector.trim();
-    if trimmed == "from" || trimmed == "to" {
-        return true;
+/// `rule.selector.replace(_shadowDeepSelectors, ' ').replace(_polyfillHostNoCombinatorRe, ' ')`
+/// on one rule's text. `mask` marks the bytes inside strings, where Angular has
+/// replaced `:` and `,` with placeholders, so `::ng-deep` is not matched there
+/// and `,` does not end the host marker's compound selector.
+fn strip_rule_scoping(rule: &str, mask: &[bool]) -> String {
+    let bytes = rule.as_bytes();
+    let mut stripped = String::with_capacity(rule.len());
+    let mut stripped_mask = Vec::with_capacity(rule.len());
+    let mut copied = 0;
+    let mut at = 0;
+    while at < bytes.len() {
+        let len = match deep_combinator_len(&bytes[at..]) {
+            9 if mask[at] || mask[at + 1] => 0,
+            len => len,
+        };
+        if len == 0 {
+            at += 1;
+            continue;
+        }
+        stripped.push_str(&rule[copied..at]);
+        stripped_mask.extend_from_slice(&mask[copied..at]);
+        stripped.push(' ');
+        stripped_mask.push(false);
+        at += len;
+        copied = at;
     }
-    // Check for percentage (e.g., "50%", "100%")
-    if trimmed.ends_with('%') {
-        let without_percent = &trimmed[..trimmed.len() - 1];
-        return without_percent.parse::<f64>().is_ok();
+    stripped.push_str(&rule[copied..]);
+    stripped_mask.extend_from_slice(&mask[copied..]);
+
+    if let Some(at) = stripped.find(POLYFILL_HOST_NO_COMBINATOR) {
+        let compound_start = at + POLYFILL_HOST_NO_COMBINATOR.len();
+        let compound_end = stripped[compound_start..]
+            .char_indices()
+            .find(|&(i, c)| is_js_space(c) || (c == ',' && !stripped_mask[compound_start + i]))
+            .map_or(stripped.len(), |(i, _)| compound_start + i);
+        stripped.replace_range(at..compound_end, " ");
     }
-    false
+    stripped
 }
 
 // ============================================================================
@@ -3140,147 +2533,6 @@ fn parse_polyfill_unscoped_rule(s: &str) -> Option<(String, String, usize)> {
     Some((selector, body, body_end + 1))
 }
 
-/// Strip scoping selectors (::ng-deep, >>>, /deep/, :host) from CSS text.
-///
-/// This is used for @font-face and @page rules where these selectors should
-/// be removed entirely rather than scoped.
-fn strip_scoping_selectors(css: &str, host_attr: &str) -> String {
-    // Strip ::ng-deep, >>>, /deep/
-    let result = strip_deep_combinators(css);
-
-    // Strip polyfill host markers (-shadowcsshost-no-combinator and -shadowcsshost)
-    // The -no-combinator variant must be replaced first since it's longer
-    let mut result = result.replace(POLYFILL_HOST_NO_COMBINATOR, " ").replace(POLYFILL_HOST, " ");
-
-    // Strip :host (with optional selector in parens)
-    // If host_attr is provided, :host may have already been converted to [host_attr]
-    if !host_attr.is_empty() {
-        let host_marker = format!("[{}]", host_attr);
-        result = result.replace(&host_marker, " ");
-    }
-
-    // Also strip unconverted :host patterns
-    result = strip_host_patterns(&result);
-
-    // Clean up multiple spaces
-    collapse_multiple_spaces(&result)
-}
-
-/// Strip deep combinators (::ng-deep, >>>, /deep/) from a string, replacing with space.
-fn strip_deep_combinators(s: &str) -> String {
-    let mut result = String::with_capacity(s.len());
-    let bytes = s.as_bytes();
-    let len = bytes.len();
-    let mut i = 0;
-
-    while i < len {
-        // Check for `::ng-deep`
-        if i + 9 <= len && &s[i..i + 9] == "::ng-deep" {
-            result.push(' ');
-            i += 9;
-            // Skip trailing whitespace
-            while i < len && bytes[i].is_ascii_whitespace() {
-                i += 1;
-            }
-            continue;
-        }
-
-        // Check for `>>>`
-        if i + 3 <= len && &s[i..i + 3] == ">>>" {
-            result.push(' ');
-            i += 3;
-            // Skip trailing whitespace
-            while i < len && bytes[i].is_ascii_whitespace() {
-                i += 1;
-            }
-            continue;
-        }
-
-        // Check for `/deep/`
-        if i + 6 <= len && &s[i..i + 6] == "/deep/" {
-            result.push(' ');
-            i += 6;
-            // Skip trailing whitespace
-            while i < len && bytes[i].is_ascii_whitespace() {
-                i += 1;
-            }
-            continue;
-        }
-
-        i += push_utf8_char(&mut result, s, i);
-    }
-
-    result
-}
-
-/// Strip :host patterns, including :host() with optional content in parens.
-fn strip_host_patterns(s: &str) -> String {
-    let mut result = String::with_capacity(s.len());
-    let bytes = s.as_bytes();
-    let len = bytes.len();
-    let mut i = 0;
-
-    while i < len {
-        // Check for `:host`
-        if i + 5 <= len && &s[i..i + 5] == ":host" {
-            let after = i + 5;
-            // Check if followed by `(`
-            if after < len && bytes[after] == b'(' {
-                // Find matching close paren
-                let mut paren_depth = 1;
-                let mut j = after + 1;
-                while j < len && paren_depth > 0 {
-                    if bytes[j] == b'(' {
-                        paren_depth += 1;
-                    } else if bytes[j] == b')' {
-                        paren_depth -= 1;
-                    }
-                    j += 1;
-                }
-                result.push(' ');
-                i = j;
-                // Skip trailing whitespace
-                while i < len && bytes[i].is_ascii_whitespace() {
-                    i += 1;
-                }
-            } else {
-                // Just `:host` without parens
-                result.push(' ');
-                i = after;
-                // Skip trailing whitespace
-                while i < len && bytes[i].is_ascii_whitespace() {
-                    i += 1;
-                }
-            }
-            continue;
-        }
-
-        i += push_utf8_char(&mut result, s, i);
-    }
-
-    result
-}
-
-/// Collapse multiple consecutive spaces into a single space.
-fn collapse_multiple_spaces(s: &str) -> String {
-    let mut result = String::with_capacity(s.len());
-    let mut prev_was_space = false;
-
-    for c in s.chars() {
-        if c == ' ' {
-            if !prev_was_space {
-                result.push(' ');
-                prev_was_space = true;
-            }
-        } else {
-            result.push(c);
-            prev_was_space = false;
-        }
-    }
-
-    result
-}
-
 /// Remove polyfill-unscoped-rule blocks from CSS text.
 ///
 /// This is called after extracting the unscoped rules.
@@ -3410,8 +2662,9 @@ mod tests {
     #[test]
     fn test_strip_scoping_selectors() {
         // Test the strip function directly
-        let result = strip_scoping_selectors(" ::ng-deep @top-left { content: \"Hamlet\";}", "h");
-        assert!(result.starts_with(" "), "Expected leading space, got: {:?}", result);
+        // `::ng-deep` becomes a space; the space after it and the block stay.
+        let result = strip_scoping_selectors(" ::ng-deep @top-left { content: \"Hamlet\";}");
+        assert_eq!(result, "   @top-left { content: \"Hamlet\";}");
     }
 
     #[test]
@@ -3553,9 +2806,9 @@ mod tests {
         );
         assert_eq!(
             shim_css_text("x::content y {}", "contenta", ""),
-            "x[contenta]::content y[contenta] {}"
+            "x[contenta]::content   y[contenta] {}"
         );
-        assert_eq!(shim_v21("x::content y {}", "contenta", ""), "x[contenta] y[contenta] {}");
+        assert_eq!(shim_v21("x::content y {}", "contenta", ""), "x[contenta]   y[contenta] {}");
     }
 
     // ============================================================================
diff --git a/crates/oxc_angular_compiler/tests/shadow_css_test.rs b/crates/oxc_angular_compiler/tests/shadow_css_test.rs
index cdaa6c6bd..dca8e66fb 100644
--- a/crates/oxc_angular_compiler/tests/shadow_css_test.rs
+++ b/crates/oxc_angular_compiler/tests/shadow_css_test.rs
@@ -615,9 +615,9 @@ fn test_host_with_element() {
 fn test_host_context_single() {
     // Single :host-context() should generate two variants
     let result = shim_with_host(":host-context(.dark) {}", "contenta", "hosta");
-    // Generates: .dark[hosta], .dark [hosta]
-    assert!(result.contains(".dark[hosta]"));
-    assert!(result.contains(".dark [hosta]"));
+    // Generates: .dark[hosta], .dark [hosta]. The descendant form keeps the
+    // spaces Angular's combinator split emits.
+    assert_eq!(result, ".dark[hosta], .dark   [hosta] {}");
 }
 
 #[test]
@@ -625,16 +625,13 @@ fn test_host_context_multiple_permutations() {
     // Multiple :host-context() should generate permutations
     let result = shim_with_host(":host-context(.one):host-context(.two) {}", "contenta", "hosta");
 
-    // Should generate 3 permutations x 2 variants = 6 total
-    // Compound: .one.two
-    assert!(result.contains(".one.two[hosta]"));
-    assert!(result.contains(".one.two [hosta]"));
-
-    // .one ancestor of .two
-    assert!(result.contains(".one .two[hosta]") || result.contains(".one .two [hosta]"));
-
-    // .two ancestor of .one
-    assert!(result.contains(".two .one[hosta]") || result.contains(".two .one [hosta]"));
+    // 3 permutations (.one.two, .one .two, .two .one) x 2 variants, exactly
+    // as `@angular/compiler` 22.2.2 emits them.
+    assert_eq!(
+        result,
+        ".one.two[hosta], .one.two   [hosta], .one   .two[hosta], .one   .two   [hosta], \
+         .two   .one[hosta], .two   .one   [hosta] {}"
+    );
 }
 
 #[test]
@@ -1559,7 +1556,10 @@ fn test_legacy_polyfills_follow_angular_version() {
         "#menu > .bar { color: blue; }"
     );
 
-    assert_eq!(ng_shim("x::content y {}"), "x[_ngcontent-%COMP%]::content y[_ngcontent-%COMP%] {}");
+    assert_eq!(
+        ng_shim("x::content y {}"),
+        "x[_ngcontent-%COMP%]::content   y[_ngcontent-%COMP%] {}"
+    );
     assert_css_eq!(
         shim_css_text_for_version("x::shadow > y {}", NG_CONTENT, NG_HOST, V21),
         "x[_ngcontent-%COMP%] > y[_ngcontent-%COMP%] {}"
@@ -1574,7 +1574,7 @@ fn test_legacy_polyfills_follow_angular_version() {
     let rc_0 = AngularVersion::parse("22.0.0-rc.0");
     assert_eq!(
         shim_css_text_for_version("x::content y {}", NG_CONTENT, NG_HOST, rc_0),
-        "x[_ngcontent-%COMP%]::content y[_ngcontent-%COMP%] {}"
+        "x[_ngcontent-%COMP%]::content   y[_ngcontent-%COMP%] {}"
     );
 }
 
@@ -1583,10 +1583,160 @@ fn test_finalize_component_style_threads_angular_version() {
     let css = "x::content y {}";
     assert_eq!(
         finalize_component_style(css, true, NG_CONTENT, NG_HOST, false, None),
-        "x[_ngcontent-%COMP%]::content y[_ngcontent-%COMP%] {}"
+        "x[_ngcontent-%COMP%]::content   y[_ngcontent-%COMP%] {}"
     );
     assert_css_eq!(
         finalize_component_style(css, true, NG_CONTENT, NG_HOST, false, V21),
         "x[_ngcontent-%COMP%] y[_ngcontent-%COMP%] {}"
     );
 }
+
+// ============================================================================
+// Selector whitespace, exactly as `@angular/compiler` 22.2.2 (and 22.1.8 where
+// the versions differ) emits it. `_applySelectorScope` writes each part as
+// `${scopedPart} ${separator} ` and `_scopeSelector` joins the parts around a
+// `::ng-deep` with a space, so runs of spaces are part of Angular's output.
+// ============================================================================
+
+/// The last release before `ShadowCss` gained its CSS nesting support.
+const V22_1: Option<AngularVersion> = Some(AngularVersion::new(22, 1, 8));
+
+fn ng_shim_for(css: &str, version: Option<AngularVersion>) -> String {
+    shim_css_text_for_version(css, NG_CONTENT, NG_HOST, version)
+}
+
+#[test]
+fn test_combinators_keep_angular_spacing() {
+    for version in [None, V22_1] {
+        assert_eq!(
+            ng_shim_for("one two {}", version),
+            "one[_ngcontent-%COMP%]   two[_ngcontent-%COMP%] {}"
+        );
+        assert_eq!(
+            ng_shim_for("one > two {}", version),
+            "one[_ngcontent-%COMP%]    > two[_ngcontent-%COMP%] {}"
+        );
+        assert_eq!(
+            ng_shim_for("one + two {} one ~ two {}", version),
+            "one[_ngcontent-%COMP%]    + two[_ngcontent-%COMP%] {} \
+             one[_ngcontent-%COMP%]    ~ two[_ngcontent-%COMP%] {}"
+        );
+        assert_eq!(
+            ng_shim_for("li:nth-child(2n + 1) a {}", version),
+            "li[_ngcontent-%COMP%]:nth-child(2n + 1)   a[_ngcontent-%COMP%] {}"
+        );
+        // A space ending a hex escape is not a combinator.
+        assert_eq!(ng_shim_for(".\\fc ber {}", version), ".\\fc ber[_ngcontent-%COMP%] {}");
+    }
+}
+
+#[test]
+fn test_deep_combinators_keep_angular_spacing() {
+    assert_eq!(
+        ng_shim("x >>> y {} x /deep/ y {} x ::ng-deep y {}"),
+        "x[_ngcontent-%COMP%]     y {} x[_ngcontent-%COMP%]     y {} x[_ngcontent-%COMP%]     y {}"
+    );
+    assert_eq!(ng_shim(":host ::ng-deep .x {}"), "[_nghost-%COMP%]     .x {}");
+}
+
+#[test]
+fn test_selector_list_keeps_whitespace_around_commas() {
+    // `_selectorSplitRe` only takes one space on each side of the comma.
+    assert_eq!(ng_shim(".foo,\n.bar {}"), ".foo[_ngcontent-%COMP%], \n.bar[_ngcontent-%COMP%] {}");
+    assert_eq!(
+        ng_shim(".a , .b,.c {}"),
+        ".a[_ngcontent-%COMP%], .b[_ngcontent-%COMP%], .c[_ngcontent-%COMP%] {}"
+    );
+    // A comma inside a string does not split the list.
+    assert_eq!(
+        ng_shim("a[title=\"a,b\"], c {}"),
+        "a[title=\"a,b\"][_ngcontent-%COMP%], c[_ngcontent-%COMP%] {}"
+    );
+}
+
+#[test]
+fn test_host_context_permutations_in_angular_order() {
+    assert_eq!(
+        ng_shim(":host-context(.X):host-context(.Y):host-context(.Z) {}"),
+        ".X.Y.Z[_nghost-%COMP%], .X.Y.Z   [_nghost-%COMP%], .X.Y   .Z[_nghost-%COMP%], \
+         .X.Y   .Z   [_nghost-%COMP%], .X.Z   .Y[_nghost-%COMP%], .X.Z   .Y   [_nghost-%COMP%], \
+         .X   .Y.Z[_nghost-%COMP%], .X   .Y.Z   [_nghost-%COMP%], .X   .Y   .Z[_nghost-%COMP%], \
+         .X   .Y   .Z   [_nghost-%COMP%], .X   .Z   .Y[_nghost-%COMP%], .X   .Z   .Y   [_nghost-%COMP%], \
+         .Y.Z   .X[_nghost-%COMP%], .Y.Z   .X   [_nghost-%COMP%], .Y   .Z   .X[_nghost-%COMP%], \
+         .Y   .Z   .X   [_nghost-%COMP%], .Z   .Y   .X[_nghost-%COMP%], .Z   .Y   .X   [_nghost-%COMP%] {}"
+    );
+    assert_eq!(
+        ng_shim(":host-context(.a) .b, .c {}"),
+        ".a[_nghost-%COMP%]   .b[_ngcontent-%COMP%], .a   [_nghost-%COMP%]   .b[_ngcontent-%COMP%], \
+         .c[_ngcontent-%COMP%] {}"
+    );
+    assert_eq!(
+        ng_shim(":where(:host-context(.a)) {}"),
+        ":where(.a[_nghost-%COMP%]), :where(.a   [_nghost-%COMP%]) {}"
+    );
+}
+
+#[test]
+fn test_host_matches_case_insensitively() {
+    assert_eq!(
+        ng_shim(":HOST(.a) :Host-Context(.b) {}"),
+        ".a[_nghost-%COMP%]   .b[_nghost-%COMP%], .b   [_nghost-%COMP%] {}"
+    );
+    // A selector list inside `:host()` is put back as a literal `:host(...)`.
+    assert_eq!(
+        ng_shim(":host(.a, .b) .c {}"),
+        "[_ngcontent-%COMP%]:host(.a, .b)   .c[_ngcontent-%COMP%] {}"
+    );
+}
+
+#[test]
+fn test_css_nesting_era_selectors() {
+    // v22.2 leaves `&` and rules without a block unscoped.
+    assert_eq!(
+        ng_shim("& .a {} .b & {}"),
+        "&   .a[_ngcontent-%COMP%] {} .b[_ngcontent-%COMP%]   & {}"
+    );
+    assert_eq!(
+        ng_shim_for("& .a {} .b & {}", V22_1),
+        "&[_ngcontent-%COMP%]   .a[_ngcontent-%COMP%] {} .b[_ngcontent-%COMP%]   &[_ngcontent-%COMP%] {}"
+    );
+    assert_eq!(ng_shim(".a; .b {}"), ".a; .b[_ngcontent-%COMP%] {}");
+    assert_eq!(ng_shim_for(".a; .b {}", V22_1), ".a[_ngcontent-%COMP%]; .b[_ngcontent-%COMP%] {}");
+}
+
+#[test]
+fn test_css_nesting_era_strips_rule_bodies() {
+    // v22.2 strips the host marker and deep combinators from a rule body.
+    let css = ".a { content: \":host.foo .bar\"; color: red; }";
+    assert_eq!(ng_shim(css), ".a[_ngcontent-%COMP%] { content: \"  .bar\"; color: red; }");
+    assert_eq!(
+        ng_shim_for(css, V22_1),
+        ".a[_ngcontent-%COMP%] { content: \"-shadowcsshost-no-combinator.foo .bar\"; color: red; }"
+    );
+    let css = ".a ::ng-deep .b { content: \">>> x\"; }";
+    assert_eq!(ng_shim(css), ".a[_ngcontent-%COMP%]     .b { content: \"  x\"; }");
+    assert_eq!(ng_shim_for(css, V22_1), ".a[_ngcontent-%COMP%]     .b { content: \">>> x\"; }");
+    // `22.2.0-next.1` predates the change, `next.2` has it.
+    let next_1 = AngularVersion::parse("22.2.0-next.1");
+    let next_2 = AngularVersion::parse("22.2.0-next.2");
+    assert_eq!(ng_shim_for(css, next_1), ng_shim_for(css, V22_1));
+    assert_eq!(ng_shim_for(css, next_2), ng_shim(css));
+    // `@font-face` bodies are stripped in every version.
+    for version in [None, V22_1] {
+        assert_eq!(
+            ng_shim_for("@font-face { :host ::ng-deep font-family {} }", version),
+            "@font-face {     font-family {} }"
+        );
+    }
+}
+
+#[test]
+fn test_newline_combinator_scopes_both_sides() {
+    // Oxc deviation: Angular only splits on a space and emits `.foo\n.bar[c]`
+    // and `[h]:hover\n.child`, leaving `.foo` and `.child` unscoped.
+    assert_eq!(ng_shim(".foo\n.bar {}"), ".foo[_ngcontent-%COMP%]   .bar[_ngcontent-%COMP%] {}");
+    assert_eq!(
+        ng_shim(":host:hover\n.child {}"),
+        "[_nghost-%COMP%]:hover   .child[_ngcontent-%COMP%] {}"
+    );
+}
diff --git a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
index 06f038422..a80bc6f20 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/known-differences.ts
@@ -33,7 +33,6 @@ export interface KnownDifference {
 }
 
 const HOST_ATTRS_ORDER = 'hostAttrs are emitted in a different order'
-const CSS_WS = 'runs of whitespace inside shimmed selectors are collapsed where Angular keeps them'
 const DEBUG_NAME =
   'signal(), input() and the other signal APIs lack the ngDevMode `debugName` argument ngtsc adds to class fields'
 const DOM_ONLY =
@@ -47,7 +46,8 @@ const ALIASED_INJECTABLE =
 
 const NG_MODULE_SCOPE =
   'ɵɵsetNgModuleScope runs unguarded where Angular wraps it in `ngJitMode`: Oxc compiles one file at a time and resolves component dependencies at runtime through the scope it registers, so production builds (ngJitMode = false) still need it'
-const NG_MODULE_SCOPE_ORDER = 'ɵɵsetNgModuleScope is emitted before ɵsetClassMetadata where Angular emits it after'
+const NG_MODULE_SCOPE_ORDER =
+  'ɵɵsetNgModuleScope is emitted before ɵsetClassMetadata where Angular emits it after'
 const DEBUG_INFO_PATH =
   'ɵsetClassDebugInfo filePath is the path Oxc was given (absolute here and in the Vite plugin) where Angular emits it relative to the project root'
 const DEBUG_INFO_LINE =
@@ -203,140 +203,6 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     fields: ['SchemasWithOnPushComponent.ɵcmp'],
     reasons: [DOM_ONLY],
   },
-  'styles/shadow-css-child-combinator': {
-    fields: ['ChildCombinatorComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-deep-combinator': {
-    fields: ['DeepCombinatorComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-descendant-selectors': {
-    fields: ['DescendantSelectorComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-double-where-host-context': {
-    fields: ['DoubleWhereHostContextComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-has-basic': {
-    fields: ['HasBasicComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-has-with-host': {
-    fields: ['HasWithHostComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-host-context-attribute': {
-    fields: ['HostContextAttributeComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-host-context-basic': {
-    fields: ['HostContextBasicComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-host-context-comma-child': {
-    fields: ['HostContextCommaChildComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-host-context-comma-list': {
-    fields: ['HostContextCommaListComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-host-context-double': {
-    fields: ['HostContextDoubleComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-host-context-host-different': {
-    fields: ['HostContextHostDifferentComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-host-context-host-same-element': {
-    fields: ['HostContextHostSameComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-host-context-nested-pseudo': {
-    fields: ['HostContextNestedPseudoComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-host-context-no-selector': {
-    fields: ['HostContextNoSelectorComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-host-context-pseudo-not': {
-    fields: ['HostContextPseudoNotComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-host-context-tag': {
-    fields: ['HostContextTagComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-host-context-triple': {
-    fields: ['HostContextTripleComponent.ɵcmp'],
-    reasons: [':host-context selector permutations are in a different order'],
-  },
-  'styles/shadow-css-host-context-with-descendant': {
-    fields: ['HostContextDescendantComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-host-host-context': {
-    fields: ['HostHostContextComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-host-with-descendant': {
-    fields: ['HostDescendantComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-is-with-host': {
-    fields: ['IsWithHostComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-mixed-host-in-where': {
-    fields: ['MixedHostWhereComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-multiline-selector': {
-    fields: ['MultilineSelectorComponent.ɵcmp'],
-    reasons: ['the newline between selectors in a list is dropped'],
-  },
-  'styles/shadow-css-ng-deep-after-selector': {
-    fields: ['NgDeepAfterSelectorComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-ng-deep-with-host': {
-    fields: ['NgDeepWithHostComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-polyfill-rule': {
-    fields: ['PolyfillRuleComponent.ɵcmp'],
-    reasons: [
-      'Angular 22.2 strips the -shadowcsshost-no-combinator marker left in a rule body (part of its CSS nesting support); Oxc keeps it, as Angular 22.0 does',
-    ],
-  },
-  'styles/shadow-css-shadow-piercing': {
-    fields: ['ShadowPiercingComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-sibling-combinators': {
-    fields: ['SiblingCombinatorComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-where-basic': {
-    fields: ['WhereBasicComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-where-host-context': {
-    fields: ['WhereHostContextComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-where-nested': {
-    fields: ['WhereNestedComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
-  'styles/shadow-css-where-with-host': {
-    fields: ['WhereWithHostComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
   'styles/style-onpush-encapsulation': {
     fields: ['OnPushStyleComponent.ɵcmp'],
     reasons: [DOM_ONLY],
@@ -535,10 +401,6 @@ export const KNOWN_DIFFERENCES: Record<string, KnownDifference> = {
     classes: ['ViewCmp'],
     reasons: [DEBUG_NAME],
   },
-  'templates/case-raw-text': {
-    fields: ['CaseRawTextComponent.ɵcmp'],
-    reasons: [CSS_WS],
-  },
   'templates/ng-arrow-function-dollar-event': {
     fields: [],
     classes: ['NgArrowFunctionDollarEventComponent'],
diff --git a/napi/angular-compiler/e2e/compare/fixtures/styles/shadow-css.fixture.ts b/napi/angular-compiler/e2e/compare/fixtures/styles/shadow-css.fixture.ts
index 77f0329a7..04778dde5 100644
--- a/napi/angular-compiler/e2e/compare/fixtures/styles/shadow-css.fixture.ts
+++ b/napi/angular-compiler/e2e/compare/fixtures/styles/shadow-css.fixture.ts
@@ -1830,4 +1830,68 @@ export class AtSignInValuesComponent {}
     `.trim(),
     expectedFeatures: ['styles:'],
   },
+  {
+    name: 'shadow-css-combinator-spacing',
+    category: 'styles',
+    description:
+      'Every combinator part is written as `${part} ${separator} `, so runs of spaces around combinators and deep combinators are kept',
+    className: 'CombinatorSpacingComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-shadow-css-combinator-spacing',
+  standalone: true,
+  template: \`<div class="a b">Content</div>\`,
+  styles: [\`.a  >  .b {} .c ~ .d, .e + .f {} :host-context(.x) ::ng-deep .y {} .g,.h , .i {}\`],
+  encapsulation: ViewEncapsulation.Emulated,
+})
+export class CombinatorSpacingComponent {}
+    `.trim(),
+    expectedFeatures: ['styles:'],
+  },
+
+  {
+    name: 'shadow-css-rule-body-strip',
+    category: 'styles',
+    description:
+      'Angular 22.2 strips the host marker and deep combinators from a rule body without nested rules',
+    className: 'RuleBodyStripComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-shadow-css-rule-body-strip',
+  standalone: true,
+  template: \`<div class="a b">Content</div>\`,
+  styles: [\`.a { content: ":host.foo .bar"; color: red; } .b ::ng-deep .c { content: ">>> x"; }\`],
+  encapsulation: ViewEncapsulation.Emulated,
+})
+export class RuleBodyStripComponent {}
+    `.trim(),
+    expectedFeatures: ['styles:'],
+  },
+
+  {
+    name: 'shadow-css-nesting-selector',
+    category: 'styles',
+    description: 'Angular 22.2 leaves a lone & and a rule without a block unscoped',
+    className: 'NestingSelectorComponent',
+    type: 'full-transform',
+    sourceCode: `
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-shadow-css-nesting-selector',
+  standalone: true,
+  template: \`<div class="a">Content</div>\`,
+  styles: [\`& .a {} .b & {} .c; .d {}\`],
+  encapsulation: ViewEncapsulation.Emulated,
+})
+export class NestingSelectorComponent {}
+    `.trim(),
+    expectedFeatures: ['styles:'],
+  },
 ]

From fd66b812b44a09bdbca4cac5ab8ad4025546427c Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 19:11:22 +0800
Subject: [PATCH 44/54] refactor(vite): decide HMR vs reload with a Rust
 fingerprint, drop the JS lexer

What:
- New `component_hmr_fingerprint` in the crate (NAPI: sync
  `componentHmrFingerprint(source, filename, classNames)`): one oxc parse,
  then a hash of the whole source with the inside of each literal
  `template` / `styles` value of the named components left out. Classes are
  the top-level ones the transform compiles; the decorator is Angular's
  `@Component` found by its `@angular/core` import (same lookup as the
  transform). A source with parse errors leaves nothing out.
- `TransformResult.hmrFingerprint` (only with `hmr: true`) gives the same
  value from the transform's own parse, for exactly the classes it compiled,
  so the transform hook needs no extra call. It replaces
  `componentDecorators`, which only existed so the JS strip could find the
  decorator spelling.
- The vite plugin caches the fingerprint instead of the stripped source and
  compares it in `handleHotUpdate` and in the `@ng/component` "compiled from
  this source" check. `utils/decorator-fields.ts` (769-line JS tokenizer) and
  its test are deleted; the cases are ported to
  `tests/hmr_fingerprint_test.rs`, plus a vitest file against the binding.

Why:
The JS lexer re-tokenized TypeScript by hand and had known holes: regex
literals (a `/` or quote inside one broke the walk, so every edit reloaded),
and two `@Component`s on one class (it paired the class with the second
one, which the compiler does not take, so edits to the compiled template
reloaded while edits to the dead one hot-updated). The AST has neither
problem. The HMR decision is otherwise the same: same fields (`template`,
`styles`), same "single literal only" rule, same set of classes, and
`templateUrl` / `styleUrl(s)` still reload (changing them changes which
files the component owns, which only a fresh transform records).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/component/hmr_fingerprint.rs          | 190 ++++
 .../oxc_angular_compiler/src/component/mod.rs |   2 +
 .../src/component/transform.rs                |  49 +-
 crates/oxc_angular_compiler/src/lib.rs        |  10 +-
 .../tests/class_decorator_identity_test.rs    |  22 +-
 .../tests/hmr_fingerprint_test.rs             | 566 +++++++++++
 napi/angular-compiler/index.d.ts              |  39 +-
 napi/angular-compiler/index.js                |   2 +
 napi/angular-compiler/src/lib.rs              |  50 +-
 .../test/decorator-fields.test.ts             | 939 ------------------
 .../test/hmr-fingerprint.test.ts              |  83 ++
 napi/angular-compiler/vite-plugin/index.ts    | 145 ++-
 .../vite-plugin/utils/decorator-fields.ts     | 769 --------------
 13 files changed, 1028 insertions(+), 1838 deletions(-)
 create mode 100644 crates/oxc_angular_compiler/src/component/hmr_fingerprint.rs
 create mode 100644 crates/oxc_angular_compiler/tests/hmr_fingerprint_test.rs
 delete mode 100644 napi/angular-compiler/test/decorator-fields.test.ts
 create mode 100644 napi/angular-compiler/test/hmr-fingerprint.test.ts
 delete mode 100644 napi/angular-compiler/vite-plugin/utils/decorator-fields.ts

diff --git a/crates/oxc_angular_compiler/src/component/hmr_fingerprint.rs b/crates/oxc_angular_compiler/src/component/hmr_fingerprint.rs
new file mode 100644
index 000000000..c7e212506
--- /dev/null
+++ b/crates/oxc_angular_compiler/src/component/hmr_fingerprint.rs
@@ -0,0 +1,190 @@
+//! A fingerprint of a component file that ignores its inline template and
+//! styles, for the HMR versus full-reload decision.
+//!
+//! A build tool keeps the fingerprint of each component file it compiled.
+//! When the file changes, it takes the fingerprint again: if the two are
+//! equal, the edit stayed inside the `template:` / `styles:` values of its
+//! components, so an HMR update is enough. Anything else (the class body, an
+//! import, another decorator field) changes the fingerprint, and the page
+//! has to reload.
+//!
+//! The fingerprint covers the whole source text with the inside of those
+//! values left out. Only the components the compiler compiled are looked at
+//! (the caller names them), and only through Angular's own `@Component`, found
+//! by its `@angular/core` import like the transform finds it. A value counts
+//! only when it is one literal, so `'<p/>' + SUFFIX` or `STYLES` stay in the
+//! fingerprint and an edit to them reloads.
+
+use std::hash::{DefaultHasher, Hasher};
+
+use oxc_allocator::Allocator;
+use oxc_ast::ast::{
+    Argument, Class, Declaration, ExportDefaultDeclarationKind, Expression, ObjectPropertyKind,
+    Program, PropertyKey, PropertyKind, Statement,
+};
+use oxc_parser::Parser;
+use oxc_span::{GetSpan, SourceType, Span};
+
+use super::decorator::find_component_decorator;
+use crate::directive::{StringConsts, collect_string_consts};
+
+/// The HMR fingerprint of a component file.
+#[derive(Debug, Default, Clone, PartialEq, Eq)]
+pub struct ComponentHmrFingerprint {
+    /// Hash of the source with every excluded range left out. Two sources
+    /// that differ only inside excluded ranges have the same fingerprint.
+    pub fingerprint: String,
+    /// The class names whose `@Component` was read, in source order.
+    pub components: Vec<String>,
+    /// The ranges left out of the fingerprint, in source order: the inside of
+    /// each `template` / `styles` value, its quotes or brackets excluded.
+    pub excluded: Vec<Span>,
+}
+
+/// Parse `source` and take its HMR fingerprint for the components named in
+/// `class_names` (the ones the transform compiled).
+///
+/// A source with syntax errors excludes nothing: what the parser recovered
+/// is not something to trust with an HMR decision, so any edit that leaves
+/// it broken reloads the page.
+pub fn component_hmr_fingerprint(
+    allocator: &Allocator,
+    path: &str,
+    source: &str,
+    class_names: &[&str],
+) -> ComponentHmrFingerprint {
+    if class_names.is_empty() {
+        return fingerprint_with_exclusions(source, Vec::new(), Vec::new());
+    }
+    let source_type = SourceType::from_path(path).unwrap_or_default();
+    let parser_ret = Parser::new(allocator, source, source_type).parse();
+    if !parser_ret.diagnostics.is_empty() {
+        return fingerprint_with_exclusions(source, Vec::new(), Vec::new());
+    }
+    let consts = collect_string_consts(allocator, &parser_ret.program);
+    hmr_fingerprint_of_program(&parser_ret.program, source, &consts, |name| {
+        class_names.contains(&name)
+    })
+}
+
+/// [`component_hmr_fingerprint`] on an already parsed program. `consts` must
+/// be collected from the same program; `is_compiled` says which class names
+/// to read.
+pub(super) fn hmr_fingerprint_of_program(
+    program: &Program<'_>,
+    source: &str,
+    consts: &StringConsts<'_>,
+    is_compiled: impl Fn(&str) -> bool,
+) -> ComponentHmrFingerprint {
+    let mut components = Vec::new();
+    let mut excluded = Vec::new();
+    for stmt in &program.body {
+        let Some(class) = top_level_class(stmt) else { continue };
+        let Some(id) = &class.id else { continue };
+        if !is_compiled(id.name.as_str()) {
+            continue;
+        }
+        if collect_excluded_ranges(class, consts, &mut excluded) {
+            components.push(id.name.to_string());
+        }
+    }
+    excluded.sort_unstable_by_key(|span| span.start);
+    fingerprint_with_exclusions(source, components, excluded)
+}
+
+/// A class declared at the top level, the places the transform compiles.
+fn top_level_class<'a>(stmt: &'a Statement<'a>) -> Option<&'a Class<'a>> {
+    match stmt {
+        Statement::ClassDeclaration(class) => Some(class),
+        Statement::ExportDefaultDeclaration(export) => match &export.declaration {
+            ExportDefaultDeclarationKind::ClassDeclaration(class) => Some(class),
+            _ => None,
+        },
+        Statement::ExportDeclaration(export) => match &export.declaration {
+            Declaration::ClassDeclaration(class) => Some(class),
+            _ => None,
+        },
+        _ => None,
+    }
+}
+
+/// Push the inside of each literal `template` / `styles` value in `class`'s
+/// `@Component({...})`. Returns whether the class has that decorator with an
+/// object literal argument.
+fn collect_excluded_ranges(
+    class: &Class<'_>,
+    consts: &StringConsts<'_>,
+    excluded: &mut Vec<Span>,
+) -> bool {
+    let Some(decorator) = find_component_decorator(&class.decorators, consts) else {
+        return false;
+    };
+    let Expression::CallExpression(call) = &decorator.expression else { return false };
+    let Some(Argument::ObjectExpression(config)) = call.arguments.first() else {
+        return false;
+    };
+    for property in &config.properties {
+        let ObjectPropertyKind::ObjectProperty(property) = property else { continue };
+        // `get template() {}`, `styles() {}` and `{ styles }` name the field
+        // but hold no literal; a computed key's name is not read.
+        if property.kind != PropertyKind::Init
+            || property.method
+            || property.shorthand
+            || property.computed
+        {
+            continue;
+        }
+        let name = match &property.key {
+            PropertyKey::StaticIdentifier(id) => Some(id.name.as_str()),
+            PropertyKey::StringLiteral(lit) => lit.value.as_str(),
+            _ => None,
+        };
+        // `template` is a string; `styles` is a string or an array of them.
+        let literal = match (name, &property.value) {
+            (
+                Some("template" | "styles"),
+                Expression::StringLiteral(_) | Expression::TemplateLiteral(_),
+            )
+            | (Some("styles"), Expression::ArrayExpression(_)) => property.value.span(),
+            _ => continue,
+        };
+        // Keep the quotes or brackets: `styles: []` and `styles: ''` stay
+        // apart, and the value's shape is part of the fingerprint.
+        if literal.end > literal.start + 2 {
+            excluded.push(Span::new(literal.start + 1, literal.end - 1));
+        }
+    }
+    true
+}
+
+/// Hash `source` without `excluded` (sorted, non-overlapping).
+fn fingerprint_with_exclusions(
+    source: &str,
+    components: Vec<String>,
+    excluded: Vec<Span>,
+) -> ComponentHmrFingerprint {
+    // Two independently seeded 64-bit SipHashes plus the kept length. Both
+    // fingerprints of a comparison come from the same build, so the std
+    // hasher's fixed keys are enough; it is not meant to resist an attacker.
+    let mut first = DefaultHasher::new();
+    let mut second = DefaultHasher::new();
+    second.write_u64(0x9e37_79b9_7f4a_7c15);
+    let bytes = source.as_bytes();
+    let mut kept = 0usize;
+    let mut cursor = 0usize;
+    let mut write = |segment: &[u8]| {
+        first.write(segment);
+        second.write(segment);
+        kept += segment.len();
+    };
+    for span in &excluded {
+        write(&bytes[cursor..span.start as usize]);
+        cursor = span.end as usize;
+    }
+    write(&bytes[cursor..]);
+    ComponentHmrFingerprint {
+        fingerprint: format!("{:016x}{:016x}-{kept:x}", first.finish(), second.finish()),
+        components,
+        excluded,
+    }
+}
diff --git a/crates/oxc_angular_compiler/src/component/mod.rs b/crates/oxc_angular_compiler/src/component/mod.rs
index 88302f601..89df8d818 100644
--- a/crates/oxc_angular_compiler/src/component/mod.rs
+++ b/crates/oxc_angular_compiler/src/component/mod.rs
@@ -12,6 +12,7 @@ mod decorator;
 mod defer_resolver;
 mod definition;
 mod dependency;
+mod hmr_fingerprint;
 mod hoist;
 mod import_elision;
 mod metadata;
@@ -29,6 +30,7 @@ pub use dependency::{
     FactoryTarget, InjectFlags, R3DependencyMetadata, compile_inject_dependencies,
     generate_factory_di_args, get_inject_fn_name,
 };
+pub use hmr_fingerprint::{ComponentHmrFingerprint, component_hmr_fingerprint};
 pub use import_elision::ImportElisionAnalyzer;
 pub use metadata::{
     AngularVersion, ChangeDetectionStrategy, ComponentMetadata, DeclarationListEmitMode,
diff --git a/crates/oxc_angular_compiler/src/component/transform.rs b/crates/oxc_angular_compiler/src/component/transform.rs
index a5f2eda57..038339b1a 100644
--- a/crates/oxc_angular_compiler/src/component/transform.rs
+++ b/crates/oxc_angular_compiler/src/component/transform.rs
@@ -330,12 +330,13 @@ pub struct TransformResult {
     /// Maps component ID to list of styles.
     pub style_updates: HashMap<String, Vec<String>>,
 
-    /// For HMR: maps the ID of each compiled component (path@ClassName) to its
-    /// `@Component` decorator's callee as written in the source (`Component`,
-    /// `Cmp` for `import { Component as Cmp }`, `ng.Component` for a namespace
-    /// import). It lets a build tool find the decorator the compiler took
-    /// without deciding again which decorators are Angular's.
-    pub component_decorators: HashMap<String, String>,
+    /// For HMR: the fingerprint of the source with the inline `template` /
+    /// `styles` values of the compiled components left out (see
+    /// [`super::component_hmr_fingerprint`]). A build tool compares it with
+    /// the fingerprint of the edited file, taken for the same class names:
+    /// when they are equal, only those values changed and an HMR update is
+    /// enough. `None` unless `hmr` is on.
+    pub hmr_fingerprint: Option<String>,
 
     /// Compilation diagnostics (errors and warnings).
     pub diagnostics: Vec<OxcDiagnostic>,
@@ -3047,7 +3048,8 @@ pub fn transform_angular_file(
     let parser_ret = Parser::new(allocator, source, source_type).parse();
 
     // Collect parse errors
-    if !parser_ret.diagnostics.is_empty() {
+    let parsed_cleanly = parser_ret.diagnostics.is_empty();
+    if !parsed_cleanly {
         for error in parser_ret.diagnostics {
             result.diagnostics.push(OxcDiagnostic::error(error.to_string()));
         }
@@ -3150,6 +3152,10 @@ pub fn transform_angular_file(
     // by tracking the next index and passing it to each component.
     let mut shared_pool_index: u32 = 0;
 
+    // The components compiled for HMR, whose inline template and styles the
+    // HMR fingerprint leaves out.
+    let mut hmr_compiled_classes: Vec<String> = Vec::new();
+
     // One analyzer serves both cross-file features: the type-only scan for
     // import elision and, when resolve_imported_values is on, the resolver the
     // decorator evaluator reads imported bindings through. It's declared
@@ -3635,17 +3641,7 @@ pub fn transform_angular_file(
                                     component_id.clone(),
                                     compilation_result.template_js.clone().unwrap_or_default(),
                                 );
-                                if let Some(decorator) = component_decorator {
-                                    let callee = match &decorator.expression {
-                                        Expression::CallExpression(call) => call.callee.span(),
-                                        expression => expression.span(),
-                                    };
-                                    result.component_decorators.insert(
-                                        component_id.clone(),
-                                        source[callee.start as usize..callee.end as usize]
-                                            .to_string(),
-                                    );
-                                }
+                                hmr_compiled_classes.push(class_name.clone());
                             }
 
                             // Track the decorator span to remove
@@ -4729,6 +4725,23 @@ pub fn transform_angular_file(
         result.dependencies.extend(analyzer.take_value_dependencies());
     }
 
+    // Taken from this parse, for exactly the classes compiled above, so it
+    // equals what `component_hmr_fingerprint` gives for this source and
+    // these class names.
+    if options.hmr {
+        let fingerprint = if parsed_cleanly {
+            super::hmr_fingerprint::hmr_fingerprint_of_program(
+                &parser_ret.program,
+                source,
+                &string_consts,
+                |name| hmr_compiled_classes.iter().any(|compiled| compiled == name),
+            )
+        } else {
+            super::component_hmr_fingerprint(allocator, path, source, &[])
+        };
+        result.hmr_fingerprint = Some(fingerprint.fingerprint);
+    }
+
     result
 }
 
diff --git a/crates/oxc_angular_compiler/src/lib.rs b/crates/oxc_angular_compiler/src/lib.rs
index eef79c2a6..f59c2e62c 100644
--- a/crates/oxc_angular_compiler/src/lib.rs
+++ b/crates/oxc_angular_compiler/src/lib.rs
@@ -63,12 +63,12 @@ pub use transform::{HtmlToR3Transform, html_to_r3::html_ast_to_r3_ast};
 
 // Re-export component module types for convenience
 pub use component::{
-    AngularVersion, ChangeDetectionStrategy, CompiledComponent, ComponentMetadata,
-    ComponentResourceUrls, HmrTemplateCompileOutput, HostMetadata, HostMetadataInput, ImportInfo,
-    ImportMap, NamespaceRegistry, Prerelease, ResolvedResources, TemplateCompileOutput,
-    TransformOptions, TransformResult, ViewEncapsulation, build_import_map,
+    AngularVersion, ChangeDetectionStrategy, CompiledComponent, ComponentHmrFingerprint,
+    ComponentMetadata, ComponentResourceUrls, HmrTemplateCompileOutput, HostMetadata,
+    HostMetadataInput, ImportInfo, ImportMap, NamespaceRegistry, Prerelease, ResolvedResources,
+    TemplateCompileOutput, TransformOptions, TransformResult, ViewEncapsulation, build_import_map,
     compile_component_template, compile_for_hmr, compile_template_for_hmr, compile_template_to_js,
-    compile_template_to_js_with_options, extract_component_metadata,
+    compile_template_to_js_with_options, component_hmr_fingerprint, extract_component_metadata,
     extract_component_resource_urls, transform_angular_file,
 };
 
diff --git a/crates/oxc_angular_compiler/tests/class_decorator_identity_test.rs b/crates/oxc_angular_compiler/tests/class_decorator_identity_test.rs
index 8baf43301..92c2f7c56 100644
--- a/crates/oxc_angular_compiler/tests/class_decorator_identity_test.rs
+++ b/crates/oxc_angular_compiler/tests/class_decorator_identity_test.rs
@@ -273,15 +273,17 @@ fn aliased_service_hoists_its_references() {
     assert!(!hoisted(&foreign.code), "{}", foreign.code);
 }
 
-/// With HMR on, each compiled component's `@Component` is reported as written,
-/// so a build tool can find the decorator the compiler took. Another library's
-/// `@Component` isn't compiled, so it isn't reported.
+/// With HMR on, the fingerprint leaves out the inline template of each
+/// compiled component, whatever its `@Component` is called (`Cmp`,
+/// `ng . Component`). Another library's `@Component` isn't compiled, so its
+/// template stays in.
 #[test]
-fn hmr_reports_component_decorators_as_written() {
-    let source = "import * as ng from '@angular/core';\nimport {Component as Cmp} from '@angular/core';\nimport {Component} from './foreign';\n@Cmp({selector: 'a-c', template: ''})\nexport class A {}\n@ng . Component({selector: 'b-c', template: ''})\nexport class B {}\n@Component({selector: 'c-c', template: ''})\nexport class C {}\n";
-    let result = transform(source, &TransformOptions { hmr: true, ..TransformOptions::default() });
-    let mut reported: Vec<(&str, &str)> =
-        result.component_decorators.iter().map(|(k, v)| (k.as_str(), v.as_str())).collect();
-    reported.sort_unstable();
-    assert_eq!(reported, [("test.ts@A", "Cmp"), ("test.ts@B", "ng . Component")]);
+fn hmr_fingerprint_reads_component_decorators_by_import() {
+    let source = "import * as ng from '@angular/core';\nimport {Component as Cmp} from '@angular/core';\nimport {Component} from './foreign';\n@Cmp({selector: 'a-c', template: 'a'})\nexport class A {}\n@ng . Component({selector: 'b-c', template: 'b'})\nexport class B {}\n@Component({selector: 'c-c', template: 'c'})\nexport class C {}\n";
+    let options = TransformOptions { hmr: true, ..TransformOptions::default() };
+    let fingerprint = |source: &str| transform(source, &options).hmr_fingerprint.unwrap();
+    let before = fingerprint(source);
+    assert_eq!(before, fingerprint(&source.replace("template: 'a'", "template: 'a2'")));
+    assert_eq!(before, fingerprint(&source.replace("template: 'b'", "template: 'b2'")));
+    assert_ne!(before, fingerprint(&source.replace("template: 'c'", "template: 'c2'")));
 }
diff --git a/crates/oxc_angular_compiler/tests/hmr_fingerprint_test.rs b/crates/oxc_angular_compiler/tests/hmr_fingerprint_test.rs
new file mode 100644
index 000000000..0a95bbe0e
--- /dev/null
+++ b/crates/oxc_angular_compiler/tests/hmr_fingerprint_test.rs
@@ -0,0 +1,566 @@
+//! The HMR fingerprint: a component file's source with the inline `template` /
+//! `styles` values of its compiled components left out. Two saves with the
+//! same fingerprint differ only inside those values, so the build tool sends
+//! an HMR update instead of reloading the page.
+//!
+//! Ported from the vite plugin's `decorator-fields.test.ts` (the JS lexer the
+//! fingerprint replaced). There, each case checked the range the lexer found;
+//! here, `fields` gives the excluded text with its quotes or brackets, which
+//! is the same range. Every source gets Angular's `Component` import, since
+//! only Angular's own decorator is read now.
+
+use oxc_allocator::Allocator;
+use oxc_angular_compiler::{
+    ComponentHmrFingerprint, TransformOptions, component_hmr_fingerprint, transform_angular_file,
+};
+
+const IMPORT: &str = "import { Component } from '@angular/core';\n";
+
+/// No class or no range.
+const NONE: [&str; 0] = [];
+
+fn fingerprint_raw(source: &str, classes: &[&str]) -> ComponentHmrFingerprint {
+    let allocator = Allocator::default();
+    component_hmr_fingerprint(&allocator, "test.ts", source, classes)
+}
+
+/// The fingerprint of `IMPORT` + `body`.
+fn fingerprint(body: &str, classes: &[&str]) -> ComponentHmrFingerprint {
+    fingerprint_raw(&format!("{IMPORT}{body}"), classes)
+}
+
+/// Each excluded range of `IMPORT` + `body`, with the quote or bracket on each
+/// side (what the JS lexer's `textOf` gave).
+fn fields(body: &str, classes: &[&str]) -> Vec<String> {
+    let source = format!("{IMPORT}{body}");
+    fingerprint_raw(&source, classes)
+        .excluded
+        .iter()
+        .map(|span| source[span.start as usize - 1..=span.end as usize].to_string())
+        .collect()
+}
+
+fn components(body: &str, classes: &[&str]) -> Vec<String> {
+    fingerprint(body, classes).components
+}
+
+/// A one-component file whose `@Component` holds `selector: 'a'` and `field`.
+fn one(field: &str) -> Vec<String> {
+    fields(&format!("@Component({{ selector: 'a', {field} }})\nexport class Foo {{}}"), &["Foo"])
+}
+
+fn same(a: &str, b: &str, classes: &[&str]) -> bool {
+    fingerprint(a, classes).fingerprint == fingerprint(b, classes).fingerprint
+}
+
+// -----------------------------------------------------------------
+// The HMR decision
+// -----------------------------------------------------------------
+
+const TWO: &str = "@Component({ selector: 'a', template: '<a/>', styles: ['.a{}'] })
+export class A { x = 1 }
+@Component({ selector: 'b', template: `<b/>`, styles: '.b{}' })
+export class B {}
+";
+
+#[test]
+fn an_edit_inside_template_or_styles_keeps_the_fingerprint() {
+    let classes = &["A", "B"];
+    for edited in [
+        TWO.replace("<a/>", "<a>changed</a>"),
+        TWO.replace(".a{}", ".a{color:red}"),
+        TWO.replace("`<b/>`", "`<b>${'x'}</b>`"),
+        TWO.replace("'.b{}'", "'.b{} .c{}'"),
+        TWO.replace("['.a{}']", "['.a{}', '.more{}']"),
+        TWO.replace("['.a{}']", "[]"),
+        TWO.replace("<b/>", "<b>both</b>").replace(".a{}", ""),
+    ] {
+        assert!(same(TWO, &edited, classes), "{edited}");
+    }
+}
+
+#[test]
+fn an_edit_anywhere_else_changes_the_fingerprint() {
+    let classes = &["A", "B"];
+    for edited in [
+        TWO.replace("x = 1", "x = 2"),
+        TWO.replace("selector: 'a'", "selector: 'aa'"),
+        TWO.replace("export class B {}", "export class B {}\n// trailing comment"),
+        TWO.replace("template: '<a/>'", "templateUrl: './a.html'"),
+        // The shape of a value is kept: a string and an array are not the same.
+        TWO.replace("['.a{}']", "''"),
+        // The quote style is kept too.
+        TWO.replace("'<a/>'", "\"<a/>\""),
+    ] {
+        assert!(!same(TWO, &edited, classes), "{edited}");
+    }
+}
+
+/// `templateUrl` / `styleUrl(s)` stay in the fingerprint: changing one
+/// changes which files the component owns, which only a fresh transform
+/// records, so the page reloads (as it did before the fingerprint).
+#[test]
+fn resource_urls_stay_in_the_fingerprint() {
+    let source = "@Component({ templateUrl: './a.html', styleUrl: './a.css', styleUrls: ['./b.css'] })\nexport class A {}";
+    assert_eq!(fields(source, &["A"]), NONE);
+    assert!(!same(source, &source.replace("./a.html", "./b.html"), &["A"]));
+    assert!(!same(source, &source.replace("./a.css", "./c.css"), &["A"]));
+    assert!(!same(source, &source.replace("['./b.css']", "['./b.css', './c.css']"), &["A"]));
+}
+
+/// Only the classes the transform compiled are read: an edit to another
+/// class's template reloads, since no HMR update would carry it.
+#[test]
+fn only_the_named_classes_are_read() {
+    assert_eq!(components(TWO, &["A"]), ["A"]);
+    assert!(same(TWO, &TWO.replace("<a/>", "<a>x</a>"), &["A"]));
+    assert!(!same(TWO, &TWO.replace("<b/>", "<b>x</b>"), &["A"]));
+    assert!(!same(TWO, &TWO.replace("<a/>", "<a>x</a>"), &[]));
+    assert_eq!(fingerprint(TWO, &["Nope"]).excluded, []);
+}
+
+/// A source the parser rejects excludes nothing, so a save that leaves the
+/// file broken (here an unescaped quote inside the template) reloads.
+#[test]
+fn a_syntax_error_excludes_nothing() {
+    let broken = TWO.replace("<a/>", "<a>it's</a>");
+    let result = fingerprint(&broken, &["A", "B"]);
+    assert_eq!(result.excluded, []);
+    assert_eq!(result.components, NONE);
+    assert!(!same(TWO, &broken, &["A", "B"]));
+    // Same as excluding nothing.
+    assert_eq!(result.fingerprint, fingerprint(&broken, &[]).fingerprint);
+}
+
+/// The transform reports the same fingerprint, for the classes it compiled.
+#[test]
+fn transform_reports_the_same_fingerprint() {
+    let source = format!("{IMPORT}{TWO}");
+    let allocator = Allocator::default();
+    let options = TransformOptions { hmr: true, ..TransformOptions::default() };
+    let result = transform_angular_file(&allocator, "test.ts", &source, Some(&options), None);
+    assert!(result.diagnostics.is_empty(), "{:?}", result.diagnostics);
+    assert_eq!(
+        result.hmr_fingerprint.as_deref(),
+        Some(fingerprint_raw(&source, &["A", "B"]).fingerprint.as_str())
+    );
+
+    let off = transform_angular_file(&allocator, "test.ts", &source, None, None);
+    assert_eq!(off.hmr_fingerprint, None);
+}
+
+/// A `jit: true` component is not compiled AOT and gets no HMR update, so the
+/// transform's fingerprint keeps its template: editing it reloads.
+#[test]
+fn transform_keeps_a_jit_components_template() {
+    let source = format!(
+        "{IMPORT}@Component({{ selector: 'a', template: '<a/>' }})\nexport class A {{}}\n@Component({{ selector: 'b', template: '<b/>', jit: true }})\nexport class B {{}}\n"
+    );
+    let allocator = Allocator::default();
+    let options = TransformOptions { hmr: true, ..TransformOptions::default() };
+    let result = transform_angular_file(&allocator, "test.ts", &source, Some(&options), None);
+    assert!(result.diagnostics.is_empty(), "{:?}", result.diagnostics);
+    assert_eq!(
+        result.hmr_fingerprint.as_deref(),
+        Some(fingerprint_raw(&source, &["A"]).fingerprint.as_str())
+    );
+    let edited_jit = source.replace("<b/>", "<b>x</b>");
+    assert_ne!(
+        result.hmr_fingerprint.as_deref(),
+        Some(fingerprint_raw(&edited_jit, &["A"]).fingerprint.as_str())
+    );
+}
+
+// -----------------------------------------------------------------
+// Which decorators are read
+// -----------------------------------------------------------------
+
+/// The decorator is Angular's by its `@angular/core` import, under any alias
+/// or through a namespace, like the transform finds it. Another module's
+/// `@Component` or a lookalike spelling is not read.
+#[test]
+fn reads_angulars_component_by_its_import() {
+    let source = "import * as ng from '@angular/core';
+import { Component as Cmp } from '@angular/core';
+import { Component } from './foreign';
+@Cmp({ template: 'a' })
+class A {}
+@ng.Component({ template: 'b' })
+class B {}
+@Component({ template: 'c' })
+class C {}
+@CmpX({ template: 'd' })
+class D {}
+@Cmp.x({ template: 'e' })
+class E {}
+@ng . Component ({ template: 'f' })
+class F {}
+";
+    let result = fingerprint_raw(source, &["A", "B", "C", "D", "E", "F"]);
+    assert_eq!(result.components, ["A", "B", "F"]);
+    assert_eq!(result.excluded.len(), 3);
+}
+
+#[test]
+fn reads_nothing_without_a_component_decorator() {
+    assert_eq!(components("export class Foo {}", &["Foo"]), NONE);
+    // A decorator with no class is a syntax error.
+    assert_eq!(components("@Component({ selector: 'x' })", &["Foo"]), NONE);
+    // Not an object literal argument.
+    assert_eq!(components("@Component(CONFIG)\nexport class Foo {}", &["Foo"]), NONE);
+    assert_eq!(components("@Component\nexport class Foo {}", &["Foo"]), NONE);
+}
+
+#[test]
+fn ignores_decorators_in_comments_and_strings() {
+    for body in [
+        "@Component({ selector: 'x', styles: ['.real{}'] })\n// @Component({ styles: ['.old{}'] })\nexport class FooComponent {}",
+        "@Component({ selector: 'x', styles: ['.real{}'] })\n/* @Component({ styles: ['.old{}'] }) */\nexport class FooComponent {}",
+        "// @Component({ styles: ['.old{}'] })\n@Component({ selector: 'x', styles: ['.real{}'] })\nexport class FooComponent {}",
+        "const doc = 'see @Component({ styles: [\".str{}\"] }) for details';\n@Component({ selector: 'x', styles: ['.real{}'] })\nexport class FooComponent {}",
+    ] {
+        assert_eq!(fields(body, &["FooComponent"]), ["['.real{}']"], "{body}");
+    }
+}
+
+#[test]
+fn pairs_each_class_with_its_own_decorator() {
+    let body = "@Component({ selector: 'a', styles: ['.a{}'] })
+// @Component({ styles: ['.fake{}'] })
+export class AComponent {}
+@Component({ selector: 'b', styles: ['.b{}'] })
+export class BComponent {}";
+    let classes = &["AComponent", "BComponent"];
+    assert_eq!(components(body, classes), ["AComponent", "BComponent"]);
+    assert_eq!(fields(body, classes), ["['.a{}']", "['.b{}']"]);
+    assert_eq!(fields(body, &["BComponent"]), ["['.b{}']"]);
+}
+
+#[test]
+fn reads_every_class_declaration_form() {
+    for (body, name) in [
+        ("@Component({ template: 't' })\nclass Foo {}", "Foo"),
+        ("@Component({ template: 't' })\nexport default class Foo {}", "Foo"),
+        ("@Component({ template: 't' })\nexport abstract class Foo {}", "Foo"),
+        ("@Component({ template: 't' })\n@Inject() @Other()\nexport class Foo {}", "Foo"),
+        ("@Other()\n@Component({ template: 't' })\nexport class Foo {}", "Foo"),
+        (
+            "@Component({ template: 't' })\nexport class Foo<T extends Bar, U> extends Base<T> implements Baz<U> {}",
+            "Foo",
+        ),
+        ("@Component({ template: 't' })\nclass $Foo {}", "$Foo"),
+        ("@Component({ template: 't' })\nclass _Bar {}", "_Bar"),
+        ("@Component({ template: 't' })\nclass Café {}", "Café"),
+        ("@Component({ template: 't' })\nclass 组件 {}", "组件"),
+    ] {
+        assert_eq!(components(body, &[name]), [name], "{body}");
+        assert_eq!(fields(body, &[name]), ["'t'"], "{body}");
+    }
+}
+
+/// Two `@Component`s on one class: the compiler takes the first and leaves
+/// the second on the class, so only the first one's fields are excluded and
+/// an edit to the second reloads. (The JS lexer paired the class with the
+/// second one, the decorator the compiler does not take.)
+#[test]
+fn reads_the_first_of_two_component_decorators() {
+    let body =
+        "@Component({ template: 'first' })\n@Component({ template: 'second' })\nclass Bar {}";
+    assert_eq!(fields(body, &["Bar"]), ["'first'"]);
+    assert!(same(body, &body.replace("first", "1st"), &["Bar"]));
+    assert!(!same(body, &body.replace("second", "2nd"), &["Bar"]));
+}
+
+#[test]
+fn coexists_with_other_class_decorators() {
+    let body =
+        "@SignalComponent({ template: 'sig' })\n@Component({ template: '<real/>' })\nclass Foo {}";
+    assert_eq!(fields(body, &["Foo"]), ["'<real/>'"]);
+}
+
+// -----------------------------------------------------------------
+// Which properties are the fields
+// -----------------------------------------------------------------
+
+#[test]
+fn reads_template_and_styles_values() {
+    assert_eq!(one("template: '<p/>'"), ["'<p/>'"]);
+    assert_eq!(one("template: \"<p/>\""), ["\"<p/>\""]);
+    assert_eq!(one("template: `<p/>`"), ["`<p/>`"]);
+    assert_eq!(one("styles: ['.x{}', '.y{}']"), ["['.x{}', '.y{}']"]);
+    assert_eq!(one("styles: '.x{}'"), ["'.x{}'"]);
+    assert_eq!(one("styles: `.x{}`"), ["`.x{}`"]);
+    assert_eq!(one("template: '<p/>', styles: ['.x{}']"), ["'<p/>'", "['.x{}']"]);
+    // An empty value excludes nothing; its delimiters are kept either way.
+    assert_eq!(one("template: ''"), NONE);
+    assert_eq!(one("styles: []"), NONE);
+    assert_eq!(one("selector2: 'b'"), NONE);
+}
+
+#[test]
+fn does_not_read_another_field_as_template_or_styles() {
+    assert_eq!(one("styleUrls: ['./a.css']"), NONE);
+    assert_eq!(one("styleUrl: './a.css'"), NONE);
+    assert_eq!(one("templateUrl: './foo.html'"), NONE);
+    assert_eq!(one("'styleUrls': ['./a.css']"), NONE);
+    assert_eq!(one("'templateUrl': './a.html'"), NONE);
+    assert_eq!(one("templateUrl: './real.html', template: '<p/>'"), ["'<p/>'"]);
+    // A template literal is a template, so `styles:` inside it is text.
+    assert_eq!(one("template2: `<pre>{ styles: ['fake'] }</pre>`"), NONE);
+}
+
+#[test]
+fn reads_only_top_level_properties() {
+    assert_eq!(
+        one("template: `<pre>const cfg = { styles: ['fake'] }</pre>`, styles: ['real']"),
+        ["`<pre>const cfg = { styles: ['fake'] }</pre>`", "['real']"]
+    );
+    assert_eq!(
+        one("template: `${doThing({ styles: ['fake'] })}`, styles: ['real']"),
+        ["`${doThing({ styles: ['fake'] })}`", "['real']"]
+    );
+    assert_eq!(
+        one("host: { '[styles]': 'expr', styles: 'irrelevant' }, styles: ['real']"),
+        ["['real']"]
+    );
+    assert_eq!(one("data: { styles: ['.deep{}'] }"), NONE);
+    assert_eq!(
+        one("styles: ['/* template: \"fake\" */'], template: '<real/>'"),
+        ["['/* template: \"fake\" */']", "'<real/>'"]
+    );
+}
+
+#[test]
+fn reads_quoted_and_escaped_keys() {
+    assert_eq!(one("'styles': ['.x{}']"), ["['.x{}']"]);
+    assert_eq!(one("\"styles\": ['.x{}']"), ["['.x{}']"]);
+    assert_eq!(one("'template': '<p/>'"), ["'<p/>'"]);
+    assert_eq!(one("style\\u0073: ['.x{}']"), ["['.x{}']"]);
+    assert_eq!(one("style\\u{73}: ['.x{}']"), ["['.x{}']"]);
+    assert_eq!(one("\\u0073tyles: ['.x{}']"), ["['.x{}']"]);
+    assert_eq!(one("templat\\u0065: '<p/>'"), ["'<p/>'"]);
+    assert_eq!(one("'style\\u0073': ['.x{}']"), ["['.x{}']"]);
+    assert_eq!(one("style\\u0073Extra: ['.x{}']"), NONE);
+    assert_eq!(one("style\\u0055rls: ['./a.css']"), NONE);
+    assert_eq!(one("templat\\u0065Url: './a.html'"), NONE);
+    // Cyrillic `е` in place of `e`: another name.
+    assert_eq!(one("stylеs: ['.x{}']"), NONE);
+    assert_eq!(one("sel\\u0065ctor2: 'a', styles: ['.x{}']"), ["['.x{}']"]);
+    // Malformed escapes are syntax errors, so nothing is excluded.
+    assert_eq!(one("style\\u00ZZs: ['.x{}']"), NONE);
+    assert_eq!(one("style\\x73: ['.x{}']"), NONE);
+}
+
+#[test]
+fn skips_keys_without_a_literal_value() {
+    assert_eq!(one("styles: STYLES"), NONE);
+    assert_eq!(one("template: '<p/>' && TEMPLATE, styles"), NONE);
+    assert_eq!(one("style\\u0073"), NONE);
+    assert_eq!(one("styles() { return ['.x{}'] }"), NONE);
+    assert_eq!(one("get template() { return '<p/>' }"), NONE);
+    // A computed key is not read, even a literal one.
+    assert_eq!(one("[K]: ['.x{}']"), NONE);
+    assert_eq!(one("['styles']: ['.x{}']"), NONE);
+    assert_eq!(one("styles: css`.x{}`"), NONE);
+    assert_eq!(one("styles: ('.x{}')"), NONE);
+}
+
+#[test]
+fn reads_the_field_past_other_properties() {
+    for field in [
+        "[K]: 1, styles: ['.x{}']",
+        "...BASE, styles: ['.x{}']",
+        "selector2, styles: ['.x{}']",
+        "selector2: styles, styles: ['.x{}']",
+        "foo() { return 1 }, styles: ['.x{}']",
+        "set styles(v) {}, styles: ['.x{}']",
+        "styles: ['.x{}'],",
+    ] {
+        assert_eq!(one(field), ["['.x{}']"], "{field}");
+    }
+}
+
+/// A value that only STARTS with a literal does not denote it. Excluding
+/// that leading piece would keep the rest of the expression outside the
+/// excluded range, and an edit to it would read as a template/styles edit.
+#[test]
+fn skips_a_literal_that_starts_a_larger_expression() {
+    for field in [
+        "styles: '.a{}' + EXTRA",
+        "template: '<p/>' + '<q/>'",
+        "template: '<p/>' + SUFFIX",
+        "styles: ['.a{}'] + EXTRA",
+        "styles: '.a{}'.replace('a', 'b')",
+        "styles: ['.a{}'].concat(MORE)",
+        "template: '<p/>'.replace('a', 'b')",
+        "styles: '.a{}' as string",
+        "styles: ['.a{}'] as const",
+        "template: '<p/>' as string",
+        "styles: '.a{}'!",
+        "styles: '.a{}' satisfies string",
+        "styles: '.a{}' /* why */ + EXTRA",
+        "styles: cond ? '.a{}' : '.b{}'",
+    ] {
+        assert_eq!(one(field), NONE, "{field}");
+    }
+    for (field, expected) in [
+        ("styles: ['.a{}']", "['.a{}']"),
+        ("styles: ['.a{}'],", "['.a{}']"),
+        ("styles: '.a{}' /* why */", "'.a{}'"),
+        ("styles: '.a{}' // why\n", "'.a{}'"),
+        ("template: '<p/>'", "'<p/>'"),
+        ("template: '<p/>',", "'<p/>'"),
+    ] {
+        assert_eq!(one(field), [expected], "{field}");
+    }
+}
+
+// -----------------------------------------------------------------
+// Comments, strings and other tokens
+// -----------------------------------------------------------------
+
+#[test]
+fn reads_past_comments_in_the_decorator() {
+    for body in [
+        "@Component({\n  // I'm setting the styles below\n  styles: ['real']\n})\nclass Foo {}",
+        "@Component({\n  /* It's important: don't use these */\n  styles: ['real']\n})\nclass Foo {}",
+        "@Component({\n  // styles: ['fake'],\n  styles: ['real']\n})\nclass Foo {}",
+        "@Component({\n  /* styles: ['fake'] */\n  styles: ['real']\n})\nclass Foo {}",
+        "@Component({\n  /*\n   * styles: ['fake-line-1']\n   * styles: ['fake-line-2']\n   */\n  styles: ['real']\n})\nclass Foo {}",
+        "@Component({\r\n  // a comment with an apostrophe: I'm here\r\n  styles: ['real']\r\n})\r\nclass Foo {}",
+    ] {
+        assert_eq!(fields(body, &["Foo"]), ["['real']"], "{body}");
+    }
+    assert_eq!(
+        fields(
+            "@Component({\n  /* template: '<fake/>' */\n  template: '<real/>'\n})\nclass Foo {}",
+            &["Foo"]
+        ),
+        ["'<real/>'"]
+    );
+    assert_eq!(
+        fields(
+            "@Component({\n  // styles: ['fake']\n  selector: 'app-foo'\n})\nclass Foo {}",
+            &["Foo"]
+        ),
+        NONE
+    );
+    assert_eq!(
+        components(
+            "@Component({ styles: ['x'] })\n// I'm decorating this class\nexport class Foo {}",
+            &["Foo"]
+        ),
+        ["Foo"]
+    );
+}
+
+#[test]
+fn reads_past_comments_within_a_field() {
+    for field in [
+        "styles /* why */: ['.x{}']",
+        "styles // why\n: ['.x{}']",
+        "styles: /* why */ ['.x{}']",
+        "/* why */ styles: ['.x{}']",
+        "styles /* a */ /* b */: ['.x{}']",
+        "'styles' /* why */: ['.x{}']",
+        "styles /* a: b, c ] [ */: ['.x{}']",
+        "styles /* styles: './fake.css' */: ['.x{}']",
+        "styles /* don't */: ['.x{}']",
+    ] {
+        assert_eq!(one(field), ["['.x{}']"], "{field}");
+    }
+    assert_eq!(one("template /* why */: '<p/>'"), ["'<p/>'"]);
+    assert_eq!(one("template: /* why */ '<p/>'"), ["'<p/>'"]);
+    // The whole array is excluded, comments inside it included.
+    for field in [
+        "styles: [/* why */ '.x{}']",
+        "styles: [// why\n '.x{}']",
+        "styles: ['.x{}' /* why */, '.y{}']",
+        "styles: ['.x{}' /* why */]",
+        "styles: ['.x{}' /* ] */]",
+        "styles: [/* why */]",
+    ] {
+        assert_eq!(one(field), [&field["styles: ".len()..]], "{field}");
+    }
+}
+
+#[test]
+fn reads_strings_holding_delimiters_and_comment_markers() {
+    assert_eq!(one("template: 'http://x', styles: ['real']"), ["'http://x'", "['real']"]);
+    assert_eq!(
+        one("template: '/* not a comment */', styles: ['real']"),
+        ["'/* not a comment */'", "['real']"]
+    );
+    assert_eq!(
+        one("template: 'styles: [\"fake\"]', styles: ['real']"),
+        ["'styles: [\"fake\"]'", "['real']"]
+    );
+    assert_eq!(
+        one("template: 'has { and ] literally', styles: ['real']"),
+        ["'has { and ] literally'", "['real']"]
+    );
+    assert_eq!(one("selector2: 'foo(bar)', styles: ['real']"), ["['real']"]);
+    assert_eq!(one("template: `cost $5 or $${price}`"), ["`cost $5 or $${price}`"]);
+}
+
+#[test]
+fn reads_strings_with_escapes() {
+    assert_eq!(one(r"template: 'it\'s'"), [r"'it\'s'"]);
+    assert_eq!(one(r#"template: "say \"hi\"""#), [r#""say \"hi\"""#]);
+    assert_eq!(one(r"template: `a \` b ${'`'} c`"), [r"`a \` b ${'`'} c`"]);
+    assert_eq!(
+        one(r"styles: ['.a::before { content: \'\\\'\' }']"),
+        [r"['.a::before { content: \'\\\'\' }']"]
+    );
+    assert_eq!(one("template: 'a\\\nb'"), ["'a\\\nb'"]);
+}
+
+#[test]
+fn reads_template_literals_with_nested_braces() {
+    assert_eq!(
+        one("template: `${ { a: { b: '}' } }.a.b }`, styles: ['.x{}']"),
+        ["`${ { a: { b: '}' } }.a.b }`", "['.x{}']"]
+    );
+    assert_eq!(one("template: `${`inner ${`deep`}`}`"), ["`${`inner ${`deep`}`}`"]);
+}
+
+/// Regex literals, which the JS lexer could not tell from division: a `/`
+/// inside one read as a comment or a quote as a string opener, so the
+/// fields after it were never found (the page reloaded on every edit).
+#[test]
+fn reads_past_regex_literals() {
+    assert_eq!(
+        one("providers: [{ provide: P, useValue: /['\"`)}\\]]/ }], styles: ['.x{}']"),
+        ["['.x{}']"]
+    );
+    assert_eq!(
+        one("providers: [{ provide: P, useValue: /\\/\\/*/g }], template: '<p/>'"),
+        ["'<p/>'"]
+    );
+    assert_eq!(
+        one(
+            "template: '<p/>', providers: [{ provide: P, useFactory: () => 1 / 2 / 3 }], styles: ['.x{}']"
+        ),
+        ["'<p/>'", "['.x{}']"]
+    );
+}
+
+#[test]
+fn ignores_decoys_elsewhere_in_the_source() {
+    for body in [
+        "/**\n * Usage example:\n *   @Component({ template: 'fake' })\n *   class Example {}\n */\n@Component({ template: '<real/>' })\nexport class Foo {}",
+        "const docs = \"use @Component({ template: 'fake' }) to declare\"\n@Component({ template: '<real/>' })\nclass Foo {}",
+        "`Use @Component({ template: 'fake' })`\n@Component({ template: '<real/>' })\nclass Foo {}",
+        "const base = { selector: 'app' }\n@Component({ ...base, template: '<real/>' })\nclass Foo {}",
+        "@Component({ template: '<real/>' })\nclass Foo {\n  Component(x: number) { return x; }\n  styles = ['.not-metadata{}'];\n}",
+    ] {
+        assert_eq!(fields(body, &["Foo"]), ["'<real/>'"], "{body}");
+    }
+    let body = "@Component({ template: '<a/>' })
+class First {}
+const helper = () => '@Component({...})'
+@Component({ template: '<b/>' })
+class Second {}";
+    assert_eq!(components(body, &["First", "Second"]), ["First", "Second"]);
+    assert_eq!(fields(body, &["First", "Second"]), ["'<a/>'", "'<b/>'"]);
+}
diff --git a/napi/angular-compiler/index.d.ts b/napi/angular-compiler/index.d.ts
index d2b6b2954..e5b58f865 100644
--- a/napi/angular-compiler/index.d.ts
+++ b/napi/angular-compiler/index.d.ts
@@ -135,6 +135,36 @@ export interface ComponentExtractionResult {
   factoryDef?: string
 }
 
+/**
+ * Take the HMR fingerprint of a component file, from one parse.
+ *
+ * Only `classNames` (the components `transformAngularFile` compiled) are
+ * read, through Angular's `@Component` found by its `@angular/core` import.
+ * A `template` / `styles` value is left out only when it is one string,
+ * template literal or (for `styles`) array literal. A source with syntax
+ * errors leaves nothing out.
+ *
+ * The result equals `TransformResult.hmrFingerprint` for the same source
+ * and class names, so a build tool can compare the two to decide between an
+ * HMR update (equal: only those values changed) and a full reload.
+ */
+export declare function componentHmrFingerprint(
+  source: string,
+  filename: string,
+  classNames: Array<string>,
+): ComponentHmrFingerprint
+
+/** The HMR fingerprint of a component file. */
+export interface ComponentHmrFingerprint {
+  /**
+   * Hash of the source with the inline `template` / `styles` values of the
+   * named components left out (their quotes or brackets are kept).
+   */
+  fingerprint: string
+  /** The named classes whose `@Component({...})` was read, in source order. */
+  components: Array<string>
+}
+
 /** Host metadata extracted from a `@Component` decorator. */
 export interface ComponentHostMetadata {
   /** Host property bindings: [[key, value], ...]. */
@@ -1035,10 +1065,13 @@ export interface TransformResult {
   /** Style updates for HMR (component_id → styles). */
   styleUpdates: Map<string, string[]>
   /**
-   * For HMR: each compiled component's `@Component` decorator callee as
-   * written (component_id → `Component`, `Cmp`, `ng.Component`, ...).
+   * For HMR (`hmr: true`): the fingerprint of the source with the inline
+   * `template` / `styles` values of the compiled components left out.
+   * Compare it with `componentHmrFingerprint(newSource, filename,
+   * compiledClassNames).fingerprint` after an edit: equal means only those
+   * values changed, so an HMR update is enough.
    */
-  componentDecorators: Record<string, string>
+  hmrFingerprint?: string
   /** Compilation errors. */
   errors: Array<OxcError>
   /** Compilation warnings. */
diff --git a/napi/angular-compiler/index.js b/napi/angular-compiler/index.js
index f5ebb7a14..235763922 100644
--- a/napi/angular-compiler/index.js
+++ b/napi/angular-compiler/index.js
@@ -911,6 +911,7 @@ const {
   compileForHmr,
   compileForHmrSync,
   compileTemplate,
+  componentHmrFingerprint,
   decodeComponentId,
   encapsulateStyle,
   encodeComponentId,
@@ -933,6 +934,7 @@ export { compileFactory }
 export { compileForHmr }
 export { compileForHmrSync }
 export { compileTemplate }
+export { componentHmrFingerprint }
 export { decodeComponentId }
 export { encapsulateStyle }
 export { encodeComponentId }
diff --git a/napi/angular-compiler/src/lib.rs b/napi/angular-compiler/src/lib.rs
index 4061857e4..4247eae1f 100644
--- a/napi/angular-compiler/src/lib.rs
+++ b/napi/angular-compiler/src/lib.rs
@@ -387,10 +387,12 @@ pub struct TransformResult {
     #[napi(ts_type = "Map<string, string[]>")]
     pub style_updates: HashMap<String, Vec<String>>,
 
-    /// For HMR: each compiled component's `@Component` decorator callee as
-    /// written (component_id → `Component`, `Cmp`, `ng.Component`, ...).
-    #[napi(ts_type = "Record<string, string>")]
-    pub component_decorators: HashMap<String, String>,
+    /// For HMR (`hmr: true`): the fingerprint of the source with the inline
+    /// `template` / `styles` values of the compiled components left out.
+    /// Compare it with `componentHmrFingerprint(newSource, filename,
+    /// compiledClassNames).fingerprint` after an edit: equal means only those
+    /// values changed, so an HMR update is enough.
+    pub hmr_fingerprint: Option<String>,
 
     /// Compilation errors.
     pub errors: Vec<OxcError>,
@@ -984,6 +986,44 @@ pub fn extract_component_urls(
     AsyncTask::new(ExtractComponentUrlsTask { source, filename, options })
 }
 
+/// The HMR fingerprint of a component file.
+#[napi(object)]
+pub struct ComponentHmrFingerprint {
+    /// Hash of the source with the inline `template` / `styles` values of the
+    /// named components left out (their quotes or brackets are kept).
+    pub fingerprint: String,
+    /// The named classes whose `@Component({...})` was read, in source order.
+    pub components: Vec<String>,
+}
+
+/// Take the HMR fingerprint of a component file, from one parse.
+///
+/// Only `classNames` (the components `transformAngularFile` compiled) are
+/// read, through Angular's `@Component` found by its `@angular/core` import.
+/// A `template` / `styles` value is left out only when it is one string,
+/// template literal or (for `styles`) array literal. A source with syntax
+/// errors leaves nothing out.
+///
+/// The result equals `TransformResult.hmrFingerprint` for the same source
+/// and class names, so a build tool can compare the two to decide between an
+/// HMR update (equal: only those values changed) and a full reload.
+#[napi]
+pub fn component_hmr_fingerprint(
+    source: String,
+    filename: String,
+    class_names: Vec<String>,
+) -> ComponentHmrFingerprint {
+    let allocator = Allocator::default();
+    let class_names: Vec<&str> = class_names.iter().map(String::as_str).collect();
+    let result = oxc_angular_compiler::component_hmr_fingerprint(
+        &allocator,
+        &filename,
+        &source,
+        &class_names,
+    );
+    ComponentHmrFingerprint { fingerprint: result.fingerprint, components: result.components }
+}
+
 /// Top-level declarations extracted from a TypeScript file for HMR.
 ///
 /// These are the symbols that can be passed as local dependencies to
@@ -1246,7 +1286,7 @@ impl Task for TransformAngularFileTask {
             dependencies: result.dependencies,
             template_updates: result.template_updates,
             style_updates: result.style_updates,
-            component_decorators: result.component_decorators,
+            hmr_fingerprint: result.hmr_fingerprint,
             errors,
             warnings: vec![],
             missing_link_urls: result.missing_link_urls,
diff --git a/napi/angular-compiler/test/decorator-fields.test.ts b/napi/angular-compiler/test/decorator-fields.test.ts
deleted file mode 100644
index 37532ec0d..000000000
--- a/napi/angular-compiler/test/decorator-fields.test.ts
+++ /dev/null
@@ -1,939 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import {
-  emptyDelimitedRange,
-  locateComponentDecorators,
-  locateStylesInArgs,
-  locateTemplateInArgs,
-} from '../vite-plugin/utils/decorator-fields.js'
-
-// The className-keyed wrappers that used to live in decorator-fields.ts went
-// away with the text-scan HMR path — per-class resources now come from the
-// Rust extractor. What survives is the metadata *strip* that decides HMR
-// versus full reload, which reaches the same locators through
-// `locateComponentDecorators`. These two mirror what the removed wrappers
-// did, so the tests below still pin behaviour that ships.
-const stylesFieldFor = (code: string, className: string): [number, number] | null => {
-  const found = locateComponentDecorators(code).find((d) => d.className === className)
-  return found ? locateStylesInArgs(code, found.argsRange) : null
-}
-
-const templateFieldFor = (code: string, className: string): [number, number] | null => {
-  const found = locateComponentDecorators(code).find((d) => d.className === className)
-  return found ? locateTemplateInArgs(code, found.argsRange) : null
-}
-
-/** The source text a located range covers, outer delimiters included. */
-const textOf = (code: string, range: [number, number]): string => code.slice(range[0], range[1] + 1)
-
-describe('decorator-fields utils', () => {
-  describe('emptyDelimitedRange', () => {
-    it('empties the body of a styles array but keeps the brackets', () => {
-      const src = `before styles: ['x', 'y'] after`
-      const open = src.indexOf('[')
-      const close = src.indexOf(']')
-      expect(emptyDelimitedRange(src, [open, close])).toBe('before styles: [] after')
-    })
-
-    it('empties the body of a single-quoted template', () => {
-      const src = `before template: '<p/>' after`
-      const open = src.indexOf("'")
-      const close = src.lastIndexOf("'")
-      expect(emptyDelimitedRange(src, [open, close])).toBe(`before template: '' after`)
-    })
-
-    it('empties the body of a double-quoted template', () => {
-      const src = `before template: "<p/>" after`
-      const open = src.indexOf('"')
-      const close = src.lastIndexOf('"')
-      expect(emptyDelimitedRange(src, [open, close])).toBe(`before template: "" after`)
-    })
-
-    it('empties the body of a template literal', () => {
-      const src = 'before template: `<p/>` after'
-      const open = src.indexOf('`')
-      const close = src.lastIndexOf('`')
-      expect(emptyDelimitedRange(src, [open, close])).toBe('before template: `` after')
-    })
-
-    it('is a no-op when the range already wraps an empty body', () => {
-      const src = `x [] y`
-      expect(emptyDelimitedRange(src, [2, 3])).toBe(src)
-    })
-  })
-
-  describe('locateComponentDecorators', () => {
-    it('returns [] when the source has no @Component decorator', () => {
-      expect(locateComponentDecorators(`export class Foo {}`)).toEqual([])
-    })
-
-    it('returns [] when @Component is present but no class follows', () => {
-      // No class declared at all — we can't pair the decorator to a name.
-      const src = `@Component({ selector: 'x' })`
-      expect(locateComponentDecorators(src)).toEqual([])
-    })
-
-    it('ignores a commented-out decorator that follows the real one', () => {
-      // The phantom sits between the real decorator and the class. Pairing
-      // the class with it would read the stale metadata, not merely miss it.
-      const src = [
-        `@Component({ selector: 'x', styles: ['.real{}'] })`,
-        `// @Component({ styles: ['.old{}'] })`,
-        `export class FooComponent {}`,
-      ].join('\n')
-      const out = locateComponentDecorators(src)
-      expect(out).toHaveLength(1)
-      expect(out[0].className).toBe('FooComponent')
-      expect(textOf(src, stylesFieldFor(src, 'FooComponent')!)).toBe(`['.real{}']`)
-    })
-
-    it('ignores a decorator inside a block comment that follows the real one', () => {
-      const src = [
-        `@Component({ selector: 'x', styles: ['.real{}'] })`,
-        `/* @Component({ styles: ['.old{}'] }) */`,
-        `export class FooComponent {}`,
-      ].join('\n')
-      expect(textOf(src, stylesFieldFor(src, 'FooComponent')!)).toBe(`['.real{}']`)
-    })
-
-    it('ignores a commented-out decorator that precedes the real one', () => {
-      const src = [
-        `// @Component({ styles: ['.old{}'] })`,
-        `@Component({ selector: 'x', styles: ['.real{}'] })`,
-        `export class FooComponent {}`,
-      ].join('\n')
-      const out = locateComponentDecorators(src)
-      expect(out).toHaveLength(1)
-      expect(textOf(src, stylesFieldFor(src, 'FooComponent')!)).toBe(`['.real{}']`)
-    })
-
-    it('ignores a decorator written inside a string literal', () => {
-      const src = [
-        `const doc = 'see @Component({ styles: [".str{}"] }) for details';`,
-        `@Component({ selector: 'x', styles: ['.real{}'] })`,
-        `export class FooComponent {}`,
-      ].join('\n')
-      const out = locateComponentDecorators(src)
-      expect(out).toHaveLength(1)
-      expect(textOf(src, stylesFieldFor(src, 'FooComponent')!)).toBe(`['.real{}']`)
-    })
-
-    it('pairs each class with its own decorator when a phantom sits between them', () => {
-      const src = [
-        `@Component({ selector: 'a', styles: ['.a{}'] })`,
-        `// @Component({ styles: ['.fake{}'] })`,
-        `export class AComponent {}`,
-        `@Component({ selector: 'b', styles: ['.b{}'] })`,
-        `export class BComponent {}`,
-      ].join('\n')
-      expect(locateComponentDecorators(src).map((d) => d.className)).toEqual([
-        'AComponent',
-        'BComponent',
-      ])
-      expect(textOf(src, stylesFieldFor(src, 'AComponent')!)).toBe(`['.a{}']`)
-      expect(textOf(src, stylesFieldFor(src, 'BComponent')!)).toBe(`['.b{}']`)
-    })
-
-    it('returns a single entry for a single-component file', () => {
-      const src = `@Component({ selector: 'x' })\nexport class FooComponent {}`
-      const out = locateComponentDecorators(src)
-      expect(out).toHaveLength(1)
-      expect(out[0].className).toBe('FooComponent')
-      // argsRange covers `(...)` inclusive
-      expect(src[out[0].argsRange[0]]).toBe('(')
-      expect(src[out[0].argsRange[1]]).toBe(')')
-    })
-
-    it('returns one entry per @Component in a multi-component file', () => {
-      const src = `
-        import { Component } from '@angular/core';
-        @Component({ selector: 'app-first', template: '<div>First</div>' })
-        export class FirstComponent {}
-        @Component({ selector: 'app-second', template: '<span>Second</span>' })
-        export class SecondComponent {}
-      `
-      const out = locateComponentDecorators(src)
-      expect(out.map((d) => d.className)).toEqual(['FirstComponent', 'SecondComponent'])
-      // each argsRange must enclose its own args (the inner JSON literal)
-      expect(src.slice(...out[0].argsRange)).toContain('app-first')
-      expect(src.slice(...out[1].argsRange)).toContain('app-second')
-    })
-
-    it('handles plain `class Foo` (no `export`)', () => {
-      const src = `@Component({ template: '' })\nclass Foo {}`
-      const out = locateComponentDecorators(src)
-      expect(out).toHaveLength(1)
-      expect(out[0].className).toBe('Foo')
-    })
-
-    it('handles `export default class Foo`', () => {
-      const src = `@Component({ template: '' })\nexport default class Foo {}`
-      const out = locateComponentDecorators(src)
-      expect(out).toHaveLength(1)
-      expect(out[0].className).toBe('Foo')
-    })
-
-    it('handles `export abstract class Foo`', () => {
-      const src = `@Component({ template: '' })\nexport abstract class Foo {}`
-      const out = locateComponentDecorators(src)
-      expect(out).toHaveLength(1)
-      expect(out[0].className).toBe('Foo')
-    })
-
-    it('handles extra decorators between @Component(...) and class', () => {
-      const src = `@Component({ template: '' })\n@Inject() @Other()\nexport class Foo {}`
-      const out = locateComponentDecorators(src)
-      expect(out).toHaveLength(1)
-      expect(out[0].className).toBe('Foo')
-    })
-
-    it('handles a class with generics, extends, and implements', () => {
-      const src = `@Component({ template: '' })\nexport class Foo<T extends Bar, U> extends Base<T> implements Baz<U> {}`
-      const out = locateComponentDecorators(src)
-      expect(out).toHaveLength(1)
-      expect(out[0].className).toBe('Foo')
-    })
-
-    it('handles class names that start with `$` or `_`', () => {
-      const src = `@Component({ template: '' })\nclass $Foo {}\n@Component({ template: '' })\nclass _Bar {}`
-      const out = locateComponentDecorators(src)
-      expect(out.map((d) => d.className)).toEqual(['$Foo', '_Bar'])
-    })
-
-    it('skips an anonymous default-exported component (no identifier to pair)', () => {
-      // `export default class { ... }` has no name. The decorator can't be
-      // matched to a className → entry is skipped (HMR can't address it).
-      const src = `@Component({ template: '' })\nexport default class {}`
-      expect(locateComponentDecorators(src)).toEqual([])
-    })
-
-    it('does not pair an @Component with a class that belongs to a later decorator', () => {
-      // The first @Component has no class before the next @Component (which has
-      // its own class). The first entry should be SKIPPED, not paired with Bar.
-      // (Note: comments aren't parsed away, so this fixture deliberately omits
-      // the word `class` from the dangling region.)
-      const src = `
-        @Component({ template: '' })
-        @Component({ template: '' })
-        class Bar {}
-      `
-      const out = locateComponentDecorators(src)
-      expect(out.map((d) => d.className)).toEqual(['Bar'])
-    })
-
-    it('does not pair when the next class follows another @Component', () => {
-      // Same idea: the first @Component is dangling.
-      const src = `
-        @Component({ template: '' })
-        @Component({ template: '' })
-        class A {}
-        @Component({ template: '' })
-        class B {}
-      `
-      const out = locateComponentDecorators(src)
-      expect(out.map((d) => d.className)).toEqual(['A', 'B'])
-    })
-
-    // The compiler reports how it found each component's decorator spelled;
-    // the scan looks for exactly those spellings, whole.
-    it('finds the decorator spellings it is given, and only those', () => {
-      const src = `
-        @Cmp({ template: 'a' })
-        class A {}
-        @ng.Component({ template: 'b' })
-        class B {}
-        @Component({ template: 'c' })
-        class C {}
-        @CmpX({ template: 'd' })
-        class D {}
-        @Cmp.x({ template: 'e' })
-        class E {}
-        @ng . Component ({ template: 'f' })
-        class F {}
-      `
-      const out = locateComponentDecorators(src, ['Cmp', 'ng.Component', 'ng . Component'])
-      expect(out.map((d) => [d.className, d.decorator])).toEqual([
-        ['A', 'Cmp'],
-        ['B', 'ng.Component'],
-        ['F', 'ng . Component'],
-      ])
-      expect(locateComponentDecorators(src).map((d) => d.className)).toEqual(['C'])
-    })
-  })
-
-  describe('locateStylesInArgs', () => {
-    const multi = `
-      @Component({ selector: 'a', styles: ['.first {}'] })
-      export class FirstComponent {}
-      @Component({ selector: 'b', styles: ['.second {}'] })
-      export class SecondComponent {}
-    `
-
-    it('returns null when className matches no decorator', () => {
-      expect(stylesFieldFor(multi, 'Nope')).toBeNull()
-    })
-
-    it('returns null when the named component has no styles field', () => {
-      const src = `@Component({ template: '<p/>' })\nexport class Foo {}`
-      expect(stylesFieldFor(src, 'Foo')).toBeNull()
-    })
-
-    it('returns the FirstComponent styles range when asked for FirstComponent', () => {
-      expect(textOf(multi, stylesFieldFor(multi, 'FirstComponent')!)).toBe(`['.first {}']`)
-    })
-
-    it('returns the SecondComponent styles range when asked for SecondComponent', () => {
-      expect(textOf(multi, stylesFieldFor(multi, 'SecondComponent')!)).toBe(`['.second {}']`)
-    })
-
-    it('supports the bare-string styles form per component', () => {
-      const src = `
-        @Component({ styles: '.first {}' })
-        export class FirstComponent {}
-        @Component({ styles: '.second {}' })
-        export class SecondComponent {}
-      `
-      expect(textOf(src, stylesFieldFor(src, 'SecondComponent')!)).toBe(`'.second {}'`)
-    })
-
-    // The next four guard against false-matches: a `styles:` key occurring
-    // inside another field's string/template literal must not be picked up.
-    it('ignores `styles:` text inside a template literal that precedes the real styles', () => {
-      const src =
-        "@Component({ template: `<pre>const cfg = { styles: ['fake'] }</pre>`, styles: ['real'] })\nexport class Foo {}"
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['real']`)
-    })
-
-    it('returns null when the only `styles:` text in the args is inside a template literal', () => {
-      const src = "@Component({ template: `<pre>{ styles: ['fake'] }</pre>` })\nexport class Bar {}"
-      expect(stylesFieldFor(src, 'Bar')).toBeNull()
-    })
-
-    it("ignores `styles:` inside a `${...}` interpolation's nested object literal", () => {
-      // `${ ... { styles: [...] } ... }` inside a template literal must not
-      // be treated as a top-level @Component metadata property.
-      const src =
-        "@Component({ template: `${doThing({ styles: ['fake'] })}`, styles: ['real'] })\nexport class Baz {}"
-      expect(textOf(src, stylesFieldFor(src, 'Baz')!)).toBe(`['real']`)
-    })
-
-    it('ignores `styles:` inside a nested non-metadata object literal', () => {
-      // `metadata: { styles: ['nested'] }` is not the component's `styles`
-      // field; only top-level properties of the @Component argument count.
-      const src = `@Component({ host: { '[styles]': 'expr', styles: 'irrelevant' }, styles: ['real'] })\nexport class Qux {}`
-      expect(textOf(src, stylesFieldFor(src, 'Qux')!)).toBe(`['real']`)
-    })
-
-    it('does not match a `styleUrls:` field as the inline `styles:` field', () => {
-      const src = `@Component({ styleUrls: ['./a.css'] })\nexport class Foo {}`
-      expect(stylesFieldFor(src, 'Foo')).toBeNull()
-    })
-
-    it('does not match the singular `styleUrl:` field as the inline `styles:` field', () => {
-      const src = `@Component({ styleUrl: './a.css' })\nexport class Foo {}`
-      expect(stylesFieldFor(src, 'Foo')).toBeNull()
-    })
-  })
-
-  describe('locateTemplateInArgs', () => {
-    const multi = `
-      @Component({ selector: 'a', template: '<first/>' })
-      export class FirstComponent {}
-      @Component({ selector: 'b', template: '<second/>' })
-      export class SecondComponent {}
-    `
-
-    it('returns null when className matches no decorator', () => {
-      expect(templateFieldFor(multi, 'Nope')).toBeNull()
-    })
-
-    it('returns null when the named component has no template field', () => {
-      const src = `@Component({ styles: [] })\nexport class Foo {}`
-      expect(templateFieldFor(src, 'Foo')).toBeNull()
-    })
-
-    it('returns the FirstComponent template range when asked for FirstComponent', () => {
-      expect(textOf(multi, templateFieldFor(multi, 'FirstComponent')!)).toBe(`'<first/>'`)
-    })
-
-    it('returns the SecondComponent template range when asked for SecondComponent', () => {
-      expect(textOf(multi, templateFieldFor(multi, 'SecondComponent')!)).toBe(`'<second/>'`)
-    })
-
-    it("ignores `template:` text appearing inside another field's string literal", () => {
-      // The `styles` array contains a string with literal `template:` text;
-      // the real `template:` field comes after. The naive regex would match
-      // the inner one first.
-      const src = `@Component({ styles: ['/* template: "fake" */'], template: '<real/>' })\nexport class Foo {}`
-      expect(textOf(src, templateFieldFor(src, 'Foo')!)).toBe(`'<real/>'`)
-    })
-
-    it('does not match a `templateUrl:` field as `template:`', () => {
-      const src = `@Component({ templateUrl: './foo.html' })\nexport class Foo {}`
-      expect(templateFieldFor(src, 'Foo')).toBeNull()
-    })
-
-    it('finds the inline template when the decorator also has a templateUrl field', () => {
-      const src = `@Component({ templateUrl: './real.html', template: '<p/>' })\nexport class Foo {}`
-      expect(textOf(src, templateFieldFor(src, 'Foo')!)).toBe(`'<p/>'`)
-    })
-  })
-
-  // -----------------------------------------------------------------
-  // Which property keys count as the field, and which must not. The
-  // strip has to empty exactly the component's own `template:`/`styles:`
-  // — emptying anything else, or missing the real one, changes the
-  // stripped bytes and flips the HMR / full-reload decision.
-  // -----------------------------------------------------------------
-  describe('which keys count as the field', () => {
-    it('does not locate a field whose value has no literal shape', () => {
-      const src = `@Component({ styles: STYLES })\nexport class Foo {}`
-      expect(stylesFieldFor(src, 'Foo')).toBeNull()
-    })
-
-    it('reads a single-quoted key the same as the bare form', () => {
-      const src = `@Component({ 'styles': ['.x{}'] })\nexport class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['.x{}']`)
-    })
-
-    it('reads a double-quoted key the same as the bare form', () => {
-      const src = `@Component({ "styles": ['.x{}'] })\nexport class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['.x{}']`)
-    })
-
-    it('reads a quoted `template` key', () => {
-      const src = `@Component({ 'template': '<p/>' })\nexport class Foo {}`
-      expect(textOf(src, templateFieldFor(src, 'Foo')!)).toBe(`'<p/>'`)
-    })
-
-    it('keeps the cross-match guards for quoted keys', () => {
-      const urls = `@Component({ 'styleUrls': ['./a.css'] })\nexport class Foo {}`
-      expect(stylesFieldFor(urls, 'Foo')).toBeNull()
-      const tplUrl = `@Component({ 'templateUrl': './a.html' })\nexport class Foo {}`
-      expect(templateFieldFor(tplUrl, 'Foo')).toBeNull()
-    })
-
-    it('reads the real field past a computed key', () => {
-      // A computed key hides its name from this scan, but it is not the
-      // field we are after, and the visible field is still exactly what it
-      // says it is.
-      const src = `@Component({ [K]: 1, styles: ['.x{}'] })\nexport class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['.x{}']`)
-    })
-
-    it('does not locate a computed key as a field', () => {
-      const src = `@Component({ [K]: ['.x{}'] })\nexport class Foo {}`
-      expect(stylesFieldFor(src, 'Foo')).toBeNull()
-    })
-
-    it('reads the real field past a spread', () => {
-      const src = `@Component({ ...BASE, styles: ['.x{}'] })\nexport class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['.x{}']`)
-    })
-
-    it('does not locate a shorthand style field, which has no value to empty', () => {
-      const src = `@Component({ template: '<p/>', styles })\nexport class Foo {}`
-      expect(stylesFieldFor(src, 'Foo')).toBeNull()
-    })
-
-    it('does not let an unrelated shorthand degrade a readable field', () => {
-      const src = `@Component({ selector, styles: ['.x{}'] })\nexport class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['.x{}']`)
-    })
-
-    it('reads the real field past a field-named identifier used as a value', () => {
-      const src = `@Component({ selector: styles, styles: ['.x{}'] })\nexport class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['.x{}']`)
-    })
-
-    it('does not let an unrelated method degrade a readable field', () => {
-      const src = `@Component({ foo() { return 1 }, styles: ['.x{}'] })\nexport class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['.x{}']`)
-    })
-
-    // A method or accessor named like the field is not the field: there is
-    // no value literal to empty, and emptying its body would be wrong.
-    it('does not locate a method named like the field', () => {
-      const src = `@Component({ styles() { return ['.x{}'] } })\nexport class Foo {}`
-      expect(stylesFieldFor(src, 'Foo')).toBeNull()
-    })
-
-    it('does not locate a getter named like the field', () => {
-      const src = `@Component({ get template() { return '<p/>' } })\nexport class Foo {}`
-      expect(templateFieldFor(src, 'Foo')).toBeNull()
-    })
-
-    it('reads the real field past a setter named like it', () => {
-      const src = `@Component({ set styles(v) {}, styles: ['.x{}'] })\nexport class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['.x{}']`)
-    })
-
-    it('does not read a field nested in a deeper object', () => {
-      const src = `@Component({ data: { styles: ['.deep{}'] } })\nexport class Foo {}`
-      expect(stylesFieldFor(src, 'Foo')).toBeNull()
-    })
-
-    it('reads a field followed by a trailing comma', () => {
-      const src = `@Component({ styles: ['.x{}'], })\nexport class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['.x{}']`)
-    })
-  })
-
-  // A value that merely STARTS with a literal does not denote it. Emptying
-  // that leading piece would leave the rest of the expression in the
-  // stripped source, so an edit to the expression would read as a
-  // non-metadata change — or worse, an edit elsewhere would not.
-  describe('a literal that is only the start of a larger expression', () => {
-    const styles = (field: string) =>
-      stylesFieldFor(`@Component({ selector: 'a', ${field} })\nexport class Foo {}`, 'Foo')
-    const template = (field: string) =>
-      templateFieldFor(`@Component({ selector: 'a', ${field} })\nexport class Foo {}`, 'Foo')
-
-    it('rejects an inline `styles` string concatenated with an identifier', () => {
-      expect(styles(`styles: '.a{}' + EXTRA`)).toBeNull()
-    })
-
-    it('rejects a `template` concatenated with another literal', () => {
-      expect(template(`template: '<p/>' + '<q/>'`)).toBeNull()
-    })
-
-    it('rejects a `template` concatenated with an identifier', () => {
-      expect(template(`template: '<p/>' + SUFFIX`)).toBeNull()
-    })
-
-    it('rejects a `styles` array concatenated with an identifier', () => {
-      expect(styles(`styles: ['.a{}'] + EXTRA`)).toBeNull()
-    })
-
-    it('rejects a method call on an inline `styles` string literal', () => {
-      expect(styles(`styles: '.a{}'.replace('a', 'b')`)).toBeNull()
-    })
-
-    it('rejects a method call on a `styles` array literal', () => {
-      expect(styles(`styles: ['.a{}'].concat(MORE)`)).toBeNull()
-    })
-
-    it('rejects a method call on a `template` literal', () => {
-      expect(template(`template: '<p/>'.replace('a', 'b')`)).toBeNull()
-    })
-
-    it('rejects a TypeScript `as` assertion after an inline `styles` string', () => {
-      expect(styles(`styles: '.a{}' as string`)).toBeNull()
-    })
-
-    it('rejects a TypeScript `as const` assertion after a `styles` array', () => {
-      expect(styles(`styles: ['.a{}'] as const`)).toBeNull()
-    })
-
-    it('rejects a TypeScript `as` assertion after a `template`', () => {
-      expect(template(`template: '<p/>' as string`)).toBeNull()
-    })
-
-    it('rejects a non-null assertion after an inline `styles` string', () => {
-      expect(styles(`styles: '.a{}'!`)).toBeNull()
-    })
-
-    it('rejects a `satisfies` clause after an inline `styles` string', () => {
-      expect(styles(`styles: '.a{}' satisfies string`)).toBeNull()
-    })
-
-    it('rejects a trailing expression hidden behind a comment', () => {
-      expect(styles(`styles: '.a{}' /* why */ + EXTRA`)).toBeNull()
-    })
-
-    // The other side of the rule: a value the property really does end at
-    // stays readable, whether a comma, the object's brace or a comment
-    // closes it out.
-    it.each([
-      [`styles: ['.a{}']`, `the object's closing brace`, `['.a{}']`],
-      [`styles: ['.a{}'],`, 'a trailing comma', `['.a{}']`],
-      [`styles: '.a{}' /* why */`, 'a block comment then the brace', `'.a{}'`],
-      [`styles: '.a{}' // why\n`, 'a line comment then the brace', `'.a{}'`],
-    ])('still reads %j, ended by %s', (field, _why, expected) => {
-      const src = `@Component({ selector: 'a', ${field} })\nexport class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(expected)
-    })
-
-    it.each([
-      [`template: '<p/>'`, `the object's closing brace`],
-      [`template: '<p/>',`, 'a trailing comma'],
-    ])('still reads %j, ended by %s', (field) => {
-      const src = `@Component({ selector: 'a', ${field} })\nexport class Foo {}`
-      expect(textOf(src, templateFieldFor(src, 'Foo')!)).toBe(`'<p/>'`)
-    })
-  })
-
-  // Escaped identifier keys. `styles` IS `styles` to the TypeScript
-  // parser, so the strip has to empty it like any other spelling of the
-  // field. Decoding keeps the match exact where refusing would silently
-  // leave a real `styles:` field in the stripped source.
-  describe('escaped keys', () => {
-    it('decodes a \\uHHHH escape in a bare key', () => {
-      const src = `@Component({ style\\u0073: ['.x{}'] })\nexport class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['.x{}']`)
-    })
-
-    it('decodes a \\u{…} escape in a bare key', () => {
-      const src = `@Component({ style\\u{73}: ['.x{}'] })\nexport class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['.x{}']`)
-    })
-
-    it('decodes an escape at the first character of a bare key', () => {
-      const src = `@Component({ \\u0073tyles: ['.x{}'] })\nexport class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['.x{}']`)
-    })
-
-    it('decodes an escaped `template` key', () => {
-      const src = `@Component({ templat\\u0065: '<p/>' })\nexport class Foo {}`
-      expect(textOf(src, templateFieldFor(src, 'Foo')!)).toBe(`'<p/>'`)
-    })
-
-    it('decodes a quoted key carrying an escape', () => {
-      // A quoted key is a string literal, so it decodes by string rules.
-      const src = `@Component({ 'style\\u0073': ['.x{}'] })\nexport class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['.x{}']`)
-    })
-
-    it('does not locate an escaped shorthand, which has no value to empty', () => {
-      const src = `@Component({ template: '<p/>', style\\u0073 })\nexport class Foo {}`
-      expect(stylesFieldFor(src, 'Foo')).toBeNull()
-    })
-
-    it('does not match a decoded key that names something else', () => {
-      const src = `@Component({ style\\u0073Extra: ['.x{}'] })\nexport class Foo {}`
-      expect(stylesFieldFor(src, 'Foo')).toBeNull()
-    })
-
-    it('keeps the cross-match guards for decoded keys', () => {
-      const urls = `@Component({ style\\u0055rls: ['./a.css'] })\nexport class Foo {}`
-      expect(stylesFieldFor(urls, 'Foo')).toBeNull()
-      const tplUrl = `@Component({ templat\\u0065Url: './a.html' })\nexport class Foo {}`
-      expect(templateFieldFor(tplUrl, 'Foo')).toBeNull()
-    })
-
-    it('does not match a lookalike built from a non-ASCII letter', () => {
-      // Cyrillic е in place of `e` — a different identifier entirely.
-      const src = `@Component({ stylеs: ['.x{}'] })\nexport class Foo {}`
-      expect(stylesFieldFor(src, 'Foo')).toBeNull()
-    })
-
-    it('does not match a key whose \\u escape is malformed', () => {
-      const src = `@Component({ style\\u00ZZs: ['.x{}'] })\nexport class Foo {}`
-      expect(stylesFieldFor(src, 'Foo')).toBeNull()
-    })
-
-    it('does not match a key carrying a \\xHH escape — illegal in an identifier', () => {
-      const src = `@Component({ style\\x73: ['.x{}'] })\nexport class Foo {}`
-      expect(stylesFieldFor(src, 'Foo')).toBeNull()
-    })
-
-    it('does not let an escaped unrelated key degrade a readable field', () => {
-      const src = `@Component({ sel\\u0065ctor: 'a', styles: ['.x{}'] })\nexport class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['.x{}']`)
-    })
-  })
-
-  // -----------------------------------------------------------------
-  // Comment-aware scanning. Without this, the walker treats `'` in a
-  // `// don't ...` line comment as opening a string literal that never
-  // closes (real field missed), and a `// styles: [...]` line comment
-  // or `/* styles: [...] */` block comment as a real field (wrong
-  // range returned).
-  // -----------------------------------------------------------------
-  describe('comment handling in @Component args', () => {
-    it('does not get stuck on an apostrophe inside a line comment', () => {
-      const src = `@Component({
-  // I'm setting the styles below
-  styles: ['real']
-})
-class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['real']`)
-    })
-
-    it('does not get stuck on apostrophes inside a block comment', () => {
-      const src = `@Component({
-  /* It's important: don't use these */
-  styles: ['real']
-})
-class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['real']`)
-    })
-
-    it('ignores `styles:` inside a line comment', () => {
-      const src = `@Component({
-  // styles: ['fake'],
-  styles: ['real']
-})
-class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['real']`)
-    })
-
-    it('ignores `styles:` inside a block comment', () => {
-      const src = `@Component({
-  /* styles: ['fake'] */
-  styles: ['real']
-})
-class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['real']`)
-    })
-
-    it('ignores `template:` inside a block comment', () => {
-      const src = `@Component({
-  /* template: '<fake/>' */
-  template: '<real/>'
-})
-class Foo {}`
-      expect(textOf(src, templateFieldFor(src, 'Foo')!)).toBe(`'<real/>'`)
-    })
-
-    it('returns null when the only `styles:` is inside a comment', () => {
-      const src = `@Component({
-  // styles: ['fake']
-  selector: 'app-foo'
-})
-class Foo {}`
-      expect(stylesFieldFor(src, 'Foo')).toBeNull()
-    })
-
-    it('handles a block comment spanning multiple lines', () => {
-      const src = `@Component({
-  /*
-   * styles: ['fake-line-1']
-   * styles: ['fake-line-2']
-   */
-  styles: ['real']
-})
-class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['real']`)
-    })
-
-    it('handles a comment between @Component(...) and the class declaration', () => {
-      const src = `@Component({ styles: ['x'] })
-// I'm decorating this class
-export class Foo {}`
-      const out = locateComponentDecorators(src)
-      expect(out).toHaveLength(1)
-      expect(out[0].className).toBe('Foo')
-    })
-
-    it('does NOT treat `//` inside a string as a comment', () => {
-      // `'http://x'` is a URL in a value, not a comment.
-      const src = `@Component({ template: 'http://x', styles: ['real'] })
-class Foo {}`
-      expect(textOf(src, templateFieldFor(src, 'Foo')!)).toBe(`'http://x'`)
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['real']`)
-    })
-
-    it('does NOT treat `/*` inside a string as a block comment', () => {
-      const src = `@Component({ template: '/* not a comment */', styles: ['real'] })
-class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['real']`)
-    })
-
-    // A comment may sit anywhere inside a field declaration, and the strip
-    // has to read straight past it — both to find the field at all, and to
-    // put the range's closing delimiter in the right place.
-    describe('comment placement within a field declaration', () => {
-      const decorator = (field: string) =>
-        `@Component({ selector: 'a', ${field} })\nexport class Foo {}`
-      const stylesText = (field: string) => {
-        const src = decorator(field)
-        return textOf(src, stylesFieldFor(src, 'Foo')!)
-      }
-      const templateText = (field: string) => {
-        const src = decorator(field)
-        return textOf(src, templateFieldFor(src, 'Foo')!)
-      }
-
-      it('reads a field with a block comment between the key and the colon', () => {
-        expect(stylesText(`styles /* why */: ['.x{}']`)).toBe(`['.x{}']`)
-      })
-
-      it('reads a field with a line comment between the key and the colon', () => {
-        expect(stylesText(`styles // why\n: ['.x{}']`)).toBe(`['.x{}']`)
-      })
-
-      it('reads a field with a comment between the colon and the value', () => {
-        expect(stylesText(`styles: /* why */ ['.x{}']`)).toBe(`['.x{}']`)
-      })
-
-      it('reads a field with a comment before the key', () => {
-        expect(stylesText(`/* why */ styles: ['.x{}']`)).toBe(`['.x{}']`)
-      })
-
-      it('reads a field with two comments between the key and the colon', () => {
-        expect(stylesText(`styles /* a */ /* b */: ['.x{}']`)).toBe(`['.x{}']`)
-      })
-
-      it('reads a quoted key with a comment before the colon', () => {
-        expect(stylesText(`'styles' /* why */: ['.x{}']`)).toBe(`['.x{}']`)
-      })
-
-      it('reads `template` with a comment before the colon', () => {
-        expect(templateText(`template /* why */: '<p/>'`)).toBe(`'<p/>'`)
-      })
-
-      it('reads `template` with a comment after the colon', () => {
-        expect(templateText(`template: /* why */ '<p/>'`)).toBe(`'<p/>'`)
-      })
-
-      // The range has to span the whole array, comments included — the strip
-      // empties everything between the brackets.
-      it('spans an array whose first entry follows a block comment', () => {
-        expect(stylesText(`styles: [/* why */ '.x{}']`)).toBe(`[/* why */ '.x{}']`)
-      })
-
-      it('spans an array whose first entry follows a line comment', () => {
-        expect(stylesText(`styles: [// why\n '.x{}']`)).toBe(`[// why\n '.x{}']`)
-      })
-
-      it('spans an array with a comment before the separating comma', () => {
-        expect(stylesText(`styles: ['.x{}' /* why */, '.y{}']`)).toBe(`['.x{}' /* why */, '.y{}']`)
-      })
-
-      it('spans an array with a comment after the last entry', () => {
-        expect(stylesText(`styles: ['.x{}' /* why */]`)).toBe(`['.x{}' /* why */]`)
-      })
-
-      it('does not let a `]` inside a comment close the array early', () => {
-        expect(stylesText(`styles: ['.x{}' /* ] */]`)).toBe(`['.x{}' /* ] */]`)
-      })
-
-      // An array holding only a comment is still a syntactically valid empty
-      // array, and emptying it is still the right answer.
-      it('spans an array holding only a comment, which strips to `[]`', () => {
-        const src = decorator(`styles: [/* why */]`)
-        const range = stylesFieldFor(src, 'Foo')!
-        expect(textOf(src, range)).toBe(`[/* why */]`)
-        expect(emptyDelimitedRange(src, range)).toContain(`styles: []`)
-      })
-
-      // Comment *contents* must never be mistaken for structure.
-      it('ignores a colon, comma and brackets inside the comment', () => {
-        expect(stylesText(`styles /* a: b, c ] [ */: ['.x{}']`)).toBe(`['.x{}']`)
-      })
-
-      it('ignores a decoy field inside the comment', () => {
-        expect(stylesText(`styles /* styles: './fake.css' */: ['.x{}']`)).toBe(`['.x{}']`)
-      })
-
-      it('ignores an apostrophe inside a comment between the key and the colon', () => {
-        expect(stylesText(`styles /* don't */: ['.x{}']`)).toBe(`['.x{}']`)
-      })
-    })
-  })
-
-  // -----------------------------------------------------------------
-  // Regression coverage for things that *could* look like a decorator
-  // or field but must not be picked up: text inside other strings, in
-  // other decorators, in class member bodies, etc.
-  // -----------------------------------------------------------------
-  describe('robust against decoy tokens elsewhere in the source', () => {
-    it('ignores `@Component(...)` example inside a JSDoc block before the real decorator', () => {
-      const src = `/**
- * Usage example:
- *   @Component({ template: 'fake' })
- *   class Example {}
- */
-@Component({ template: '<real/>' })
-export class Foo {}`
-      expect(textOf(src, templateFieldFor(src, 'Foo')!)).toBe(`'<real/>'`)
-    })
-
-    it('ignores `@Component(...)` text inside a string literal preceding the real decorator', () => {
-      const src = `const docs = "use @Component({ template: 'fake' }) to declare"
-@Component({ template: '<real/>' })
-class Foo {}`
-      expect(textOf(src, templateFieldFor(src, 'Foo')!)).toBe(`'<real/>'`)
-    })
-
-    it('ignores `@Component(...)` text inside a backtick template preceding the real decorator', () => {
-      const src =
-        "`Use @Component({ template: 'fake' })`\n@Component({ template: '<real/>' })\nclass Foo {}"
-      expect(textOf(src, templateFieldFor(src, 'Foo')!)).toBe(`'<real/>'`)
-    })
-
-    it('does not get confused by a `template:` literal that mentions the word "styles:"', () => {
-      const src = `@Component({ template: 'styles: ["fake"]', styles: ['real'] })
-class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['real']`)
-    })
-
-    it('handles unbalanced braces or brackets inside template string content', () => {
-      const src = `@Component({ template: 'has { and ] literally', styles: ['real'] })
-class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['real']`)
-    })
-
-    it('treats CRLF line endings the same as LF', () => {
-      const src = `@Component({\r\n  // a comment with an apostrophe: I'm here\r\n  styles: ['real']\r\n})\r\nclass Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['real']`)
-    })
-
-    it('handles `...spread` followed by a real `styles:` field', () => {
-      const src = `const base = { selector: 'app' }
-@Component({ ...base, styles: ['real'] })
-class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['real']`)
-    })
-
-    it('handles a selector value that contains parens', () => {
-      const src = `@Component({ selector: 'foo(bar)', styles: ['real'] })
-class Foo {}`
-      expect(textOf(src, stylesFieldFor(src, 'Foo')!)).toBe(`['real']`)
-    })
-
-    it('ignores a class member method named `Component`', () => {
-      const src = `@Component({ template: '<real/>' })
-class Foo {
-  Component(x: number) { return x; }
-}`
-      const out = locateComponentDecorators(src)
-      expect(out).toHaveLength(1)
-      expect(out[0].className).toBe('Foo')
-    })
-
-    it('handles a helper function whose body contains an "@Component" string between two real components', () => {
-      const src = `@Component({ template: '<a/>' })
-class First {}
-const helper = () => '@Component({...})'
-@Component({ template: '<b/>' })
-class Second {}`
-      const out = locateComponentDecorators(src)
-      expect(out.map((d) => d.className)).toEqual(['First', 'Second'])
-      expect(textOf(src, templateFieldFor(src, 'First')!)).toBe(`'<a/>'`)
-      expect(textOf(src, templateFieldFor(src, 'Second')!)).toBe(`'<b/>'`)
-    })
-
-    it('handles literal `$` followed by `${...}` interpolation in a template literal', () => {
-      const src = '@Component({ template: `cost $5 or $${price}` })\nclass Foo {}'
-      expect(textOf(src, templateFieldFor(src, 'Foo')!)).toBe('`cost $5 or $${price}`')
-    })
-
-    it('coexists with other class-level decorators like @SignalComponent', () => {
-      const src = `@SignalComponent({ template: 'sig' })
-@Component({ template: '<real/>' })
-class Foo {}`
-      // Only @Component is recognized; @SignalComponent is ignored entirely.
-      const out = locateComponentDecorators(src)
-      expect(out).toHaveLength(1)
-      expect(textOf(src, templateFieldFor(src, 'Foo')!)).toBe(`'<real/>'`)
-    })
-  })
-
-  describe('Unicode class identifiers', () => {
-    it('captures a class name containing non-ASCII letters', () => {
-      const src = `@Component({ styles: ['x'] })\nclass Café {}`
-      const out = locateComponentDecorators(src)
-      expect(out).toHaveLength(1)
-      expect(out[0].className).toBe('Café')
-    })
-
-    it('captures CJK class names', () => {
-      const src = `@Component({ styles: ['x'] })\nclass 组件 {}`
-      const out = locateComponentDecorators(src)
-      expect(out).toHaveLength(1)
-      expect(out[0].className).toBe('组件')
-    })
-  })
-})
diff --git a/napi/angular-compiler/test/hmr-fingerprint.test.ts b/napi/angular-compiler/test/hmr-fingerprint.test.ts
new file mode 100644
index 000000000..d3b674933
--- /dev/null
+++ b/napi/angular-compiler/test/hmr-fingerprint.test.ts
@@ -0,0 +1,83 @@
+import { describe, expect, it } from 'vitest'
+
+import { componentHmrFingerprint, transformAngularFileSync } from '../index.js'
+
+// The vite plugin decides HMR versus full reload by comparing these
+// fingerprints across a save. The cases the old JS decorator lexer covered
+// (comments, strings, keys, escapes, ...) are pinned in Rust
+// (crates/oxc_angular_compiler/tests/hmr_fingerprint_test.rs); this checks the
+// binding and the shapes that matter most to the plugin.
+
+const SOURCE = `import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-first',
+  // don't read this as a string
+  template: '<div>First</div>',
+  styles: ['.first { color: red; }', \`.a[data-x="]"] {}\`],
+})
+export class FirstComponent {
+  value = 1
+}
+
+@Component({
+  selector: 'app-second',
+  providers: [{ provide: 'P', useValue: /['"\`)}\\]]/ }],
+  template: \`<span>{{ 'Second' }}</span>\`,
+})
+export class SecondComponent {}
+`
+
+const CLASSES = ['FirstComponent', 'SecondComponent']
+
+const fingerprint = (source: string, classes: string[] = CLASSES) =>
+  componentHmrFingerprint(source, 'app.component.ts', classes).fingerprint
+
+describe('componentHmrFingerprint', () => {
+  it('reads every named component', () => {
+    expect(componentHmrFingerprint(SOURCE, 'app.component.ts', CLASSES).components).toEqual(CLASSES)
+  })
+
+  it.each([
+    ['one template', SOURCE.replace('<div>First</div>', '<div>Changed</div>')],
+    ['a template literal', SOURCE.replace("{{ 'Second' }}", '{{ 2 }}')],
+    ['a styles entry', SOURCE.replace('color: red', 'color: blue')],
+    ['the styles array', SOURCE.replace(/styles: \[.*\]/, "styles: ['.only {}']")],
+    ['both components', SOURCE.replace('First</div>', 'One</div>').replace('Second', 'Two')],
+  ])('keeps the fingerprint for an edit to %s', (_what, edited) => {
+    expect(fingerprint(edited)).toBe(fingerprint(SOURCE))
+  })
+
+  it.each([
+    ['a class member', SOURCE.replace('value = 1', 'value = 2')],
+    ['the selector', SOURCE.replace("'app-first'", "'app-one'")],
+    ['a comment', SOURCE.replace("don't read", 'do not read')],
+    ['the regex literal', SOURCE.replace('/[\'"`)}\\]]/', '/x/')],
+    ['templateUrl', SOURCE.replace("template: '<div>First</div>'", "templateUrl: './a.html'")],
+  ])('changes the fingerprint for an edit to %s', (_what, edited) => {
+    expect(fingerprint(edited)).not.toBe(fingerprint(SOURCE))
+  })
+
+  it('reads only the named classes', () => {
+    const edited = SOURCE.replace('<div>First</div>', '<div>Changed</div>')
+    expect(fingerprint(edited, ['SecondComponent'])).not.toBe(
+      fingerprint(SOURCE, ['SecondComponent']),
+    )
+    expect(fingerprint(edited, [])).not.toBe(fingerprint(SOURCE, []))
+  })
+
+  it('leaves nothing out of a source with syntax errors', () => {
+    const broken = SOURCE.replace('<div>First</div>', "<div>it's</div>")
+    expect(componentHmrFingerprint(broken, 'app.component.ts', CLASSES).components).toEqual([])
+    expect(fingerprint(broken)).toBe(fingerprint(broken, []))
+  })
+
+  it('equals the fingerprint transformAngularFile reports', () => {
+    const result = transformAngularFileSync(SOURCE, 'app.component.ts', { hmr: true })
+    expect(result.errors).toEqual([])
+    expect(result.hmrFingerprint).toBe(fingerprint(SOURCE))
+
+    const withoutHmr = transformAngularFileSync(SOURCE, 'app.component.ts', {})
+    expect(withoutHmr.hmrFingerprint).toBeUndefined()
+  })
+})
diff --git a/napi/angular-compiler/vite-plugin/index.ts b/napi/angular-compiler/vite-plugin/index.ts
index b6527501a..d0355058b 100644
--- a/napi/angular-compiler/vite-plugin/index.ts
+++ b/napi/angular-compiler/vite-plugin/index.ts
@@ -26,6 +26,7 @@ import {
   extractComponentMetadataSync,
   extractComponentUrls,
   compileForHmrSync,
+  componentHmrFingerprint,
   type TransformOptions,
   type ResolvedResources,
   type AngularVersion,
@@ -35,12 +36,6 @@ import { buildOptimizerPlugin } from './angular-build-optimizer-plugin.js'
 import { jitPlugin } from './angular-jit-plugin.js'
 import { angularLinkerPlugin } from './angular-linker-plugin.js'
 import { ssrManifestPlugin } from './angular-ssr-manifest-plugin.js'
-import {
-  emptyDelimitedRange,
-  locateComponentDecorators,
-  locateStylesInArgs,
-  locateTemplateInArgs,
-} from './utils/decorator-fields.js'
 import { injectDtsDeclarations } from './utils/dts.js'
 
 /**
@@ -303,12 +298,6 @@ export function angular(options: PluginOptions = {}): Plugin[] {
   // emits per-component HMR updates and we mirror that here.
   const componentsByFile = new Map<string, Set<string>>()
 
-  // For each component .ts file, each compiled component's `@Component`
-  // decorator as the compiler reports it (class name → `Component`, `Cmp`,
-  // `ng.Component`, ...), so the template/styles strip below finds exactly the
-  // decorators the compiler took, under whatever name they're imported.
-  const componentDecoratorsByFile = new Map<string, Map<string, string>>()
-
   // Reverse mapping: resource file path → component file path. Single-valued:
   // the last transform to reference a resource owns the slot. Multiple
   // components in the SAME file are covered by `dispatchAllComponentsInFile`;
@@ -485,11 +474,12 @@ export function angular(options: PluginOptions = {}): Plugin[] {
   // it to decide whether to serve the update module or an empty response.
   const pendingHmrUpdates = new Set<string>()
 
-  // Cache the source of each component .ts file with its `template:` and
-  // `styles:` decorator fields stripped. If the stripped form is byte-identical
-  // before and after a save, we know only the template / styles changed and
-  // can dispatch an HMR update instead of a full reload.
-  const componentMetadataCache = new Map<string, string>()
+  // The HMR fingerprint of each component .ts file: a hash of its source with
+  // the compiled components' inline `template:` / `styles:` values left out
+  // (`TransformResult.hmrFingerprint`). If the fingerprint is the same before
+  // and after a save, only the template / styles changed and we can dispatch
+  // an HMR update instead of a full reload.
+  const componentFingerprintCache = new Map<string, string>()
 
   // Angular Ivy `.d.ts` static member declarations collected across the build,
   // keyed by module id. Populated during `transform` in `compilationMode:
@@ -922,27 +912,27 @@ export function angular(options: PluginOptions = {}): Plugin[] {
                   // running component genuinely has, from a template edit that
                   // never touched the styles at all.
                   //
-                  // `componentMetadataCache` already holds the transform-time
-                  // source with the `template:` / `styles:` field VALUES
-                  // blanked, and blanking only ever empties a DELIMITED range —
-                  // so an expression the strip cannot open survives verbatim
-                  // and the two stripped forms disagree exactly when the two
-                  // sources disagree outside those fields. Matching strips is
-                  // the evidence that the styles read here are the styles the
-                  // component compiled with.
+                  // `componentFingerprintCache` already holds the fingerprint
+                  // of the transform-time source with the `template:` /
+                  // `styles:` VALUES left out, and only a single literal value
+                  // is ever left out — so an expression the compiler has to
+                  // evaluate stays in, and the two fingerprints disagree
+                  // exactly when the two sources disagree outside those
+                  // fields. Matching fingerprints are the evidence that the
+                  // styles read here are the styles the component compiled
+                  // with.
                   //
                   // This gates the destructive answer ONLY. Content that WAS
                   // read is still served on a mismatch — no worse than main,
                   // which scanned the same disk source.
                   const compiledFromThisSource = () => {
-                    const cachedStripped = componentMetadataCache.get(fileId)
-                    // `componentDecoratorsByFile` is keyed by the transform id
-                    // like the other per-file maps — `resolvedId` would miss on
-                    // Windows and strip nothing, failing the comparison forever.
+                    // Both maps are keyed by the transform id like the other
+                    // per-file maps — `resolvedId` would miss on Windows and
+                    // read no class, failing the comparison forever.
+                    const cached = componentFingerprintCache.get(fileId)
                     return (
-                      cachedStripped !== undefined &&
-                      cachedStripped ===
-                        stripComponentMetadata(source, componentDecoratorsByFile.get(fileId))
+                      cached !== undefined &&
+                      cached === fingerprintOf(source, fileId, componentsByFile.get(fileId))
                     )
                   }
                   // `stylesResolved` comes first, ahead of "serve what was
@@ -1302,14 +1292,10 @@ export function angular(options: PluginOptions = {}): Plugin[] {
               dependencies,
             )
             const classNamesInFile = new Set<string>()
-            const decoratorsInFile = new Map<string, string>()
             for (const componentId of templateUpdateKeys) {
               const atIdx = componentId.lastIndexOf('@')
               if (atIdx === -1) continue
-              const className = componentId.slice(atIdx + 1)
-              classNamesInFile.add(className)
-              const decorator = result.componentDecorators[componentId]
-              if (decorator !== undefined) decoratorsInFile.set(className, decorator)
+              classNamesInFile.add(componentId.slice(atIdx + 1))
             }
             // Prune pending updates for components that USED to be in this
             // file but no longer are (e.g. a class was renamed or removed).
@@ -1327,14 +1313,18 @@ export function angular(options: PluginOptions = {}): Plugin[] {
             }
 
             componentsByFile.set(actualId, classNamesInFile)
-            componentDecoratorsByFile.set(actualId, decoratorsInFile)
             for (const className of classNamesInFile) {
               debugHmr('registered: %s -> %s', actualId, className)
             }
 
-            // Cache the metadata-stripped (whole-file) source for cheaply
-            // diffing whether anything besides template/styles changed.
-            componentMetadataCache.set(actualId, stripComponentMetadata(code, decoratorsInFile))
+            // Cache the whole-file fingerprint for cheaply checking whether
+            // anything besides template/styles changed. The transform takes
+            // it from its own parse when `hmr` is on; otherwise (SSR, build)
+            // no class was compiled for HMR and nothing is left out.
+            componentFingerprintCache.set(
+              actualId,
+              result.hmrFingerprint ?? fingerprintOf(code, actualId, classNamesInFile),
+            )
           }
 
           return {
@@ -1556,7 +1546,6 @@ export function angular(options: PluginOptions = {}): Plugin[] {
           // file (e.g. an external template change just invalidated the .ts
           // module via the graph), the resource branch has it covered.
           const fileClassNames = componentsByFile.get(ctx.file)!
-          const fileDecorators = componentDecoratorsByFile.get(ctx.file)
           let alreadyPending = false
           for (const className of fileClassNames) {
             if (pendingHmrUpdates.has(`${ctx.file}@${className}`)) {
@@ -1569,27 +1558,26 @@ export function angular(options: PluginOptions = {}): Plugin[] {
             return []
           }
 
-          // Strip-based check: if the source with EVERY @Component's
-          // `template:` and `styles:` fields stripped is byte-identical to
-          // the cached stripped form, the diff is contained entirely in
-          // those fields (for one or more components in the file) and we
-          // can HMR. This covers inline-template-only, inline-style-only,
-          // and both-at-once changes uniformly, including the multi-component
-          // case (a single edit to one component's template still satisfies
-          // the equality because the other components' stripped fields are
-          // identical before/after).
-          const cachedStripped = componentMetadataCache.get(ctx.file)
-          if (cachedStripped !== undefined) {
+          // Fingerprint check: if the source with EVERY compiled component's
+          // `template:` and `styles:` values left out hashes the same as the
+          // cached fingerprint, the diff is contained entirely in those
+          // values (for one or more components in the file) and we can HMR.
+          // This covers inline-template-only, inline-style-only, and
+          // both-at-once changes uniformly, including the multi-component
+          // case (a single edit to one component's template still keeps the
+          // fingerprint, because everything outside the values is unchanged).
+          const cachedFingerprint = componentFingerprintCache.get(ctx.file)
+          if (cachedFingerprint !== undefined) {
             let newContent: string
             try {
               newContent = readFileSync(ctx.file, 'utf-8')
             } catch {
               newContent = ''
             }
-            const newStripped = stripComponentMetadata(newContent, fileDecorators)
-            if (newStripped === cachedStripped) {
+            const newFingerprint = fingerprintOf(newContent, ctx.file, fileClassNames)
+            if (newFingerprint === cachedFingerprint) {
               debugHmr('inline template/styles-only change, dispatching HMR for %s', ctx.file)
-              componentMetadataCache.set(ctx.file, newStripped)
+              componentFingerprintCache.set(ctx.file, newFingerprint)
               // Conservatively dispatch HMR for every component in the file —
               // Angular's runtime no-ops if a component's metadata didn't
               // actually change. Per-component diffing is an easy follow-up.
@@ -1731,44 +1719,23 @@ export function angular(options: PluginOptions = {}): Plugin[] {
 }
 
 /**
- * Empty the `template:` and `styles:` field values of each component's
- * `@Component(...)` in `components` (class name → the decorator as the compiler
- * reported it: `Component`, `Cmp`, `ng.Component`), returning the result. Used
- * to detect "only template/styles changed somewhere in the file" — if the
- * stripped form of the old and new source is byte-identical, the diff is
- * contained within those fields and we can dispatch HMR (one event per
+ * The HMR fingerprint of `code` for the components the transform compiled in
+ * it (`classNames`): see `componentHmrFingerprint`. If the fingerprints of the
+ * old and new source are equal, the diff is contained within those components'
+ * inline `template:` / `styles:` values and we can dispatch HMR (one event per
  * component in the file) instead of a full reload.
  *
- * Only the decorator the compiler took is emptied, found by the spelling it
- * reported, so this never decides on its own which decorators are Angular's.
- * Another library's `@Component`, or another decorator of the same class, is
- * left whole, so a change to it reloads the page. The new source is stripped
- * with the old spellings: a change that could alter them (an import) is outside
- * the emptied fields, so it already makes the two forms differ.
+ * Only the class names travel between saves, not the decorators: the new
+ * source is read through its own `@angular/core` imports, and a change that
+ * could find a different decorator (an import) is outside the left-out values,
+ * so it already makes the two fingerprints differ.
  */
-function stripComponentMetadata(
+function fingerprintOf(
   code: string,
-  components: ReadonlyMap<string, string> | undefined,
+  fileId: string,
+  classNames: ReadonlySet<string> | undefined,
 ): string {
-  // Enumerate decorators ONCE (O(N) walk of source) and look up each one's
-  // template + styles range directly from its argsRange. Calling the
-  // className-based locators per decorator would re-enumerate inside each,
-  // giving O(N²).
-  //
-  // Splice from highest start → lowest so earlier offsets stay valid as we
-  // mutate the string from the end backwards.
-  if (!components || components.size === 0) return code
-  const decorators = locateComponentDecorators(code, components.values())
-  const ranges: Array<[number, number]> = []
-  for (const d of decorators) {
-    if (components.get(d.className) !== d.decorator) continue
-    const tpl = locateTemplateInArgs(code, d.argsRange)
-    if (tpl) ranges.push(tpl)
-    const styles = locateStylesInArgs(code, d.argsRange)
-    if (styles) ranges.push(styles)
-  }
-  ranges.sort((a, b) => b[0] - a[0])
-  return ranges.reduce((acc, range) => emptyDelimitedRange(acc, range), code)
+  return componentHmrFingerprint(code, fileId, classNames ? [...classNames] : []).fingerprint
 }
 
 export { angular as default }
diff --git a/napi/angular-compiler/vite-plugin/utils/decorator-fields.ts b/napi/angular-compiler/vite-plugin/utils/decorator-fields.ts
deleted file mode 100644
index 9f818a302..000000000
--- a/napi/angular-compiler/vite-plugin/utils/decorator-fields.ts
+++ /dev/null
@@ -1,769 +0,0 @@
-/**
- * Helpers for locating inline `@Component` decorator fields in source text.
- *
- * These back the metadata *strip* that decides HMR versus full reload:
- * emptying every `@Component`'s `template:` and `styles:` field and checking
- * the result for byte equality across a save. Per-class resource resolution
- * comes from the Rust extractor, not from here.
- *
- * Regex-based extraction is unreliable here because the field bodies can
- * contain the closing delimiter we'd otherwise rely on — for example, a
- * styles array body commonly contains `]` characters inside attribute
- * selectors (`[data-test="foo"]`), and template strings can contain escaped
- * quotes or backticks. These helpers walk the source character by character,
- * tracking string/template-literal boundaries (including `${…}`
- * interpolations), JavaScript comments (`//` and `/* … *\/`), and the
- * @Component object-literal nesting depth so delimiters inside literals or
- * comments don't affect the search.
- *
- * Known limitations (not handled, fall through to safe defaults):
- *   - **Regex literals** inside `@Component(...)` args. The walker can't
- *     distinguish `/` as a division operator from `/` as a regex-literal
- *     opener without a real JS lexer. Regex literals inside @Component
- *     args don't appear in real Angular code, so this is accepted.
- *   - **Which decorators are Angular's**: this scan does not read imports.
- *     It finds a decorator by the spelling the caller passes, which the
- *     compiler reports for each component it compiled (`Component`, `Cmp`
- *     for `import { Component as Cmp }`, `ng.Component`). A spelling with
- *     whitespace or a comment between `@` and the name, or type arguments
- *     before `(`, is not found, so its fields are never emptied.
- *   - **Parenthesized decorator expressions** like `@(Component as any)(...)`
- *     — uncommon and not supported.
- *   - **Computed property keys** (`{ ['styles']: [...] }`) can't be resolved
- *     to a name here and so never match a field. Quoted keys are matched,
- *     including ones written with a decodable escape
- *     (`{ 'style\u0073': [...] }`); a key whose escapes cannot be decoded
- *     does not match.
- *   - **Concatenated style strings** inside an array (`styles: ['a' + 'b']`)
- *     are extracted as two separate elements; cosmetic but harmless because
- *     the browser sees the same CSS either way.
- *   - **Anonymous default-exported components** (`@Component({...}) export
- *     default class {}`) can't be HMR-addressed (no className) and are
- *     skipped by `locateComponentDecorators`.
- */
-
-// -----------------------------------------------------------------
-// Module-level constants & types
-// -----------------------------------------------------------------
-
-type Ctx = 'paren' | 'array' | 'brace' | 'sq' | 'dq' | 'tpl'
-
-const OPEN_TO_CTX: Record<string, Ctx> = {
-  '(': 'paren',
-  '[': 'array',
-  '{': 'brace',
-  "'": 'sq',
-  '"': 'dq',
-  '`': 'tpl',
-}
-
-const CLOSER_TO_CTX: Record<string, Ctx> = {
-  ')': 'paren',
-  ']': 'array',
-  '}': 'brace',
-}
-
-/** JavaScript whitespace, including line terminators and form feeds. */
-const WS_RE = /\s/
-
-/** ASCII word characters (JS identifier continuation, minus Unicode). Used
- *  for word-boundary checks around the ASCII field keys `styles`/`template`. */
-const ASCII_WORD_RE = /[A-Za-z0-9_$]/
-
-/** Unicode-aware JS identifier characters. Class names can be non-ASCII. */
-const IDENT_START_RE = /[\p{L}_$]/u
-const IDENT_CONT_RE = /[\p{L}\p{N}_$]/u
-
-/** The decorator spelling looked for when the caller names none. */
-const DEFAULT_DECORATOR_NAMES: readonly string[] = ['Component']
-
-/** Opener chars accepted as the value of `styles:` — `string | string[]`. */
-const STYLES_OPENERS = '\'"`['
-/** Opener chars accepted as the value of `template:` — just string literals. */
-const TEMPLATE_OPENERS = '\'"`'
-
-/**
- * If `code[i]` starts a `//` line comment or a `/* … *\/` block comment,
- * return the index just past its end. Otherwise return -1. Caller must
- * ensure it's in a code context (not inside a string or template literal).
- *
- * Pragmatic: this doesn't disambiguate `/` from a regex-literal opener, so
- * regex literals inside `@Component(...)` args remain a known limitation.
- * In practice they don't appear there.
- */
-function skipComment(code: string, i: number, end: number): number {
-  if (code[i] !== '/') return -1
-  const next = code[i + 1]
-  if (next === '/') {
-    let j = i + 2
-    while (j < end && code[j] !== '\n') j++
-    return j
-  }
-  if (next === '*') {
-    let j = i + 2
-    while (j < end - 1 && !(code[j] === '*' && code[j + 1] === '/')) j++
-    return Math.min(j + 2, end)
-  }
-  return -1
-}
-
-/**
- * Process one structural token at `code[i]` against the parsing `stack` and
- * return the next index to read. Mutates `stack` as a side-effect — pushes
- * on opener / `${` / quote, pops on closer / matching quote / end of
- * template literal. Inside string and template contexts, only escape
- * sequences and closers are recognized. In code context, line and block
- * comments are skipped. Mismatched closers are ignored (the stack is
- * unchanged); the caller decides what to do based on its own stop
- * condition.
- *
- * The `end` bound is used for comment-skipping so a block comment can't
- * scan past the caller's intended boundary.
- */
-function advanceOneToken(code: string, i: number, stack: Ctx[], end: number): number {
-  const top = stack[stack.length - 1]
-  const ch = code[i]
-
-  if (top === 'sq' || top === 'dq') {
-    if (ch === '\\') return i + 2
-    if ((top === 'sq' && ch === "'") || (top === 'dq' && ch === '"')) {
-      stack.pop()
-    }
-    return i + 1
-  }
-
-  if (top === 'tpl') {
-    if (ch === '\\') return i + 2
-    if (ch === '`') {
-      stack.pop()
-      return i + 1
-    }
-    if (ch === '$' && code[i + 1] === '{') {
-      stack.push('brace')
-      return i + 2
-    }
-    return i + 1
-  }
-
-  // Code context. Try a comment first (opaque skip), then a delimiter
-  // (string opener, structural opener, or matching closer).
-  const afterComment = skipComment(code, i, end)
-  if (afterComment !== -1) return afterComment
-
-  const opener = OPEN_TO_CTX[ch]
-  if (opener) {
-    stack.push(opener)
-    return i + 1
-  }
-
-  const closerCtx = CLOSER_TO_CTX[ch]
-  if (closerCtx && top === closerCtx) {
-    stack.pop()
-  }
-  return i + 1
-}
-
-/**
- * Given the index of an opening delimiter (`(`, `[`, `{`, `'`, `"`, or `` ` ``),
- * return the index of its matching closer. Honors string literals, escape
- * sequences, and `${…}` interpolations inside template literals. Returns -1
- * if no balanced closer is found before EOF, or if the character at
- * `openIdx` is not a known delimiter.
- */
-export function findClosingDelim(code: string, openIdx: number): number {
-  const initial = OPEN_TO_CTX[code[openIdx]]
-  if (!initial) return -1
-
-  const stack: Ctx[] = [initial]
-  let i = openIdx + 1
-  while (i < code.length && stack.length > 0) {
-    const next = advanceOneToken(code, i, stack, code.length)
-    if (stack.length === 0) {
-      // `advanceOneToken` consumed the closer; its index is `next - 1`.
-      return next - 1
-    }
-    i = next
-  }
-  return -1
-}
-
-/**
- * Replace everything between (but not including) the opener/closer at the
- * given inclusive `[start, end]` range with nothing — leaving the original
- * delimiters in place. Works uniformly for `[…]`, `'…'`, `"…"`, and `` `…` ``.
- */
-export function emptyDelimitedRange(code: string, range: [number, number]): string {
-  const [start, end] = range
-  return code.slice(0, start + 1) + code.slice(end)
-}
-
-/**
- * Locate a top-level `<field>: <opener>` property inside a `@Component(...)`
- * argument list, returning the inclusive `[start, end]` of the value's outer
- * delimiters. "Top level" means a direct property of the @Component arg
- * object — `{ <field>: ... }` — not a nested object, not inside a string or
- * template literal, not inside a `${...}` interpolation, and not inside a
- * call argument that happens to be a nested object literal.
- *
- * Walks the args body character-by-character tracking string / template /
- * paren / brace / array context, mirroring `findClosingDelim`. A field key
- * is considered only when:
- *   - the parser is at the @Component's immediate object-literal depth
- *     (stack === ['paren', 'brace']);
- *   - the character before `field` is not a word character (word boundary);
- *   - `field` is followed by optional whitespace, then `:`, optional whitespace,
- *     then one of `openerChars`.
- *
- * Returns null if no qualifying field is found.
- */
-/**
- * The state of one decorator field, which is three-valued: the key may be
- * missing entirely, present with a value this scan can read, or present with
- * a value it cannot (an identifier, a call, a concatenation).
- *
- * The third state stays apart from "absent" because the two end the walk
- * differently: an unreadable value IS this field, so the search stops there,
- * while an absent key means the search keeps going.
- */
-type FieldValue =
-  | { kind: 'absent' }
-  | { kind: 'unreadable' }
-  | { kind: 'literal'; range: [number, number] }
-
-/**
- * Find a top-level field of the `@Component(...)` args and classify its
- * value. See `FieldValue` for the three outcomes.
- *
- * The walk is identical to `locateFieldInsideArgs`, which is expressed on top
- * of this; only the reporting differs.
- */
-function findFieldInArgs(
-  code: string,
-  argsRange: [number, number],
-  field: string,
-  openerChars: string,
-  shorthandMeans: 'absent' | 'unreadable' = 'absent',
-): FieldValue {
-  const [openParen, closeParen] = argsRange
-  const stack: Ctx[] = ['paren']
-  let i = openParen + 1
-  // Keys sit at the start of the object and after each comma; `:` hands over
-  // to the value. Without this, a style-named identifier used as a VALUE
-  // (`selector: styleUrl`) would read as a shorthand property.
-  let atKey = true
-
-  while (i < closeParen) {
-    // A key match is only valid at the @Component's immediate object-literal
-    // depth (`['paren', 'brace']`) — anything deeper is a nested literal that
-    // isn't the component's metadata.
-    if (stack.length === 2 && stack[1] === 'brace') {
-      const ch = code[i]
-      if (WS_RE.test(ch)) {
-        i++
-        continue
-      }
-      const afterComment = skipComment(code, i, closeParen)
-      if (afterComment !== -1) {
-        i = afterComment
-        continue
-      }
-      if (ch === ',') {
-        atKey = true
-        i++
-        continue
-      }
-      if (ch === ':') {
-        atKey = false
-        i++
-        continue
-      }
-
-      const afterKey = atKey ? matchFieldKeyAt(code, i, field, closeParen) : -1
-      if (afterKey !== -1) {
-        const j = skipToToken(code, afterKey, closeParen)
-        if (code[j] === ':') {
-          const v = skipToToken(code, j + 1, closeParen)
-          if (v < closeParen && openerChars.includes(code[v])) {
-            const end = findClosingDelim(code, v)
-            // The literal is the value only when the property ENDS at its
-            // closing delimiter. `'<p/>' + SUFFIX` opens with a literal it
-            // does not denote, and so do `['.a{}'].concat(MORE)` and
-            // `'.a{}' as const`. Returning that leading piece would empty a
-            // range the real value extends past, so the strip would no
-            // longer be byte-identical for an unrelated edit.
-            if (end !== -1 && end < closeParen && endsPropertyValue(code, end + 1, closeParen)) {
-              return { kind: 'literal', range: [v, end] }
-            }
-          }
-          // The key is here; its value is not a shape we can read.
-          return { kind: 'unreadable' }
-        }
-        // Shorthand (`{ styles }`): the key stands alone, so the value is
-        // a binding this scan cannot follow. Whether that is unknowable or
-        // genuinely nothing depends on the field, which is what
-        // `shorthandMeans` says. Anything else after the key (`(` for a
-        // method or accessor) is not this field at all, so keep scanning.
-        if ((code[j] === ',' || code[j] === '}') && shorthandMeans === 'unreadable') {
-          return { kind: 'unreadable' }
-        }
-      }
-    }
-    i = advanceOneToken(code, i, stack, closeParen)
-  }
-  return { kind: 'absent' }
-}
-
-/**
- * Whether a property value ends at `i`. Inside an object literal a value is
- * closed by `,` or the object's own `}` — or, defensively, the decorator's
- * `)`. Whitespace and comments are skipped first, so a comment may sit
- * between the value and its terminator.
- *
- * Anything else at that position means what was just read is only the LEADING
- * part of a larger expression — a concatenation, a call, a TypeScript
- * assertion — and so is not the value at all. Running out of text counts as
- * ending, since nothing is left to extend the value with.
- */
-function endsPropertyValue(code: string, i: number, end: number): boolean {
-  const j = skipToToken(code, i, end)
-  if (j >= end) return true
-  const ch = code[j]
-  return ch === ',' || ch === '}' || ch === ')'
-}
-
-/** Index of the next character at or after `i` that is not whitespace or a comment. */
-function skipToToken(code: string, i: number, end: number): number {
-  let j = i
-  while (j < end) {
-    if (WS_RE.test(code[j])) {
-      j++
-      continue
-    }
-    const afterComment = skipComment(code, j, end)
-    if (afterComment === -1) break
-    j = afterComment
-  }
-  return j
-}
-
-function locateFieldInsideArgs(
-  code: string,
-  argsRange: [number, number],
-  field: string,
-  openerChars: string,
-): [number, number] | null {
-  const found = findFieldInArgs(code, argsRange, field, openerChars)
-  return found.kind === 'literal' ? found.range : null
-}
-
-/**
- * If a key for `field` starts at `position`, return the index just past it;
- * otherwise -1. Accepts the bare form (`styleUrls:`), the quoted forms
- * (`'styleUrls':`, `"styleUrls":`), and either form written with escapes
- * (`style\u0055rls`, `'style\u0055rls'`) — all of which are valid TS naming
- * the same field, and all of which the Rust extractor resolves.
- *
- * Escapes are decoded rather than refused: decoding keeps the match exact
- * where refusing would silently miss a field that is really there. A key
- * whose escapes cannot be decoded is not matched here, so the field reads
- * as absent.
- *
- * Decoding does not loosen the match: the decoded name must still equal
- * `field` exactly, so `styleUrl` and `styleUrls` stay distinct.
- */
-function matchFieldKeyAt(code: string, position: number, field: string, limit: number): number {
-  if (isFieldKeyAt(code, position, field, limit)) return position + field.length
-  const quote = code[position]
-  if (quote === "'" || quote === '"') {
-    const close = findClosingDelim(code, position)
-    if (close === -1 || close >= limit) return -1
-    // A quoted key is a string literal, so it decodes by string rules.
-    return decodeEscapes(code.slice(position + 1, close)) === field ? close + 1 : -1
-  }
-  const id = readIdentifierKey(code, position, limit)
-  return id !== null && id.name === field ? id.end : -1
-}
-
-/**
- * Read an identifier starting at `position`, decoding escapes, and return the
- * decoded name with the index just past it. Returns null when nothing
- * identifier-like starts there.
- *
- * `name` is null when the identifier carries an escape this scan cannot
- * resolve — malformed hex, a truncated `\u`, a decoded character not valid at
- * its position, or any escape other than `\uHHHH` / `\u{…}`, which are the
- * only two JavaScript permits inside an identifier. The caller must treat
- * that as unknown rather than as a key that isn't there: the Rust extractor
- * parses what this cannot, so "absent" would strip a component's real CSS.
- */
-function readIdentifierKey(
-  code: string,
-  position: number,
-  limit: number,
-): { name: string | null; end: number } | null {
-  let i = position
-  let name = ''
-  let first = true
-  let malformed = false
-
-  while (i < limit) {
-    const ch = code[i]
-
-    if (ch === '\\') {
-      if (code[i + 1] !== 'u') {
-        // `\x41`, `\n`, … are string escapes; in an identifier they are a
-        // syntax error, so the name cannot be known from the text.
-        malformed = true
-        i += 2
-        first = false
-        continue
-      }
-      let codePoint = -1
-      let next: number
-      if (code[i + 2] === '{') {
-        const close = code.indexOf('}', i + 3)
-        if (close === -1 || close >= limit) return { name: null, end: i + 2 }
-        const hex = code.slice(i + 3, close)
-        if (HEX_ONLY_RE.test(hex)) codePoint = parseInt(hex, 16)
-        next = close + 1
-      } else {
-        const hex = code.slice(i + 2, i + 6)
-        if (hex.length === 4 && HEX_ONLY_RE.test(hex)) codePoint = parseInt(hex, 16)
-        next = i + 6
-      }
-      if (codePoint < 0 || codePoint > 0x10ffff) {
-        malformed = true
-      } else {
-        const decoded = String.fromCodePoint(codePoint)
-        if (!(first ? IDENT_START_RE : IDENT_CONT_RE).test(decoded)) malformed = true
-        name += decoded
-      }
-      i = next
-      first = false
-      continue
-    }
-
-    if ((first ? IDENT_START_RE : IDENT_CONT_RE).test(ch)) {
-      name += ch
-      i++
-      first = false
-      continue
-    }
-    break
-  }
-
-  if (i === position) return null
-  return { name: malformed ? null : name, end: i }
-}
-
-/**
- * Whether `field` starts at `position` in `code` AND is bounded on both sides
- * by non-identifier characters (so `template` doesn't match the start of
- * `templateUrl`, and `someStyles:` doesn't match the end of `styles:`).
- */
-function isFieldKeyAt(code: string, position: number, field: string, limit: number): boolean {
-  if (position + field.length > limit) return false
-  if (!code.startsWith(field, position)) return false
-  const prev = position > 0 ? code[position - 1] : ''
-  if (prev && ASCII_WORD_RE.test(prev)) return false
-  const next = code[position + field.length]
-  if (next !== undefined && ASCII_WORD_RE.test(next)) return false
-  return true
-}
-
-/**
- * One @Component decorator paired with the class it decorates.
- */
-export interface ComponentDecorator {
-  /** Inclusive offsets of the outer `(` and `)` of `@Component(...)`. */
-  argsRange: [number, number]
-  /** The class name declared after this decorator. */
-  className: string
-  /** The decorator as spelled before its `(`: `Component`, `Cmp`, `ng.Component`. */
-  decorator: string
-}
-
-/**
- * Enumerate every `@Component(...)` decorator in `code`, pairing each with
- * the class declared immediately after it. `decoratorNames` are the spellings
- * to look for (`Cmp` finds `@Cmp(...)`); by default only `@Component(...)`. Decorators that don't pair to a
- * class (dangling, malformed, anonymous) are skipped — the caller sees only
- * well-formed component declarations.
- *
- * Enumeration itself skips comments and string/template literals, so a
- * commented-out or quoted `@Component(` is never treated as a decorator.
- * The class-name scan is then bounded between one decorator's closing `)`
- * and the next decorator's `@`, which stops it consuming a sibling's class
- * identifier — a bound that is only correct because phantom occurrences
- * were excluded first.
- *
- * See the module-level docstring for a full list of known limitations.
- */
-export function locateComponentDecorators(
-  code: string,
-  decoratorNames: Iterable<string> = DEFAULT_DECORATOR_NAMES,
-): ComponentDecorator[] {
-  const names = [...new Set(decoratorNames)].filter((name) => name.length > 0)
-  // Pass 1: find every `@Component(...)` and bound its args list. The walk
-  // skips comments and string/template literals, so a commented-out or
-  // quoted `@Component(` is not mistaken for a real decorator. That matters
-  // beyond ignoring it: a phantom occurrence between a real decorator and
-  // its class would bound the real one's class-name scan in pass 2, leaving
-  // the class paired with the phantom's metadata.
-  type Found = { decoratorStart: number; openParen: number; closeParen: number; decorator: string }
-  const found: Found[] = []
-  let i = 0
-  while (i < code.length) {
-    const afterComment = skipComment(code, i, code.length)
-    if (afterComment !== -1) {
-      i = afterComment
-      continue
-    }
-    const ch = code[i]
-    if (ch === "'" || ch === '"' || ch === '`') {
-      const close = findClosingDelim(code, i)
-      i = close === -1 ? code.length : close + 1
-      continue
-    }
-    if (ch === '@') {
-      const match = matchDecoratorCall(code, i + 1, names)
-      if (match) {
-        found.push({ decoratorStart: i, ...match })
-        i = match.closeParen + 1
-        continue
-      }
-    }
-    i++
-  }
-
-  // Pass 2: for each decorator, scan forward from its `)` to either the next
-  // decorator's `@` or EOF, looking for `class IDENT`. The bound stops one
-  // decorator's class-name scan from claiming a sibling's class.
-  const out: ComponentDecorator[] = []
-  for (let i = 0; i < found.length; i++) {
-    const { openParen, closeParen, decorator } = found[i]
-    const scanEnd = i + 1 < found.length ? found[i + 1].decoratorStart : code.length
-    const className = findClassName(code, closeParen + 1, scanEnd)
-    if (className !== null) {
-      out.push({ argsRange: [openParen, closeParen], className, decorator })
-    }
-  }
-  return out
-}
-
-/**
- * If one of `names` followed by optional whitespace and a balanced `(...)`
- * starts at `start` (just past an `@`), return which name and the `(` / `)`
- * offsets. A name only matches whole: `Cmp` is not found in `@CmpX(` or
- * `@Cmp.x(`, since what follows it must be `(`.
- */
-function matchDecoratorCall(
-  code: string,
-  start: number,
-  names: readonly string[],
-): { decorator: string; openParen: number; closeParen: number } | null {
-  for (const name of names) {
-    if (!code.startsWith(name, start)) continue
-    let j = start + name.length
-    while (j < code.length && WS_RE.test(code[j])) j++
-    if (code[j] !== '(') continue
-    const closeParen = findClosingDelim(code, j)
-    if (closeParen !== -1) return { decorator: name, openParen: j, closeParen }
-  }
-  return null
-}
-
-/**
- * Find the first `class IDENT` whose `class` keyword appears in
- * `[start, end)`. Returns the identifier (Unicode-aware), or null if no
- * match. Skips line/block comments and string/template literals so a
- * `// uses a base class Bar` comment or a `'class Baz'` string between the
- * decorator and the class declaration can't fool the matcher.
- *
- * Modifiers like `export`, `default`, `abstract`, and additional decorators
- * (`@Foo()`) between the @Component(...) and the class are skipped
- * implicitly — they don't match the `class IDENT` pattern.
- */
-function findClassName(code: string, start: number, end: number): string | null {
-  let i = start
-  while (i < end) {
-    // Skip comments (line and block) opaquely.
-    const afterComment = skipComment(code, i, end)
-    if (afterComment !== -1) {
-      i = afterComment
-      continue
-    }
-
-    // Skip string / template literals opaquely — `class IDENT` text inside
-    // them is not a real class declaration. `findClosingDelim` handles
-    // escape sequences and `${...}` interpolations correctly.
-    const ch = code[i]
-    if (ch === "'" || ch === '"' || ch === '`') {
-      const close = findClosingDelim(code, i)
-      i = close === -1 ? end : close + 1
-      continue
-    }
-
-    // Try matching the `class` keyword at this position, gated by a word
-    // boundary before and after to avoid `subclass`, `classes`, etc.
-    if (code.startsWith('class', i)) {
-      const prev = i > 0 ? code[i - 1] : ''
-      const afterKw = code[i + 5] ?? ''
-      if (
-        (prev === '' || !IDENT_CONT_RE.test(prev)) &&
-        (afterKw === '' || !IDENT_CONT_RE.test(afterKw))
-      ) {
-        let j = i + 5
-        while (j < end && WS_RE.test(code[j])) j++
-        if (j < end && IDENT_START_RE.test(code[j])) {
-          const idStart = j
-          j++
-          while (j < end && IDENT_CONT_RE.test(code[j])) j++
-          return code.slice(idStart, j)
-        }
-      }
-    }
-
-    i++
-  }
-  return null
-}
-
-/**
- * Locate the `styles:` field inside a specific `@Component(...)` decorator
- * identified by its `argsRange`, which the caller already holds from
- * iterating `locateComponentDecorators(code)` — so a multi-component file
- * costs one decorator enumeration, not one per lookup.
- *
- * Returns the inclusive `[start, end]` of the value's outer delimiters, or
- * null if the decorator has no `styles:` field. The value may be an array
- * literal (`[…]`) or a bare string (`'…'`, `"…"`, `` `…` ``) — Angular's
- * `styles` is typed `string | string[]`.
- */
-export function locateStylesInArgs(
-  code: string,
-  argsRange: [number, number],
-): [number, number] | null {
-  return locateFieldInsideArgs(code, argsRange, 'styles', STYLES_OPENERS)
-}
-
-/**
- * Locate the `template:` string field inside a specific `@Component(...)`
- * decorator identified by its `argsRange`. Field matching is word-bounded,
- * so a `templateUrl:` field is never read as `template:`.
- */
-export function locateTemplateInArgs(
-  code: string,
-  argsRange: [number, number],
-): [number, number] | null {
-  return locateFieldInsideArgs(code, argsRange, 'template', TEMPLATE_OPENERS)
-}
-
-const SINGLE_CHAR_ESCAPES: Record<string, string> = {
-  n: '\n',
-  t: '\t',
-  r: '\r',
-  b: '\b',
-  f: '\f',
-  v: '\v',
-}
-
-/** Line terminators that a backslash may continue across. */
-const LINE_TERMINATORS = new Set(['\n', '\r', '
', '
'])
-
-const HEX_ONLY_RE = /^[0-9a-fA-F]+$/
-
-/**
- * Decode the escape sequences in a string- or template-literal's raw source
- * text into the value it actually denotes, or null if the text holds an
- * escape this cannot resolve.
- *
- * The raw text is what the source spells; the decoded text is what the Rust
- * extractor sees and what a path or a stylesheet must be compared against.
- * `'./a.css'` names `./a.css`, and reading it raw yields a path that
- * does not exist.
- *
- * Null is returned for a malformed escape (`\xZZ`, a truncated `\u12`) and
- * for the legacy octal forms, which are outright errors in a module. Those
- * are cases where guessing a value would be worse than telling the caller
- * this literal is beyond the scan.
- *
- * A raw text with no backslash is returned unchanged, so the overwhelmingly
- * common literal costs nothing and reads byte for byte as before.
- */
-function decodeEscapes(raw: string): string | null {
-  if (!raw.includes('\\')) return raw
-
-  let out = ''
-  let i = 0
-  while (i < raw.length) {
-    const ch = raw[i]
-    if (ch !== '\\') {
-      out += ch
-      i++
-      continue
-    }
-
-    const next = raw[i + 1]
-    // A trailing backslash cannot occur in a well-delimited literal, since
-    // it would have escaped the closing quote.
-    if (next === undefined) return null
-
-    // Line continuation: the backslash and the terminator both vanish.
-    if (LINE_TERMINATORS.has(next)) {
-      i += next === '\r' && raw[i + 2] === '\n' ? 3 : 2
-      continue
-    }
-
-    const single = SINGLE_CHAR_ESCAPES[next]
-    if (single !== undefined) {
-      out += single
-      i += 2
-      continue
-    }
-
-    if (next === 'x') {
-      const hex = raw.slice(i + 2, i + 4)
-      if (hex.length < 2 || !HEX_ONLY_RE.test(hex)) return null
-      out += String.fromCharCode(parseInt(hex, 16))
-      i += 4
-      continue
-    }
-
-    if (next === 'u') {
-      if (raw[i + 2] === '{') {
-        const close = raw.indexOf('}', i + 3)
-        if (close === -1) return null
-        const hex = raw.slice(i + 3, close)
-        if (!HEX_ONLY_RE.test(hex)) return null
-        const code = parseInt(hex, 16)
-        if (code > 0x10ffff) return null
-        out += String.fromCodePoint(code)
-        i = close + 1
-        continue
-      }
-      const hex = raw.slice(i + 2, i + 6)
-      if (hex.length < 4 || !HEX_ONLY_RE.test(hex)) return null
-      out += String.fromCharCode(parseInt(hex, 16))
-      i += 6
-      continue
-    }
-
-    // `\0` is NUL only when no digit follows; with one it is a legacy octal
-    // escape, which a module rejects outright. `\1`-`\9` likewise.
-    if (next >= '0' && next <= '9') {
-      if (next === '0' && !(raw[i + 2] >= '0' && raw[i + 2] <= '9')) {
-        out += '\0'
-        i += 2
-        continue
-      }
-      return null
-    }
-
-    // Anything else denotes itself: `\\`, `\'`, `\"`, `` \` ``, `\$`, and
-    // any other non-escape character.
-    out += next
-    i += 2
-  }
-  return out
-}

From fcfb78cf7a3ee6d2ab002cfd8e43e6495f175c15 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 19:15:50 +0800
Subject: [PATCH 45/54] test(ng-module): restore #[test] on
 test_jit_true_ng_module_skips_aot

The class-metadata ordering tests added in c84b68e were inserted between
the existing #[test] attribute and test_jit_true_ng_module_skips_aot, so
the new test took the attribute and the jit:true NgModule test stopped
running (rustc reported it as dead code). Put the attribute back so the
jit:true NgModule path is covered again.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 crates/oxc_angular_compiler/tests/integration_test.rs | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/crates/oxc_angular_compiler/tests/integration_test.rs b/crates/oxc_angular_compiler/tests/integration_test.rs
index d46527bef..71e665d1f 100644
--- a/crates/oxc_angular_compiler/tests/integration_test.rs
+++ b/crates/oxc_angular_compiler/tests/integration_test.rs
@@ -16331,6 +16331,8 @@ fn test_component_class_metadata_precedes_debug_info() {
         result.code
     );
 }
+
+#[test]
 fn test_jit_true_ng_module_skips_aot() {
     let allocator = Allocator::default();
     let source = r"

From 419cc4dc3300924718f3a34c919a049c8410306c Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 19:24:26 +0800
Subject: [PATCH 46/54] fix(napi): keep TransformResult.componentDecorators as
 a deprecated field

What:
- Restore `component_decorators` on the crate's `TransformResult` and
  `componentDecorators` on the NAPI `TransformResult`, filled at the same
  spot as before (one map insert per component compiled with `hmr: true`),
  next to the new `hmrFingerprint`. The doc comment marks it deprecated
  (`@deprecated` in index.d.ts).
- Restore the Rust test that pins it (`hmr_reports_component_decorators_as_written`)
  and add a vitest check against the binding.

Why:
The previous commit dropped the field when the vite plugin stopped reading
it, but it has been part of the published binding since v0.0.40 (tags
v0.0.40 to v0.0.42). An outside caller reading
`result.componentDecorators[id]` would silently get `undefined`. The task
only asked to add the fingerprint, so keep the old field and leave its
removal to a later, announced release.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/component/transform.rs                | 20 +++++++++++++++++++
 .../tests/class_decorator_identity_test.rs    | 13 ++++++++++++
 napi/angular-compiler/index.d.ts              |  9 +++++++++
 napi/angular-compiler/src/lib.rs              | 10 ++++++++++
 .../test/hmr-fingerprint.test.ts              |  8 ++++++++
 5 files changed, 60 insertions(+)

diff --git a/crates/oxc_angular_compiler/src/component/transform.rs b/crates/oxc_angular_compiler/src/component/transform.rs
index 038339b1a..81497c3bf 100644
--- a/crates/oxc_angular_compiler/src/component/transform.rs
+++ b/crates/oxc_angular_compiler/src/component/transform.rs
@@ -330,6 +330,15 @@ pub struct TransformResult {
     /// Maps component ID to list of styles.
     pub style_updates: HashMap<String, Vec<String>>,
 
+    /// For HMR: maps the ID of each compiled component (path@ClassName) to its
+    /// `@Component` decorator's callee as written in the source (`Component`,
+    /// `Cmp` for `import { Component as Cmp }`, `ng.Component` for a namespace
+    /// import).
+    ///
+    /// Deprecated: kept for existing callers; the bundled Vite plugin no
+    /// longer reads it and uses [`Self::hmr_fingerprint`] instead.
+    pub component_decorators: HashMap<String, String>,
+
     /// For HMR: the fingerprint of the source with the inline `template` /
     /// `styles` values of the compiled components left out (see
     /// [`super::component_hmr_fingerprint`]). A build tool compares it with
@@ -3641,6 +3650,17 @@ pub fn transform_angular_file(
                                     component_id.clone(),
                                     compilation_result.template_js.clone().unwrap_or_default(),
                                 );
+                                if let Some(decorator) = component_decorator {
+                                    let callee = match &decorator.expression {
+                                        Expression::CallExpression(call) => call.callee.span(),
+                                        expression => expression.span(),
+                                    };
+                                    result.component_decorators.insert(
+                                        component_id.clone(),
+                                        source[callee.start as usize..callee.end as usize]
+                                            .to_string(),
+                                    );
+                                }
                                 hmr_compiled_classes.push(class_name.clone());
                             }
 
diff --git a/crates/oxc_angular_compiler/tests/class_decorator_identity_test.rs b/crates/oxc_angular_compiler/tests/class_decorator_identity_test.rs
index 92c2f7c56..56dde2f05 100644
--- a/crates/oxc_angular_compiler/tests/class_decorator_identity_test.rs
+++ b/crates/oxc_angular_compiler/tests/class_decorator_identity_test.rs
@@ -273,6 +273,19 @@ fn aliased_service_hoists_its_references() {
     assert!(!hoisted(&foreign.code), "{}", foreign.code);
 }
 
+/// With HMR on, each compiled component's `@Component` is reported as written
+/// (`component_decorators`, deprecated but kept for existing callers). Another
+/// library's `@Component` isn't compiled, so it isn't reported.
+#[test]
+fn hmr_reports_component_decorators_as_written() {
+    let source = "import * as ng from '@angular/core';\nimport {Component as Cmp} from '@angular/core';\nimport {Component} from './foreign';\n@Cmp({selector: 'a-c', template: ''})\nexport class A {}\n@ng . Component({selector: 'b-c', template: ''})\nexport class B {}\n@Component({selector: 'c-c', template: ''})\nexport class C {}\n";
+    let result = transform(source, &TransformOptions { hmr: true, ..TransformOptions::default() });
+    let mut reported: Vec<(&str, &str)> =
+        result.component_decorators.iter().map(|(k, v)| (k.as_str(), v.as_str())).collect();
+    reported.sort_unstable();
+    assert_eq!(reported, [("test.ts@A", "Cmp"), ("test.ts@B", "ng . Component")]);
+}
+
 /// With HMR on, the fingerprint leaves out the inline template of each
 /// compiled component, whatever its `@Component` is called (`Cmp`,
 /// `ng . Component`). Another library's `@Component` isn't compiled, so its
diff --git a/napi/angular-compiler/index.d.ts b/napi/angular-compiler/index.d.ts
index e5b58f865..57505a216 100644
--- a/napi/angular-compiler/index.d.ts
+++ b/napi/angular-compiler/index.d.ts
@@ -1064,6 +1064,15 @@ export interface TransformResult {
   templateUpdates: Map<string, string>
   /** Style updates for HMR (component_id → styles). */
   styleUpdates: Map<string, string[]>
+  /**
+   * For HMR: each compiled component's `@Component` decorator callee as
+   * written (component_id → `Component`, `Cmp`, `ng.Component`, ...).
+   *
+   * @deprecated Kept for existing callers; the bundled Vite plugin no
+   * longer reads it. Use `hmrFingerprint` to decide between an HMR update
+   * and a full reload.
+   */
+  componentDecorators: Record<string, string>
   /**
    * For HMR (`hmr: true`): the fingerprint of the source with the inline
    * `template` / `styles` values of the compiled components left out.
diff --git a/napi/angular-compiler/src/lib.rs b/napi/angular-compiler/src/lib.rs
index 4247eae1f..a2b1295fd 100644
--- a/napi/angular-compiler/src/lib.rs
+++ b/napi/angular-compiler/src/lib.rs
@@ -387,6 +387,15 @@ pub struct TransformResult {
     #[napi(ts_type = "Map<string, string[]>")]
     pub style_updates: HashMap<String, Vec<String>>,
 
+    /// For HMR: each compiled component's `@Component` decorator callee as
+    /// written (component_id → `Component`, `Cmp`, `ng.Component`, ...).
+    ///
+    /// @deprecated Kept for existing callers; the bundled Vite plugin no
+    /// longer reads it. Use `hmrFingerprint` to decide between an HMR update
+    /// and a full reload.
+    #[napi(ts_type = "Record<string, string>")]
+    pub component_decorators: HashMap<String, String>,
+
     /// For HMR (`hmr: true`): the fingerprint of the source with the inline
     /// `template` / `styles` values of the compiled components left out.
     /// Compare it with `componentHmrFingerprint(newSource, filename,
@@ -1286,6 +1295,7 @@ impl Task for TransformAngularFileTask {
             dependencies: result.dependencies,
             template_updates: result.template_updates,
             style_updates: result.style_updates,
+            component_decorators: result.component_decorators,
             hmr_fingerprint: result.hmr_fingerprint,
             errors,
             warnings: vec![],
diff --git a/napi/angular-compiler/test/hmr-fingerprint.test.ts b/napi/angular-compiler/test/hmr-fingerprint.test.ts
index d3b674933..65b83ea3f 100644
--- a/napi/angular-compiler/test/hmr-fingerprint.test.ts
+++ b/napi/angular-compiler/test/hmr-fingerprint.test.ts
@@ -80,4 +80,12 @@ describe('componentHmrFingerprint', () => {
     const withoutHmr = transformAngularFileSync(SOURCE, 'app.component.ts', {})
     expect(withoutHmr.hmrFingerprint).toBeUndefined()
   })
+
+  it('still reports componentDecorators (deprecated) for existing callers', () => {
+    const result = transformAngularFileSync(SOURCE, 'app.component.ts', { hmr: true })
+    expect(result.componentDecorators).toEqual({
+      'app.component.ts@FirstComponent': 'Component',
+      'app.component.ts@SecondComponent': 'Component',
+    })
+  })
 })

From b6e9a0a4e4913b14390f05be7f3d84eb15376c3a Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 19:29:19 +0800
Subject: [PATCH 47/54] fix(styles): keep host markers together when splitting
 on a newline

The Oxc-only rule (#175) that treats a newline, tab, CR or form feed as a
descendant combinator could cut a part that Angular scopes as one. A later
`:host` is folded into the first `:host(...)` match as a bare
`-shadowcsshost`, and Angular only turns it into the host attribute while it
shares a part with a `-shadowcsshost-no-combinator` marker. A part whose
only marker is inside a pseudo-function also gets the content attribute in
front. Splitting there leaked the internal marker
(`:host(.h)\n:host` -> `.h[h]   -shadowcsshost`), emitted an empty `:not()`
that makes the browser drop the rule, or scoped the host as content.

The newline split is now skipped inside an Angular part that holds a bare
host marker or a no-combinator marker inside parens, so those parts come
out exactly as @angular/compiler 22.2.2 emits them. The #175 behaviour is
kept everywhere else.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/styles/encapsulation.rs               | 73 ++++++++++++++++++-
 .../tests/shadow_css_test.rs                  | 28 +++++++
 2 files changed, 97 insertions(+), 4 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/styles/encapsulation.rs b/crates/oxc_angular_compiler/src/styles/encapsulation.rs
index b8aee5aa7..4641ec019 100644
--- a/crates/oxc_angular_compiler/src/styles/encapsulation.rs
+++ b/crates/oxc_angular_compiler/src/styles/encapsulation.rs
@@ -1621,25 +1621,44 @@ impl<'a> SelectorScoper<'a> {
         // `:host:hover\n.child` leaves `.child` unscoped and `.foo\n.bar` keeps
         // `.foo` unscoped. Whitespace that starts the selector (`.a,\n.b`) is
         // not a combinator, so it is kept exactly as Angular keeps it.
+        // The extra split is skipped inside a part Angular would scope as one
+        // when that part has host markers that only work together (see
+        // `can_split_on_other_whitespace`); such a part is left as Angular has it.
         let leading = selector.len() - selector.trim_start_matches(is_js_space).len();
         let mut start = 0;
         let mut from = 0;
+        // Start of the part Angular's own split is in, and whether the Oxc-only
+        // split is allowed in it (worked out on the first newline or tab).
+        let mut angular_part_start = 0;
+        let mut other_whitespace_split: Option<bool> = None;
         while let Some((at, separator, end)) = find_combinator_separator(selector, from, leading) {
             from = end;
-            let part = &selector[start..at];
+            let is_other_whitespace =
+                matches!(selector.as_bytes()[at], b'\n' | b'\t' | b'\r' | b'\x0C');
+            if is_other_whitespace
+                && !*other_whitespace_split.get_or_insert_with(|| {
+                    let angular_part_end = find_angular_part_end(selector, angular_part_start, at);
+                    can_split_on_other_whitespace(&selector[angular_part_start..angular_part_end])
+                })
+            {
+                continue;
+            }
             // A space between a hex escape and a following hex digit (`.\fc ber`
             // for `.über`) terminates the escape; it is not a combinator.
-            if has_escape_placeholder(part)
-                && selector.as_bytes().get(at + 1).is_some_and(u8::is_ascii_hexdigit)
-            {
+            if is_escaped_hex_space(selector, start, at) {
                 continue;
             }
+            let part = &selector[start..at];
             let scoped_part = self.scope_pseudo_function_aware_part(part);
             scoped.push_str(&scoped_part);
             scoped.push(' ');
             scoped.push(separator);
             scoped.push(' ');
             start = end;
+            if !is_other_whitespace {
+                angular_part_start = end;
+                other_whitespace_split = None;
+            }
         }
         let scoped_part = self.scope_pseudo_function_aware_part(&selector[start..]);
         scoped.push_str(&scoped_part);
@@ -1858,6 +1877,52 @@ fn find_combinator_separator(
     })
 }
 
+/// Whether the separator at byte `at` is a space ending a hex escape in the part
+/// that starts at byte `start` (`.\fc ber` for `.über`), so not a combinator.
+fn is_escaped_hex_space(selector: &str, start: usize, at: usize) -> bool {
+    has_escape_placeholder(&selector[start..at])
+        && selector.as_bytes().get(at + 1).is_some_and(u8::is_ascii_hexdigit)
+}
+
+/// End of the part Angular's own split (`/( |>|\+|~(?!=))…\s*/`, no newline or
+/// tab) would produce for the part starting at byte `start`, given that byte
+/// `at` is inside it.
+fn find_angular_part_end(selector: &str, start: usize, at: usize) -> usize {
+    let mut from = at;
+    while let Some((end_at, _, end)) = find_combinator_separator(selector, from, usize::MAX) {
+        if !is_escaped_hex_space(selector, start, end_at) {
+            return end_at;
+        }
+        from = end;
+    }
+    selector.len()
+}
+
+/// Whether the Oxc-only newline/tab split may cut `part`, a part Angular scopes
+/// as one.
+///
+/// Angular only turns a bare `-shadowcsshost` (the rest of a selector after a
+/// first `:host(...)`, as in `:host(.a)\n:not(:host)`) into the host attribute
+/// while it sits in a part with a `-shadowcsshost-no-combinator` marker. And a
+/// part whose only host marker is inside a pseudo-function (`:where(:host)`)
+/// gets the content attribute in front. Cutting such a part would leak the
+/// marker or scope the host as content, so it is kept whole.
+fn can_split_on_other_whitespace(part: &str) -> bool {
+    let mut from = 0;
+    while let Some(at) = find_ignore_ascii_case(part, from, POLYFILL_HOST) {
+        from = at + POLYFILL_HOST.len();
+        if !starts_with_ignore_ascii_case(part, at, POLYFILL_HOST_NO_COMBINATOR) {
+            return false;
+        }
+        // `_polyfillHostNoCombinatorOutsidePseudoFunction`: `(?![^(]*\))`.
+        let after = &part[at + POLYFILL_HOST_NO_COMBINATOR.len()..];
+        if after.bytes().find(|&b| b == b'(' || b == b')') == Some(b')') {
+            return false;
+        }
+    }
+    true
+}
+
 /// Whether `s` contains a `SafeSelector` escape placeholder (`/__esc-ph-(\d+)__/`).
 fn has_escape_placeholder(s: &str) -> bool {
     s.match_indices("__esc-ph-").any(|(at, m)| {
diff --git a/crates/oxc_angular_compiler/tests/shadow_css_test.rs b/crates/oxc_angular_compiler/tests/shadow_css_test.rs
index dca8e66fb..c279d97c1 100644
--- a/crates/oxc_angular_compiler/tests/shadow_css_test.rs
+++ b/crates/oxc_angular_compiler/tests/shadow_css_test.rs
@@ -1740,3 +1740,31 @@ fn test_newline_combinator_scopes_both_sides() {
         "[_nghost-%COMP%]:hover   .child[_ngcontent-%COMP%] {}"
     );
 }
+
+#[test]
+fn test_newline_does_not_split_host_markers_angular_scopes_together() {
+    // A later `:host` is folded into the first `:host(...)` match as a bare
+    // marker, which Angular only turns into the host attribute while it is in
+    // the same part. A marker inside `:where()` alone would get the content
+    // attribute in front. So the newline split is skipped there, matching
+    // @angular/compiler 22.2.2 exactly.
+    assert_eq!(ng_shim(":host(.h)\n:host {}"), ".h[_nghost-%COMP%]\n[_nghost-%COMP%] {}");
+    assert_eq!(
+        ng_shim(":host(.a)\n:not(:host) {}"),
+        ".a[_nghost-%COMP%]\n:not([_nghost-%COMP%]) {}"
+    );
+    assert_eq!(
+        ng_shim(":host(.h)\n:where(:host) {}"),
+        ".h[_nghost-%COMP%]\n:where([_nghost-%COMP%]) {}"
+    );
+    assert_eq!(
+        ng_shim(".x, :where(:host)\t:host-context(.k) {}"),
+        ".x[_ngcontent-%COMP%], :where([_nghost-%COMP%])\t.k[_nghost-%COMP%], .k   [_nghost-%COMP%] {}"
+    );
+    // Other parts of the same selector still split on a newline, as if it
+    // were a space (`.p .q :host(.h)` leaves `.p` and `.q` unscoped too).
+    assert_eq!(
+        ng_shim(".p\n.q :host(.h)\n:host {}"),
+        ".p   .q   .h[_nghost-%COMP%]\n[_nghost-%COMP%] {}"
+    );
+}

From 8682353094623c7ecb1c7e5478d652b7c4b3253c Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 19:48:45 +0800
Subject: [PATCH 48/54] feat(hmr): compile component updates with the full
 transform's options
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

What:
- New `compile_component_hmr_update` in the crate (NAPI:
  `compileComponentHmrUpdate` / `compileComponentHmrUpdateSync`). It takes
  the transform's `TransformOptions` and `ResolvedResources` plus the class
  name, parses the file once, extracts that class's metadata with the same
  consts (imported values included with `resolveImportedValues`), resolves
  the template, `styleUrls` and template `<link>` styles the same way, and
  runs `compile_component_full` for it. The update's `template`, `consts`,
  `decls`, `vars`, `ngContentSelectors` and `styles` are read from the ɵcmp
  that compile builds, so they are the transform's text. Exceptions:
  constants start at `_c0`, `@angular/core` is `i0` (the module binds it),
  and a `@defer` block of a class with `deferredImports` keeps a null
  dependency function (the resolver's dynamic imports would resolve against
  the update module's URL).
- Resources it was not given come back as `missingTemplateUrl` /
  `missingStyleUrls`. Styles are `null` (keep the live ones) when a
  stylesheet is missing and nothing was read, when `styles` cannot be
  evaluated, or when the source's HMR fingerprint differs from the one the
  component was compiled from (`sourceFingerprint`).
- `compile_component_full` gets an `hmr_update` flag (skips the second
  template compile and collects the update fields) and takes the import
  elision analyzer as an `Option`, since only implicit `@defer` needs it.
- The `@ng/component` endpoint calls it instead of
  `extractComponentMetadataSync` + JS style merging + `compileForHmrSync`.
  It builds the options with the same `transformOptionsFor` as `transform`,
  reads the URLs the compiler names (templates through `templateTransform`,
  styles through the cycle-shared `compileStyle`), and remembers per
  component which URLs the last update read, so a repeat edit compiles
  once.
- `compileForHmrSync` / `compileForHmr` stay exported, marked
  `@deprecated` in their docs.

Why:
The endpoint parsed the file again with an extractor that did not resolve
imported values, then compiled the template alone with a handful of options:
no file path (i18n Closure message names fell back to `MSG_APP_*`, template
errors said "line N of the template" instead of `file:line:col`), and
imported `styles` came out unknown so the update dropped them. Two
hmr-hot-update tests pinned that limitation; they now expect the imported
styles the transform compiled.

Tests: Rust `hmr_component_update_test` and vitest
`hmr-component-update.test.ts` check the update's template, consts, styles
and error locations against `transformAngularFile` (whitespace, i18n,
error-location, resources, defer cases); a new hmr-hot-update case checks the
endpoint's invalidate message names `./app.component.html:2:1`. Compare
harness: 0 mismatched.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../oxc_angular_compiler/src/component/mod.rs |  13 +-
 .../src/component/transform.rs                | 356 +++++++++++++++++-
 crates/oxc_angular_compiler/src/lib.rs        |   7 +-
 .../tests/hmr_component_update_test.rs        | 296 +++++++++++++++
 napi/angular-compiler/index.d.ts              | 111 ++++++
 napi/angular-compiler/index.js                |   4 +
 napi/angular-compiler/src/lib.rs              | 196 ++++++++++
 .../test/hmr-component-update.test.ts         | 228 +++++++++++
 .../test/hmr-hot-update.test.ts               |  55 ++-
 napi/angular-compiler/vite-plugin/index.ts    | 352 +++++++----------
 10 files changed, 1370 insertions(+), 248 deletions(-)
 create mode 100644 crates/oxc_angular_compiler/tests/hmr_component_update_test.rs
 create mode 100644 napi/angular-compiler/test/hmr-component-update.test.ts

diff --git a/crates/oxc_angular_compiler/src/component/mod.rs b/crates/oxc_angular_compiler/src/component/mod.rs
index 89df8d818..2ca029c04 100644
--- a/crates/oxc_angular_compiler/src/component/mod.rs
+++ b/crates/oxc_angular_compiler/src/component/mod.rs
@@ -39,10 +39,11 @@ pub use metadata::{
 };
 pub use namespace_registry::NamespaceRegistry;
 pub use transform::{
-    CompiledComponent, ComponentResourceUrls, HmrTemplateCompileOutput, HostMetadataInput,
-    ImportInfo, ImportMap, LinkerHostBindingOutput, LinkerTemplateOutput, ResolvedResources,
-    TemplateCompileOutput, TransformOptions, TransformResult, build_import_map,
-    compile_component_template, compile_for_hmr, compile_host_bindings_for_linker,
-    compile_template_for_hmr, compile_template_for_linker, compile_template_to_js,
-    compile_template_to_js_with_options, extract_component_resource_urls, transform_angular_file,
+    CompiledComponent, ComponentHmrUpdate, ComponentHmrUpdateInput, ComponentResourceUrls,
+    HmrTemplateCompileOutput, HostMetadataInput, ImportInfo, ImportMap, LinkerHostBindingOutput,
+    LinkerTemplateOutput, ResolvedResources, TemplateCompileOutput, TransformOptions,
+    TransformResult, build_import_map, compile_component_hmr_update, compile_component_template,
+    compile_for_hmr, compile_host_bindings_for_linker, compile_template_for_hmr,
+    compile_template_for_linker, compile_template_to_js, compile_template_to_js_with_options,
+    extract_component_resource_urls, transform_angular_file,
 };
diff --git a/crates/oxc_angular_compiler/src/component/transform.rs b/crates/oxc_angular_compiler/src/component/transform.rs
index 81497c3bf..d519c5683 100644
--- a/crates/oxc_angular_compiler/src/component/transform.rs
+++ b/crates/oxc_angular_compiler/src/component/transform.rs
@@ -3611,7 +3611,8 @@ pub fn transform_angular_file(
                         &import_map,
                         resolved_resources,
                         deferrable_selector,
-                        &import_elision_mut,
+                        Some(&import_elision_mut),
+                        false,
                     ) {
                         Ok(compilation_result) => {
                             // Update the shared pool index for the next component
@@ -4768,7 +4769,8 @@ pub fn transform_angular_file(
 /// Result of full component compilation including ɵcmp/ɵfac.
 struct FullCompilationResult {
     /// Compiled template function as JavaScript, for HMR template updates.
-    /// `None` when HMR is off (nothing reads it then) and in partial mode.
+    /// `None` when HMR is off (nothing reads it then), for an HMR update
+    /// compile (see `hmr_update`) and in partial mode.
     template_js: Option<String>,
 
     /// ɵcmp definition as JavaScript.
@@ -4818,6 +4820,24 @@ struct FullCompilationResult {
     /// a missing decorator `styleUrl`: the caller surfaces
     /// COMPONENT_RESOURCE_NOT_FOUND in the result diagnostics.
     missing_link_urls: Vec<String>,
+
+    /// The template fields of the ɵcmp, for an HMR update compile only.
+    hmr_update: Option<HmrUpdateParts>,
+}
+
+/// What an HMR update module needs from a component's full compile: the
+/// definition fields its template decides, as emitted in the ɵcmp.
+struct HmrUpdateParts {
+    template_js: String,
+    /// The template's constant declarations (child view functions, pooled
+    /// constants) the fields refer to.
+    declarations_js: String,
+    consts_js: Option<String>,
+    decls: u32,
+    vars: u32,
+    ng_content_selectors_js: Option<String>,
+    /// The ɵcmp's `styles`.
+    styles: Vec<String>,
 }
 
 /// The analyzer behind both cross-file features (`cross_file_elision`'s
@@ -4934,6 +4954,262 @@ pub fn extract_component_resource_urls(
     urls
 }
 
+/// Inputs of [`compile_component_hmr_update`] besides the file and options.
+#[derive(Debug, Default)]
+pub struct ComponentHmrUpdateInput<'s> {
+    /// The class to compile the update for.
+    pub class_name: &'s str,
+    /// The `hmr_fingerprint` of the source the running component was compiled
+    /// from (see [`TransformResult::hmr_fingerprint`]). When given and this
+    /// source has another fingerprint, it differs outside the inline
+    /// `template` / `styles` values, so styles that come out empty are not
+    /// trusted to clear the live ones.
+    pub source_fingerprint: Option<&'s str>,
+    /// The class names that fingerprint was taken for (the file's compiled
+    /// components). Defaults to `class_name` alone.
+    pub compiled_class_names: Option<&'s [&'s str]>,
+}
+
+/// An HMR update for one component, from [`compile_component_hmr_update`].
+#[derive(Debug, Default)]
+pub struct ComponentHmrUpdate {
+    /// The update module (see [`crate::generate_hmr_update_module`]). `None`
+    /// when there is nothing to send: the class is not a compiled
+    /// `@Component`, its template is empty or missing from the resources, or
+    /// compiling it failed (see `diagnostics`).
+    pub module: Option<String>,
+
+    /// The component ID (`path@ClassName`).
+    pub component_id: String,
+
+    /// The template function the module installs, as emitted in the ɵcmp.
+    pub template_js: String,
+
+    /// The styles the module installs, as emitted in the ɵcmp. `None` when
+    /// they are not known (a stylesheet missing from the resources with
+    /// nothing else to send, `styles` the evaluator could not read, or a
+    /// source that differs from `source_fingerprint`); the module then keeps
+    /// the live ones.
+    pub styles: Option<Vec<String>>,
+
+    /// The class's `templateUrl`, as written.
+    pub template_url: Option<String>,
+
+    /// The class's `styleUrl` / `styleUrls` entries, as written.
+    pub style_urls: Vec<String>,
+
+    /// The `href` of each stylesheet `<link>` in the template, as written.
+    pub template_style_urls: Vec<String>,
+
+    /// The `templateUrl` when it was not in the resources. Nothing is compiled
+    /// then; read it and call again.
+    pub missing_template_url: Option<String>,
+
+    /// `styleUrls` and template `<link>` hrefs that were not in the resources.
+    /// Read the ones that can be read and call again.
+    pub missing_style_urls: Vec<String>,
+
+    /// The HMR fingerprint of `source` for `compiled_class_names`, as
+    /// [`super::component_hmr_fingerprint`] computes it. `None` when the
+    /// source did not parse.
+    pub fingerprint: Option<String>,
+
+    /// Errors (and other diagnostics) of the parse and the compile.
+    pub diagnostics: Vec<OxcDiagnostic>,
+}
+
+/// Compile the HMR update module of one component with the options of the
+/// full transform.
+///
+/// Takes the same `options` and `resolved_resources` as
+/// [`transform_angular_file`] and does what it does for the class, from one
+/// parse of `source`: the same metadata extraction (same-file constants and,
+/// with `resolve_imported_values`, imported ones), the same template and style
+/// resolution, and the same template compile (`preserveWhitespaces`, i18n
+/// message ids, Angular version, debug locations for `path`, template
+/// stylesheet links). The update's `template`, `consts`, `decls`, `vars`,
+/// `ngContentSelectors` and `styles` are those of the ɵcmp the transform
+/// emits, with two exceptions:
+///
+/// - constants are numbered from `_c0`, as for the first component of a file
+///   (the update module declares its own);
+/// - `@angular/core` is `i0` (the module binds it) and a `@defer` block whose
+///   class lists `deferredImports` gets no dependency function, since the
+///   dynamic imports would resolve against the module's own URL.
+///
+/// HMR always compiles the full (AOT) output; `jit` and partial
+/// `compilation_mode` are ignored.
+pub fn compile_component_hmr_update(
+    allocator: &Allocator,
+    path: &str,
+    source: &str,
+    input: &ComponentHmrUpdateInput<'_>,
+    options: Option<&TransformOptions>,
+    resolved_resources: Option<&ResolvedResources>,
+) -> ComponentHmrUpdate {
+    let default_options = TransformOptions::default();
+    let options = options.unwrap_or(&default_options);
+    let options_full;
+    let options = if options.jit || options.compilation_mode != crate::CompilationMode::Full {
+        options_full = TransformOptions {
+            jit: false,
+            compilation_mode: crate::CompilationMode::Full,
+            ..options.clone()
+        };
+        &options_full
+    } else {
+        options
+    };
+    let empty_resources = ResolvedResources::default();
+    let resources = resolved_resources.unwrap_or(&empty_resources);
+    let class_name = input.class_name;
+
+    let mut update = ComponentHmrUpdate {
+        component_id: format!("{path}@{class_name}"),
+        ..ComponentHmrUpdate::default()
+    };
+
+    let source_type = SourceType::from_path(path).unwrap_or_default();
+    let parser_ret = Parser::new(allocator, source, source_type).parse();
+    if !parser_ret.diagnostics.is_empty() {
+        update.diagnostics.extend(
+            parser_ret.diagnostics.into_iter().map(|e| OxcDiagnostic::error(e.to_string())),
+        );
+        return update;
+    }
+    let program = &parser_ret.program;
+
+    #[cfg(feature = "cross_file_elision")]
+    let cross_file_analyzer =
+        if options.resolve_imported_values { new_cross_file_analyzer(path, options) } else { None };
+    let string_consts = collect_string_consts(allocator, program);
+    #[cfg(feature = "cross_file_elision")]
+    let string_consts =
+        with_imported_values(string_consts, cross_file_analyzer.as_ref(), path, options);
+
+    let default_class_names = [class_name];
+    let compiled_class_names = input.compiled_class_names.unwrap_or(&default_class_names);
+    let fingerprint = super::hmr_fingerprint::hmr_fingerprint_of_program(
+        program,
+        source,
+        &string_consts,
+        |name| compiled_class_names.contains(&name),
+    )
+    .fingerprint;
+    let source_matches = input.source_fingerprint.is_none_or(|expected| expected == fingerprint);
+    update.fingerprint = Some(fingerprint);
+
+    let Some(class) = program.body.iter().find_map(|stmt| {
+        let class = match stmt {
+            Statement::ClassDeclaration(class) => class.as_ref(),
+            Statement::ExportDefaultDeclaration(export) => match &export.declaration {
+                ExportDefaultDeclarationKind::ClassDeclaration(class) => class.as_ref(),
+                _ => return None,
+            },
+            Statement::ExportDeclaration(export) => match &export.declaration {
+                Declaration::ClassDeclaration(class) => class.as_ref(),
+                _ => return None,
+            },
+            _ => return None,
+        };
+        class.id.as_ref().is_some_and(|id| id.name == class_name).then_some(class)
+    }) else {
+        return update;
+    };
+    // `jit: true` opts the class out of AOT; the transform compiles no ɵcmp.
+    if find_jit_forced_decorator(class, &string_consts).is_some() {
+        return update;
+    }
+
+    let import_map = build_import_map(allocator, &program.body, options.resolved_imports.as_ref());
+    let Some(mut metadata) = extract_component_metadata(
+        allocator,
+        class,
+        options.implicit_standalone(),
+        &import_map,
+        Some(source),
+        &string_consts,
+    ) else {
+        return update;
+    };
+
+    update.template_url = metadata.template_url.as_ref().map(ToString::to_string);
+    update.style_urls = metadata.style_urls.iter().map(ToString::to_string).collect();
+    let styles_known = metadata.styles_resolved;
+    update.missing_style_urls = resolve_styles(allocator, &mut metadata, Some(resources));
+    let (template, missing_template_url) = resolve_template(&metadata, Some(resources));
+    if missing_template_url.is_some() {
+        update.missing_template_url = missing_template_url;
+        return update;
+    }
+    // An empty template is what an editor's truncate-then-write leaves for a
+    // moment; there is nothing to send until the next save.
+    let Some(template) = template.filter(|template| !template.is_empty()) else {
+        return update;
+    };
+    let template = allocator.alloc_str(&template);
+
+    let (view_queries, content_queries) =
+        extract_class_queries(allocator, class, Some(source), &string_consts);
+    // `i0` like the update module binds it, whatever alias the file needs.
+    let mut namespace_registry = NamespaceRegistry::new(allocator);
+    let compiled = match compile_component_full(
+        allocator,
+        template,
+        &mut metadata,
+        path,
+        source,
+        options,
+        view_queries,
+        content_queries,
+        0,
+        &mut namespace_registry,
+        &import_map,
+        Some(resources),
+        None,
+        None,
+        true,
+    ) {
+        Ok(compiled) => compiled,
+        Err(diagnostics) => {
+            update.diagnostics = diagnostics;
+            return update;
+        }
+    };
+    update.template_style_urls = compiled.template_style_urls;
+    update.missing_style_urls.extend(compiled.missing_link_urls);
+    // `compile_component_full` returns Err for anything that breaks the
+    // output, so what is left does not stop the update.
+    let Some(parts) = compiled.hmr_update else {
+        return update;
+    };
+
+    // A stylesheet that could not be read is not proof the component has no
+    // styles, and neither is an empty answer from a source the running
+    // component was not compiled from: only a complete answer may clear the
+    // live styles. Content that was read is sent either way.
+    let complete = update.missing_style_urls.is_empty() && source_matches;
+    update.styles =
+        (styles_known && (complete || !parts.styles.is_empty())).then_some(parts.styles);
+
+    update.module =
+        Some(crate::hmr::generate_hmr_update_module(&crate::hmr::HmrUpdateModuleOptions {
+            component_id: &update.component_id,
+            class_name,
+            template: Some(crate::hmr::HmrTemplateFields {
+                template_js: &parts.template_js,
+                decls: parts.decls,
+                vars: parts.vars,
+                consts_js: parts.consts_js.as_deref(),
+                ng_content_selectors_js: parts.ng_content_selectors_js.as_deref(),
+            }),
+            styles: update.styles.as_deref(),
+            declarations_js: Some(parts.declarations_js.as_str()).filter(|d| !d.is_empty()),
+        }));
+    update.template_js = parts.template_js;
+    update
+}
+
 /// Compile a component template and generate ɵcmp/ɵfac definitions.
 ///
 /// The `pool_starting_index` parameter is used to ensure constant names don't conflict
@@ -5002,6 +5278,7 @@ fn compile_component_partial<'a>(
         // URLs at consumer build time.
         template_style_urls: Vec::new(),
         missing_link_urls: Vec::new(),
+        hmr_update: None,
     }
 }
 
@@ -5103,7 +5380,8 @@ fn compile_component_full<'a>(
     import_map: &ImportMap<'a>,
     resolved_resources: Option<&ResolvedResources>,
     deferrable_selector: Option<DeferrableSelector<'_>>,
-    import_elision: &ImportElisionAnalyzer<'_>,
+    import_elision: Option<&ImportElisionAnalyzer<'_>>,
+    hmr_update: bool,
 ) -> Result<FullCompilationResult, Vec<OxcDiagnostic>> {
     use oxc_allocator::FromIn;
 
@@ -5247,6 +5525,7 @@ fn compile_component_full<'a>(
     // selectors; skipped under HMR, like ngc.
     let mut implicitly_deferred_imports = Vec::new();
     if let Some(deferrable_selector) = deferrable_selector
+        && let Some(import_elision) = import_elision
         && !options.hmr
         && let Some(OutputExpression::LiteralArray(raw_imports)) = &metadata.raw_imports
         && raw_imports.entries.iter().all(|entry| matches!(entry, OutputExpression::ReadVar(_)))
@@ -5314,7 +5593,11 @@ fn compile_component_full<'a>(
     // `@defer`.
     let has_defer_block = super::defer_resolver::template_has_defer_block(&r3_result.nodes);
 
-    let defer_resolver_fn = if metadata.deferred_imports.is_empty() {
+    // An HMR update module cannot carry the resolver: its dynamic `import()`s
+    // would resolve against the update module's URL, not the component file.
+    // The update keeps a null dependency function instead (PerComponent mode
+    // below), as `compile_template_for_hmr` always has.
+    let defer_resolver_fn = if metadata.deferred_imports.is_empty() || hmr_update {
         None
     } else if has_defer_block {
         super::defer_resolver::build_defer_resolver_expression(allocator, metadata, import_map)
@@ -5328,7 +5611,9 @@ fn compile_component_full<'a>(
     // ingest stage threads `all_deferrable_deps_fn` into each `DeferOp`.
     // Without a resolver, the existing PerBlock-vs-JIT behavior stays in
     // place (and `all_deferrable_deps_fn = None`).
-    let defer_block_deps_emit_mode = if defer_resolver_fn.is_some() {
+    let defer_block_deps_emit_mode = if defer_resolver_fn.is_some()
+        || (hmr_update && !metadata.deferred_imports.is_empty() && has_defer_block)
+    {
         DeferBlockDepsEmitMode::PerComponent
     } else if options.jit {
         DeferBlockDepsEmitMode::PerComponent
@@ -5475,6 +5760,28 @@ fn compile_component_full<'a>(
         declarations_js.push_str(&emitter.emit_statement(decl));
         declarations_js.push('\n');
     }
+
+    // An HMR update replaces the template fields of the live definition, so
+    // it takes them from the definition just built: the same text the full
+    // transform emits. Only the template's declarations go along; the host
+    // binding's belong to fields the update keeps.
+    let hmr_update = hmr_update.then(|| HmrUpdateParts {
+        template_js: cmp_definition_field(&definitions.cmp_definition, "template")
+            .map(|template| emitter.emit_expression(template))
+            .unwrap_or_default(),
+        declarations_js: declarations_js.clone(),
+        consts_js: cmp_definition_field(&definitions.cmp_definition, "consts")
+            .map(|consts| emitter.emit_expression(consts)),
+        decls: job.root.decl_count.unwrap_or(0),
+        vars: job.root.vars.unwrap_or(0),
+        ng_content_selectors_js: cmp_definition_field(
+            &definitions.cmp_definition,
+            "ngContentSelectors",
+        )
+        .map(|selectors| emitter.emit_expression(selectors)),
+        styles: cmp_definition_styles(&definitions.cmp_definition),
+    });
+
     // Emit host binding declarations (pooled constants like pure functions)
     for decl in host_binding_declarations.iter() {
         declarations_js.push_str(&emitter.emit_statement(decl));
@@ -5485,7 +5792,7 @@ fn compile_component_full<'a>(
     // The ɵcmp already contains the template function inline. Only the HMR
     // `template_updates` map reads it, so skip the second template compile
     // otherwise.
-    let template_js = if options.hmr {
+    let template_js = if options.hmr && hmr_update.is_none() {
         Some(
             compile_template_to_js(allocator, template, metadata.class_name.as_str(), file_path)
                 .map_err(|diags| {
@@ -5602,9 +5909,46 @@ fn compile_component_full<'a>(
         implicitly_deferred_imports,
         template_style_urls,
         missing_link_urls,
+        hmr_update,
     })
 }
 
+/// The value of `key` in a `ɵɵdefineComponent({...})` call.
+fn cmp_definition_field<'b, 'a>(
+    cmp_definition: &'b OutputExpression<'a>,
+    key: &str,
+) -> Option<&'b OutputExpression<'a>> {
+    let OutputExpression::InvokeFunction(call) = cmp_definition else { return None };
+    let Some(OutputExpression::LiteralMap(config)) = call.args.first() else { return None };
+    config
+        .entries
+        .iter()
+        .find(|entry| !entry.is_spread && entry.key.as_str() == key)
+        .map(|entry| &entry.value)
+}
+
+/// The finished CSS strings in a `ɵɵdefineComponent({...})` call's `styles`
+/// (encapsulated and minified as configured, empty ones dropped).
+fn cmp_definition_styles(cmp_definition: &OutputExpression<'_>) -> Vec<String> {
+    use crate::output::ast::LiteralValue;
+    let Some(OutputExpression::LiteralArray(styles)) =
+        cmp_definition_field(cmp_definition, "styles")
+    else {
+        return Vec::new();
+    };
+    styles
+        .entries
+        .iter()
+        .filter_map(|style| match style {
+            OutputExpression::Literal(literal) => match &literal.value {
+                LiteralValue::String(style) => Some(style.to_string()),
+                _ => None,
+            },
+            _ => None,
+        })
+        .collect()
+}
+
 /// Resolve template content from inline or external source.
 ///
 /// Precedence matches Angular's AOT compiler (`parseTemplateDeclaration` in
diff --git a/crates/oxc_angular_compiler/src/lib.rs b/crates/oxc_angular_compiler/src/lib.rs
index f59c2e62c..8c0f1ff21 100644
--- a/crates/oxc_angular_compiler/src/lib.rs
+++ b/crates/oxc_angular_compiler/src/lib.rs
@@ -64,9 +64,10 @@ pub use transform::{HtmlToR3Transform, html_to_r3::html_ast_to_r3_ast};
 // Re-export component module types for convenience
 pub use component::{
     AngularVersion, ChangeDetectionStrategy, CompiledComponent, ComponentHmrFingerprint,
-    ComponentMetadata, ComponentResourceUrls, HmrTemplateCompileOutput, HostMetadata,
-    HostMetadataInput, ImportInfo, ImportMap, NamespaceRegistry, Prerelease, ResolvedResources,
-    TemplateCompileOutput, TransformOptions, TransformResult, ViewEncapsulation, build_import_map,
+    ComponentHmrUpdate, ComponentHmrUpdateInput, ComponentMetadata, ComponentResourceUrls,
+    HmrTemplateCompileOutput, HostMetadata, HostMetadataInput, ImportInfo, ImportMap,
+    NamespaceRegistry, Prerelease, ResolvedResources, TemplateCompileOutput, TransformOptions,
+    TransformResult, ViewEncapsulation, build_import_map, compile_component_hmr_update,
     compile_component_template, compile_for_hmr, compile_template_for_hmr, compile_template_to_js,
     compile_template_to_js_with_options, component_hmr_fingerprint, extract_component_metadata,
     extract_component_resource_urls, transform_angular_file,
diff --git a/crates/oxc_angular_compiler/tests/hmr_component_update_test.rs b/crates/oxc_angular_compiler/tests/hmr_component_update_test.rs
new file mode 100644
index 000000000..66c95575a
--- /dev/null
+++ b/crates/oxc_angular_compiler/tests/hmr_component_update_test.rs
@@ -0,0 +1,296 @@
+//! `compile_component_hmr_update` compiles a component's HMR update with the
+//! options of the full transform, so the template fields it installs are the
+//! ones `transform_angular_file` puts in the ɵcmp.
+
+use oxc_allocator::Allocator;
+use oxc_angular_compiler::{
+    ComponentHmrUpdate, ComponentHmrUpdateInput, ResolvedResources, TransformOptions,
+    compile_component_hmr_update, compile_template_for_hmr, component_hmr_fingerprint,
+    transform_angular_file,
+};
+
+const PATH: &str = "/app/src/x.component.ts";
+
+fn component(metadata: &str, template: &str) -> String {
+    format!(
+        "import {{ Component }} from '@angular/core';\n\
+         @Component({{ selector: 'x-cmp', {metadata} template: {template:?} }})\n\
+         export class X {{ name = 'x'; }}\n"
+    )
+}
+
+fn transform(
+    source: &str,
+    options: &TransformOptions,
+    resources: Option<&ResolvedResources>,
+) -> String {
+    let allocator = Allocator::default();
+    let result = transform_angular_file(&allocator, PATH, source, Some(options), resources);
+    assert!(result.diagnostics.is_empty(), "{:?}", result.diagnostics);
+    result.code
+}
+
+fn update(
+    source: &str,
+    options: &TransformOptions,
+    resources: Option<&ResolvedResources>,
+) -> ComponentHmrUpdate {
+    let allocator = Allocator::default();
+    let input = ComponentHmrUpdateInput { class_name: "X", ..Default::default() };
+    let update =
+        compile_component_hmr_update(&allocator, PATH, source, &input, Some(options), resources);
+    assert!(update.diagnostics.is_empty(), "{:?}", update.diagnostics);
+    update
+}
+
+/// `options` with HMR on, as the dev server compiles.
+fn hmr(options: TransformOptions) -> TransformOptions {
+    TransformOptions { hmr: true, ..options }
+}
+
+/// `code` with the whitespace the emitter's line wrapping puts in left out.
+/// String literals keep theirs escaped, so nothing a template decides is lost.
+fn squash(code: &str) -> String {
+    code.chars().filter(|c| !c.is_whitespace()).collect()
+}
+
+/// The update's template function is the one the full transform emits.
+fn assert_template_matches_transform(update: &ComponentHmrUpdate, code: &str) {
+    assert!(update.module.is_some());
+    assert_ne!(update.template_js, "");
+    assert!(
+        squash(code).contains(&squash(&update.template_js)),
+        "template\n{}\nis not in the transform output\n{code}",
+        update.template_js
+    );
+}
+
+#[test]
+fn keeps_whitespace_the_decorator_preserves() {
+    let source =
+        component("preserveWhitespaces: true,", "<div>\n  <span> {{ name }} </span>\n</div>");
+    let options = hmr(TransformOptions::default());
+    let update = update(&source, &options, None);
+    assert_template_matches_transform(&update, &transform(&source, &options, None));
+    assert!(update.template_js.contains(r#"ɵɵtext(1,"\n  ")"#), "{}", update.template_js);
+}
+
+#[test]
+fn names_i18n_messages_after_the_file() {
+    let source = component("", "<p i18n>Hello {{ name }}</p>");
+    let options = hmr(TransformOptions { i18n_use_external_ids: false, ..Default::default() });
+    let update = update(&source, &options, None);
+    let code = transform(&source, &options, None);
+    assert_template_matches_transform(&update, &code);
+    let consts = update.consts_js();
+    assert!(squash(&code).contains(&squash(consts)), "consts\n{consts}\nare not in\n{code}");
+    assert!(consts.contains("MSG_"), "{consts}");
+
+    // The template-only compile has no file to name them after.
+    let allocator = Allocator::default();
+    let old =
+        compile_template_for_hmr(&allocator, "<p i18n>Hello {{ name }}</p>", "X", PATH, &options)
+            .unwrap();
+    assert_ne!(old.consts_js.as_deref(), Some(consts));
+}
+
+/// Help text of the error diagnostics, which say where a template error is.
+fn error_locations(diagnostics: &[oxc_diagnostics::OxcDiagnostic]) -> Vec<String> {
+    diagnostics
+        .iter()
+        .filter(|d| d.severity == oxc_diagnostics::Severity::Error)
+        .map(|d| d.help.as_deref().unwrap_or_default().to_string())
+        .collect()
+}
+
+#[test]
+fn locates_template_errors_in_the_file_like_the_transform() {
+    let options = hmr(TransformOptions::default());
+    let input = ComponentHmrUpdateInput { class_name: "X", ..Default::default() };
+
+    // An inline template is part of the source: `file:line:column` in it.
+    let source = "import { Component } from '@angular/core';\n\
+                  @Component({ selector: 'x-cmp', template: `<div>\n  <span>\n</div>` })\n\
+                  export class X {}\n";
+    let allocator = Allocator::default();
+    let update =
+        compile_component_hmr_update(&allocator, PATH, source, &input, Some(&options), None);
+    let transformed = transform_angular_file(&allocator, PATH, source, Some(&options), None);
+    assert!(update.module.is_none());
+    let locations = error_locations(&update.diagnostics);
+    assert_ne!(locations.len(), 0);
+    assert!(locations.iter().all(|l| l == &format!("{PATH}:4:1")), "{locations:?}");
+    assert_eq!(locations, error_locations(&transformed.diagnostics));
+
+    // An external one: `templateUrl:line:column`.
+    let source = "import { Component } from '@angular/core';\n\
+                  @Component({ selector: 'x-cmp', templateUrl: './x.html' })\n\
+                  export class X {}\n";
+    let resources = ResolvedResources {
+        templates: [("./x.html".into(), "<b>\n</i>".into())].into(),
+        styles: std::collections::HashMap::default(),
+    };
+    let update = compile_component_hmr_update(
+        &allocator,
+        PATH,
+        source,
+        &input,
+        Some(&options),
+        Some(&resources),
+    );
+    let transformed =
+        transform_angular_file(&allocator, PATH, source, Some(&options), Some(&resources));
+    let locations = error_locations(&update.diagnostics);
+    assert_eq!(locations, ["./x.html:2:1"]);
+    assert_eq!(locations, error_locations(&transformed.diagnostics));
+
+    // The template-only compile knows neither.
+    let old = compile_template_for_hmr(&allocator, "<b>\n</i>", "X", PATH, &options).unwrap_err();
+    assert_eq!(error_locations(&old), ["line 2, column 1 of the template"]);
+}
+
+#[test]
+fn takes_template_and_styles_from_the_resources() {
+    let source = "import { Component } from '@angular/core';\n\
+                  @Component({ selector: 'x-cmp', templateUrl: './x.html', styleUrl: './x.css', styles: ['b { color: blue }'] })\n\
+                  export class X {}\n";
+    let resources = || ResolvedResources {
+        templates: [(
+            "./x.html".into(),
+            "<link rel=\"stylesheet\" href=\"./link.css\"><b>x</b>".into(),
+        )]
+        .into(),
+        styles: [
+            ("./x.css".into(), vec!["b { color: red }".into()]),
+            ("./link.css".into(), vec!["b { color: green }".into()]),
+        ]
+        .into(),
+    };
+    let options = hmr(TransformOptions::default());
+    let resources = resources();
+    let update = update(source, &options, Some(&resources));
+    let code = transform(source, &options, Some(&resources));
+    assert_template_matches_transform(&update, &code);
+    assert_eq!(update.template_url.as_deref(), Some("./x.html"));
+    assert_eq!(update.style_urls, ["./x.css"]);
+    assert_eq!(update.template_style_urls, ["./link.css"]);
+    assert_eq!(update.missing_style_urls, Vec::<String>::new());
+    let styles = update.styles.as_deref().unwrap();
+    assert_eq!(styles.len(), 3);
+    for style in styles {
+        assert!(
+            squash(&code).contains(&squash(&format!("{style:?}"))),
+            "{style}\nis not in\n{code}"
+        );
+    }
+    assert!(styles[0].contains("blue") && styles[1].contains("red") && styles[2].contains("green"));
+}
+
+#[test]
+fn reports_resources_it_was_not_given() {
+    let source = "import { Component } from '@angular/core';\n\
+                  @Component({ selector: 'x-cmp', templateUrl: './x.html', styleUrls: ['./x.css'] })\n\
+                  export class X {}\n";
+    let options = hmr(TransformOptions::default());
+    let update = update(source, &options, None);
+    assert!(update.module.is_none());
+    assert_eq!(update.missing_template_url.as_deref(), Some("./x.html"));
+    assert_eq!(update.missing_style_urls, ["./x.css"]);
+
+    // With the template but not the stylesheet, nothing is known about the
+    // styles, so the update keeps the live ones.
+    let resources = ResolvedResources {
+        templates: [("./x.html".into(), "<link rel=\"stylesheet\" href=\"l.css\"><b>x</b>".into())]
+            .into(),
+        styles: std::collections::HashMap::default(),
+    };
+    let update = self::update(source, &options, Some(&resources));
+    assert_eq!(update.missing_style_urls, ["./x.css", "l.css"]);
+    assert_eq!(update.styles, None);
+    assert!(!update.module.as_deref().unwrap().contains("styles:"));
+}
+
+#[test]
+fn clears_styles_only_for_the_source_the_component_was_compiled_from() {
+    let source = component("", "<b>x</b>");
+    let options = hmr(TransformOptions::default());
+    let allocator = Allocator::default();
+    let compiled = component_hmr_fingerprint(&allocator, PATH, &source, &["X"]).fingerprint;
+
+    let run = |fingerprint: &str| {
+        let allocator = Allocator::default();
+        let input = ComponentHmrUpdateInput {
+            class_name: "X",
+            source_fingerprint: Some(fingerprint),
+            compiled_class_names: Some(&["X"]),
+        };
+        compile_component_hmr_update(&allocator, PATH, &source, &input, Some(&options), None)
+    };
+    let update = run(&compiled);
+    assert_eq!(update.fingerprint.as_deref(), Some(compiled.as_str()));
+    assert_eq!(update.styles, Some(vec![]));
+    assert!(update.module.as_deref().unwrap().contains("styles: []"));
+
+    let update = run("another source");
+    assert_eq!(update.styles, None);
+    assert!(!update.module.as_deref().unwrap().contains("styles:"));
+}
+
+#[test]
+fn sends_nothing_for_an_empty_template_or_another_class() {
+    let options = hmr(TransformOptions::default());
+    let update = update(&component("", ""), &options, None);
+    assert!(update.module.is_none());
+
+    let allocator = Allocator::default();
+    let input = ComponentHmrUpdateInput { class_name: "Y", ..Default::default() };
+    let source = component("", "<b>x</b>");
+    let update =
+        compile_component_hmr_update(&allocator, PATH, &source, &input, Some(&options), None);
+    assert!(update.module.is_none());
+    assert_eq!(update.diagnostics.len(), 0, "{:?}", update.diagnostics);
+}
+
+trait ConstsJs {
+    fn consts_js(&self) -> &str;
+}
+
+impl ConstsJs for ComponentHmrUpdate {
+    /// The `consts` the update module writes.
+    fn consts_js(&self) -> &str {
+        let module = self.module.as_deref().unwrap();
+        let start = module.find("consts: ").unwrap() + "consts: ".len();
+        let end = module[start..].find(",\n    ngContentSelectors").unwrap();
+        &module[start..start + end]
+    }
+}
+
+#[test]
+fn numbers_constants_like_the_transform_after_selector_attrs_and_queries() {
+    let source = "import { Component, ViewChild } from '@angular/core';\n\
+                  @Component({ selector: 'button[x-cmp]', host: { '[class.on]': 'on' }, \
+                  template: '<input #field [attr.a]=\"[1, name]\"><ng-content select=\"b\"></ng-content>' })\n\
+                  export class X { name = 'x'; on = true; @ViewChild('field') field: unknown; }\n";
+    let options = hmr(TransformOptions::default());
+    let update = update(source, &options, None);
+    let code = transform(source, &options, None);
+    assert_template_matches_transform(&update, &code);
+    let module = update.module.as_deref().unwrap();
+    assert!(squash(&code).contains(&squash(update.consts_js())), "{module}");
+    assert!(module.contains("ngContentSelectors: _c"), "{module}");
+}
+
+#[test]
+fn leaves_deferred_imports_to_the_live_definition() {
+    let source = "import { Component } from '@angular/core';\n\
+                  import { Child } from './child';\n\
+                  @Component({ selector: 'x-cmp', deferredImports: [Child], \
+                  template: '@defer { <child-cmp /> }' })\n\
+                  export class X {}\n";
+    let options = hmr(TransformOptions::default());
+    let update = update(source, &options, None);
+    assert!(transform(source, &options, None).contains("import(\"./child\")"));
+    let module = update.module.as_deref().unwrap();
+    assert!(!module.contains("import("), "{module}");
+    assert!(module.contains("ɵɵdefer("), "{module}");
+}
diff --git a/napi/angular-compiler/index.d.ts b/napi/angular-compiler/index.d.ts
index 57505a216..18a416639 100644
--- a/napi/angular-compiler/index.d.ts
+++ b/napi/angular-compiler/index.d.ts
@@ -49,6 +49,49 @@ export declare function compileClassMetadata(
   decoratorType: string,
 ): Promise<ClassMetadataNapiCompileResult>
 
+/**
+ * Compile the HMR update module of one component, with the options of the
+ * full transform (async).
+ *
+ * Takes the `source`, `filename`, `options` and `resolvedResources` that
+ * `transformAngularFile` takes, and compiles the update from one parse of
+ * the source: the class's metadata is read like the transform reads it
+ * (imported values included with `resolveImportedValues`), and the template
+ * is compiled with the same options (`preserveWhitespaces`, i18n message
+ * ids, `angularVersion`, `filename` for i18n names and error locations,
+ * template stylesheet links). The module's `template`, `consts`, `decls`,
+ * `vars`, `ngContentSelectors` and `styles` are those of the transform's
+ * ɵcmp, except that constants are numbered from `_c0` and a `@defer` block
+ * of a class with `deferredImports` gets no dependency function.
+ *
+ * Resources the class needs but `resolvedResources` lacks come back in
+ * `missingTemplateUrl` / `missingStyleUrls`: read them and call again.
+ */
+export declare function compileComponentHmrUpdate(
+  source: string,
+  filename: string,
+  className: string,
+  options?: TransformOptions | undefined | null,
+  resolvedResources?: ResolvedResources | undefined | null,
+  hmrOptions?: ComponentHmrUpdateOptions | undefined | null,
+): Promise<ComponentHmrUpdateResult>
+
+/**
+ * Sync version of `compileComponentHmrUpdate`.
+ *
+ * # Errors
+ *
+ * Never: compile errors are reported in the result's `errors`.
+ */
+export declare function compileComponentHmrUpdateSync(
+  source: string,
+  filename: string,
+  className: string,
+  options?: TransformOptions | undefined | null,
+  resolvedResources?: ResolvedResources | undefined | null,
+  hmrOptions?: ComponentHmrUpdateOptions | undefined | null,
+): ComponentHmrUpdateResult
+
 /**
  * Compile a factory function from the provided metadata (async).
  *
@@ -72,6 +115,8 @@ export declare function compileFactory(
  * Compile for HMR (async).
  *
  * This is the async version of `compileForHmrSync`.
+ *
+ * @deprecated Use `compileComponentHmrUpdate`; see `compileForHmrSync`.
  */
 export declare function compileForHmr(
   template: string,
@@ -101,6 +146,12 @@ export declare function compileForHmr(
  * # Returns
  *
  * A tuple of (hmr_module_code, component_id) or errors.
+ *
+ * @deprecated Compiles the template alone, with only the options passed
+ * here: no file path for i18n message names or error locations, and the
+ * caller has to find the template, styles and `preserveWhitespaces` itself.
+ * Use `compileComponentHmrUpdate`, which compiles the update from the
+ * component's source with the transform's options.
  */
 export declare function compileForHmrSync(
   template: string,
@@ -165,6 +216,66 @@ export interface ComponentHmrFingerprint {
   components: Array<string>
 }
 
+/** What `compileComponentHmrUpdate` needs besides the source and options. */
+export interface ComponentHmrUpdateOptions {
+  /**
+   * `TransformResult.hmrFingerprint` of the source the running component
+   * was compiled from. When this source has another fingerprint (another
+   * plugin rewrote the module, say), styles that come out empty are not
+   * trusted to clear the live ones.
+   */
+  sourceFingerprint?: string
+  /**
+   * The class names that fingerprint was taken for: the components the
+   * transform compiled in the file. Defaults to `className` alone.
+   */
+  compiledClassNames?: Array<string>
+}
+
+/** An HMR update for one component. */
+export interface ComponentHmrUpdateResult {
+  /**
+   * The update module, or an empty string when there is nothing to send:
+   * the class is not a compiled `@Component`, its template is empty, its
+   * `templateUrl` is missing from the resources (see `missingTemplateUrl`),
+   * or compiling failed (see `errors`).
+   */
+  hmrModule: string
+  /** The component ID (path@ClassName). */
+  componentId: string
+  /** The template function the module installs, as emitted in the ɵcmp. */
+  templateJs: string
+  /**
+   * The styles the module installs, as emitted in the ɵcmp, or `null` when
+   * they are not known and the module keeps the live ones.
+   */
+  styles?: Array<string>
+  /** The class's `templateUrl`, as written. */
+  templateUrl?: string
+  /** The class's `styleUrl` / `styleUrls` entries, as written. */
+  styleUrls: Array<string>
+  /** The `href` of each stylesheet `<link>` in the template, as written. */
+  templateStyleUrls: Array<string>
+  /**
+   * The `templateUrl` when it was not in the resources. Nothing was
+   * compiled; read it and call again.
+   */
+  missingTemplateUrl?: string
+  /**
+   * `styleUrls` and template `<link>` hrefs that were not in the
+   * resources. Read the ones that can be read and call again.
+   */
+  missingStyleUrls: Array<string>
+  /**
+   * The HMR fingerprint of the source for `compiledClassNames` (as
+   * `componentHmrFingerprint` computes it), or `null` when it did not
+   * parse.
+   */
+  fingerprint?: string
+  /** Parse and compile errors (and other diagnostics). */
+  errors: Array<OxcError>
+}
+
 /** Host metadata extracted from a `@Component` decorator. */
 export interface ComponentHostMetadata {
   /** Host property bindings: [[key, value], ...]. */
diff --git a/napi/angular-compiler/index.js b/napi/angular-compiler/index.js
index 235763922..99e106e17 100644
--- a/napi/angular-compiler/index.js
+++ b/napi/angular-compiler/index.js
@@ -907,6 +907,8 @@ if (!nativeBinding) {
 
 const {
   compileClassMetadata,
+  compileComponentHmrUpdate,
+  compileComponentHmrUpdateSync,
   compileFactory,
   compileForHmr,
   compileForHmrSync,
@@ -930,6 +932,8 @@ const {
   Severity,
 } = nativeBinding
 export { compileClassMetadata }
+export { compileComponentHmrUpdate }
+export { compileComponentHmrUpdateSync }
 export { compileFactory }
 export { compileForHmr }
 export { compileForHmrSync }
diff --git a/napi/angular-compiler/src/lib.rs b/napi/angular-compiler/src/lib.rs
index a2b1295fd..178130ec9 100644
--- a/napi/angular-compiler/src/lib.rs
+++ b/napi/angular-compiler/src/lib.rs
@@ -641,6 +641,12 @@ pub fn generate_style_module(component_id: String, styles: Vec<String>) -> Strin
 /// # Returns
 ///
 /// A tuple of (hmr_module_code, component_id) or errors.
+///
+/// @deprecated Compiles the template alone, with only the options passed
+/// here: no file path for i18n message names or error locations, and the
+/// caller has to find the template, styles and `preserveWhitespaces` itself.
+/// Use `compileComponentHmrUpdate`, which compiles the update from the
+/// component's source with the transform's options.
 #[napi]
 pub fn compile_for_hmr_sync(
     template: String,
@@ -801,6 +807,8 @@ impl Task for CompileForHmrTask {
 /// Compile for HMR (async).
 ///
 /// This is the async version of `compileForHmrSync`.
+///
+/// @deprecated Use `compileComponentHmrUpdate`; see `compileForHmrSync`.
 #[napi]
 pub fn compile_for_hmr(
     template: String,
@@ -818,6 +826,194 @@ pub fn compile_for_hmr(
     })
 }
 
+/// What `compileComponentHmrUpdate` needs besides the source and options.
+#[derive(Default)]
+#[napi(object)]
+pub struct ComponentHmrUpdateOptions {
+    /// `TransformResult.hmrFingerprint` of the source the running component
+    /// was compiled from. When this source has another fingerprint (another
+    /// plugin rewrote the module, say), styles that come out empty are not
+    /// trusted to clear the live ones.
+    pub source_fingerprint: Option<String>,
+
+    /// The class names that fingerprint was taken for: the components the
+    /// transform compiled in the file. Defaults to `className` alone.
+    pub compiled_class_names: Option<Vec<String>>,
+}
+
+/// An HMR update for one component.
+#[derive(Default)]
+#[napi(object)]
+pub struct ComponentHmrUpdateResult {
+    /// The update module, or an empty string when there is nothing to send:
+    /// the class is not a compiled `@Component`, its template is empty, its
+    /// `templateUrl` is missing from the resources (see `missingTemplateUrl`),
+    /// or compiling failed (see `errors`).
+    pub hmr_module: String,
+
+    /// The component ID (path@ClassName).
+    pub component_id: String,
+
+    /// The template function the module installs, as emitted in the ɵcmp.
+    pub template_js: String,
+
+    /// The styles the module installs, as emitted in the ɵcmp, or `null` when
+    /// they are not known and the module keeps the live ones.
+    pub styles: Option<Vec<String>>,
+
+    /// The class's `templateUrl`, as written.
+    pub template_url: Option<String>,
+
+    /// The class's `styleUrl` / `styleUrls` entries, as written.
+    pub style_urls: Vec<String>,
+
+    /// The `href` of each stylesheet `<link>` in the template, as written.
+    pub template_style_urls: Vec<String>,
+
+    /// The `templateUrl` when it was not in the resources. Nothing was
+    /// compiled; read it and call again.
+    pub missing_template_url: Option<String>,
+
+    /// `styleUrls` and template `<link>` hrefs that were not in the
+    /// resources. Read the ones that can be read and call again.
+    pub missing_style_urls: Vec<String>,
+
+    /// The HMR fingerprint of the source for `compiledClassNames` (as
+    /// `componentHmrFingerprint` computes it), or `null` when it did not
+    /// parse.
+    pub fingerprint: Option<String>,
+
+    /// Parse and compile errors (and other diagnostics).
+    pub errors: Vec<OxcError>,
+}
+
+/// Async task for `compileComponentHmrUpdate`.
+pub struct CompileComponentHmrUpdateTask {
+    source: String,
+    filename: String,
+    class_name: String,
+    options: Option<TransformOptions>,
+    resolved_resources: Option<ResolvedResources>,
+    hmr_options: Option<ComponentHmrUpdateOptions>,
+}
+
+#[napi]
+impl Task for CompileComponentHmrUpdateTask {
+    type JsValue = ComponentHmrUpdateResult;
+    type Output = ComponentHmrUpdateResult;
+
+    fn compute(&mut self) -> napi::Result<Self::Output> {
+        use oxc_angular_compiler::{
+            ComponentHmrUpdateInput, ResolvedResources as RustResolvedResources,
+            compile_component_hmr_update,
+        };
+
+        let allocator = Allocator::default();
+        let rust_options: RustTransformOptions = self.options.take().unwrap_or_default().into();
+        let rust_resources = self
+            .resolved_resources
+            .take()
+            .map(|r| RustResolvedResources { templates: r.templates, styles: r.styles });
+        let hmr_options = self.hmr_options.take().unwrap_or_default();
+        let compiled_class_names: Option<Vec<&str>> = hmr_options
+            .compiled_class_names
+            .as_ref()
+            .map(|names| names.iter().map(String::as_str).collect());
+        let input = ComponentHmrUpdateInput {
+            class_name: &self.class_name,
+            source_fingerprint: hmr_options.source_fingerprint.as_deref(),
+            compiled_class_names: compiled_class_names.as_deref(),
+        };
+
+        let update = compile_component_hmr_update(
+            &allocator,
+            &self.filename,
+            &self.source,
+            &input,
+            Some(&rust_options),
+            rust_resources.as_ref(),
+        );
+
+        Ok(ComponentHmrUpdateResult {
+            hmr_module: update.module.unwrap_or_default(),
+            component_id: update.component_id,
+            template_js: update.template_js,
+            styles: update.styles,
+            template_url: update.template_url,
+            style_urls: update.style_urls,
+            template_style_urls: update.template_style_urls,
+            missing_template_url: update.missing_template_url,
+            missing_style_urls: update.missing_style_urls,
+            fingerprint: update.fingerprint,
+            errors: OxcError::from_diagnostics(&self.filename, &self.source, update.diagnostics),
+        })
+    }
+
+    fn resolve(&mut self, _: napi::Env, result: Self::Output) -> napi::Result<Self::JsValue> {
+        Ok(result)
+    }
+}
+
+/// Compile the HMR update module of one component, with the options of the
+/// full transform (async).
+///
+/// Takes the `source`, `filename`, `options` and `resolvedResources` that
+/// `transformAngularFile` takes, and compiles the update from one parse of
+/// the source: the class's metadata is read like the transform reads it
+/// (imported values included with `resolveImportedValues`), and the template
+/// is compiled with the same options (`preserveWhitespaces`, i18n message
+/// ids, `angularVersion`, `filename` for i18n names and error locations,
+/// template stylesheet links). The module's `template`, `consts`, `decls`,
+/// `vars`, `ngContentSelectors` and `styles` are those of the transform's
+/// ɵcmp, except that constants are numbered from `_c0` and a `@defer` block
+/// of a class with `deferredImports` gets no dependency function.
+///
+/// Resources the class needs but `resolvedResources` lacks come back in
+/// `missingTemplateUrl` / `missingStyleUrls`: read them and call again.
+#[napi]
+pub fn compile_component_hmr_update(
+    source: String,
+    filename: String,
+    class_name: String,
+    options: Option<TransformOptions>,
+    resolved_resources: Option<ResolvedResources>,
+    hmr_options: Option<ComponentHmrUpdateOptions>,
+) -> AsyncTask<CompileComponentHmrUpdateTask> {
+    AsyncTask::new(CompileComponentHmrUpdateTask {
+        source,
+        filename,
+        class_name,
+        options,
+        resolved_resources,
+        hmr_options,
+    })
+}
+
+/// Sync version of `compileComponentHmrUpdate`.
+///
+/// # Errors
+///
+/// Never: compile errors are reported in the result's `errors`.
+#[napi]
+pub fn compile_component_hmr_update_sync(
+    source: String,
+    filename: String,
+    class_name: String,
+    options: Option<TransformOptions>,
+    resolved_resources: Option<ResolvedResources>,
+    hmr_options: Option<ComponentHmrUpdateOptions>,
+) -> napi::Result<ComponentHmrUpdateResult> {
+    CompileComponentHmrUpdateTask {
+        source,
+        filename,
+        class_name,
+        options,
+        resolved_resources,
+        hmr_options,
+    }
+    .compute()
+}
+
 /// URL-encode a component ID for use in import URLs.
 ///
 /// # Arguments
diff --git a/napi/angular-compiler/test/hmr-component-update.test.ts b/napi/angular-compiler/test/hmr-component-update.test.ts
new file mode 100644
index 000000000..2ac84f4f1
--- /dev/null
+++ b/napi/angular-compiler/test/hmr-component-update.test.ts
@@ -0,0 +1,228 @@
+/**
+ * `compileComponentHmrUpdate` compiles an HMR update from the component's
+ * source with the options of the full transform, so the template it installs
+ * is the template function `transformAngularFile` put in the ɵcmp.
+ *
+ * Each test compiles a component with the transform, loads it, applies the
+ * update module with Angular's own `ɵɵreplaceMetadata`, and compares the
+ * result with the definition the transform built.
+ */
+import { mkdirSync, rmSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+
+import * as core from '@angular/core'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
+
+import {
+  compileComponentHmrUpdate,
+  compileComponentHmrUpdateSync,
+  compileForHmrSync,
+  transformAngularFileSync,
+  type ResolvedResources,
+  type TransformOptions,
+} from '../index.js'
+
+const TMP = join(fileURLToPath(new URL('.', import.meta.url)), '.hmr-component-update-tmp')
+const FILE = '/app/src/x.component.ts'
+let nextFile = 0
+
+beforeAll(() => {
+  mkdirSync(TMP, { recursive: true })
+  // i18n constants call `$localize` when the definition's `consts` are read.
+  ;(globalThis as any).$localize ??= (strings: TemplateStringsArray, ...values: unknown[]) =>
+    String.raw({ raw: strings }, ...values)
+})
+
+afterAll(() => {
+  rmSync(TMP, { recursive: true, force: true })
+})
+
+/** A component `X` with `metadata` spliced into its decorator. */
+function source(metadata: string): string {
+  return `import { Component } from '@angular/core';
+
+@Component({
+  selector: 'x-cmp',
+  ${metadata}
+})
+export class X {
+  name = 'x';
+}
+`
+}
+
+/** Loads an update module the way the browser does: by its default export. */
+async function loadUpdateModule(code: string): Promise<(...args: unknown[]) => void> {
+  const file = join(TMP, `update-${nextFile++}.mjs`)
+  writeFileSync(file, code)
+  return (await import(/* @vite-ignore */ pathToFileURL(file).href)).default
+}
+
+/** Compiles `code` with the transform and loads the class. */
+async function compile(code: string, options: TransformOptions): Promise<any> {
+  const result = transformAngularFileSync(code, FILE, options)
+  expect(result.errors).toEqual([])
+  const file = join(TMP, `component-${nextFile++}.mjs`)
+  writeFileSync(file, result.code)
+  return (await import(/* @vite-ignore */ pathToFileURL(file).href)).X
+}
+
+/**
+ * A template function's identity: its source text. A nested function
+ * expression carries a trailing `;` that a declaration does not.
+ */
+function templateSource(fn: unknown): string {
+  return String(fn).replace(/};(\s|$)/g, '}$1')
+}
+
+function consts(type: any) {
+  const def = type.ɵcmp
+  return typeof def.consts === 'function' ? def.consts() : def.consts
+}
+
+/** `code` without the whitespace the emitter's line wrapping adds. */
+function squash(code: string): string {
+  return code.replace(/\s+/g, '')
+}
+
+/**
+ * Compiles `code` with the transform and the HMR update from the same source
+ * and options: the update's template function is the one in the transform's
+ * output. Then applies the update to a loaded component and checks that the
+ * definition's template fields are the transform's.
+ */
+async function expectUpdateMatchesTransform(code: string, options: TransformOptions = {}) {
+  options = { hmr: true, ...options }
+  const transformed = transformAngularFileSync(code, FILE, options)
+  expect(transformed.errors).toEqual([])
+  const result = await compileComponentHmrUpdate(code, FILE, 'X', options)
+  expect(result.errors).toEqual([])
+  expect(result.hmrModule).not.toBe('')
+  expect(squash(transformed.code)).toContain(squash(result.templateJs))
+
+  // Loaded without the HMR initializer, which would fetch `/@ng/component`;
+  // `hmr` changes nothing in the ɵcmp.
+  const loadOptions = { ...options, hmr: false }
+  const fresh = await compile(code, loadOptions)
+  const type = await compile(code, loadOptions)
+  type.ɵcmp.tView ??= {}
+  const applyMetadata = await loadUpdateModule(result.hmrModule)
+  ;(core as any).ɵɵreplaceMetadata(type, applyMetadata, [core], [])
+  expect(templateSource(type.ɵcmp.template)).toBe(templateSource(result.templateJs))
+  expect(type.ɵcmp.decls).toBe(fresh.ɵcmp.decls)
+  expect(type.ɵcmp.vars).toBe(fresh.ɵcmp.vars)
+  expect(consts(type)).toEqual(consts(fresh))
+  expect(type.ɵcmp.styles).toEqual(fresh.ɵcmp.styles)
+  expect(type.ɵcmp.tView).toBeNull()
+  return result
+}
+
+describe('compileComponentHmrUpdate', () => {
+  it('keeps the whitespace the decorator preserves', async () => {
+    const template = '<div>\n  <span> {{ name }} </span>\n</div>'
+    const code = source(`preserveWhitespaces: true, template: ${JSON.stringify(template)},`)
+    const result = await expectUpdateMatchesTransform(code)
+    expect(result.templateJs).toContain('ɵɵtext(1,"\\n  ")')
+
+    // The template-only compile does not see the decorator.
+    const old = compileForHmrSync(template, 'X', FILE, null, { hmr: true })
+    expect(templateSource(old.templateJs)).not.toBe(templateSource(result.templateJs))
+  })
+
+  it('names i18n messages after the component file', async () => {
+    const template = '<p i18n>Hello {{ name }}</p><b i18n-title title="Hi">x</b>'
+    const code = source(`template: ${JSON.stringify(template)},`)
+    const result = await expectUpdateMatchesTransform(code)
+    // Closure message names are derived from the file path. They only show
+    // in the Closure branch, which `$localize` skips at runtime.
+    const names = (code: string) => code.match(/MSG_\w+/g)?.sort()
+    const transformed = transformAngularFileSync(code, FILE, { hmr: true })
+    expect(names(result.hmrModule)).toEqual([
+      'MSG__APP_SRC_X_COMPONENT_TS__0',
+      'MSG__APP_SRC_X_COMPONENT_TS__0',
+      'MSG__APP_SRC_X_COMPONENT_TS__1',
+      'MSG__APP_SRC_X_COMPONENT_TS__1',
+    ])
+    expect(names(result.hmrModule)).toEqual(names(transformed.code))
+
+    // The template-only compile has no file to name them after.
+    const old = compileForHmrSync(template, 'X', FILE, null, { hmr: true })
+    expect(names(old.hmrModule)).not.toEqual(names(result.hmrModule))
+  })
+
+  it('locates a template error in the component file, like the transform', async () => {
+    // An inline template is part of the source: `file:line:column` in it.
+    const code = source('template: `<div>\n  <span>\n</div>`,')
+    const transformed = transformAngularFileSync(code, FILE, { hmr: true })
+    const result = compileComponentHmrUpdateSync(code, FILE, 'X', { hmr: true })
+    expect(result.hmrModule).toBe('')
+    const locations = result.errors.map((e) => e.helpMessage)
+    expect(locations).toEqual([`${FILE}:7:1`])
+    expect(locations).toEqual(transformed.errors.map((e) => e.helpMessage))
+
+    // An external template: `templateUrl:line:column`.
+    const external = source(`templateUrl: './x.html',`)
+    const resources = {
+      templates: { './x.html': '<b>\n</i>' },
+      styles: {},
+    } as unknown as ResolvedResources
+    const update = compileComponentHmrUpdateSync(external, FILE, 'X', { hmr: true }, resources)
+    expect(update.errors.map((e) => e.helpMessage)).toEqual(['./x.html:2:1'])
+    expect(update.errors.map((e) => e.helpMessage)).toEqual(
+      transformAngularFileSync(external, FILE, { hmr: true }, resources).errors.map(
+        (e) => e.helpMessage,
+      ),
+    )
+
+    // The template-only compile has no file to point at.
+    const old = compileForHmrSync('<b>\n</i>', 'X', FILE, null, { hmr: true })
+    expect(old.errors.map((e) => e.helpMessage)).toEqual(['line 2, column 1 of the template'])
+  })
+
+  it('takes the template and styles from the resources, links included', async () => {
+    const code = source(
+      `templateUrl: './x.html', styleUrl: './x.css', styles: ['b { color: blue }'],`,
+    )
+    const resources = {
+      templates: { './x.html': '<link rel="stylesheet" href="./link.css"><b>{{ name }}</b>' },
+      styles: { './x.css': ['b { color: red }'], './link.css': ['b { color: green }'] },
+    } as unknown as ResolvedResources
+    const fresh = transformAngularFileSync(code, FILE, { hmr: true }, resources)
+    expect(fresh.errors).toEqual([])
+
+    const result = compileComponentHmrUpdateSync(code, FILE, 'X', { hmr: true }, resources)
+    expect(result.errors).toEqual([])
+    expect(result.templateUrl).toBe('./x.html')
+    expect(result.styleUrls).toEqual(['./x.css'])
+    expect(result.templateStyleUrls).toEqual(['./link.css'])
+    expect(result.missingStyleUrls).toEqual([])
+    expect(result.styles).toEqual([
+      'b[_ngcontent-%COMP%] { color: blue }',
+      'b[_ngcontent-%COMP%] { color: red }',
+      'b[_ngcontent-%COMP%] { color: green }',
+    ])
+    for (const style of result.styles!) {
+      expect(fresh.code).toContain(JSON.stringify(style))
+    }
+  })
+
+  it('names the resources it was not given', () => {
+    const code = source(`templateUrl: './x.html', styleUrls: ['./x.css'],`)
+    const first = compileComponentHmrUpdateSync(code, FILE, 'X', { hmr: true })
+    expect(first.hmrModule).toBe('')
+    expect(first.errors).toEqual([])
+    expect(first.missingTemplateUrl).toBe('./x.html')
+    expect(first.missingStyleUrls).toEqual(['./x.css'])
+
+    // A stylesheet that is still missing leaves the live styles alone.
+    const resources = {
+      templates: { './x.html': '<b>x</b>' },
+      styles: {},
+    } as unknown as ResolvedResources
+    const second = compileComponentHmrUpdateSync(code, FILE, 'X', { hmr: true }, resources)
+    expect(second.hmrModule).not.toBe('')
+    expect(second.styles ?? null).toBeNull()
+    expect(second.hmrModule).not.toContain('styles:')
+  })
+})
diff --git a/napi/angular-compiler/test/hmr-hot-update.test.ts b/napi/angular-compiler/test/hmr-hot-update.test.ts
index 3df869bec..67de01cf5 100644
--- a/napi/angular-compiler/test/hmr-hot-update.test.ts
+++ b/napi/angular-compiler/test/hmr-hot-update.test.ts
@@ -857,6 +857,32 @@ describe('pendingHmrUpdates race condition', () => {
       renameSync(hiddenPath, componentPath)
     }
   })
+
+  it('names the templateUrl and position of a template error, like the transform', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithServer(plugin)
+    await transformComponent(plugin)
+
+    writeFileSync(templatePath, '<h1>\n</h2>')
+    try {
+      const componentHtmlFile = normalizePath(templatePath)
+      await callHandleHotUpdate(
+        plugin,
+        createMockHmrContext(componentHtmlFile, [{ id: componentHtmlFile }], mockServer),
+      )
+      const updateMsg = mockServer._wsMessages.find(
+        (m: any) => m.event === 'angular:component-update',
+      )
+      const middleware = (mockServer.middlewares.use as ReturnType<typeof vi.fn>).mock.calls[0]?.[0]
+      expect(await invokeAngularMiddleware(middleware, decodeURIComponent(updateMsg.data.id))).toBe(
+        '',
+      )
+      const invalidate = mockServer._wsMessages.find((m: any) => m.event === 'angular:invalidate')
+      expect(invalidate.data.message).toContain('./app.component.html:2:1')
+    } finally {
+      writeFileSync(templatePath, '<h1>Hello</h1>')
+    }
+  })
 })
 
 describe('handleHotUpdate - Issue #185', () => {
@@ -3501,7 +3527,7 @@ describe('@ng/component endpoint resolves the styles per class', () => {
     expect(body).not.toContain('styles: []')
   })
 
-  it('keeps the styles of a class whose disk `styles` names an imported constant', async () => {
+  it('serves the styles of a class whose disk `styles` names an imported constant', async () => {
     const plugin = getAngularPlugin()
     const mockServer = await setupPluginWithRealConfig(plugin)
 
@@ -3513,12 +3539,9 @@ describe('@ng/component endpoint resolves the styles per class', () => {
       `export const PS458_IMP = ['.PS458_IMP_MARKER { color: red; }'];\n`,
     )
 
-    // A cross-file reference is unreadable to the extractor, which sees one
-    // file: the answer is unknown and must not clear the live CSS. The
-    // transform runs on the source exactly as it sits on disk — Vite hands
-    // `transform` the file content and resolveImportedValues follows the
-    // import — so disk source and compiled source are byte-identical and the
-    // stylesResolved leg, not the strip match, is what keeps the styles.
+    // The update is compiled with the transform's options, so
+    // `resolveImportedValues` follows the import for it too and the update
+    // carries the styles the component was compiled with.
     const diskSource = `
       import { Component } from '@angular/core';
       import { PS458_IMP } from './ps458-imp-styles';
@@ -3550,10 +3573,10 @@ describe('@ng/component endpoint resolves the styles per class', () => {
     )
     expect(body).not.toBe('')
     expect(body).toContain('two')
-    expect(body).not.toContain('styles:')
+    expect(body).toContain('.PS458_IMP_MARKER[_ngcontent-%COMP%]')
   })
 
-  it('keeps the styles of a class mixing imported `styles` with `styleUrls`', async () => {
+  it('serves both style lists of a class mixing imported `styles` with `styleUrls`', async () => {
     const plugin = getAngularPlugin()
     const mockServer = await setupPluginWithRealConfig(plugin)
 
@@ -3566,10 +3589,9 @@ describe('@ng/component endpoint resolves the styles per class', () => {
     )
     writeFileSync(join(appDir, 'ps458-mix.css'), '.PS458_MIX_EXT { color: blue; }\n')
 
-    // The transform resolves the import and compiles BOTH style lists. The
-    // extractor resolves neither `PS458_MIX` nor the inline styles the import
-    // holds — merged would be only the external CSS, a partial answer that
-    // must not be served as the component's styles.
+    // The transform resolves the import and compiles BOTH style lists, and
+    // the update, compiled with the same options, does too: serving only the
+    // external CSS would drop the imported inline styles.
     const diskSource = `
       import { Component } from '@angular/core';
       import { PS458_MIX } from './ps458-mix-styles';
@@ -3603,9 +3625,10 @@ describe('@ng/component endpoint resolves the styles per class', () => {
     )
     expect(body).not.toBe('')
     expect(body).toContain('two')
-    // Serving only the external CSS here would silently drop the imported
-    // inline styles the component was compiled with.
-    expect(body).not.toContain('styles:')
+    const inline = body.indexOf('.PS458_MIX_MARKER[_ngcontent-%COMP%]')
+    const external = body.indexOf('.PS458_MIX_EXT[_ngcontent-%COMP%]')
+    expect(inline).toBeGreaterThan(-1)
+    expect(external).toBeGreaterThan(inline)
   })
 
   it('serves the styles of a class whose disk `styles` is a `.concat(...)` call', async () => {
diff --git a/napi/angular-compiler/vite-plugin/index.ts b/napi/angular-compiler/vite-plugin/index.ts
index d0355058b..cbbc67b61 100644
--- a/napi/angular-compiler/vite-plugin/index.ts
+++ b/napi/angular-compiler/vite-plugin/index.ts
@@ -23,9 +23,8 @@ const debugTransform = createDebug('vite:oxc-angular:transform')
 
 import {
   transformAngularFile,
-  extractComponentMetadataSync,
   extractComponentUrls,
-  compileForHmrSync,
+  compileComponentHmrUpdate,
   componentHmrFingerprint,
   type TransformOptions,
   type ResolvedResources,
@@ -481,6 +480,13 @@ export function angular(options: PluginOptions = {}): Plugin[] {
   // an HMR update instead of a full reload.
   const componentFingerprintCache = new Map<string, string>()
 
+  // The resource URLs (as written) the last update of each component
+  // (`filePath@ClassName`) read: its `templateUrl`, then its `styleUrls` and
+  // template stylesheet links. The `@ng/component` endpoint reads them before
+  // it compiles, so a repeat edit needs one compile instead of a first one
+  // that only learns which files to read.
+  const hmrResourceUrls = new Map<string, { templateUrl?: string; styleUrls: string[] }>()
+
   // Angular Ivy `.d.ts` static member declarations collected across the build,
   // keyed by module id. Populated during `transform` in `compilationMode:
   // 'partial'` (library) builds and consumed by `dtsPlugin`'s `generateBundle`
@@ -512,6 +518,38 @@ export function angular(options: PluginOptions = {}): Plugin[] {
     )
   }
 
+  /**
+   * The options `transform` compiles `actualId` with. The `@ng/component`
+   * endpoint compiles updates with the same ones.
+   */
+  function transformOptionsFor(
+    actualId: string,
+    isSSR: boolean,
+    context?: Parameters<typeof getMinifyComponentStyles>[0],
+  ): TransformOptions {
+    return {
+      sourcemap: pluginOptions.sourceMap,
+      jit: pluginOptions.jit,
+      // Disable HMR for SSR transforms. SSR bundles must not contain HMR
+      // initialization code that dynamically imports @ng/component virtual
+      // modules, as those are served via HTTP middleware only. This matches
+      // Angular's official behavior where _enableHmr is only set for browser
+      // bundles (see @angular/build application-code-bundle.js).
+      hmr: pluginOptions.liveReload && watchMode && !isSSR,
+      angularVersion: pluginOptions.angularVersion,
+      minifyComponentStyles: getMinifyComponentStyles(context),
+      emitClassMetadata: pluginOptions.emitClassMetadata,
+      compilationMode: pluginOptions.compilationMode,
+      // Evaluate decorator metadata imported from other files the way
+      // ngtsc's program-wide checker does (`inputs: INPUTS`, `@Input(OPTS)`,
+      // `templateUrl: TEMPLATE_URL`). Read files land in
+      // `result.dependencies`, tracked by `transform`.
+      resolveImportedValues: true,
+      baseDir: dirname(actualId),
+      tsconfigPath: pluginOptions.tsconfig,
+    }
+  }
+
   /**
    * Resolve external template/style URLs and read their contents.
    *
@@ -780,216 +818,117 @@ export function angular(options: PluginOptions = {}): Plugin[] {
               const source = await readFile(resolvedId, 'utf-8')
               const dir = dirname(resolvedId)
 
-              // Resolve this class's resources from the SAME extractor the
-              // compiler runs. `extract_component_metadata` — with the same
-              // `collect_string_consts` table — is what `transform.rs` calls
-              // to build the `ɵcmp`, so `templateUrl` / `template` /
-              // `styleUrls` / `styles` here ARE the ones the component
-              // compiles with: same-file constants folded, template literals
-              // interpolated, quoted and computed keys resolved.
+              // One Rust call parses the file and compiles the class the way
+              // `transform` does: same options (so `preserveWhitespaces`, i18n
+              // message names, the Angular version and the file path behind
+              // error locations match), same metadata evaluation (imported
+              // values included), same style finishing. A class the transform
+              // did not compile, or whose template is empty (the truncate
+              // phase of an atomic write), gets no module.
               //
-              // That makes a per-class answer definitive, which retires the
-              // file-level fallback this endpoint used to need. The union of
-              // every component's URLs in the file was only ever a guess for
-              // decorator shapes a text scan could not read, and in a
-              // multi-component file it served a class its SIBLINGS' template
-              // and stylesheets (#456).
+              // The compiler cannot read files, so it names the resources it
+              // was not given: the class's `templateUrl` and `styleUrls`, then
+              // the template's stylesheet `<link>`s, which are only known once
+              // the template is parsed. They are read fresh from disk
+              // (templates through `templateTransform`, stylesheets through
+              // the cycle-shared `compileStyle`) and the class compiled again.
+              // The URLs the last update needed are read up front, so a
+              // repeat edit compiles once.
               //
-              // A class MISSING from the metadata is equally definitive: the
-              // compiler skipped it too — no `ɵfac`, no `ɵcmp` — so there is
-              // nothing to hot-update. (`componentsByFile` already filtered
-              // those out above; it is built from classes that compiled.)
-              const classMetadata = extractComponentMetadataSync(source, resolvedId).find(
-                (candidate) => candidate.className === className,
-              )
-
-              // Read fresh template content (bypass cache for HMR), from the
-              // requested class's own `templateUrl`, else its own inline
-              // `template`.
+              // A stylesheet that cannot be read stays missing. That is not
+              // proof the component has no styles, so the compiler will not
+              // turn it into a definitive `styles: []` that wipes live CSS;
+              // nor will it for a disk source that is not the one `transform`
+              // compiled (another plugin's `load` / `transform`, or
+              // `fileReplacements`): the fingerprints differ then.
+              const resources: PlainResources = { templates: {}, styles: {} }
+              const attempted = new Set<string>()
               const readTemplate = async (url: string) => {
                 const templatePath = resolve(dir, url)
                 let content = await readFile(templatePath, 'utf-8')
                 if (options.templateTransform) {
                   content = options.templateTransform(content, templatePath)
                 }
-                return content
+                resources.templates[url] = content
               }
-              let templateContent: string | null = null
-              if (classMetadata?.templateUrl != null) {
-                templateContent = await readTemplate(classMetadata.templateUrl)
-              } else if (classMetadata?.template != null) {
-                templateContent = classMetadata.template
+              const readStyle = async (url: string) => {
+                const stylePath = resolve(dir, url)
+                try {
+                  let content = await readFile(stylePath, 'utf-8')
+                  if (resolvedConfig) {
+                    content = (await compileStyle(stylePath, content)).code
+                  }
+                  resources.styles[url] = [content]
+                } catch {
+                  // Missing, unreadable, or failed to preprocess: unknown.
+                }
+              }
+              const known = hmrResourceUrls.get(componentId)
+              if (known) {
+                if (known.templateUrl != null) {
+                  await readTemplate(known.templateUrl).catch(() => {})
+                }
+                for (const url of known.styleUrls) await readStyle(url)
               }
 
-              if (classMetadata && templateContent) {
-                // Read fresh style content. The class's own `styleUrls` are
-                // read from disk and run through Vite's preprocessCSS (so
-                // SCSS/LESS resolve correctly); its own inline `styles` come
-                // straight from the metadata as plain CSS strings.
-                //
-                // A read FAILURE is not evidence of stylelessness, so it has
-                // to stay distinguishable from a successful read of an empty
-                // file: `complete` is false as soon as one stylesheet could
-                // not be read, and the caller downgrades the whole answer to
-                // "unknown" rather than reporting the component styleless and
-                // wiping its live CSS (an editor's atomic write leaves exactly
-                // such a window). A file read successfully but holding nothing
-                // contributes an empty string, which IS a definitive answer.
-                const readStyles = async (
-                  urls: string[],
-                ): Promise<{ contents: string[]; complete: boolean }> => {
-                  const contents: string[] = []
-                  let complete = true
-                  for (const styleUrl of urls) {
-                    const stylePath = resolve(dir, styleUrl)
-                    try {
-                      let styleContent = await readFile(stylePath, 'utf-8')
-                      if (resolvedConfig) {
-                        // Read from disk every time; only the preprocessing
-                        // is shared, and only for unchanged text built in
-                        // this HMR cycle (see `compileStyle`).
-                        styleContent = (await compileStyle(stylePath, styleContent)).code
-                      }
-                      contents.push(styleContent)
-                    } catch {
-                      // Missing, unreadable, or failed to preprocess — what
-                      // this stylesheet holds is unknown, not empty.
-                      complete = false
-                    }
-                  }
-                  return { contents, complete }
+              const compiledClassNames = [...(componentsByFile.get(fileId) ?? [])]
+              const compile = () =>
+                compileComponentHmrUpdate(
+                  source,
+                  fileId,
+                  className,
+                  transformOptionsFor(fileId, false),
+                  resources as unknown as ResolvedResources,
+                  {
+                    sourceFingerprint: componentFingerprintCache.get(fileId),
+                    compiledClassNames,
+                  },
+                )
+              let result = await compile()
+              for (;;) {
+                const templateUrl = result.missingTemplateUrl
+                const styleUrls = result.missingStyleUrls.filter(
+                  (url) => !attempted.has(`s:${url}`),
+                )
+                const readsTemplate = templateUrl != null && !attempted.has(`t:${templateUrl}`)
+                if (!readsTemplate && styleUrls.length === 0) break
+                // A template that cannot be read throws: the update fails
+                // and the page reloads (the catch below).
+                if (readsTemplate) {
+                  attempted.add(`t:${templateUrl}`)
+                  await readTemplate(templateUrl)
                 }
-                // Three-valued, and every value reaches `compileForHmrSync`
-                // verbatim: a non-empty array is the component's styles, `[]`
-                // says it definitively has none (the HMR module emits
-                // `styles: []` and the runtime drops the old CSS), and `null`
-                // says the answer is unknown so the module omits the key and
-                // whatever the component already has survives. `null` is the
-                // default because "we did not find out" is the honest starting
-                // point.
-                //
-                // Inline `styles` first, then the resolved `styleUrl(s)`
-                // content appended, then the template's stylesheet `<link>`s
-                // — the order the compiler produces, which pushes resolved
-                // content onto the decorator's own `styles`. Whitespace-only
-                // entries are dropped to match Angular's
-                // `style.trim().length > 0`.
-                const stylesFor = async (urls: string[]): Promise<string[] | null> => {
-                  const external =
-                    urls.length > 0
-                      ? await readStyles(urls)
-                      : { contents: [] as string[], complete: true }
-                  const merged = [...classMetadata.styles, ...external.contents].filter(
-                    (style) => style.trim().length > 0,
-                  )
-                  // `complete` guards exactly ONE thing: turning an unknown
-                  // answer into a definitive `[]` that wipes live CSS. It is
-                  // not a reason to throw away content that WAS read. A
-                  // stylesheet that failed while a sibling succeeded is a
-                  // PARTIAL update — which is what main always delivered,
-                  // because the old `readStyles` swallowed failures in a
-                  // `catch` and returned whatever it got. Dropping it would
-                  // silently lose every edit to the healthy sibling of a
-                  // permanently unreadable stylesheet, and the pending slot is
-                  // consumed either way, so nothing retries.
-                  //
-                  // So: a complete read is definitive and may clear; an
-                  // incomplete one falls back to main's rule exactly — send
-                  // what was read when it is non-empty, and never send `[]`.
-                  //
-                  // `complete` speaks only about the filesystem. One more
-                  // thing has to hold before an empty answer may CLEAR, and it
-                  // is about the SOURCE: this endpoint re-parses `resolvedId`
-                  // from disk, while the component was compiled from the `code`
-                  // Vite handed `transform`. Those differ whenever another
-                  // plugin's `load` / pre-`transform` rewrote the module, or
-                  // `fileReplacements` pointed `actualId` at a different file.
-                  //
-                  // On a disk source the compiler never saw, every `styles`
-                  // shape the extractor cannot evaluate (an imported constant,
-                  // a call to an imported function) resolves to nothing. Read
-                  // as definitive that emits `styles: []` and wipes CSS the
-                  // running component genuinely has, from a template edit that
-                  // never touched the styles at all.
-                  //
-                  // `componentFingerprintCache` already holds the fingerprint
-                  // of the transform-time source with the `template:` /
-                  // `styles:` VALUES left out, and only a single literal value
-                  // is ever left out — so an expression the compiler has to
-                  // evaluate stays in, and the two fingerprints disagree
-                  // exactly when the two sources disagree outside those
-                  // fields. Matching fingerprints are the evidence that the
-                  // styles read here are the styles the component compiled
-                  // with.
-                  //
-                  // This gates the destructive answer ONLY. Content that WAS
-                  // read is still served on a mismatch — no worse than main,
-                  // which scanned the same disk source.
-                  const compiledFromThisSource = () => {
-                    // Both maps are keyed by the transform id like the other
-                    // per-file maps — `resolvedId` would miss on Windows and
-                    // read no class, failing the comparison forever.
-                    const cached = componentFingerprintCache.get(fileId)
-                    return (
-                      cached !== undefined &&
-                      cached === fingerprintOf(source, fileId, componentsByFile.get(fileId))
-                    )
-                  }
-                  // `stylesResolved` comes first, ahead of "serve what was
-                  // read": the extractor here evaluates `styles` without the
-                  // `resolveImportedValues` the transform runs with, so a
-                  // component whose styles live in another file extracts
-                  // `styles: []` — an UNKNOWN answer, not an empty one. Serving
-                  // it as definitive would wipe live CSS that the transform
-                  // compiled from the import, and serving `merged` when it is
-                  // non-empty is no better: it holds only the styleUrls
-                  // content, so the imported inline styles are dropped either
-                  // way. An unknown `styles` field makes the merged array
-                  // itself unrepresentable, so the answer is `null`.
-                  return classMetadata.stylesResolved &&
-                    (merged.length > 0 || (external.complete && compiledFromThisSource()))
-                    ? merged
-                    : null
+                for (const url of styleUrls) {
+                  attempted.add(`s:${url}`)
+                  await readStyle(url)
                 }
+                result = await compile()
+              }
 
-                // Same template options as the full transform, which reads
-                // `preserveWhitespaces` from the decorator: without it the
-                // update module strips whitespace the compiled component
-                // keeps, and text nodes shift after every HMR.
-                const compile = (styles: string[] | null) =>
-                  compileForHmrSync(templateContent, className, resolvedId, styles, {
-                    angularVersion: pluginOptions.angularVersion,
-                    encapsulation: classMetadata.encapsulation,
-                    preserveWhitespaces: classMetadata.preserveWhitespaces,
-                    minifyComponentStyles: getMinifyComponentStyles(),
-                  })
-                let result = compile(await stylesFor(classMetadata.styleUrls))
-                // The template's stylesheet `<link>`s are only known once it
-                // is parsed. The full transform compiles them like
-                // `styleUrls` (relative to the component file), so read them
-                // the same way and compile again with them.
+              // A failed compile must not be served as an (empty) update
+              // module — that would call `ɵɵreplaceMetadata` with no
+              // callback and throw inside the listener. Fall back to the
+              // `angular:invalidate` full-reload path in the catch below.
+              const hmrErrors = result.errors.filter((e) => e.severity === 'Error')
+              if (hmrErrors.length > 0) {
+                // Keep the help text (`file:line:column` for template parse
+                // errors) so the invalidation message says where it is.
+                throw new Error(hmrErrors.map(describeDiagnostic).join('\n'))
+              }
+
+              if (result.hmrModule) {
+                hmrResourceUrls.set(componentId, {
+                  templateUrl: result.templateUrl ?? undefined,
+                  styleUrls: [...result.styleUrls, ...result.templateStyleUrls],
+                })
+                // A template edit can add a link the last full transform
+                // never saw, and this endpoint is all that runs for it.
+                // Register the links as this component's direct styles so
+                // later edits to them hot-update it too.
                 if (result.templateStyleUrls.length > 0) {
-                  result = compile(
-                    await stylesFor([...classMetadata.styleUrls, ...result.templateStyleUrls]),
-                  )
-                  // A template edit can add a link the last full transform
-                  // never saw, and this endpoint is all that runs for it.
-                  // Register the links as this component's direct styles so
-                  // later edits to them hot-update it too.
                   await registerLinkStyles(fileId, dir, result.templateStyleUrls)
                 }
 
-                // A failed compile must not be served as an (empty) update
-                // module — that would call `ɵɵreplaceMetadata` with no
-                // callback and throw inside the listener. Fall back to the
-                // `angular:invalidate` full-reload path in the catch below.
-                const hmrErrors = result.errors.filter((e) => e.severity === 'Error')
-                if (hmrErrors.length > 0) {
-                  // Keep the help text (`file:line:column` for template parse
-                  // errors) so the invalidation message says where it is.
-                  throw new Error(hmrErrors.map(describeDiagnostic).join('\n'))
-                }
-
                 // Only consume the pending slot once we have real content to
                 // serve. If we deleted unconditionally and the file was
                 // transiently empty (truncate phase of an atomic write on
@@ -1094,31 +1033,9 @@ export function angular(options: PluginOptions = {}): Plugin[] {
           const mayHaveResourceUrls =
             !pluginOptions.jit && (code.includes('templateUrl') || code.includes('styleUrl'))
 
-          // Disable HMR for SSR transforms. SSR bundles must not contain HMR
-          // initialization code that dynamically imports @ng/component virtual
-          // modules, as those are served via HTTP middleware only. This matches
-          // Angular's official behavior where _enableHmr is only set for browser
-          // bundles (see @angular/build application-code-bundle.js).
-          const isSSR = !!options?.ssr
-
           // Transform with Rust compiler. `extractComponentUrls` takes the same
           // options, so it evaluates the URLs exactly as the transform does.
-          const transformOptions: TransformOptions = {
-            sourcemap: pluginOptions.sourceMap,
-            jit: pluginOptions.jit,
-            hmr: pluginOptions.liveReload && watchMode && !isSSR,
-            angularVersion: pluginOptions.angularVersion,
-            minifyComponentStyles: getMinifyComponentStyles(this as any),
-            emitClassMetadata: pluginOptions.emitClassMetadata,
-            compilationMode: pluginOptions.compilationMode,
-            // Evaluate decorator metadata imported from other files the way
-            // ngtsc's program-wide checker does (`inputs: INPUTS`, `@Input(OPTS)`,
-            // `templateUrl: TEMPLATE_URL`). Read files land in
-            // `result.dependencies`, tracked below.
-            resolveImportedValues: true,
-            baseDir: dirname(actualId),
-            tsconfigPath: pluginOptions.tsconfig,
-          }
+          const transformOptions = transformOptionsFor(actualId, !!options?.ssr, this as any)
 
           let { resources, dependencies } = mayHaveResourceUrls
             ? await resolveResources(code, actualId, transformOptions)
@@ -1308,6 +1225,7 @@ export function angular(options: PluginOptions = {}): Plugin[] {
                 if (classNamesInFile.has(oldClass)) continue
                 const staleKey = `${actualId}@${oldClass}`
                 pendingHmrUpdates.delete(staleKey)
+                hmrResourceUrls.delete(staleKey)
                 debugHmr('pruned stale cache entries for %s', staleKey)
               }
             }

From e4b723976780316ec3e4fa9bb9c8d020aabf9c30 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 20:42:36 +0800
Subject: [PATCH 49/54] perf(vite-plugin): cut repeat binding calls on the
 error and first-HMR paths

The no-URL fast path reran extractComponentUrls and a second
transformAngularFile for any error beyond the missing template links, so
a template syntax error cost two parses and two compiles. It now reruns
only when there are more COMPONENT_RESOURCE_NOT_FOUND errors than missing
links. Diagnostics have no code field, so the code is matched in the
message, where the compiler always writes "(COMPONENT_RESOURCE_NOT_FOUND)".

The first HMR update of a component called compileComponentHmrUpdate up
to three times (learn templateUrl/styleUrls, then template <link>s),
because hmrResourceUrls was only filled by earlier endpoint calls. In
watch mode the transform now seeds it for each compiled file@Class with
the templates and stylesheets it read (template links included). It
holds a list of template URLs now, since the transform knows the URLs per
file, not per class.

Tests count binding calls for both cases.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../test/plugin-fast-paths.test.ts            | 83 ++++++++++++++++++-
 napi/angular-compiler/vite-plugin/index.ts    | 58 +++++++++----
 2 files changed, 125 insertions(+), 16 deletions(-)

diff --git a/napi/angular-compiler/test/plugin-fast-paths.test.ts b/napi/angular-compiler/test/plugin-fast-paths.test.ts
index e038ababd..f6cf0b19b 100644
--- a/napi/angular-compiler/test/plugin-fast-paths.test.ts
+++ b/napi/angular-compiler/test/plugin-fast-paths.test.ts
@@ -3,10 +3,13 @@
  *
  * - `transform` skips the `extractComponentUrls` parse for a file that never
  *   spells `templateUrl`/`styleUrl`, and still compiles a file that names a
- *   resource through an escaped key.
+ *   resource through an escaped key. Only a missing-resource error sends the
+ *   file back through the full resolution; a template syntax error does not.
  * - JIT `transform` never reads external resources: its output imports them.
  * - The `@ng/component` endpoint compiles with the decorator's
  *   `preserveWhitespaces`, like the full transform.
+ * - The first update of a component compiles once: `transform` hands the
+ *   endpoint the template and stylesheet URLs it read.
  * - One stylesheet edit is preprocessed once per HMR cycle, not once by
  *   `handleHotUpdate`, once by the endpoint, and once by the next transform.
  */
@@ -24,13 +27,22 @@ import { angular } from '../vite-plugin/index.js'
 // behavior, so the tests can count how often the plugin reaches them.
 const spies = vi.hoisted(() => ({
   extractComponentUrls: undefined as unknown as ReturnType<typeof vi.fn>,
+  transformAngularFile: undefined as unknown as ReturnType<typeof vi.fn>,
+  compileComponentHmrUpdate: undefined as unknown as ReturnType<typeof vi.fn>,
   preprocessCSS: undefined as unknown as ReturnType<typeof vi.fn>,
 }))
 
 vi.mock('#binding', async (importOriginal) => {
   const actual = await importOriginal<typeof import('#binding')>()
   spies.extractComponentUrls = vi.fn(actual.extractComponentUrls)
-  return { ...actual, extractComponentUrls: spies.extractComponentUrls }
+  spies.transformAngularFile = vi.fn(actual.transformAngularFile)
+  spies.compileComponentHmrUpdate = vi.fn(actual.compileComponentHmrUpdate)
+  return {
+    ...actual,
+    extractComponentUrls: spies.extractComponentUrls,
+    transformAngularFile: spies.transformAngularFile,
+    compileComponentHmrUpdate: spies.compileComponentHmrUpdate,
+  }
 })
 
 vi.mock('vite', async (importOriginal) => {
@@ -55,6 +67,8 @@ afterAll(() => {
 
 beforeEach(() => {
   spies.extractComponentUrls.mockClear()
+  spies.transformAngularFile.mockClear()
+  spies.compileComponentHmrUpdate.mockClear()
   spies.preprocessCSS.mockClear()
 })
 
@@ -231,6 +245,33 @@ describe('transform skips the resource URL parse when no URL is spelled', () =>
     expect(code).toContain('ESCAPED_TEMPLATE_MARKER')
     expect(code).toContain('ESCAPED_STYLE_MARKER')
   })
+
+  it('does not rerun the file for a template syntax error', async () => {
+    const plugin = getAngularPlugin()
+    await setupPlugin(plugin, 'build')
+
+    // The rerun only helps with a missing resource; this error would come
+    // back the same from it.
+    const { errors } = await transform(
+      plugin,
+      `
+        import { Component } from '@angular/core';
+        @Component({
+          selector: 'app-broken',
+          template: '<div></span>',
+        })
+        export class BrokenComponent {
+          value = 1;
+        }
+      `,
+      join(appDir, 'broken.component.ts'),
+    )
+
+    expect(errors.length).toBeGreaterThan(0)
+    expect(errors.join('\n')).not.toContain('COMPONENT_RESOURCE_NOT_FOUND')
+    expect(spies.transformAngularFile).toHaveBeenCalledTimes(1)
+    expect(spies.extractComponentUrls).not.toHaveBeenCalled()
+  })
 })
 
 describe('JIT transform', () => {
@@ -394,3 +435,41 @@ describe('stylesheet preprocessing during HMR', () => {
     expect(preprocessCallsFor(stylePath)).toBe(1)
   })
 })
+
+describe('first HMR update of a component', () => {
+  it('compiles the update once', async () => {
+    const templatePath = join(appDir, 'first.component.html')
+    const stylePath = join(appDir, 'first.component.css')
+    const linkPath = join(appDir, 'first-link.css')
+    const componentPath = join(appDir, 'first.component.ts')
+    const source = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-first',
+        templateUrl: './first.component.html',
+        styleUrl: './first.component.css',
+      })
+      export class FirstComponent {}
+    `
+    const template = (text: string) =>
+      `<link rel="stylesheet" href="./first-link.css"><p>${text}</p>`
+    writeFileSync(templatePath, template('FIRST_BEFORE'))
+    writeFileSync(stylePath, '.FIRST_STYLE { color: red; }')
+    writeFileSync(linkPath, '.FIRST_LINK { color: blue; }')
+    writeFileSync(componentPath, source)
+
+    const plugin = getAngularPlugin()
+    const server = await setupPlugin(plugin)
+    const { errors } = await transform(plugin, source, componentPath)
+    expect(errors).toEqual([])
+
+    writeFileSync(templatePath, template('FIRST_AFTER'))
+    await hotUpdate(plugin, templatePath, server)
+    const body = await requestUpdateModule(server, `${componentPath}@FirstComponent`)
+
+    expect(body).toContain('FIRST_AFTER')
+    expect(body).toContain('FIRST_STYLE')
+    expect(body).toContain('FIRST_LINK')
+    expect(spies.compileComponentHmrUpdate).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/napi/angular-compiler/vite-plugin/index.ts b/napi/angular-compiler/vite-plugin/index.ts
index cbbc67b61..e022d15b7 100644
--- a/napi/angular-compiler/vite-plugin/index.ts
+++ b/napi/angular-compiler/vite-plugin/index.ts
@@ -172,6 +172,16 @@ function describeDiagnostic(diagnostic: { message: string; helpMessage?: string
     : diagnostic.message
 }
 
+/**
+ * True for the compiler's COMPONENT_RESOURCE_NOT_FOUND error: a `templateUrl`,
+ * `styleUrl(s)` entry or template stylesheet `<link>` missing from the
+ * resources. Diagnostics carry no code field, so the code is matched in the
+ * message, where the compiler always writes it as `(COMPONENT_RESOURCE_NOT_FOUND)`.
+ */
+function isResourceNotFound(diagnostic: { message: string }): boolean {
+  return diagnostic.message.includes('(COMPONENT_RESOURCE_NOT_FOUND)')
+}
+
 /**
  * True when `mod` is the module graph node for `normalizedFile` itself, and
  * not a postfixed variant of it.
@@ -480,12 +490,14 @@ export function angular(options: PluginOptions = {}): Plugin[] {
   // an HMR update instead of a full reload.
   const componentFingerprintCache = new Map<string, string>()
 
-  // The resource URLs (as written) the last update of each component
-  // (`filePath@ClassName`) read: its `templateUrl`, then its `styleUrls` and
-  // template stylesheet links. The `@ng/component` endpoint reads them before
-  // it compiles, so a repeat edit needs one compile instead of a first one
-  // that only learns which files to read.
-  const hmrResourceUrls = new Map<string, { templateUrl?: string; styleUrls: string[] }>()
+  // The resource URLs (as written) each component (`filePath@ClassName`)
+  // needs: its `templateUrl`, then its `styleUrls` and template stylesheet
+  // links. `transform` seeds them with the URLs it read for the file (all of
+  // its components' URLs, as it cannot tell them apart), and each update
+  // narrows them to the ones that component read. The `@ng/component`
+  // endpoint reads them before it compiles, so an update needs one compile
+  // instead of a first one that only learns which files to read.
+  const hmrResourceUrls = new Map<string, { templateUrls: string[]; styleUrls: string[] }>()
 
   // Angular Ivy `.d.ts` static member declarations collected across the build,
   // keyed by module id. Populated during `transform` in `compilationMode:
@@ -865,8 +877,8 @@ export function angular(options: PluginOptions = {}): Plugin[] {
               }
               const known = hmrResourceUrls.get(componentId)
               if (known) {
-                if (known.templateUrl != null) {
-                  await readTemplate(known.templateUrl).catch(() => {})
+                for (const url of known.templateUrls) {
+                  await readTemplate(url).catch(() => {})
                 }
                 for (const url of known.styleUrls) await readStyle(url)
               }
@@ -918,7 +930,7 @@ export function angular(options: PluginOptions = {}): Plugin[] {
 
               if (result.hmrModule) {
                 hmrResourceUrls.set(componentId, {
-                  templateUrl: result.templateUrl ?? undefined,
+                  templateUrls: result.templateUrl != null ? [result.templateUrl] : [],
                   styleUrls: [...result.styleUrls, ...result.templateStyleUrls],
                 })
                 // A template edit can add a link the last full transform
@@ -1047,16 +1059,18 @@ export function angular(options: PluginOptions = {}): Plugin[] {
           // can still name a resource without the plain text: an escaped key
           // (`style\u0055rls`) or a computed key folded from a same-file
           // constant. It then reports the URL as COMPONENT_RESOURCE_NOT_FOUND,
-          // since resources were passed but held none. Any error on the fast
-          // path therefore reruns the file through the full resolution, which
+          // since resources were passed but held none. Such an error on the
+          // fast path reruns the file through the full resolution, which
           // makes the fast path give exactly the old result: with no URL in
           // the file, `resolveResources` would have passed these same empty
-          // resources. Missing template `<link>`s (one error each) are left
-          // to the step below: the URL extraction cannot find them.
+          // resources. Other errors (a template syntax error, say) would come
+          // back the same from the rerun, so they do not trigger it. Missing
+          // template `<link>`s (one error each) are left to the step below:
+          // the URL extraction cannot find them.
           if (
             !pluginOptions.jit &&
             !mayHaveResourceUrls &&
-            result.errors.length > result.missingLinkUrls.length
+            result.errors.filter(isResourceNotFound).length > result.missingLinkUrls.length
           ) {
             ;({ resources, dependencies } = await resolveResources(
               code,
@@ -1235,6 +1249,22 @@ export function angular(options: PluginOptions = {}): Plugin[] {
               debugHmr('registered: %s -> %s', actualId, className)
             }
 
+            // Hand the endpoint the resources this compile read: the
+            // templates and stylesheets (template `<link>`s included) that
+            // could be read, keyed by URL as written. Without them the first
+            // update of each component would compile once to learn its
+            // `templateUrl` and `styleUrls` and again for its `<link>`s.
+            if (watchMode && !pluginOptions.jit) {
+              const { templates, styles } = plainResources(resources)
+              const urls = {
+                templateUrls: Object.keys(templates),
+                styleUrls: Object.keys(styles),
+              }
+              for (const className of classNamesInFile) {
+                hmrResourceUrls.set(`${actualId}@${className}`, urls)
+              }
+            }
+
             // Cache the whole-file fingerprint for cheaply checking whether
             // anything besides template/styles changed. The transform takes
             // it from its own parse when `hmr` is on; otherwise (SSR, build)

From cda58411f685060135a3a75d88ed3bf39c10bb74 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 21:07:05 +0800
Subject: [PATCH 50/54] fix(styles): skip backslash escapes outside strings
 when scoping selectors

A backslash-escaped quote in a selector (`.x\'y\'`, Tailwind's
`.font-\[\'Inter\'\]`) opened a string in `scope_selectors`. Since the
in-string escape handling from b3464bb, that string never closed, so the
rule and every later one were emitted unscoped, and `:host` leaked as
`-shadowcsshost-no-combinator`.

Outside strings, a backslash now copies itself and the next character,
like Angular's `escapeInStrings`/`escapeBlocks`, so `\'`, `\"`, `\{`,
`\}` and `\@` open no string, block or at-rule. An escaped brace still
ends the selector text, as `_ruleRe` reads no brace into a selector
(`.a\{ .b {}` only scopes ` .b`). The other string scanners in the file
already skip escapes through `string_mask`.

`closes_enclosing_paren` scanned to the end of the selector for every
comma and combinator, quadratic in the selector length. It is replaced by
a table built in one right-to-left pass per selector, with the same
results (a unit test checks it against the old scan on every short
string over `(`, `)`, `a`). A 250k-char selector list now scopes in about
0.1s in a debug build instead of 3.6s.

Checked against @angular/compiler 22.2.2: all new test expectations match
its encapsulateStyle, and 36k reviewer fuzz cases plus 40k generated
ones show no case that matched before and differs now.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/styles/encapsulation.rs               | 134 ++++++++++++++----
 .../tests/shadow_css_test.rs                  | 108 ++++++++++++++
 2 files changed, 215 insertions(+), 27 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/styles/encapsulation.rs b/crates/oxc_angular_compiler/src/styles/encapsulation.rs
index 4641ec019..6d344178a 100644
--- a/crates/oxc_angular_compiler/src/styles/encapsulation.rs
+++ b/crates/oxc_angular_compiler/src/styles/encapsulation.rs
@@ -966,32 +966,32 @@ fn replace_ignore_ascii_case(
     result
 }
 
-/// Whether the text at byte `from` closes an enclosing parenthesis, i.e. matches
+/// For every byte offset `i` of `s` (and `s.len()`), whether the text at `i`
+/// closes an enclosing parenthesis, i.e. matches
 /// `[^)(]*(?:\([^)(]*(?:\([^)(]*(?:\([^)(]*\)[^)(]*)*\)[^)(]*)*\)[^)(]*)*\)`.
 ///
 /// `_selectorSplitRe` and the combinator separator of `_applySelectorScope`
 /// use it as a negative lookahead to skip commas and combinators inside
 /// parentheses. Groups before the closing parenthesis may nest three deep.
-fn closes_enclosing_paren(s: &str, from: usize) -> bool {
-    let mut depth = 0u32;
-    for &b in &s.as_bytes()[from..] {
-        match b {
-            b'(' => {
-                depth += 1;
-                if depth > 3 {
-                    return false;
-                }
-            }
-            b')' => {
-                if depth == 0 {
-                    return true;
-                }
-                depth -= 1;
-            }
-            _ => {}
-        }
+///
+/// Scanning forward from each offset would be quadratic, so the table is built
+/// in one pass from the end: `outcome[d]` is whether the scan from the current
+/// offset, already `d` groups deep, reaches the closing parenthesis.
+fn closes_enclosing_paren_table(s: &str) -> Vec<bool> {
+    let bytes = s.as_bytes();
+    let mut table = vec![false; bytes.len() + 1];
+    let mut outcome = [false; 4];
+    for (i, &b) in bytes.iter().enumerate().rev() {
+        outcome = match b {
+            // One group deeper; a fourth level fails the match.
+            b'(' => [outcome[1], outcome[2], outcome[3], false],
+            // At depth 0 this is the closing parenthesis; otherwise one group up.
+            b')' => [true, outcome[0], outcome[1], outcome[2]],
+            _ => outcome,
+        };
+        table[i] = outcome[0];
     }
-    false
+    table
 }
 
 /// Match Angular's `_parenSuffix`, `\(((?:\((?:\([^)(]*\)|[^)(]*)+?\)|[^)(]*)+?)\)`,
@@ -1337,6 +1337,33 @@ fn scope_selectors(css: &str, content_attr: &str, host_attr: &str, css_nesting:
             continue;
         }
 
+        // A backslash outside a string escapes the next character, as in
+        // Angular's `escapeInStrings` and `escapeBlocks`: `\'`, `\{`, `\}` and
+        // `\@` (Tailwind's `.font-\[\'Inter\'\]`) open no string, block or
+        // at-rule. Both characters are copied as they are.
+        if !in_string && c == '\\' {
+            let next_c = chars.next();
+            if in_at_rule_header {
+                at_rule_header.push(c);
+                at_rule_header.extend(next_c);
+            }
+            let sink = sink!();
+            sink.push(c);
+            sink.extend(next_c);
+            // A selector still ends there: `_ruleRe` reads no `{` or `}` into
+            // one, so the text up to an escaped brace is left unscoped
+            // (`.a\{ .b {}` only scopes ` .b`).
+            if matches!(next_c, Some('{' | '}'))
+                && !in_unscoped_at_rule
+                && !in_at_rule_header
+                && !in_declaration
+            {
+                result.push_str(&current_selector);
+                current_selector.clear();
+            }
+            continue;
+        }
+
         // Handle strings
         if in_string || c == '"' || c == '\'' {
             let sink = sink!();
@@ -1631,13 +1658,17 @@ impl<'a> SelectorScoper<'a> {
         // split is allowed in it (worked out on the first newline or tab).
         let mut angular_part_start = 0;
         let mut other_whitespace_split: Option<bool> = None;
-        while let Some((at, separator, end)) = find_combinator_separator(selector, from, leading) {
+        let closes_paren = closes_enclosing_paren_table(selector);
+        while let Some((at, separator, end)) =
+            find_combinator_separator(selector, &closes_paren, from, leading)
+        {
             from = end;
             let is_other_whitespace =
                 matches!(selector.as_bytes()[at], b'\n' | b'\t' | b'\r' | b'\x0C');
             if is_other_whitespace
                 && !*other_whitespace_split.get_or_insert_with(|| {
-                    let angular_part_end = find_angular_part_end(selector, angular_part_start, at);
+                    let angular_part_end =
+                        find_angular_part_end(selector, &closes_paren, angular_part_start, at);
                     can_split_on_other_whitespace(&selector[angular_part_start..angular_part_end])
                 })
             {
@@ -1784,6 +1815,7 @@ fn unwrap_is_attribute(scope_selector: &str) -> String {
 /// the comma (a newline, say) stays in the selectors.
 fn split_selector_list(selector: &str) -> Vec<&str> {
     let bytes = selector.as_bytes();
+    let closes_paren = closes_enclosing_paren_table(selector);
     let mut parts = Vec::new();
     let mut start = 0;
     let mut at = 0;
@@ -1796,7 +1828,7 @@ fn split_selector_list(selector: &str) -> Vec<&str> {
             at += 1;
             continue;
         };
-        if closes_enclosing_paren(selector, comma + 1) {
+        if closes_paren[comma + 1] {
             at += 1;
             continue;
         }
@@ -1852,10 +1884,12 @@ fn contains_deep_combinator(selector: &str) -> bool {
 /// `/( |>|\+|~(?!=))(?!<closes an enclosing paren>)\s*/g`, plus (from byte
 /// `other_whitespace_from` on) a newline, tab, carriage return or form feed,
 /// which is reported as a space.
+/// `closes_paren` is [`closes_enclosing_paren_table`] of `selector`.
 /// Returns its start, the separator character and the end of the trailing
 /// whitespace.
 fn find_combinator_separator(
     selector: &str,
+    closes_paren: &[bool],
     from: usize,
     other_whitespace_from: usize,
 ) -> Option<(usize, char, usize)> {
@@ -1868,7 +1902,7 @@ fn find_combinator_separator(
             b'\n' | b'\t' | b'\r' | b'\x0C' if at >= other_whitespace_from => b' ',
             _ => return None,
         };
-        if closes_enclosing_paren(selector, at + 1) {
+        if closes_paren[at + 1] {
             return None;
         }
         let rest = &selector[at + 1..];
@@ -1886,10 +1920,12 @@ fn is_escaped_hex_space(selector: &str, start: usize, at: usize) -> bool {
 
 /// End of the part Angular's own split (`/( |>|\+|~(?!=))…\s*/`, no newline or
 /// tab) would produce for the part starting at byte `start`, given that byte
-/// `at` is inside it.
-fn find_angular_part_end(selector: &str, start: usize, at: usize) -> usize {
+/// `at` is inside it. `closes_paren` is [`closes_enclosing_paren_table`] of `selector`.
+fn find_angular_part_end(selector: &str, closes_paren: &[bool], start: usize, at: usize) -> usize {
     let mut from = at;
-    while let Some((end_at, _, end)) = find_combinator_separator(selector, from, usize::MAX) {
+    while let Some((end_at, _, end)) =
+        find_combinator_separator(selector, closes_paren, from, usize::MAX)
+    {
         if !is_escaped_hex_space(selector, start, end_at) {
             return end_at;
         }
@@ -2662,6 +2698,50 @@ fn skip_polyfill_unscoped_rule(s: &str) -> Option<usize> {
 mod tests {
     use super::*;
 
+    /// The forward scan [`closes_enclosing_paren_table`] replaces.
+    fn closes_enclosing_paren_scan(s: &str, from: usize) -> bool {
+        let mut depth = 0u32;
+        for &b in &s.as_bytes()[from..] {
+            match b {
+                b'(' => {
+                    depth += 1;
+                    if depth > 3 {
+                        return false;
+                    }
+                }
+                b')' => {
+                    if depth == 0 {
+                        return true;
+                    }
+                    depth -= 1;
+                }
+                _ => {}
+            }
+        }
+        false
+    }
+
+    #[test]
+    fn test_closes_enclosing_paren_table_matches_forward_scan() {
+        // Every string of up to 8 bytes over `(`, `)`, `a`.
+        let alphabet = *b"()a";
+        for len in 0..=8u32 {
+            for mut code in 0..3usize.pow(len) {
+                let mut bytes = Vec::with_capacity(len as usize);
+                for _ in 0..len {
+                    bytes.push(alphabet[code % 3]);
+                    code /= 3;
+                }
+                let s = String::from_utf8(bytes).unwrap();
+                let table = closes_enclosing_paren_table(&s);
+                assert_eq!(table.len(), s.len() + 1);
+                for (from, &closes) in table.iter().enumerate() {
+                    assert_eq!(closes, closes_enclosing_paren_scan(&s, from), "{s:?} at {from}");
+                }
+            }
+        }
+    }
+
     #[test]
     fn test_basic_encapsulation() {
         let result = shim_css_text(".button { color: red; }", "contenta", "");
diff --git a/crates/oxc_angular_compiler/tests/shadow_css_test.rs b/crates/oxc_angular_compiler/tests/shadow_css_test.rs
index c279d97c1..f77a7e494 100644
--- a/crates/oxc_angular_compiler/tests/shadow_css_test.rs
+++ b/crates/oxc_angular_compiler/tests/shadow_css_test.rs
@@ -1406,6 +1406,114 @@ fn test_escaped_quote_does_not_end_string() {
     );
 }
 
+#[test]
+fn test_escaped_quote_outside_string_opens_no_string() {
+    // Like Angular's `escapeInStrings`/`escapeBlocks`, a backslash outside a
+    // string escapes the next character. An escaped quote in a selector used
+    // to open a string that the in-string escape handling then never closed,
+    // so the rule and every later one were left unscoped. Expected values are
+    // @angular/compiler 22.2.2's `encapsulateStyle` output.
+    assert_eq!(
+        ng_shim(".x\\'y\\'{ color: red; }.b{ color: blue; }"),
+        ".x\\'y\\'[_ngcontent-%COMP%]{ color: red; }.b[_ngcontent-%COMP%]{ color: blue; }"
+    );
+    assert_eq!(
+        ng_shim(":host .x\\'y{ color: red; } :host .b{ color: blue; }"),
+        "[_nghost-%COMP%]   .x\\'y[_ngcontent-%COMP%]{ color: red; } \
+         [_nghost-%COMP%]   .b[_ngcontent-%COMP%]{ color: blue; }"
+    );
+    assert_eq!(
+        ng_shim("@media screen{.x\\'y{ color: red; }} .b{ color: blue; }"),
+        "@media screen{.x\\'y[_ngcontent-%COMP%]{ color: red; }} .b[_ngcontent-%COMP%]{ color: blue; }"
+    );
+    assert_eq!(
+        ng_shim("@font-face{ font-family: \\'x; } .b{ color: blue; }"),
+        "@font-face{ font-family: \\'x; } .b[_ngcontent-%COMP%]{ color: blue; }"
+    );
+    assert_eq!(
+        ng_shim("@keyframes k{from\\'{ a: b; }} .b{ color: blue; }"),
+        "@keyframes _ngcontent-%COMP%_k{from\\'{ a: b; }} .b[_ngcontent-%COMP%]{ color: blue; }"
+    );
+    assert_eq!(
+        ng_shim(".a\\\\{ color: red; } .b{ color: blue; }"),
+        ".a\\\\[_ngcontent-%COMP%]{ color: red; } .b[_ngcontent-%COMP%]{ color: blue; }"
+    );
+    assert_eq!(ng_shim(".a{} .b\\"), ".a[_ngcontent-%COMP%]{} .b\\");
+}
+
+#[test]
+fn test_tailwind_escaped_quotes_in_class_names() {
+    // Tailwind arbitrary values escape their quotes and brackets. Angular's
+    // `SafeSelector` turns the `[...]` into a placeholder before the `\_`
+    // escape is taken, so `__ph-0__` is never restored; Oxc matches that.
+    assert_eq!(
+        ng_shim(".font-\\[\\'Inter\\'\\]{ font-family: Inter; } .b{ color: blue; }"),
+        ".font-\\__ph-0__[_ngcontent-%COMP%]{ font-family: Inter; } .b[_ngcontent-%COMP%]{ color: blue; }"
+    );
+    assert_eq!(
+        ng_shim(".font-\\[\\\"Inter\\\"\\]{ font-family: Inter; } .b{ color: blue; }"),
+        ".font-\\__ph-0__[_ngcontent-%COMP%]{ font-family: Inter; } .b[_ngcontent-%COMP%]{ color: blue; }"
+    );
+}
+
+#[test]
+fn test_escaped_brace_and_at_outside_string() {
+    // `\{`, `\}` and `\@` open or close no block and start no at-rule.
+    assert_eq!(
+        ng_shim(".a\\{b{ color: red; } .c{ color: blue; }"),
+        ".a\\{b[_ngcontent-%COMP%]{ color: red; } .c[_ngcontent-%COMP%]{ color: blue; }"
+    );
+    assert_eq!(
+        ng_shim(".a\\}b{ color: red; } .c{ color: blue; }"),
+        ".a\\}b[_ngcontent-%COMP%]{ color: red; } .c[_ngcontent-%COMP%]{ color: blue; }"
+    );
+    assert_eq!(
+        ng_shim(".a{ content: \\}; } .c{ color: blue; }"),
+        ".a[_ngcontent-%COMP%]{ content: \\}; } .c[_ngcontent-%COMP%]{ color: blue; }"
+    );
+    assert_eq!(
+        ng_shim(".a\\@media{ color: red; } .c{ color: blue; }"),
+        ".a\\@media[_ngcontent-%COMP%]{ color: red; } .c[_ngcontent-%COMP%]{ color: blue; }"
+    );
+    // `_ruleRe` still reads no brace into a selector, so the text up to an
+    // escaped one is left unscoped, as Angular leaves it.
+    assert_eq!(ng_shim(".a\\{ .b{}"), ".a\\{ .b[_ngcontent-%COMP%]{}");
+    assert_eq!(ng_shim(".a\\} .b{}"), ".a\\} .b[_ngcontent-%COMP%]{}");
+    assert_eq!(
+        ng_shim(".a, .b\\{ .c, .d{ color: red; } .e{}"),
+        ".a, .b\\{ .c[_ngcontent-%COMP%], .d[_ngcontent-%COMP%]{ color: red; } .e[_ngcontent-%COMP%]{}"
+    );
+    assert_eq!(
+        ng_shim("@media x{.a\\{ .b{}} .c{}"),
+        "@media x{.a\\{ .b[_ngcontent-%COMP%]{}} .c[_ngcontent-%COMP%]{}"
+    );
+    // Angular leaves the host marker in that unscoped text too.
+    assert_eq!(
+        ng_shim(":host .a\\{b{}"),
+        "-shadowcsshost-no-combinator .a\\{b[_ngcontent-%COMP%]{}"
+    );
+}
+
+#[test]
+fn test_long_selector_list_scopes_in_linear_time() {
+    // Finding whether a comma or combinator sits inside parentheses used to
+    // scan to the end of the selector each time, quadratic in its length: this
+    // ~250k-char list took 3.6s in a debug build, and takes about 0.1s now.
+    let items: Vec<String> = (0..10_000).map(|i| format!(".a{i} > .b:not(.x, .y)")).collect();
+    let selector = items.join(", ");
+    assert!(selector.len() > 200_000);
+    let expected = (0..10_000)
+        .map(|i| format!(".a{i}[_ngcontent-%COMP%]    > .b[_ngcontent-%COMP%]:not(.x, .y)"))
+        .collect::<Vec<_>>()
+        .join(", ");
+
+    let start = std::time::Instant::now();
+    let scoped = ng_shim(&format!("{selector} {{}}"));
+    let elapsed = start.elapsed();
+    assert_eq!(scoped, format!("{expected} {{}}"));
+    assert!(elapsed.as_secs() < 2, "scoping a 250k-char selector list took {elapsed:?}");
+}
+
 #[test]
 fn test_host_context_inside_conditional_at_rules() {
     // `:host-context()` was only rewritten at the top level, leaving a

From 2fa008a71bc729436c5436865a2e72416cef16d2 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 22:22:27 +0800
Subject: [PATCH 51/54] fix(styles): end an at-rule header at an escaped brace

Angular's _ruleRe never reads a brace into an at-rule header, so in
'@media x\{ .a{} } .b{}' the header text stays plain and '.a' is scoped
as its own rule. The escape handling from the previous commit kept the
header open until the next real '{', which left '.a' unscoped.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 crates/oxc_angular_compiler/src/styles/encapsulation.rs | 8 ++++++++
 crates/oxc_angular_compiler/tests/shadow_css_test.rs    | 7 +++++++
 2 files changed, 15 insertions(+)

diff --git a/crates/oxc_angular_compiler/src/styles/encapsulation.rs b/crates/oxc_angular_compiler/src/styles/encapsulation.rs
index 6d344178a..618e6cb7f 100644
--- a/crates/oxc_angular_compiler/src/styles/encapsulation.rs
+++ b/crates/oxc_angular_compiler/src/styles/encapsulation.rs
@@ -1350,6 +1350,14 @@ fn scope_selectors(css: &str, content_attr: &str, host_attr: &str, css_nesting:
             let sink = sink!();
             sink.push(c);
             sink.extend(next_c);
+            // An escaped brace also ends an at-rule header: `_ruleRe` reads no
+            // brace into one, so `@media x\{` stays plain text and the next
+            // rule is scoped on its own.
+            if in_at_rule_header && matches!(next_c, Some('{' | '}')) {
+                in_at_rule_header = false;
+                at_rule_header.clear();
+                continue;
+            }
             // A selector still ends there: `_ruleRe` reads no `{` or `}` into
             // one, so the text up to an escaped brace is left unscoped
             // (`.a\{ .b {}` only scopes ` .b`).
diff --git a/crates/oxc_angular_compiler/tests/shadow_css_test.rs b/crates/oxc_angular_compiler/tests/shadow_css_test.rs
index f77a7e494..f3827cc68 100644
--- a/crates/oxc_angular_compiler/tests/shadow_css_test.rs
+++ b/crates/oxc_angular_compiler/tests/shadow_css_test.rs
@@ -1487,6 +1487,13 @@ fn test_escaped_brace_and_at_outside_string() {
         ng_shim("@media x{.a\\{ .b{}} .c{}"),
         "@media x{.a\\{ .b[_ngcontent-%COMP%]{}} .c[_ngcontent-%COMP%]{}"
     );
+    // An escaped brace ends an at-rule header the same way, so the next rule
+    // is scoped on its own.
+    assert_eq!(
+        ng_shim("@media x\\{ .a{} } .b{}"),
+        "@media x\\{ .a[_ngcontent-%COMP%]{} } .b[_ngcontent-%COMP%]{}"
+    );
+    assert_eq!(ng_shim("@media x\\{ .a{}"), "@media x\\{ .a[_ngcontent-%COMP%]{}");
     // Angular leaves the host marker in that unscoped text too.
     assert_eq!(
         ng_shim(":host .a\\{b{}"),

From 2cc17951bbebf3849f43d0d7aaa8d6fad67b8a85 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Wed, 21 Oct 2026 23:26:30 +0800
Subject: [PATCH 52/54] test(vite): use forward-slash module ids in the
 fast-path tests

The helpers passed raw join() paths as the transform id and the
@ng/component id, while hotUpdate normalized ctx.file. On Windows the
keys then differed (C:\ vs C:/), the .ts edit was taken for a plain
module and full-reloaded, and the update module came back empty. Vite
always hands the plugin forward-slash ids, so the helpers now do too.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 napi/angular-compiler/test/plugin-fast-paths.test.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/napi/angular-compiler/test/plugin-fast-paths.test.ts b/napi/angular-compiler/test/plugin-fast-paths.test.ts
index f6cf0b19b..444f4e8d4 100644
--- a/napi/angular-compiler/test/plugin-fast-paths.test.ts
+++ b/napi/angular-compiler/test/plugin-fast-paths.test.ts
@@ -134,7 +134,8 @@ async function transform(plugin: Plugin, source: string, path: string) {
       addWatchFile() {},
     } as any,
     source,
-    path,
+    // Vite hands the plugin forward-slash module ids, also on Windows.
+    normalizePath(path),
   )) as { code: string } | undefined
   return { code: result?.code ?? '', errors, warnings }
 }
@@ -153,7 +154,9 @@ function hotUpdate(plugin: Plugin, file: string, server: any) {
 async function requestUpdateModule(server: any, componentId: string): Promise<string> {
   const middleware = (server.middlewares.use as ReturnType<typeof vi.fn>).mock.calls[0]?.[0]
   expect(middleware, 'expected the @ng/component middleware').toBeDefined()
-  const req = { url: `/@ng/component?c=${encodeURIComponent(componentId)}&t=${Date.now()}` }
+  const req = {
+    url: `/@ng/component?c=${encodeURIComponent(normalizePath(componentId))}&t=${Date.now()}`,
+  }
   return new Promise<string>((resolve) => {
     middleware(
       req,

From 92f6b19ac3fa0850b168394c3c40d8ccd6769efe Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Thu, 22 Oct 2026 00:01:11 +0800
Subject: [PATCH 53/54] perf(elision): keep only export maps when analyzing
 files

analyze_file kept every analyzed file's AST and consts until the analyzer
was dropped, so a wide export * barrel held all of them in memory. Keep
only the export map and parse lazily for files that are evaluated or whose
selector is read.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/component/cross_file_elision.rs       | 72 +++++++++++--------
 1 file changed, 43 insertions(+), 29 deletions(-)

diff --git a/crates/oxc_angular_compiler/src/component/cross_file_elision.rs b/crates/oxc_angular_compiler/src/component/cross_file_elision.rs
index 1c1cfee0b..e4ae4d95f 100644
--- a/crates/oxc_angular_compiler/src/component/cross_file_elision.rs
+++ b/crates/oxc_angular_compiler/src/component/cross_file_elision.rs
@@ -79,8 +79,7 @@ struct Inner {
     /// Files currently being analyzed (for circular import detection)
     analyzing: RefCell<FxHashSet<String>>,
     /// Files parsed for `eval_export` and `class_selector`, so each is
-    /// parsed once: `analyze_file` keeps its parse when `values_enabled`, and
-    /// other files are parsed on first use.
+    /// parsed once, on first use. `analyze_file` doesn't keep its parse.
     parsed: RefCell<FxHashMap<String, Rc<ParsedFile>>>,
     /// Memoized per-export value evaluations: `(file, local_name)` -> value.
     /// `None` means evaluated-but-opaque.
@@ -95,9 +94,6 @@ struct Inner {
     evaluating_values: RefCell<FxHashSet<(String, String)>>,
     /// Files read to resolve exported values, so build tools can watch them.
     value_dependencies: RefCell<FxHashSet<String>>,
-    /// Whether exported-value resolution (`resolve_imported_values`) is on.
-    /// When false, `analyze_file` doesn't keep the files it parses.
-    values_enabled: bool,
     /// Handle to this state, for the resolvers of the files in `parsed`
     /// (`parse_file` only sees `&self`).
     this: Weak<Inner>,
@@ -249,9 +245,9 @@ impl CrossFileAnalyzer {
     ///
     /// * `base_dir` - The base directory for module resolution
     /// * `tsconfig_path` - Optional path to tsconfig.json for path aliases
-    /// * `values_enabled` - Enable exported-value resolution (the
+    /// * `_values_enabled` - Unused: files are parsed on demand either way. Was: enable exported-value resolution (the
     ///   `resolve_imported_values` transform option)
-    pub fn new(_base_dir: &Path, tsconfig_path: Option<&Path>, values_enabled: bool) -> Self {
+    pub fn new(_base_dir: &Path, tsconfig_path: Option<&Path>, _values_enabled: bool) -> Self {
         let options = ResolveOptions {
             extensions: vec![".ts".into(), ".tsx".into(), ".js".into(), ".jsx".into()],
             tsconfig: tsconfig_path.map(|p| {
@@ -273,7 +269,6 @@ impl CrossFileAnalyzer {
                 selector_memo: RefCell::new(FxHashMap::default()),
                 evaluating_values: RefCell::new(FxHashSet::default()),
                 value_dependencies: RefCell::new(FxHashSet::default()),
-                values_enabled,
                 this: this.clone(),
             }),
         }
@@ -737,10 +732,8 @@ impl Inner {
         })
     }
 
-    /// `file_path` parsed, from [`Self::parsed`], or read and parsed now when
-    /// `analyze_file` didn't keep it (`values_enabled` off) so behavior
-    /// doesn't depend on which path discovered it first. `None` when the
-    /// file can't be read.
+    /// `file_path` parsed, from [`Self::parsed`], or read and parsed now.
+    /// `None` when the file can't be read.
     fn parsed_file(&self, file_path: &str) -> Option<Rc<ParsedFile>> {
         if let Some(file) = self.parsed.borrow().get(file_path) {
             return Some(Rc::clone(file));
@@ -1036,19 +1029,15 @@ impl Inner {
             }
         };
 
-        // With values on, keep the parsed file for `eval_export` and
-        // `class_selector`, so the file is parsed once per analyzer.
+        // Keep only the export map: the full parse (AST and consts) is built
+        // lazily by `parsed_file` for the few files that are evaluated or
+        // whose selector is read, so a wide `export *` barrel doesn't hold
+        // every analyzed file's AST until the analyzer is dropped.
         let mut exports = FxHashMap::default();
-        if self.values_enabled {
-            let file = Rc::new(self.parse_file(file_path, &source));
-            file.with(|_, program, _| self.analyze_program(program, &mut exports));
-            self.parsed.borrow_mut().insert(file_path.to_string(), file);
-        } else {
-            let allocator = Allocator::default();
-            let source_type = SourceType::from_path(file_path).unwrap_or_default();
-            let parser_ret = Parser::new(&allocator, &source, source_type).parse();
-            self.analyze_program(&parser_ret.program, &mut exports);
-        }
+        let allocator = Allocator::default();
+        let source_type = SourceType::from_path(file_path).unwrap_or_default();
+        let parser_ret = Parser::new(&allocator, &source, source_type).parse();
+        self.analyze_program(&parser_ret.program, &mut exports);
 
         self.cache.borrow_mut().insert(file_path.to_string(), exports);
         self.analyzing.borrow_mut().remove(file_path);
@@ -1972,8 +1961,8 @@ export { doSomething } from './utils';
 
     #[test]
     fn test_value_elision_only_analyzer_resolves_on_demand() {
-        // `resolve_export_value` works without `values_enabled`: `parsed` is
-        // empty and the file is read again for evaluation.
+        // `resolve_export_value` works without `values_enabled`: files are
+        // parsed on demand.
         let dir = TempDir::new().unwrap();
         create_test_file(dir.path(), "other.ts", "export const V = 'v';");
         let main_file = dir.path().join("main.ts");
@@ -2054,7 +2043,7 @@ export { doSomething } from './utils';
 
     #[test]
     fn test_standalone_directive_selector_is_memoized() {
-        // The selector is read from the file `analyze_file` parsed and
+        // The selector is read from the file parsed on first use and
         // memoized, not re-read from disk on every lookup, until the caches
         // are cleared. The file is still reported as a dependency each time.
         let dir = TempDir::new().unwrap();
@@ -2079,8 +2068,8 @@ export { doSomething } from './utils';
 
     #[test]
     fn test_value_file_parsed_once() {
-        // `analyze_file`'s parse serves every later evaluation and selector
-        // lookup in the file: an edit made after it isn't seen.
+        // The first evaluation's parse serves every later one in the file: an
+        // edit made after it isn't seen.
         let dir = TempDir::new().unwrap();
         let meta =
             create_test_file(dir.path(), "meta.ts", "export const A = 'a';\nexport const B = 'b';");
@@ -2099,6 +2088,31 @@ export { doSomething } from './utils';
         assert_eq!(analyzer.inner.parsed.borrow().len(), 1);
     }
 
+    #[test]
+    fn test_value_analysis_does_not_keep_asts_of_barrel_files() {
+        // Analyzing a wide `export *` barrel keeps only export maps; just the
+        // file whose value is evaluated is parsed and kept.
+        let dir = TempDir::new().unwrap();
+        let mut barrel = String::new();
+        for i in 0..5 {
+            create_test_file(
+                dir.path(),
+                &format!("f{i}.ts"),
+                &format!("export const V{i} = 'v{i}';"),
+            );
+            barrel.push_str(&format!("export * from './f{i}';\n"));
+        }
+        create_test_file(dir.path(), "barrel.ts", &barrel);
+        let main_file = dir.path().join("main.ts");
+        let analyzer = CrossFileAnalyzer::new(dir.path(), None, true);
+
+        assert!(matches!(
+            resolve(&analyzer, &main_file, "./barrel", "V4"),
+            Some(StaticValue::String(s)) if s == "v4"
+        ));
+        assert_eq!(analyzer.inner.parsed.borrow().len(), 1);
+    }
+
     #[test]
     fn test_value_class_and_function_exports_are_opaque() {
         // Top-level classes and functions resolve to `None` without being

From 2caa38327e226801822b7f7574948eab42487a47 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Thu, 22 Oct 2026 00:27:44 +0800
Subject: [PATCH 54/54] fix(styles): keep the body of an unterminated at-rule

An unscoped at-rule (@keyframes, @property, @font-face, @page) lost its
whole body when the stylesheet ended before the closing brace. Flush the
collected body at end of input, as ngtsc does.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/styles/encapsulation.rs               | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/crates/oxc_angular_compiler/src/styles/encapsulation.rs b/crates/oxc_angular_compiler/src/styles/encapsulation.rs
index 618e6cb7f..f46f32031 100644
--- a/crates/oxc_angular_compiler/src/styles/encapsulation.rs
+++ b/crates/oxc_angular_compiler/src/styles/encapsulation.rs
@@ -1515,6 +1515,15 @@ fn scope_selectors(css: &str, content_attr: &str, host_attr: &str, css_nesting:
         }
     }
 
+    // An unterminated unscoped at-rule keeps its body as written (like ngtsc)
+    if in_unscoped_at_rule {
+        if strip_unscoped_body {
+            result.push_str(&strip_scoping_selectors(&unscoped_content));
+        } else {
+            result.push_str(&unscoped_content);
+        }
+    }
+
     // Handle any remaining content
     if !current_selector.trim().is_empty() {
         result.push_str(&current_selector);
@@ -3079,4 +3088,14 @@ mod tests {
             result
         );
     }
+
+    #[test]
+    fn test_unterminated_unscoped_at_rule_keeps_body() {
+        let result = shim_css_text("@keyframes k{from{a:b}to{a:c}", "c1", "");
+        assert!(result.contains("from{a:b}to{a:c}"), "Got: {}", result);
+        let result = shim_css_text("@property --x{syntax:\"*\"", "c1", "");
+        assert!(result.contains("syntax:\"*\""), "Got: {}", result);
+        let result = shim_css_text("@font-face{font-family:x;src:url(a.woff)", "c1", "");
+        assert!(result.contains("font-family:x"), "Got: {}", result);
+    }
 }