Angular Compiler Basics

Introduction

Angular ships an AOT (ahead-of-time) compiler. It turns your templates into highly-optimised JavaScript at build time, catching template errors before users do. Modern Angular also uses esbuild for ultra-fast builds and Vite for the dev server.

Understanding the topic

Visual: source → bundle

*.ts + *.html
     │
     ▼
TypeScript compiler  +  Angular AOT (template → TS)
     │
     ▼
ES modules
     │
     ▼
esbuild bundling + tree-shaking + minification
     │
     ▼
dist/   (hashed JS + CSS + HTML, ready for CDN)

Informative example

Strict template flags worth turning on:

// tsconfig.json (angularCompilerOptions)
{
  "angularCompilerOptions": {
    "strictTemplates": true,        // catch typos in templates
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true
  }
}

Real-world use

Strict template checking has saved teams from countless production bugs — a renamed property in TS automatically flags every template still using the old name. esbuild has cut cold-start build times from 30s to under 5s on big apps, transforming the inner-loop developer experience.

Best practices

• Turn on strictTemplates: true — your templates become as type-safe as your TS.
• Use the application builder (@angular-devkit/build-angular:application) on new projects.