Deep Dive into the Angular Compiler

on YouTube ↗32m

" summary

Angular's compiler reveals concrete internals: five phases (program, analysis, resolve, type-check, emit) and that partial evaluation interpreter almost runs TypeScript to evaluate decorator expressions (even RouterModule.forRoot), marking unreachable parts as dynamic. It builds NgModule compilation/export scopes to ID components for tree-shaking, constructs type-check blocks (TS-only code plus template offsets) to report precise template errors, and adds a ngFor static template hook so loop variables get correctly type-checked at build time.

AI-written summary · about

" chapters (17)

1. 0:00Intro
2. 2:19Templates + Code
3. 4:01Example
4. 6:49Program Creation
5. 7:39Analysis
6. 10:19A Compilation Model
7. 12:38Features of the Compiler
8. 13:54Compilation Scope
9. 15:18Template Scoping
10. 16:34Partial Evaluation
11. 18:49Dynamic Expressions
12. 22:07Approach
13. 23:09Type Check Blocks
14. 25:01Template Error Mapping
15. 25:45HTML Templates
16. 27:48Type Constructors
17. 28:23Template Context Type

" related talks

• 21mMad Science with the Angular CompilerMinko Gechev · AngularUP 2017
• 18mMad science with the Angular CompilerMinko Gechev · ng-conf 2017
• 01h 55mDiY Angular CompilerUri Shaked · ng-conf 2017
• 01h 13mInternals of the Angular CLIMinko Gechev · HolyJS Piter 2020
• 24mInternals of the Angular CLIMinko Gechev · Developer Summit 2020
• 30mHacking the Angular compiler with your own syntaxDominic Elm, Kwinten Pisman · revo.js 2019
• 27mDemystifying Ahead-Of-Time compilation in AngularWassim Chegham · NG-NL 2017
• 17mAngular BatScannerDouglas Duteil · ng-europe 2016