vite-plugin-ngp

Vite plugin · Angular 22 · ngp

Angular on Vite, one module at a time

vite-plugin-ngp compiles each Angular file when Vite asks for it, with ngp, the Rust-and-TypeScript preprocessor the Angular team merged in October 2026. Vite owns the module graph. Nothing compiles the whole program before the first module is served.

Get startedHow it works

Measured

What per-module compilation buys you

1.9 s

from starting the dev server to the first page of a 5,000-component app, where ng serve takes 28.5 s

~120 ms

from saving a template to the update in the page, at any app size, where ng serve takes 1.8 s at 5,000 components

Identical

output, byte for byte, to a full ngp build of the same app

In place

template edits swap into the running component, so its state survives

The first two figures are medians measured end to end in headless Chrome on an M2 Max, against ng serve with the same Angular. How they were measured.

Setup

One plugin in your Vite config

Point the plugin at your ngp build, keep your usual index.html and main.ts, and run vite. The same transform runs in production builds and in server rendering: this site is an Angular app compiled by the plugin and prerendered with Angular SSR.

Read the setup guide 
// vite.config.ts
import {defineConfig} from 'vite';
import {ngp} from 'vite-plugin-ngp';

export default defineConfig({
  plugins: [ngp({toolchain: '../vite-angular/toolchain/out'})],
});

How it works

Three steps per request

  1. Vite asks for a module

    The browser requests a .ts file, and Vite hands its code to the plugin.

  2. ngp compiles that one file

    ngp's Rust analyzer answers for that file alone, and Angular's own template compiler generates its code.

  3. Vite does the rest

    The plugin returns TypeScript and a source map. Vite strips the types, and other plugins see ordinary modules.