Angular Framework Architecture

Angular Framework Architecture An architecture diagram generated by Archify. Developer · Templates + TypeScript · Architecture component Developer Templates + TypeScript @angular/compiler-cli · ngc / AOT build · Build-time (compile) · ngtsc @angular/compiler-cli ngc / AOT build ngtsc @angular/compiler · Template parser + codegen · Build-time (compile) @angular/compiler Template parser + codegen @angular/core · Runtime engine · Runtime core (@angular/core) · Ivy @angular/core Runtime engine Ivy Dependency Injection · Hierarchical injectors · Runtime core (@angular/core) Dependency Injection Hierarchical injectors Signals · Reactive primitives · Runtime core (@angular/core) · signal() Signals Reactive primitives signal() Renderer · DOM instructions · Runtime core (@angular/core) Renderer DOM instructions @angular/router · Navigation + lazy loading · Architecture component @angular/router Navigation + lazy loading @angular/forms · Reactive & template-driven · Architecture component @angular/forms Reactive & template-driven HttpClient · RxJS-based HTTP · Architecture component HttpClient RxJS-based HTTP Platform Browser · DOM bootstrapping · Platform targets Platform Browser DOM bootstrapping Platform Server · SSR / hydration · Platform targets Platform Server SSR / hydration source files orchestrates generated instructions resolves providers change detection DOM ops lazy components directives DOM API SSR render interceptors Build-time (compile) Runtime core (@angular/core) Platform targets Legend Frontend Backend Cloud External

Build Pipeline

  • • ngtsc AOT compiles templates into tree-shakable Ivy instructions

Runtime Core

  • • Ivy executes component instructions with hierarchical DI
  • • Signals drive zoneless fine-grained change detection

Application Layer

  • • Router, Forms, and HttpClient are high-level consumer APIs

Platform Abstraction

  • • Browser and Server platforms abstract DOM vs SSR rendering