Angular 16

Angular, the popular JavaScript framework, continues its journey of updation with the release of version 16, bringing some new improvements, and new features, as well as some breaking changes and deprecations.

What's new in Angular 16?

Angular Signals

Angular 16 introduces the Signal pattern, similar to the push/pull pattern found in the Solid.js library. This pattern allows you to retrieve values (pull) and update them (push) synchronously. Signals always have a value that increases the performance of Angular's change detection mechanism.

Enhanced Hydration Developer Preview

Improved hydration support allows Angular to reuse existing DOM nodes, that helps to better page load performance, especially on server-side rendered or pre-rendered pages.

Faster Builds with esbuild Developer Preview

Angular CLI's new builders based on esbuild promise significantly reduces the build time. It also integrated with Vite for an enhanced development server experience.

Server-Side Rendering (SSR) Enhancement

Angular 16 addresses the lack of server-side rendering (SSR) support which is a significant improvement over previous versions. In earlier versions, Angular used destructive hydration for SSR, leading to issues like screen flickering and degraded user experience. With Angular 16, non-destructive hydration is introduced, that preserves the DOM while enhancing it with client-side features like event listeners, improving overall rendering performance.

Route Params Mapping

Angular 16 simplifies to get URL parameter with improvements to the ActivatedRoute service. Previously, you had to rely on ActivatedRoute to access URL parameters, query parameters, and associated data.

RxJS Interoperability

Angular 16 introduces improved interoperability with RxJS that enables seamless integration with Angular's reactivity primitives. You can now easily "lift" signals to observables using functions from @angular/core/rxjs-interop, which is available in developer preview as part of the v16 release.

Major Changes in Angular v16

While the update to Angular v16 brings significant improvements, you also need to know about certain breaking changes that might impact existing applications:

• Node.js and TypeScript Version Requirements: Angular v16 makes important to use Node.js version 16 or 18 and TypeScript version 4.9 or later for compatibility with the latest ecosystem tools and language features.
• Removal of Angular Compatibility Compiler (ngcc): With ngcc's removal, Angular v16 removes the View Engine rendering architecture, shift to migrattion to Ivy-compatible libraries.
• Angular Package Format Changes: Changes to the Angular Package Format improved packaging and distribution of Angular libraries, including the removal of FESM2015 outputs and updates to EcmaScript 2022 outputs.
• Removal of ReflectiveInjector: ReflectiveInjector and related symbols are removed, you need to update the code to avoid references to ReflectiveInjector and utilize Injector.create instead.
• Updated Behavior for Router.createUrlTree: You need to adjust tests due to updated behavior in Router.createUrlTree, ensuring accurate test coverage in Angular v16 applications.

Deprecations in Angular v16

Angular v16 also marks certain features for deprecation, which indicates it will not be usable in future.

1. Class and InjectionToken router guards and resolvers: Instead, use plain JavaScript functions for guards and resolvers, and inject dependencies using inject from @angular/core. Class and InjectionToken guards and resolvers are deprecated in Angular v16. You need to transit to use plain JavaScript functions and the inject function for injecting dependencies.
2. The ripple properties of several Angular Material component: The