What is Angular Ivy and how does it improve Angular?

Answer

Ivy is Angular's next-generation compilation and rendering engine, introduced experimentally in Angular 8 and made the default in Angular 9. It replaced the previous View Engine (VE). Core Ivy principles: (1) Locality: Ivy compiles each component independently (no global knowledge needed) — a component's compiled output is self-sufficient. View Engine needed global analysis. This enables incremental builds and faster compilation; (2) Tree-shakable: Ivy's generated code only references what it uses. With View Engine, even unused Angular features were bundled. Ivy + tree-shaking produces much smaller bundles (Hello World app went from ~36KB to ~4KB gzipped); (3) Instruction-based rendering: Ivy generates sequences of instructions (like a mini-bytecode) instead of factory functions. Easier to optimize; (4) Improved debugging: component instances are directly attached to DOM nodes — visible in DevTools. ng.getComponent(element) in console; (5) Better testing: components can be loaded in TestBed more independently without bootstrapping large module trees — faster tests; (6) Simpler metadata: component metadata is processed at compile time, reducing runtime overhead; (7) Dynamic imports for lazy loading: Ivy enables lazy loading of individual standalone components (not just modules); (8) New template type checking: stricter type checking in templates — catches more errors at compile time. Angular 12 removed View Engine entirely. Angular 14+ standalone components are fully Ivy-native.