Hacking the Angular compiler with your own syntax

on YouTube ↗30m

" summary

Demonstrates replacing Angular template syntax with emoji and adding reactive template primitives by hooking into the build: a custom HTML loader rewrites external templates, a TypeScript transformer (using tsquery on the AST) rewrites inline template strings, and ngx-build-plus is used to flip the compiler option directTemplateLoading and inject a new compiler instance. The demo shows emoji → verbose directives emitted at build time (AOT/JIT) and a published GitHub library for observable-event decorators that works in practice.

AI-written summary · about

" chapters (6)

1. 0:00Introduction and motivation
2. 3:57Angular compiler overview
3. 14:10Custom HTML loader setup
4. 18:44Emoji syntax demo
5. 25:27Practical use case with reactivity
6. 29:21Key takeaways and conclusion

" related talks

• 26mMaster Tooling by Hacking the Angular CompilerDominic Elm · NG-BE 2019
• 01h 55mDiY Angular CompilerUri Shaked · ng-conf 2017
• 32mDeep Dive into the Angular CompilerAlex Rickabaugh · AngularConnect 2019
• 18mMad science with the Angular CompilerMinko Gechev · ng-conf 2017
• 21mMad Science with the Angular CompilerMinko Gechev · AngularUP 2017
• 21mWhere & How You Write Your CodeMinko Gechev, Will Klein, Joran Quinten, Michael Hablich, Nikhil Kumaran S, Akash Hamirwasia · JSNation 2023
• 31mHidden gems in Angular: hybrid rendering, new routing features, and beyondVojtech Mašek · Voxxed Days Zurich 2026
• 28mAccelerating AngularSimona Cotin · JSDayIE 2023