Angular Build System

Angular has moved from a Webpack-based build system to a modern pipeline powered by Esbuild and Vite. This change, stabilized in recent versions, dramatically improves build speeds and the development experience.

Key Components:

• Esbuild: Used for the production build and ahead-of-time (AOT) compilation. It is significantly faster than Webpack due to its Go-based implementation.
• Vite: Used as the development server. It provides near-instantaneous hot module replacement (HMR).
• Application Builder: The new unified builder (@angular-devkit/build-angular:application) that handles both browser and server (SSR) builds in a single pass.
• Index HTML Generation: The new builder uses a more efficient way to inject scripts and styles, supporting modern features like module/nomodule patterns and preloading out of the box.

Directive Composition API

Introduced in Angular 15, the Directive Composition API allows you to apply directives to a component’s host element from within the component’s TypeScript class.

Benefits:

• Logic Reuse: Instead of duplicating logic or using inheritance, you can “compose” existing directives into a component.
• Clean Templates: No need to manually add multiple directives to every instance of a component in HTML.
• Encapsulation: The consumer of the component doesn’t need to know which internal directives are providing its functionality.
• Host Binding/Listener Sharing: Directives applied via composition have their host bindings and listeners automatically applied to the component’s host element.

Modern Lifecycle Hooks

Angular 17 introduced new lifecycle hooks designed specifically for working safely with the browser’s DOM, especially in SSR and hydration contexts.

Key Hooks:

• afterRender: Executes after every change detection cycle that resulted in a DOM update. Useful for logic that needs to synchronize with the final layout (e.g., resizing observers).
• afterNextRender: Executes only once, after the next change detection cycle. Ideal for one-time initialization that requires DOM access (e.g., initializing a third-party library like D3 or Google Maps).

Why They Differ from ngAfterViewInit:

• Client-only: These hooks never run on the server, making them safe for window or document access without environment checks.
• Phase-aware: They run after the browser has completed the render/layout phase, ensuring you get accurate measurements.

Resource API

The Resource API provides a reactive, signal-based way to manage asynchronous data fetching and state. It replaces many common patterns involving manual toSignal(http.get(...)) or complex RxJS streams for simple data loading.

Key Functions:

• resource(): The standard version for Promise-based or generic async fetching.
• rxResource(): The RxJS-integrated version, ideal for use with HttpClient.

Key Properties (Exposed as Signals):

• value: The current data returned by the resource.
• status: The current state (Idle, Loading, Resolved, Error, Reloading).
• isLoading: A boolean convenience signal.
• error: The error object if the fetch failed.

Key Features:

• Request Signals: Automatically re-fetches when a dependency signal (like a search query) changes.
• Reloading: A built-in reload() method to refresh data.
• Local Optimistic Updates: Methods to locally update the value before the server responds.

NgRx SignalStore

The SignalStore is a functional, signal-based state management solution provided by NgRx. It is designed to be lightweight, highly composable, and fully integrated with Angular’s fine-grained reactivity.

Key Features:

• Functional API: Define state, computed properties, and methods (updaters/effects) using a composable functional approach.
• Signal-based: The entire state is exposed as signals, enabling efficient UI updates.
• Extensions: Easily add functionality like withEntities (for collection management) or withHooks (for lifecycle management).
• Type Safety: Deep integration with TypeScript for excellent developer experience and refactoring safety.
• Tree-shakeable: Only include the features you actually use.

View Transitions API

Angular provides native support for the browser’s View Transitions API. This allows for smooth, app-like transitions between different routes without requiring complex CSS animation libraries.

Key Features:

• withViewTransitions(): An easy-to-enable router feature that wraps route changes in a view transition.
• Cross-document Transitions: Synchronizing animations between the outgoing and incoming views.
• Automatic Handling: Angular manages the timing of the transition to ensure the new view is fully rendered before the animation completes.
• CSS-based Customization: Transitions are customized using standard CSS pseudo-elements like ::view-transition-old and ::view-transition-new.