AOT and JIT in Angular: When to Use Each Compilation Strategy

Ahead-of-Time (AOT) compilation transforms Angular templates and decorators into optimized JavaScript during the build process, while Just-in-Time (JIT) compilation parses templates in the browser at runtime, making AOT the default for production due to smaller bundles and faster initial rendering.

When building applications with the angular/angular framework, choosing between AOT and JIT in Angular determines when your templates get compiled, how large your bundles become, and when errors surface. Since Angular 9, the CLI defaults to Ahead-of-Time compilation, but understanding both strategies helps optimize development workflows and production deployments.

What Is AOT Compilation in Angular?

Ahead-of-Time (AOT) compilation converts your Angular HTML templates and TypeScript decorators into executable JavaScript during the build phase. According to the documentation in adev/src/content/tools/cli/aot-compiler.md, the compiler extracts metadata from decorators like @Component and @NgModule, then generates factory functions that the Angular runtime executes directly.

Because the compilation happens before the browser ever loads the application, the final bundle contains no Angular compiler code. This eliminates the @angular/compiler package from your production assets, significantly reducing bundle size and removing a potential attack vector for template injection attacks.

What Is JIT Compilation in Angular?

Just-in-Time (JIT) compilation defers template compilation until the application runs in the browser. The core implementation resides in packages/compiler/src/jit_compiler_facade.ts, specifically within the CompilerFacadeImpl class. When Angular boots in JIT mode, this facade parses component templates and generates factories on the fly using the compileComponent method.

JIT mode relies on the global ngJitMode flag defined in packages/core/src/util/ng_jit_mode.ts. This flag determines whether the framework instantiates the JIT compiler or uses pre-compiled AOT factories. Because the compiler ships with your bundle, JIT applications are larger and incur a performance penalty during the initial render while templates compile in the browser.

Key Differences Between AOT and JIT in Angular

Understanding the technical distinctions helps you select the appropriate strategy for each environment.

Compilation Timing and Output

• AOT: Executes during ng build or ng serve (production mode). The Angular compiler generates component factories and inlined templates as plain JavaScript. The output contains zero compiler code.
• JIT: Executes at runtime in the browser. The CompilerFacadeImpl in packages/compiler/src/jit_compiler_facade.ts processes templates after the bundle loads, requiring the full @angular/compiler package in the client.

Performance Characteristics

• AOT: Delivers faster initial rendering because the browser executes pre-compiled factories immediately. Tree-shaking is more effective, and the absence of the compiler reduces download size.
• JIT: Incurs slower first paint due to on-the-fly compilation. Subsequent renders perform similarly to AOT, but the larger bundle size impacts network latency.

Error Detection and Security

• AOT: Catches template errors (misspelled bindings, type mismatches) at build time. Eliminating client-side template evaluation reduces XSS attack vectors.
• JIT: Surfaces template errors only at runtime, potentially after deployment. Browser-based template compilation exposes a larger attack surface.

When to Use AOT vs JIT in Angular

Production Builds and CI Pipelines

Use AOT for all production deployments and continuous integration workflows. The build-time error detection prevents broken templates from reaching users, and the smaller bundle sizes improve Core Web Vitals. Since Angular 9, the CLI enables AOT by default in angular.json:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "aot": true,
            "optimization": true
          }
        }
      }
    }
  }
}

Development and Rapid Prototyping

Use JIT during active development when you need the fastest possible rebuild times. Running ng serve with JIT reduces the compilation overhead between file saves and browser refreshes. Disable AOT in your development configuration:

ng serve --configuration development --aot=false

Dynamic Component Creation

Use JIT when your application must compile components from raw template strings at runtime. The CompilerFacadeImpl API in packages/compiler/src/jit_compiler_facade.ts enables dynamic component generation:

import { CompilerFacadeImpl } from '@angular/compiler';

const facade = new CompilerFacadeImpl();
const componentFactory = facade.compileComponent(
  /* core env */ { /* … */ },
  /* source map */ 'ng:///DynamicComponent.js',
  {
    name: 'DynamicComponent',
    selector: 'dynamic-comp',
    template: '<div>Generated at {{timestamp}}</div>',
    // … additional R3ComponentMetadataFacade properties
  },
);

This pattern requires the JIT compiler and the ngJitMode flag enabled in packages/core/src/util/ng_jit_mode.ts.

Summary

• AOT compilation transforms Angular templates and decorators into JavaScript during the build process, producing smaller bundles and faster initial renders while catching errors before deployment.
• JIT compilation parses templates in the browser using the CompilerFacadeImpl class from packages/compiler/src/jit_compiler_facade.ts, enabling rapid development cycles and dynamic component creation.
• Since Angular 9, AOT is the default for production builds configured in angular.json, while JIT remains useful for development and runtime template generation.
• Choose AOT for production performance and security, and JIT for development speed or when using the compileComponent API with the ngJitMode flag.

Frequently Asked Questions

What is the main difference between AOT and JIT in Angular?

The primary distinction is timing: AOT compiles templates and component metadata during the build step before the browser loads the application, while JIT defers compilation until the application runs in the browser. This difference affects bundle size, initial render speed, and when template errors are detected.

Is AOT or JIT better for production Angular applications?

AOT is superior for production because it eliminates the Angular compiler from the bundle, reduces download size, enables faster initial rendering, and catches template errors at build time. Since Angular 9, the CLI defaults to AOT for production builds configured in angular.json, making it the standard for deployed applications.

How do I switch from JIT to AOT compilation in Angular?

To enable AOT, set "aot": true in the options section of your build architect in angular.json, or run ng build --configuration production which defaults to AOT. To use JIT for development, run ng serve --aot=false or configure the development target in angular.json with "aot": false.

Can I use JIT compilation for dynamic components in Angular?

Yes, JIT compilation is required when creating components dynamically from template strings at runtime using the CompilerFacadeImpl API from packages/compiler/src/jit_compiler_facade.ts. This approach requires the ngJitMode flag to be enabled and the @angular/compiler package to be included in your bundle, which is why it is typically reserved for specific dynamic use cases rather than standard application development.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}