The Road to Angular Today Milestones, Mistakes & Momentum

Angular began as a huge success — powering enterprise apps, introducing concepts like dependency injection and two-way binding to the frontend world. But as the web evolved, many developers moved on. Complexity, the long Ivy rewrite, and rising competition led some to abandon Angular or reconsider its place in their stack.
This talk takes an honest look at Angular’s journey: the high points, the hard lessons, and the turning points. We’ll explore what made Angular appealing in the first place, why developers grew frustrated, and how the framework is now doubling down on simplification and modernization — with Signals, server-side rendering, Incremental Hydration, and a more intuitive developer experience.
Whether you’re already using Angular or deciding if it’s still worth investing in, this session gives you the full picture — not just the features, but the context and trade-offs that brought us here. Because you can’t make a good decision about the future of Angular unless you understand its past.

Transcript

1. The Road to Angular Today Milestones, Mistakes & Momentum Game of Codes, 2. November 2025 RainerHahnekamp
2. About Me... https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff • Rainer Hahnekamp ANGULARarchitects.io NgRx Core Team • Developer / Trainer / Speaker @RainerHahnekamp Workshops NgRx • Testing
3. RainerHahnekamp Agenda Part II: The Code Part I: The Road
4. About Me... https://www.youtube.com/ @RainerHahnekamp Ng-News Sheriff Rainer Hahnekamp ANGULARarchitects.io Developer / Trainer / Speaker @RainerHahnekamp NgRx Testronaut
5. RainerHahnekamp Part 1: Angular over Time
6. RainerHahnekamp 1. Party Time (2010 - 2014) • AngularJS • Hyped • Not used by any Google Department • "Side-Project" • Lots of Community-Work
7. RainerHahnekamp 2. Getting Serious (2014 - 2016) • Angular 2 • Rewrite of the Framework • Rewrite of Applications • Used internally by Google Ads ◦ Funding ◦ Static Typing required • Deadline too Early
8. RainerHahnekamp 3. The Stalling Years (2016 - 2022) • Ivy • Technical Debts of Angular 2 • 2nd Rewrite of Framework • Backward-Compatibility • No New Features for 3,5 Years • Community started drifting away
9. RainerHahnekamp 4. Catching Up (since 2022) • New Generation of Angular Team • Firework of New Features • Focus on Lightweight • Introduction of Signals
10. RainerHahnekamp Full Commitment (since 2024) • Wiz open-sources into Angular • Angular becomes Google-critical Infrastructure • Long-term stability & Funding • "If it's good enough for Google…"
11. RainerHahnekamp Main Learnings • Full Commitment of Google • Angular Team as "Internal Support Team" for Google • Simplification ◦ Signals over RxJS • No "Angular Way" of doing Things ◦ Opening up to the Ecosystem ◦ For example: Selectorless, Standalone, Vite • Communication with the Community
12. RainerHahnekamp 1. Partytime 2. Getting Serious 3. The Stalling Years 4. Catching Up 5. Full Commitment Angular's Story
13. https://x.com/synalx/status/1882879962547659078
14. RainerHahnekamp What can we expect for the future?
15. RainerHahnekamp AI Support • API-Designed for LLM & Humans • Web Codegen Scorer • Angular MCP Server
16. Editor Preview Both @Component class MyCheckbox { constructor( private isChecked = model(false) ) {} toggle() { this.isChecked.update(c => !c); } template = ng` <input checked={this.isChecked} on:click={this.toggle()} >`; } You may have seen some of our early brainstorming <script> const isChecked = model(false); function toggle() { isChecked.update(c => !c); } </script> <input checked={isChecked} on:click={toggle()} > function MyCheckbox({ isChecked = model(false), }) { function toggle() { isChecked.update(c => !c); } return ng` <input checked={isChecked} on:click={toggle()} > `; } Ng-Poland 2024
17. Editor Preview Both @Component class MyCheckbox { constructor( private isChecked = model(false) ) {} toggle() { this.isChecked.update(c => !c); } template = ng` <input checked={this.isChecked} on:click={this.toggle()} >`; } You may have seen some of our early brainstorming <script> const isChecked = model(false); function toggle() { isChecked.update(c => !c); } </script> <input checked={isChecked} on:click={toggle()} > function MyCheckbox({ isChecked = model(false), }) { function toggle() { isChecked.update(c => !c); } return ng` <input checked={isChecked} on:click={toggle()} > `; } Ng-Poland 2024
18. RainerHahnekamp Part 2: In-Depth
19. RainerHahnekamp Main Areas of Innovation SSR & Hydration Reactivity with Signals
20. RainerHahnekamp a b c d e State Events (Observables, Callbacks) "Event-based" Change Detection / Synchronization (zone.js)
21. RainerHahnekamp a b c d e State (Signals) Events (Observables, Callbacks) "State-based" Change Detection / Synchronization (Signals)
22. RainerHahnekamp Component Tree DOM Submit Cancel zone.js Handled DOM Events Asynchronous Tasks Change Detection with zone.js
23. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection without zone.js (zoneless) async Pipe Signal Change Handled DOM Event Immutable Property Binding manually run markForCheck()
24. RainerHahnekamp Component Tree DOM Submit Cancel Future Change Detection Signal Components Signal Change
25. Show Time
26. RainerHahnekamp Initial Loading Performance
27. RainerHahnekamp Performance Options • Faster Execution • Smaller Bundle Sizes • Hydration Client Server Submit Cancel Only static Classic Hydration Interactive Browser Application Step 1: Server-Side Rendering Browser Application Application Step 2: Hydration
28. RainerHahnekamp Incremental Hydration
29. RainerHahnekamp Performance Options • Faster Execution • Smaller Bundle Sizes • Hydration Client Server Submit Cancel Only static Incremental Hydration: Trigger-based Hydration Interactive Browser Application Step 1: Server-Side Rendering Browser Application Application Step 2: Hydration
30. RainerHahnekamp Performance Options • Faster Execution • Smaller Bundle Sizes • Hydration Client Server Submit Cancel Only static Interactive Browser Application Step 1: Server-Side Rendering Browser Application Application Step 2: Hydration Incremental Hydration: Trigger-based Hydration
31. RainerHahnekamp Performance Options • Faster Execution • Smaller Bundle Sizes • Hydration Client Server Submit Cancel Only static Interactive Browser Application Step 1: Server-Side Rendering Browser Application Application Step 2: Hydration Incremental Hydration: Trigger-based Hydration
32. RainerHahnekamp Performance Options • Faster Execution • Smaller Bundle Sizes • Hydration Client Server Submit Cancel Only static Interactive Browser Application Step 1: Server-Side Rendering Browser Application Application Step 2: Hydration Incremental Hydration: Trigger-based Hydration
33. RainerHahnekamp Performance Options • Faster Execution • Smaller Bundle Sizes • Hydration Client Server Submit Cancel Only static Interactive Browser Application Step 1: Server-Side Rendering Browser Application Application Step 2: Hydration Incremental Hydration: Trigger-based Hydration
34. RainerHahnekamp Performance Options • Faster Execution • Smaller Bundle Sizes • Hydration Client Server Submit Cancel Only static Interactive Browser Application Step 1: Server-Side Rendering Browser Application Application Step 2: Hydration Incremental Hydration: Trigger-based Hydration
35. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> <app-markdown [markdown]="markdownValue()" /> </div>
36. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> <app-markdown [markdown]="markdownValue()" /> </div> TimerComponent
37. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> <app-markdown [markdown]="markdownValue()" /> </div> TimerComponent MarkdownComponent
38. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> <app-markdown [markdown]="markdownValue()" /> </div> TimerComponent MarkdownComponent marked
39. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> <app-markdown [markdown]="markdownValue()" /> </div> TimerComponent MarkdownComponent marked
40. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> <app-markdown [markdown]="markdownValue()" /> </div> TimerComponent MarkdownComponent marked Main Bundle
41. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> @defer { <app-markdown [markdown]="markdownValue()" /> } </div> TimerComponent MarkdownComponent marked Main Bundle
42. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> @defer { <app-markdown [markdown]="markdownValue()" /> } </div> TimerComponent MarkdownComponent marked Main Bundle
43. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> @defer { <app-markdown [markdown]="markdownValue()" /> } </div> TimerComponent MarkdownComponent marked Main Bundle
44. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> @defer { <app-markdown [markdown]="markdownValue()" /> } </div> TimerComponent MarkdownComponent marked Main Bundle Chunk
45. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> @defer { <app-markdown [markdown]="markdownValue()" /> } </div> TimerComponent MarkdownComponent marked Main Bundle Chunk
46. RainerHahnekamp Triggers for incremental Hydration • viewport ◦ when @defer comes into viewport • interaction ◦ click, keydown • hover • idle ◦ via requestIdleCallback() • immediate • timer • when ◦ Custom Function • never ◦ For Non-Dynamic Elements
47. RainerHahnekamp Angular's Crown Jewels 💎 Schematics Backwards Compatibility
48. RainerHahnekamp Хвала вам пуно (Hvala vam puno)