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')| Export | Description |
|---|---|
@oxc-angular/vite |
Vite plugin |
@oxc-angular/vite/api |
Low level API |
// 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
): stringinterface 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 stylesfalse: never minify component styles"auto"orundefined: 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.
The Vite plugin consists of three sub-plugins:
- Transform Plugin - Transforms Angular TypeScript files
- HMR Plugin - Handles hot module replacement for templates and styles
- Styles Plugin - Processes and encapsulates component styles
| Route | Description |
|---|---|
/@ng/component/:id |
Serves compiled template updates |
/@ng/styles/:id |
Serves style updates |
- 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:
| Platform | Architecture |
|---|---|
| macOS | Apple Silicon (aarch64) |
| macOS | Intel (x86_64) |
| Windows | x86_64 |
| Windows | aarch64 |
| Linux | x86_64 (glibc) |
| Linux | x86_64 (musl) |
| Linux | aarch64 (glibc) |
| Linux | aarch64 (musl) |
- 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| Feature | Description |
|---|---|
allocator |
Use MiMalloc for better performance |
cross_file_elision |
Enable cross-file import analysis |
# Build with all features
pnpm run build-dev --features allocator,cross_file_elision --releasenapi/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