@angular/compiler

The template parser, expression parser, and Ivy code generator. Pure compile-time; the runtime never imports it.

Purpose

Reads HTML templates and Angular-flavored expressions and produces:

1. A typed AST for templates (the parser output).
2. An Ivy "view IR" for the compiler-cli to translate into ECMAScript.
3. The output expression tree (think mini-ASTs for emitted code) used by @angular/compiler-cli.

It is the source-to-IR compiler. The IR-to-source step lives in @angular/compiler-cli.

Directory layout

packages/compiler/
├── src/
│   ├── aot/                # Ahead-of-time compile orchestration
│   ├── expression_parser/  # Angular template expression parser
│   ├── ml_parser/          # HTML/template tokenizer
│   ├── render3/            # Ivy IR + view compiler
│   │   ├── view/           # Template AST → IR → output
│   │   ├── r3_factory.ts   # Component factories
│   │   ├── r3_module_compiler.ts
│   │   └── r3_pipe_compiler.ts
│   ├── i18n/               # i18n parsing, message extraction
│   ├── shadow_css.ts       # ::ng-deep + emulated encapsulation
│   ├── output/             # Output AST (the "expression IR")
│   └── ...
├── test/
└── public_api.ts

Key abstractions

Type / function	File	What it is
parseTemplate	packages/compiler/src/render3/view/template.ts	Parses a template string into the high-level template AST.
R3TargetBinder	packages/compiler/src/render3/view/t2_binder.ts	Resolves directive/component matching for a template.
compileComponentFromMetadata	packages/compiler/src/render3/view/compiler.ts	Top-level "metadata → output IR" function for components.
compileDirectiveFromMetadata	same	Same for directives.
compileInjectable, compileNgModule, compilePipeFromMetadata	packages/compiler/src/render3/	Companions for the other decorator types.
Lexer / Parser	packages/compiler/src/expression_parser/	Angular's template-expression language parser.
HtmlParser	packages/compiler/src/ml_parser/html_parser.ts	Lossy HTML parser that tolerates Angular-specific syntax.
ShadowCss	packages/compiler/src/shadow_css.ts	Emulated view encapsulation transform.

How it processes a component

graph LR
  Source["Component class metadata<br/>(from ngtsc analysis)"] --> Parse["parseTemplate<br/>(ml_parser + expression_parser)"]
  Parse --> AST["High-level template AST"]
  AST --> Bind["R3TargetBinder<br/>(directive matching)"]
  Bind --> Build["TemplateDefinitionBuilder<br/>(view IR construction)"]
  Build --> IR["Render3 view IR"]
  IR --> Translate["compileComponentFromMetadata"]
  Translate --> Output["Output IR<br/>(o.Expression nodes)"]
  Output --> Emit["compiler-cli translator<br/>(IR → TS)"]

The output IR is intentionally TS-agnostic — @angular/compiler-cli knows how to lower it into TypeScript AST nodes that survive the rest of the tsc pipeline.

Block-syntax and control flow

The control-flow blocks (@if, @for, @switch, @let) are parsed in packages/compiler/src/render3/view/template.ts and lowered to dedicated instructions in the IR. Each block grew its own AST nodes (e.g., IfBlock, ForLoopBlock) and matching IR ops over the v17 → v18 timeframe.

Deferrable views (@defer) are similarly compiled here, with the runtime's defer machinery in @angular/core.

i18n

The compiler is responsible for extracting i18n messages, generating <message> IDs, and emitting metadata that @angular/localize can consume. Logic lives in packages/compiler/src/i18n/.

The legacy xliff / xlf2 / xmb / xtb formats are all supported; the canonical extraction format is XLIFF 2.0.

Integration points

• @angular/compiler-cli is the only consumer in the framework. The CLI passes parsed metadata in, gets output IR back, then writes the result to .js/.d.ts files.
• The runtime never imports @angular/compiler in production. JIT mode (rare today) does pull the compiler in, via platform-browser-dynamic, to compile templates at app startup.
• The Angular Language Service uses the same parser to power editor diagnostics and completions.

Entry points for modification

• A new template syntax form: extend the parser in packages/compiler/src/render3/view/template.ts, add new AST node types, lower them to existing or new IR ops, and add codegen in the matching translator.
• A new emit option: most compile-side flags route through R3ComponentMetadata and friends defined in packages/compiler/src/render3/view/api.ts.
• A new i18n format: add a parser/serializer pair under packages/compiler/src/i18n/serializers/.

When changing this package, expect to also touch:

• @angular/compiler-cli — to translate or wire up the new compiler output.
• @angular/core — to add or rename the runtime instruction matching the new IR.
• The goldens/public-api/ files for both compiler packages.