Master Tooling by Hacking the Angular Compiler

on YouTube ↗26m

" summary

Shows how to implement a custom template syntax by actually changing the build: use a custom HTML loader plus a webpack plugin (via ngx-build-plus) to set directTemplateLoading=false and replace the Angular compiler plugin, and add a TypeScript transformer to rewrite inline templates. Demonstration partially reimplements ngx-template-streams and successfully handles external and inline templates in JIT builds; AOT/production needs additional transforms and compatibility work, so it works but with known limits.

AI-written summary · about

" chapters (10)

1. 0:00Introduction
2. 0:34Story Time
3. 2:07Abstract Syntax Trees
4. 2:42Tools
5. 3:38About Dominic
6. 5:10NGX Templates Streams
7. 12:45Custom Template Syntax
8. 17:51Inline Templates
9. 18:19Transformer
10. 24:51Key takeaways

" related talks

• 30mHacking the Angular compiler with your own syntaxDominic Elm, Kwinten Pisman · revo.js 2019
• 18mMad science with the Angular CompilerMinko Gechev · ng-conf 2017
• 20mThe Little Tool That Dreams BigHans Larsen · ng-conf 2017
• 27mDemystifying Ahead-Of-Time compilation in AngularWassim Chegham · NG-NL 2017
• 01h 55mDiY Angular CompilerUri Shaked · ng-conf 2017
• 32mDeep Dive into the Angular CompilerAlex Rickabaugh · AngularConnect 2019
• 21mMad Science with the Angular CompilerMinko Gechev · AngularUP 2017
• 19mWeb Components with Angular Elements: Beyond the BasicsManfred Steyer · ng-conf 2019