Analog
On this page

Angular Compilation

The AnalogJS Vite Plugin (@analogjs/vite-plugin-angular) compiles your Angular components, directives, and pipes to Ivy definitions during the Vite build. It provides two compilation paths:

  • Default compilation: Angular's own compiler (ngtsc), with opt-in compile-time type checking.
  • Fast compile: an in-tree single-pass compiler that produces the same Ivy output much faster.

Both emit identical Ivy code and identical runtime behavior, because both ultimately call the same @angular/compiler lowering APIs.

Default compilation

This is what you get out of the box with no configuration required:

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

export default defineConfig({
  plugins: [angular()],
});

The default path runs Angular's compiler (ngtsc) directly. By default it reports only syntax errors, because disableTypeChecking defaults to true. Set it to false to also report TypeScript and Angular template diagnostics, including strictTemplates errors, from the Vite build:

angular({
  disableTypeChecking: false,
});

Library builds (build.lib) also emit declaration files.

Editing multiple files

During development, the default compilation path groups component and resource changes received within a 100 ms quiet window into one compilation. Reload and HMR notifications are coalesced after compilation, so saving several files at once avoids compiling separately for every file. Changes received during a compilation are queued for the next batch. This behavior requires no configuration.

Fast compile

Fast compile swaps Angular's compiler for an in-tree, single-pass transform. Instead of constructing a full ts.Program, it extracts each file's decorator metadata and generates Ivy definitions directly through @angular/compiler's lowering APIs. It produces equivalent Ivy output and reduces cold-build and hot-rebuild times.

Enabling

Opt in via the angular() plugin:

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

export default defineConfig({
  plugins: [
    angular({
      fastCompile: true,
    }),
  ],
});

What it supports

Capability Fast compile
AOT compilation (ɵɵdefineComponent) ✅
JIT compilation ✅
Inline template: / styles: ✅ Inline SCSS / Sass / Less is preprocessed before compilation
External templateUrl / styleUrl ✅ Resolved and preprocessed via Vite
Hot Module Replacement (HMR) ✅
Style encapsulation ✅
Cross-file selector resolution ✅ Via an in-tree component registry
Library / partial builds (fastCompileMode) ✅ Emits partial declarations for library publishing
Compile-time template type checking ❌ Use the Angular Language Service in your editor
host keys/values from imported constants ❌ Use a string literal, a same-file const, or @HostBinding

Boundary blocks

Fast compilation supports @boundary and @error blocks when the installed @angular/compiler supports them (verified with 22.2.0-next.7). Deferred components inside error blocks are loaded lazily, while components also used outside a @defer body remain eager dependencies. Older compilers, including Angular 22.1, do not support this syntax.

Building a library

For a library build, set fastCompileMode: 'partial' so the compiler emits partial ɵɵngDeclare* declarations instead of final Ivy definitions:

angular({
  fastCompile: true,
  fastCompileMode: 'partial',
});

See Building an Angular library for the full library workflow.

Type checking

Fast compile does not type-check your templates or TypeScript, and the default path only does so with disableTypeChecking: false. To catch those errors without slowing the build, run Angular's compiler as a separate verification step against your app's tsconfig. Pass --noEmit so it only reports errors without writing output:

ngc -p tsconfig.app.json --noEmit

Add it as a script and run it alongside your build:

// package.json
{
  "scripts": {
    "typecheck": "ngc -p tsconfig.app.json --noEmit"
  }
}

This keeps fast builds during development while still failing on template and type errors before you ship, and the Angular Language Service surfaces the same errors live in your editor.

Nx workspaces

In an Nx workspace, angular-typechecker provides an Nx executor that runs the complete Angular type-check: TypeScript checks, template type-checking, and the extended NG8xxx diagnostics. It emits nothing and runs separately from your build and tests. Nx caches the result per project.

Add it with nx add, which installs the package and runs its angular-typechecker:init generator to seed a cacheable angular-typechecker:typecheck entry in nx.json under targetDefaults:

nx add angular-typechecker

Then wire a typecheck target into the project you want to check:

nx g angular-typechecker:configuration my-app

Run it:

nx typecheck my-app

The generator writes this target. Add includeDeps: true to also report diagnostics from dependencies:

// apps/my-app/project.json
{
  "targets": {
    "typecheck": {
      "executor": "angular-typechecker:typecheck",
      "options": {
        "tsConfig": "apps/my-app/tsconfig.json",
        "includeDeps": true,
      },
    },
  },
}

Angular Compilation API (experimental)

angularCompilationPlugin() compiles through the Angular Compilation API from @angular/build, the same API the Angular CLI uses. It requires Angular v20.1 or later with a matching @angular/build package installed. Use it in place of angular():

// vite.config.ts
import { defineConfig } from 'vite';
import { angularCompilationPlugin } from '@analogjs/vite-plugin-angular';

export default defineConfig({
  plugins: [angularCompilationPlugin()],
});

It accepts tsconfig, workspaceRoot, inlineStylesExtension, jit, liveReload, disableTypeChecking, fileReplacements, include, and debug, which behave as they do on angular(). Fast compile options are not supported.

Compatibility

Angular versions

Fast compile is validated against Angular 20, 21, latest, and next conformance fixtures on PRs that touch the compiler, and against the 20.0.0 and 21.0.0 compiler APIs on beta-targeted PRs that touch the compiler.

For overall Angular/Analog/Vite version support, see Version Compatibility.

Default vs fast compile

Default Fast compile
Ivy output Full Identical
Cold build / hot rebuild Standard Significantly faster
Compile-time template type checking Opt-in (disableTypeChecking: false) No (use the Angular Language Service)
Library / partial builds Yes Yes (fastCompileMode: 'partial')

Trade-offs