reference-compiler-cli

Explain the architecture of the Angular Compiler CLI and its core subsystems.

Updated Apr 6, 2025

Search Tags:#architecture #angular #type-checking #decorators #ivy #ngtsc #compiler-cli

Ready to run

npx skills add https://github.com/Monosen/golink --skill reference-compiler-cli

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: reference-compiler-cli
Source: https://github.com/Monosen/golink/tree/main/.agents/skills/reference-compiler-cli
Command: npx skills add https://github.com/Monosen/golink --skill reference-compiler-cli

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Explains the mental model and architecture of the code under packages/compiler-cli. You MUST use this skill any time you plan to work with code in packages/compiler-cli

Core Features & Use Cases

Lazy, incremental, and partial compilation pipeline that coordinates analysis, resolution, and emit phases.
Wrapper pattern and key subsystems like NgtscProgram, NgCompiler, TraitCompiler, and DecoratorHandlers for components, directives, pipes, and NgModules.
Template type checking and generation of type check blocks to validate templates.
Metadata and scope resolution using MetadataReader and ScopeRegistry to wire dependencies across modules.
End-to-end emit pipeline that transforms code with Ivy instructions and removes legacy decorators.

Quick Start

Summarize the architecture of the Angular Compiler CLI (ngtsc) and its core subsystems.

Frequently Asked Questions about reference-compiler-cli

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How does the Angular compiler-cli architecture handle decorator processing?▼

The Angular compiler-cli architecture handles decorator processing through DecoratorHandlers within the TraitCompiler, analyzing components, directives, pipes, and NgModules across lazy analysis and trait lifecycle phases to manage metadata and emit transformations.

What is the pipeline for template type checking in ngtsc?▼

Template type checking in ngtsc operates through a pipeline that generates type check blocks to validate Angular templates. This mechanism is integrated into the NgCompiler to ensure template expressions are statically verified against TypeScript types during the compilation process.

How do I analyze code in packages/compiler-cli to understand its compilation phases?▼

To analyze code in packages/compiler-cli, you must understand its lazy, incremental, and partial compilation pipeline. This involves tracing how NgtscProgram coordinates analysis, resolution, and emit phases through the TraitCompiler and NgCompiler subsystems.

Does the Angular compiler-cli support incremental and partial compilation?▼

Yes, the Angular compiler-cli supports incremental and partial compilation through its coordinated pipeline. It utilizes lazy analysis and the trait lifecycle to efficiently process changes without recompiling the entire program, enabling faster builds via NgtscProgram.

What is the best way to understand scope resolution and metadata wiring in ngtsc?▼

The best way to understand scope resolution in ngtsc is examining the MetadataReader and ScopeRegistry. These subsystems wire dependencies across NgModules, ensuring that directives and pipes are correctly mapped and available during template type checking.

Why does ngtsc wrap the TypeScript compiler for Angular emit transformation?▼

Ngtsc wraps the TypeScript compiler to intercept and transform code during the emit phase. This architecture allows it to generate Ivy instructions and remove legacy decorators while preserving TypeScript's native type checking and emit capabilities.