Agent skill · software engineering · angular
reference-compiler-cli
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`
Why this skill is useful
Provides detailed architectural insights and mental models for working with the Angular Compiler CLI, which the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-04. 100,955 stars on the source repository.
What this skill does
Angular Compiler CLI (ngtsc) Architecture Overview The packages/compiler-cli package contains the Angular Compiler (Ivy), often referred to as ngtsc. It is a wrapper around the TypeScript compiler (tsc) that extends it with Angular-specific capabilities. The core goal of ngtsc is to compile Angular decorators (like @Component, @Directive, @Pipe) into static properties on the class (Ivy instructions, e.g., static ɵcmp = ...). It also performs template type checking and ahead-of-time (AOT) compilation. Mental Model The compiler is designed as a lazy, incremental, and partial compilation pipeline. 1. Wrapper Pattern: NgtscProgram wraps the standard ts.Program. It intercepts calls to act as a drop-in replacement for standard tooling. 2. Traits System: Every class with an Angular decorator is considered a "Trait". The compiler manages the state of these traits through a state machine: Pending: Detected but not processed. Analyzed: Metadata extracted, template parsed (but dependencies not yet linked). Resolved: Dependencies (directives/pipes in template) resolved, import cycles handled. Skipped: Not an Angular class. 3. Lazy Analysis: Analysis only happens when necessary (e.g., when diagnostics are requested or emit is prepared). 4. Output AST: The compiler generates an intermediate "Output AST" (o.Expression) for the generated code, which is then translated into TypeScript AST nodes during the emit phase. Key Subsystems 1. Core Orchestration (ngtsc/core) NgtscProgram: The public API implementing api.Program. It manages the ts.Program and the NgCompiler. NgCompiler: The brain of the compiler. It orchestrates the compilation phases (Analysis, Resolution, Type Checking, Emit). It holds the TraitCompiler. 2. Trait Compilation (ngtsc/transform) TraitCompiler: Manages the lifecycle of "Traits". It iterates over source files, identifies decorated classes, and delegates to the appropriate DecoratorHandler. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills angular/reference-compiler-cli