A high-performance, Rust-based Angular compiler for Node.js. Provides both a standalone transformer and a Vite plugin for Angular applications.

• Fast compilation - Rust-based implementation via NAPI-RS
• Vite integration - Full-featured Vite plugin with HMR support
• Template compilation - Angular template to JavaScript transformation
• Style encapsulation - ViewEncapsulation.Emulated support
• Cross-file elision - Type-only import detection and removal
• Drop-in replacement - Compatible API with @angular/compiler-cli

npm install @oxc-angular/vite
# or
pnpm add @oxc-angular/vite

// vite.config.ts
import { defineConfig } from 'vite'
import { angular } from '@oxc-angular/vite/vite-plugin'

export default defineConfig({
  plugins: [
    angular({
      tsconfig: './tsconfig.json',
      sourceMap: true,
    }),
  ],
})

import {
  transformAngularFile,
  compileTemplateSync,
  extractComponentUrlsSync,
} from '@oxc-angular/vite'

// Transform an entire Angular file
const result = await transformAngularFile(sourceCode, 'app.component.ts', {
  sourcemap: true,
})

// Compile a template only
const template = compileTemplateSync('<div>{{ title }}</div>', 'AppComponent', 'app.component.ts')

// Asynchronous
compileTemplate(
  template: string,
  componentName: string,
  filePath: string,
  options?: TemplateCompileOptions
): Promise<TemplateCompileResult>

transformAngularFile(
  source: string,
  filename: string,
  options?: TransformOptions,
  resolvedResources?: ResolvedResources
): Promise<TransformResult>

// Extract templateUrl and styleUrls
extractComponentUrlsSync(
  source: string,
  filename: string
): ComponentUrls[]

// Apply ViewEncapsulation.Emulated
encapsulateStyle(
  css: string,
  componentId: string
): string

// Generate HMR update module
generateHmrModule(
  componentId: string,
  templateJs: string,
  styles: string[],
  declarationsJs: string,
  constsJs: string
): string

The Vite plugin's handleHotUpdate hook dispatches every file change into one of these branches, mirroring Angular CLI's official behavior (@angular/build esbuild dev server):

Set liveReload: false to disable both HMR and reloads — the plugin returns from handleHotUpdate without sending any event.

"No reload" means no reload is requested. Vite full-reloads any changed .html whose module list is empty or holds no js module, so the plugin registers each component template in the module graph (addWatchFile) and returns it as its own HMR boundary. Without that, Vite puts a full-reload on the socket on top of every template edit. Its client usually drops that payload because the path does not match location.pathname — but in middlewareMode the path is *, which always reloads (#443).

index.html is not a component template, so it still triggers a full reload.

interface TransformOptions {
  // Output
  sourcemap?: boolean

  // Compilation mode
  jit?: boolean
  hmr?: boolean
  advancedOptimizations?: boolean
  useDomOnlyMode?: boolean

  // i18n
  i18nUseExternalIds?: boolean

  // Final component style output
  minifyComponentStyles?: boolean

  // Component metadata
  selector?: string
  standalone?: boolean
  encapsulation?: 'Emulated' | 'None' | 'ShadowDom'
  changeDetection?: 'Default' | 'OnPush'
  preserveWhitespaces?: boolean

  // Cross-file elision
  crossFileElision?: boolean
  baseDir?: string
  tsconfigPath?: string
}

interface AngularPluginOptions {
  // Project configuration
  tsconfig?: string
  workspaceRoot?: string

  // File filtering
  include?: string | string[]
  exclude?: string | string[]

  // Features
  sourcemap?: boolean
  hmr?: boolean
  jit?: boolean
  advancedOptimizations?: boolean
  useDomOnlyMode?: boolean
  zoneless?: boolean
  liveReload?: boolean

  // Style processing
  inlineStylesExtension?: string
  minifyComponentStyles?: boolean | 'auto'

  // File replacements
  fileReplacements?: Array<{
    replace: string
    with: string
  }>
}

minifyComponentStyles resolves like this:

• true: always minify component styles
• false: never minify component styles
• "auto" or undefined: follow the resolved Vite minification settings

For "auto", the plugin uses build.cssMinify when it is set, otherwise it falls back to build.minify. In dev, "auto" defaults to false.

For publishing an Angular library (the ng-packagr-style workflow, e.g. with Rolldown/tsdown), set compilationMode: 'partial'. This emits partial declarations (ɵɵngDeclareComponent, …) in the JavaScript output, and the plugin also augments the emitted .d.ts with Angular's Ivy type declarations (static ɵfac, static ɵcmp, …) so downstream consumers get full template type-checking against your library.

// vite.config.ts — Angular library build
import { angular } from '@oxc-angular/vite'
import dts from 'rolldown-plugin-dts' // or vite-plugin-dts / tsdown

export default defineConfig({
  plugins: [angular({ compilationMode: 'partial' }), dts()],
  build: { lib: { entry: 'src/public-api.ts', formats: ['es'] } },
})

The plugin does not generate the base .d.ts itself — a declaration generator (rolldown-plugin-dts, vite-plugin-dts, tsdown, or tsc) must produce them. The Angular members are then spliced into those files during generateBundle. The injected members reference i0 (the @angular/core namespace), and the plugin adds import * as i0 from "@angular/core"; to any .d.ts it augments.

The Vite plugin consists of these sub-plugins:

1. Transform Plugin - Transforms Angular TypeScript files
2. HMR Plugin - Handles hot module replacement for templates and styles
3. Styles Plugin - Processes and encapsulates component styles
4. Dts Plugin - Augments library .d.ts with Ivy type declarations (partial mode)

• Control flow (@if, @for, @switch, @defer)
• Property/attribute/class/style bindings
• Event bindings and two-way binding
• Template references and variables
• Content projection (ng-content)
• Structural directives

• Standalone components
• Host bindings and listeners
• Input/Output decorators
• Query decorators (ViewChild, ContentChild, etc.)
• View encapsulation modes
• Change detection strategies

• Inline styles
• External styleUrls
• ViewEncapsulation.Emulated
• CSS attribute selector scoping

• External message IDs
• File-based naming

Pre-built binaries for:

• Node.js 20.19.0+ or 22.12.0+
• Vite 6.0.0+ (for Vite plugin)

# Build native bindings
pnpm run build:native

# Build TypeScript
pnpm run build:ts

# Run tests
pnpm test

# Run E2E tests
pnpm run test:e2e

# Build with all features
pnpm run build-dev --features allocator,cross_file_elision --release

napi/angular-compiler/
├── src/
│   └── lib.rs              # NAPI bindings (Rust)
├── core/                    # TypeScript utilities
│   ├── index.ts            # Main exports
│   ├── program.ts          # OxcNgtscProgram
│   ├── compiler.ts         # OxcAngularCompiler
│   └── config.ts           # Configuration reader
├── vite-plugin/            # Vite plugin
│   ├── index.ts            # Main plugin
│   ├── angular-jit-plugin.ts
│   └── angular-build-optimizer-plugin.ts
├── e2e/
│   └── compare/            # Comparison test runner
└── package.json

• oxc - The Oxidation Compiler
• Angular - Angular framework
• @angular/compiler - Official Angular compiler