reference-compiler-cli

Explain the Angular Compiler CLI architecture and its TypeScript compiler integration.

Updated Nov 24, 2021
One-click install
npx skills add https://github.com/ishiyan/Mbng --skill reference-compiler-cli-ishiyan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: reference-compiler-cli
Source: https://github.com/ishiyan/Mbng/tree/main/.opencode/skills/angular-reference-compiler-cli
Command: npx skills add https://github.com/ishiyan/Mbng --skill reference-compiler-cli-ishiyan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill explains the mental model and architecture of the Angular Compiler CLI codebase to help you work confidently on the compiler features. It emphasizes the ngtsc flow, key subsystems, and the reasoning required to modify compiler behavior.

Core Features & Use Cases

  • Mental model overview: High-level description of the ngtsc program, compiler, and trait lifecycle.
  • Subsystem interactions: How NgtscProgram, NgCompiler, TraitCompiler, DecoratorHandlers, and Type Checking coordinate during analysis and emit.
  • Incremental analysis & lazy evaluation: How analysis is performed on demand with caching and selective re-analysis.

Quick Start

Read the ngtsc architecture overview and the role of core subsystems before editing compiler-cli code.

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 integrate with the TypeScript compiler?

The Angular compiler CLI integrates with TypeScript by wrapping the TypeScript program to support Angular decorators and template processing during standard type checking. It coordinates compilation phases through core subsystems like NgtscProgram and NgCompiler without replacing the TypeScript compiler.

What is the role of TraitCompiler and DecoratorHandlers in ngtsc?

TraitCompiler and DecoratorHandlers in ngtsc identify Angular decorators on classes and apply specific compilation logic to them. They work together during the analysis phase to transform decorated classes into Angular-compatible code.

How do I reason about incremental analysis and compilation phases when modifying compiler-cli code?

Incremental analysis in the Angular compiler CLI is performed on demand with caching and selective re-analysis. You reason about compilation phases by tracking dependencies across subsystems, ensuring that only modified files trigger re-evaluation during emit.

Can I use ngtsc architecture knowledge to safely modify Angular template type checking behavior?

Yes, understanding the ngtsc architecture allows you to safely modify Angular template type checking. The compiler CLI coordinates type checking through dedicated subsystems that interact with the TypeScript compiler to validate template expressions.

What is the best way to understand the ngtsc program and compiler lifecycle for Angular?

The best way to understand the ngtsc program and compiler lifecycle is to review the high-level architecture overview of its core subsystems. This mental model explains how analysis and emit phases coordinate safely.

Why does the Angular compiler perform lazy evaluation during the analysis phase?

The Angular compiler performs lazy evaluation during the analysis phase to optimize compilation performance. By using caching and on-demand processing, it avoids redundant work and ensures selective re-analysis only when dependencies change.