What's new in Angular

Key Concepts

Angular Signals, Linked Signal, Resource (and httpResource, streaming resource), Zoneless Angular, Server-Side Rendering (SSR), Incremental Hydration, Event Replay, Hot Module Replacement (HMR), Standalone Components, Untagged Template Literals, let syntax, Vitest, Chrome DevTools Angular Custom Track, Firebase App Hosting, Angular AI Portal (Angular.dev/AI), Selector-List Components, Signal Forms.

Angular Signals: A Modern Approach to Reactivity

• Signals Overview: Signals are Angular's modern approach to reactivity, simplifying state management and reducing imperative code. A signal is a wrapper around a value that notifies consumers of changes.
• Signal Types:
  • signal: Basic signal.
  • computed: Derived signal whose value is automatically updated when its dependencies change.
  • linkedSignal: A writable signal dependent on other state, allowing access to prior state. It's being upgraded to stable in v20.
• Linked Signal Example: Used in the graphic novel app to maintain the full story by appending new story parts (fetched via a storyResource) to the existing story stored in the linkedSignal. This wouldn't be possible with a standard signal.
• Resource: An experimental type of signal for reactively fetching asynchronous data. It's a container for data fetched asynchronously.
  • Example: Used to generate images in the graphic novel app using Gemini. The imgDescription signal triggers the Resource to fetch a new image. The Resource exposes status and isLoading for displaying loading states and a reload method for retries.
  • Code Example: Demonstrates defining a Resource that calls an asynchronous function to generate an image using Gemini via the Genkit library. The params field is populated with the imgDescription signal.
• Resource Variations:
  • httpResource: Designed specifically for fetching data from HTTP endpoints. Simplifies the process by embedding parameters directly into the request.
  • Streaming Resource: Introduced in v19.2, allows reactively updating the UI as chunks are streamed from the server.
• Benefits: Signals enable creating a reactive, self-managing graph of application state, leading to less development time, fewer bugs, and superior maintainability. Signals have no concept of time, allowing developers to design systems for computing state at any given point in time.

Zoneless Angular: Explicit Control Over Change Detection

• Problem: Historically, Angular relied on Zone.js for change detection, which runs change detection in response to all browser events, leading to unnecessary checks.
• Solution: In Angular v20, Zoneless Angular is upgraded to developer preview, allowing developers to remove Zone.js.
• Benefits: Developers gain explicit control over when and how change detection runs, enabling more precise updates and improved performance. Can trigger updates by running mark for change or by leveraging signals' inherent knowledge of state changes.
• Synergy with Signals: Zoneless Angular combined with Signals provides a powerful combination for optimizing performance.

Server-Side Rendering (SSR) Enhancements: Performance and SEO

• Route-Level Render Mode Config APIs: Introduced in v19, this feature provides control over rendering strategies for different parts of the application (server-side rendering, pre-rendering/static site generation, client-side rendering).
• Benefits: Enhances performance, search engine optimization, and overall user experience. Offers greater flexibility, built-in internationalization, and a seamless dev server experience (hot module replacement without rebuilds).
• CLI Commands: Available for easy integration into new and existing Angular apps.
• Incremental Hydration: Introduced in v19, allows leaving sections of the application dehydrated and incrementally triggering their hydration as needed.
  • Example: Demo shows components initially dehydrated (grayed out) and hydrated upon user interaction.
  • Implementation: Achieved using defer blocks with hydrate triggers.
  • Benefits: Improves application performance by producing smaller initial bundles.
• Event Replay: Enabled by default in Angular v19. Addresses the gap between a user event and the browser downloading/executing the code to handle it.
  • Mechanism: Event Dispatch records events during the download period and replays them once the JavaScript is ready.
  • Example: User clicks "Add to Cart" multiple times before the JavaScript is loaded; Event Dispatch replays the clicks, adding all items to the cart.

Authoring Improvements: Standalone Components and Template Enhancements

• Standalone Components: Introduced in v14 (developer preview), stabilized since then. Allows building applications without NgModules. Made the default for components, pipes, and directives starting in v19.
• Benefits: Easier to learn Angular and manage projects. Paved the way for features like deferrable views, simplified route-level lazy loading, and the directive composition API.
• Untagged Template Literals: Supported in Angular templates since v19.2. Enables string interpolation with literal expressions directly in templates.
  • Use Cases: Improved readability, dynamic class naming/styling, enhanced string manipulation, inline expression evaluation.
  • Example: Cleanly interpolating the callWidth property into the class list of a div.
• let Syntax: Solves a community-requested issue by enabling developers to define and reuse variables inside Angular templates.

New Integrations: Testing, Debugging, and Deployment

• Testing Improvements:
  • Karma Deprecation: Karma, the previous test runner, was deprecated, creating an opportunity to explore new testing solutions.
  • Vitest Support: Experimental support for Vitest is introduced in Angular v20. Vitest offers node and in-browser testing capabilities.
  • Testing Options: Developers now have three options: experimental Jest support (node testing), Web Test Runner (browser testing), and Vitest (node and in-browser testing).
  • Community Feedback: The Angular team seeks community feedback to determine which testing solution(s) to support long-term.
• Chrome DevTools Angular Custom Track: A partnership with the Chrome DevTools team to create a custom track in Chrome DevTools for Angular developers.
  • Benefits: Surfaces custom profiling data specific to Angular applications in familiar language. Allows quick identification of application code versus third-party library code.
  • Features: Clearly labeled custom track, color-coded entries (blue for entry points, purple for generated code, green for TypeScript code), detailed data on entry clicks.
  • Requirements: Angular v20 and the latest version of Chrome.
• Firebase App Hosting Integration: Improved integration with Firebase App Hosting for deploying Angular SSR apps.
  • Deployment Options: Deploy from the Firebase console with a linked repository or use the Firebase CLI.
  • Benefits: Leverages the power of the Firebase platform (powered by Google Cloud), automatic rollouts upon commit changes.

Angular AI Portal (Angular.dev/AI): Integrating AI into Angular Development

• Launch of AI Portal: Angular.dev/AI is launched as a resource for guidance, best practices, coding examples, and recipes in AI.
• Streaming Effect Recipe: Demonstrates simulating a typing effect when getting a response from an LLM using Angular's Resource API.
  • Client-Side Implementation: Uses the stream property on the Resource API configuration object with an async function.
  • Server-Side Implementation: Uses an Express route and the Gemini API to create a content stream, streaming the response to the client using the write function.
• Content: Includes links to multi-hour development sessions and guidance agnostic to Google AI technology.

Future Roadmap: Developer Experience and Framework Performance

• Long-Term Goals (2025): Focus on improving the Angular developer experience and framework performance.
• Game-Changing Improvements: Considering selector-list components, which could enable single-file components and incremental adoption.
• Near-Term Focus: Delivering signal forms to enhance the signal ecosystem and make forms easier to work with in Angular.
• Angular V20 Developer Event: May 29, 9:00 AM Pacific on YouTube.

Conclusion

Angular is continuously evolving with a strong focus on developer experience and performance. The introduction of Signals, Zoneless Angular, and enhanced SSR capabilities, along with improved tooling and integrations, demonstrates the team's commitment to providing developers with the best possible framework for building modern web applications. The launch of the AI portal signals a forward-thinking approach to integrating AI into the Angular ecosystem. The Angular team encourages developers to upgrade to the latest version and provide feedback to help shape the future of the framework.