In this article, we will know about the breaking changes in Angular version 16.
Let’s start with very basic but fundamental changes in Angular v16.
- Angular 16 requires node.js version v16 or v18
- Angular version 16 requires TypeScript version 4.9 or later
Changes in Angular version 16
Below are some of the changes available in Angular version 16.
Faster builds with the esbuild developer preview
Angular version 16 brings you the developer preview of Angular CLI’s new builders based on esbuild. This new architecture will significantly improve build times.
Standalone component migration and scaffolding
To support developers transitioning their apps to standalone APIs, Angular 16 includes migration schematics and a standalone migration guide.
These tools drastically reduce the effort required to move your code to standalone components, directives, and pipes.
Angular 16 can create a standalone project through the CLI.
Below command will generate a project without NgModules.
ng new --standaloneRequired inputs
In Angular 16, you can now mark a component and directive inputs as required:
export class Animal {
@Input({ required: true }) defaultAnimal: string;
}
Angular Signals
Angular Signals is the main feature developers have been waiting for.
The concept already exists in SolidJS, Preact, or Vue.js.
What is Signals ?
A signal is a wrapper around a value that can notify consumers when that value gets change. Signals can contain any type of value, either it is primitives or complex data structures.
A signal’s value is always read through a getter function, which allows Angular to track where the signal is used.
Angular Signals implementation in upcoming article.
Server-Side Rendering
The lack of server-side rendering support was one of the most significant drawbacks of Angular while compared to other simila technology stack such as React.
Angular version 16 has overcomed this issue with some significant improvements for server-side rendering.
Before version16, Angular used destructive hydration for SSR. In destructive hydration, the server first renders and loads the application to the browser.
Then, when the client app gets downloaded and bootstrapped, it destroys the already rendered DOM and re-renders the client app from scratch. This approach caused significant UX issues, like screen flickering.
Angular 16 introduces a new approach called non-destructive hydration to prevent these drawbacks. The DOM is not destroyed when the client app is downloaded and bootstrapped. It uses the same DOM while enriching it with client-side features like event listeners.
Non-destructive hydration is still at the developer preview stage.
