Next Generation Angular

This keynote offers a fast-paced, structured journey through the evolving Angular ecosystem - from core reactivity to large-scale architecture.
We begin at the foundation with Signals: why they were introduced, how they simplify reactivity, and why we couldn’t just stay with Observables.
Building on that, we explore Signal-based data fetching using the new httpResource, and how this shift changes the way we structure services and handle side effects.
From there, we move into state management: do Signals already solve it, or is a dedicated library still needed? We’ll explore how these layers fit together and how solutions like the NgRx SignalStore fit into the picture.
Next, we zoom out to an architectural view, exploring modern module types and how to structure scalable applications using standalone APIs and domain boundaries.
Then we turn to Micro Frontends — where they shine, which challenges they pose, and how to choose between Native Federation, Module Federation, and Web Components.
Finally, we discuss Server-Side Rendering (SSR) and related techniques like SSG and Incremental Hydration, and how they can significantly improve initial loading performance — especially in complex frontend-backend integrations.

Transcript

1. Next Generation Angular 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 Team (Trusted Collaborator) • Developer / Trainer / Speaker @RainerHahnekamp Workshops NgRx • Testing • Spring • Quality
3. RainerHahnekamp Agenda 1. Signals a. Theory b. Coding i. Basics ii. Resources iii. SignalForms iv. Component Communication 2. State Management 3. Architecture a. Module Types b. Rule-based Architecture 4. Micro-Frontends 5. Initial Loading Performance a. @defer b. SSR & Incremental Hydration 6. Angular & AI
4. RainerHahnekamp Efficiency Easier, Simpler, Less Boilerplate
5. RainerHahnekamp "I didn't have time to write a short letter, so I wrote a long one instead." Mark Twain
6. RainerHahnekamp 1. Partytime 2. Getting Serious 3. The Stalling Years 4. Catching Up 5. Full Commitment Angular's Story
7. RainerHahnekamp Main Areas of Innovation SSR & Hydration Reactivity with Signals
8. RainerHahnekamp Overview Signals • Basic Functions ◦ signal(), computed(), effect(), afterRenderEffect() • Advanced Functions ◦ rx/htttp/resource(), linkedSignal() • Component Communication ◦ input(), output(), model() • Signal Forms ◦ form(), [control] • Upcoming… ◦ Mutations, Signalized Router, Promise-based HttpClient (?)
9. RainerHahnekamp a b c d e State Events (Observables, Callbacks) "Event-based" Change Detection / Synchronization (zone.js)
10. RainerHahnekamp a b c d e State (Signals) Events (Observables, Callbacks) "State-based" Change Detection / Synchronization (Signals)
11. RainerHahnekamp Component Tree DOM Submit Cancel zone.js Handled DOM Events Asynchronous Tasks Change Detection with zone.js
12. RainerHahnekamp RainerHahnekamp async Pipe Signal Change Handled DOM Event Further Triggers for Change Detection Angular >= 18 Immutable Property Binding manually run markForCheck()
13. 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()
14. RainerHahnekamp Component Tree DOM Submit Cancel Future Change Detection Signal Components Signal Change
15. Coding Time
16. …long-term, we do want to move to a point where we’re making RxJs optional for Angular. Jeremy Elbourn Angular Tech Lead Angular Q&A Session https://www.youtube.com/live/yN1xIs0IucQ
17. RainerHahnekamp "Angular should become easier." "Signals are easier than RxJS." "You will require both." 🫤
18. RainerHahnekamp When do we need RxJS?
19. RainerHahnekamp a b c d e State (Signals) Events (Observables, Callbacks)
20. RainerHahnekamp Signals • Represents State ◦ Value is always available ◦ Glitch-Free RxJS • Represents Events ◦ Time plays a central role ◦ Race Condition Management BehaviorSubject as intersection
21. RainerHahnekamp It is not RxJS vs. Signals. It is RxJS vs. event callbacks
22. RainerHahnekamp • You MUST use Signals for state • You CAN use RxJS for events
23. RainerHahnekamp Where RxJS Shines… Pipe Operators Managing Race Conditions
24. RainerHahnekamp Three Levels of RxJS Usage 1. No RxJS a. For very simple applications b. Self-written pipe operators (debounceTime) 2. Embedded RxJS a. Library, Functions manage subscriptions automatically b. Users just need to apply pipe operators c. SignalStore, ngxtension,... 3. All-In RxJS a. Event-Driver Apps b. Dashboards, Monitoring,...
25. RainerHahnekamp Three Levels of RxJS Usage 1. No RxJS a. For very simple applications b. Self-written pipe operators (debounceTime) 2. Embedded RxJS a. Library, Functions manage subscriptions automatically b. Users just need to apply pipe operators c. SignalStore, ngxtension,... 3. All-In RxJS a. Event-Driver Apps b. Dashboards, Monitoring,...
26. RainerHahnekamp 2. State Management
27. RainerHahnekamp You need to manage State, but do you need an Explicit Library?
28. RainerHahnekamp Benefits SignalStore Extensible Simple Standardized Utility Functions Always based on Angular's Signals
29. RainerHahnekamp A Comparison: State & Slices @Injectable({ providedIn: 'root' }) export class HolidaysStore { // State readonly #state = signal({ holidays: [] as Holiday[], favouriteIds: [] as number[], filter: { query: '', type: 0 }, }); // Slices holidays = computed(() => this.#state().holidays); favouriteIds = computed(() => this.#state().favouriteIds); filter = computed(() => this.#state().filter); } export const HolidayStore = signalStore( { providedIn: 'root' }, withState({ holidays: [] as Holiday[], favouriteIds: [] as number[], filter: { query: '', type: 0 }, }) );
30. RainerHahnekamp A Comparison: Computeds export class HolidaysStore { // Computed holidaysCount = computed(() => this.#state().holidays.length); } export const HolidayStore = signalStore( withComputed(({ holidays }) => ({ holidaysCount: () => holidays().length, })), );
31. RainerHahnekamp A Comparison: Methods export class HolidaysStore { // Methods readonly #httpClient = inject(HttpClient); async load() { const holidays = await lastValueFrom( this.#httpClient.get<Holiday[]>('/holiday'), ); this.#state.update((state) => ({ ...state, holidays })); } } export const HolidayStore = signalStore( withMethods((store, httpClient = inject(HttpClient)) => ({ async load() { const holidays = await lastValueFrom( httpClient.get<Holiday[]>('/holiday'), ); patchState(store, { holidays }); }, })) );
32. RainerHahnekamp 3. Architecture
33. RainerHahnekamp Different Types of Components Anarchy Container Component Presentational Component Presentational Component Anarchy Component Service
34. RainerHahnekamp Different Types of Components Anarchy Container Presentational Presentational Service
35. RainerHahnekamp The Need for Rules (and Modules) Feature Component UI Component Component Data Service Model Sheriff
36. RainerHahnekamp Module Types per Domain Feature Data UI Model Quiz Feature Data UI Model Booking Shared
37. RainerHahnekamp 4. Micro-Frontends
38. RainerHahnekamp Application Code Feature (Lazy Loaded) 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native Federation
39. RainerHahnekamp Application Code Feature (Lazy Loaded) Application 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Feature (Lazy Loaded) Application 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native Federation
40. RainerHahnekamp Application Code Feature (Lazy Loaded) Application 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Feature (Lazy Loaded) Application 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native Federation
41. RainerHahnekamp Application Code Feature (Lazy Loaded) Application 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Feature (Lazy Loaded) Application 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native Federation
42. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 1 (Remote 1) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Feature (Lazy Loaded) MF 2 (Remote 2) 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native Federation
43. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs
44. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs
45. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs JS JS JS JS
46. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs JS JS JS JS
47. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS https://host2 https://host3 https://host1
48. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS
49. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS JS
50. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS JS ? ?
51. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS JS Module Federation Logic
52. RainerHahnekamp Challenges • Same Version • Share Everything ◦ Singletons ◦ Bundle Size • No Tree-Shaking • Platform "Special Task Force" Team
53. RainerHahnekamp Problem Micro-Frontends fix: Too Many People Build Time Separate Deployment
54. RainerHahnekamp 5. Initial Loading Performance
55. 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
56. Demo
57. RainerHahnekamp Incremental Hydration
58. 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
59. 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
60. 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
61. 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
62. 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
63. 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
64. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> <app-markdown [markdown]="markdownValue()" /> </div>
65. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> <app-markdown [markdown]="markdownValue()" /> </div> TimerComponent
66. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> <app-markdown [markdown]="markdownValue()" /> </div> TimerComponent MarkdownComponent
67. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> <app-markdown [markdown]="markdownValue()" /> </div> TimerComponent MarkdownComponent marked
68. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> <app-markdown [markdown]="markdownValue()" /> </div> TimerComponent MarkdownComponent marked
69. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> <app-markdown [markdown]="markdownValue()" /> </div> TimerComponent MarkdownComponent marked Main Bundle
70. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> @defer { <app-markdown [markdown]="markdownValue()" /> } </div> TimerComponent MarkdownComponent marked Main Bundle
71. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> @defer { <app-markdown [markdown]="markdownValue()" /> } </div> TimerComponent MarkdownComponent marked Main Bundle
72. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> @defer { <app-markdown [markdown]="markdownValue()" /> } </div> TimerComponent MarkdownComponent marked Main Bundle
73. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> @defer { <app-markdown [markdown]="markdownValue()" /> } </div> TimerComponent MarkdownComponent marked Main Bundle Chunk
74. RainerHahnekamp edit-holiday.component.ts <app-timer /> <div> <textarea></textarea> @defer { <app-markdown [markdown]="markdownValue()" /> } </div> TimerComponent MarkdownComponent marked Main Bundle Chunk
75. 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
76. RainerHahnekamp 6. Angular & AI
77. RainerHahnekamp Angular & AI • API-Designed for LLM & Humans • Web Codegen Scorer • Angular MCP Server
78. RainerHahnekamp Angular's Crown Jewels 💎 Schematics Backwards Compatibility