Five ways to compile Angular for Cypress Component Testing

Angular deprecated its webpack builders in v22, yet webpack is still the only way Cypress compiles Angular component tests out of the box. Cypress also runs on Vite, though, and Vite has several Angular toolchains, including a new one I wanted to try: OXC’s experimental Angular compiler, written in Rust.

So I ran the same 41 component tests through every toolchain I could plug into Cypress: webpack, Analog, @angular/build, OXC, and SWC with the @jscutlery/swc-angular preset I maintain. With JIT and AOT where they support both, plus Analog’s new fastCompile mode, that makes eight setups on Angular 22, compared on run time, memory, and whether the tests still pass.

The five toolchains

Same specs, same components. Only the toolchain that compiles them changes:

Toolchain	Package	Dev server	Template compiler	Modes
webpack	@ngtools/webpackangular/angular-clipackages/ngtools/webpackmainCLI tool for AngularTypeScript27K11.8K, through Cypress’s built-in handler	webpack	Angular’s	JIT
Analog	@analogjs/vite-plugin-angularanalogjs/analogpackages/vite-plugin-angularbetaThe fullstack meta-framework for Angular. Powered by Vite and NitroTypeScript3.2K334	Vite	Angular’s	JIT, AOT
@angular/build	@angular/buildangular/angular-clipackages/angular/buildmainCLI tool for AngularTypeScript27K11.8K, through an Analog option	Vite	Angular’s	JIT, AOT
OXC	@oxc-angular/vitevoidzero-dev/oxc-angular-compilerExperimental Angular Compiler based OxcRust24224	Vite	OXC’s, in Rust	AOT
SWC	unplugin-swcunplugin/unplugin-swcSWC plugin for Vite and RollupTypeScript27419 with the @jscutlery/swc-angularjscutlery/devkitpackages/swc-angularmainCutleries to help you cook better apps.TypeScript26818 preset	Vite	Angular’s	JIT

Analog also has a fastCompile option, a single-pass compiler that skips the TypeScript program. I ran it in AOT as an eighth setup, Analog fast in the charts.

That’s only two template compilers: Angular’s, driven five different ways, and OXC’s. webpack is the baseline: it’s what Cypress ships for Angular, and Cypress forces JIT for it (aot: false).

How each toolchain works

Each toolchain spreads the work over three places: the dev server at startup, the dev server for each file the browser requests, and the browser itself. Where the templates get compiled depends on the mode. In AOT, the dev server compiles them. In JIT, the code keeps its decorators, and Angular compiles each template in the browser the first time its component mounts.

Two kinds of steps cost time, and they grow with the project. A stacked step covers the whole project before the first test runs: Analog and @angular/build pay it at startup, webpack when the first spec is requested. Analog fast swaps the TypeScript program for a lighter scan, but it still reads the whole project. A template compile in the browser runs inside the tests, once per component: every JIT setup pays it.

OXC is the only toolchain with neither. SWC skips the stacked step but compiles in the browser. The next sections measure both costs.

How I measured

Angular

22.2.0TypeScript 6.0

Cypress

15.17.0Electron 37, headless

Vite

7.3.6same config for every Vite setup

Machine

Ryzen 9 9950X3D16 cores, 64 GB

The suite has 12 app specs, testing components like the ones in a real app (a form, a dialog, a list loaded over HTTP, the router), and 3 stress specs that render hundreds of generated components at once to load the compiler.

The charts switch between three scenarios: App + stress (all 15 specs, 41 tests, with 300 generated components), and the stress specs alone with 300 or 1000 generated components (Stress, 300 and Stress, 1000). Each result is the median of 3 runs, from a cold cache, one Cypress at a time.

Known issues

Some setups have known issues. I kept them out of the timings, so every setup runs the same tests:

What each one means:

• overrideComponent (Analog AOT, @angular/build AOT): a test can’t swap a component’s template or providers. Analog only keeps the metadata TestBed needs when it detects a test run, and it doesn’t recognise Cypress as one. Running Cypress with NODE_ENV=test fixes it: both setups then pass.
• overrideComponent (Analog fast): overriding providers or the template works, but the recompiled component loses its inputs. fastCompile drops the input metadata TestBed needs, even with NODE_ENV=test (analogjs/analog#2666analogjs/analog#2666vite-plugin-angular: fastCompile emits setClassMetadata without propDecorators, so TestBed overrides lose inputsClosededbznOct 20, 2026).
• OXC #585voidzero-dev/oxc-angular-compiler#585$safeNavigationMigration(...) in an event listener reads template locals from the wrong contextClosededbznOct 19, 2026: an event handler that reads a @for item or an @if … as alias through $safeNavigationMigration(…) receives null instead of the value.
• OXC #586voidzero-dev/oxc-angular-compiler#586Linker always uses the latest security schema: img|src/video|src sanitizers dropped for Angular < 22.2.2ClosededbznOct 19, 2026: on Angular before 22.2.2, an image inside a library component never loads when its URL is a SafeUrl.

Some limits don’t show up in a test:

• webpack needs a pnpm override on Angular 22, because Cypress rejects webpack-dev-server 6 (#34259cypress-io/cypress#34259Support webpack-dev-server v6 in @cypress/webpack-dev-servertype: featurenpm: @cypress/webpack-dev-serverCTOpenAtofStrykerJul 9, 20261). Before Cypress 15.20.1 it also needed a shim for Babel 8 (#34461cypress-io/cypress#34461Component testing fails to compile on Angular 22.1ClosedleosvelperezAug 3, 20268). Angular deprecated its webpack builders in v22.
• @angular/build is only reachable through an experimental Analog option.
• OXC is still at 0.0.41 and officially requires Vite 8. It ignores useDefineForClassFields: false (#73voidzero-dev/oxc-angular-compiler#73Support useDefineForClassFields: false (Class Field Lowering)Opentomer953Mar 5, 202611), doesn’t type-check, and loads @defer blocks eagerly (#313voidzero-dev/oxc-angular-compiler#313fix(defer): emit lazy dependencies for components used only inside @defer blocksbugrustOpenbrandonrobertsMay 28, 2026).
• SWC needs the reflect-metadata package for dependency injection.

Total run time

From spawning Cypress to its exit. Switch to Stress, 1000 to see the compilers pull apart:

OXC is the fastest in every scenario, and its lead grows with the project: with 1000 components, it takes 60% less time than webpack.

Setups change rank as the project grows. SWC keeps up with OXC on App + stress, then falls to third with 1000 components, behind Analog fast. Analog is no faster in AOT than in JIT on App + stress, then pulls ahead with 1000 components. The next two sections explain why.

Time to the first test

The startup covers Cypress boot, the dev server, dependency pre-bundling and the first spec’s compile:

OXC and SWC transform files one at a time, on request, so their startup grows the least: 0.9 s and 1.3 s more at 1000 components. Analog builds a TypeScript program of the whole project before serving the first file: the bigger the project, the longer the wait, up to 2.7 s more. Analog fast skips the program but still scans the whole project, and grows almost as much (2.4 s).

Split into phases, the gap is the dev server start:

OXC and SWC have their dev server ready in under 2 s. The Analog-based setups spend that time analyzing the project, and webpack loses it later, compiling the first spec on demand.

JIT slows down the tests

JIT setups compile each template in the browser, the first time a component mounts. That compile runs inside the tests:

With 1000 components, the JIT test bodies take almost 150% longer than the AOT ones. AOT setups did that work in the dev server, before any test ran.

That’s why SWC doesn’t win at scale: it gives its fast startup back in the browser. With 1000 components, it still beats the regular Analog and @angular/build AOT setups. OXC is the only setup with both a fast startup and AOT output.

Memory use

Peak PSS of the whole process tree: the CLI, Electron and the dev server. It’s sampled every second, so on runs this short the peaks are approximate. PSS splits the pages Electron’s processes share, where RSS counts them once per process.

webpack needs the most memory, up to 3.7 GB at the peak. Among the Vite setups, Analog fast is the lightest, probably because it holds no TypeScript program in memory, followed by SWC. @angular/build is the heaviest. On CI, that decides how many Cypress processes fit on one machine.

Conclusion

Any Vite setup beats webpack. On App + stress they take 13 to 22% less time, and the gap grows with the project. webpack is also the heaviest, and Angular deprecated its webpack builders. The only reason to keep it is that it’s what Cypress ships.

OXC is the fastest in every scenario: with 1000 components, it takes 60% less time than webpack. It’s also the youngest: version 0.0.41, officially Vite 8 only, no type-checking, and it fails two of the three known issues. Try it on a branch, and keep another setup ready to switch back to.

Analog AOT is the safe choice. It runs Angular’s own compiler and passes every known issue once Cypress runs with NODE_ENV=test. Its startup grows with the project, but with 1000 components it still takes 39% less time than webpack.

Analog fast is the one to watch. With 1000 components it comes second, taking 45% less time than webpack, and it’s the lightest setup of all. It keeps Angular’s own compiler, so OXC’s bugs don’t apply. But it’s new and opt-in, it still scans the whole project at startup, and overrideComponent loses inputs (analogjs/analog#2666analogjs/analog#2666vite-plugin-angular: fastCompile emits setClassMetadata without propDecorators, so TestBed overrides lose inputsClosededbznOct 20, 2026).

SWC passes every known issue without any flag. It pays for JIT in the browser as the project grows, but with 1000 components it still takes 42% less time than webpack, third behind OXC and Analog fast.

Every run, spec and memory sample is in the sandbox repositoryedbzn/cct-compiler-sandboxAngular 22 Cypress component testing: webpack vs Analog vs SWC vs OXC compiler benchmarkTypeScript00, with the full resultsedbzn/cct-compiler-sandboxresults/RESULTS.mdmasterAngular 22 Cypress component testing: webpack vs Analog vs SWC vs OXC compiler benchmarkTypeScript00. If your specs are bigger, run the bench on your own components and tell me what you get.