What's new in Angular 17?

Photo by Alexander B on Unsplash

What's new in Angular 17?

Take a look at the new features in Angular 17

Angular, the popular front-end framework, continues its tradition of releasing a new version every 6 months, we're still adapting to the standalone components and signals, and here we are with Angular 17. In this article, we will take a deep dive into the exciting new features and improvements introduced in this release.

Introduction

The Google team has released Angular 17, marking a significant milestone in the evolution of this web application framework. Minko Gechev claims that Angular 17 t is the most significant improvement to the web application framework since its inception.

The Angular team has risen to the challenge, and the latest 2023 release of Angular is packed with remarkable features and enhancements.

Introducing a new logo, new website angular.dev for documentation, tutorials, playground and more!

Exploring Angular 17:

Automatic CSS removal

Angular 17 takes a proactive approach to enhance performance by automatically removing CSS from the DOM when a component is destroyed. This not only improves efficiency but also prevents issues like RAM overheating.

New Declarative Control Flow Syntax

The new built-in control flow syntax makes easier to write and manage code. The syntax closely resembles that of popular programming languages like JavaScript and Python, leveraging the @syntax for clarity.

Deferred loading blocks

The Angular development team has taken lazy loading to the next level. They have introduced a new defer control block that allows the content of the block to be loaded lazily. In addition, any components, directives and pipes required by the content within the block are also loaded lazily.

Support for TypeScript 5.2

The latest release of TypeScript includes a number of great features that can help optimise Angular performance.

Support for View Transitions API

This feature allows developers to change and animate the content of DOM elements, such as divs, using the new View Transitions API. Supported across multiple browsers, including Chrome, Opera, Chrome Android, and Edge, this feature simplifies animations without the need for complex CSS and JavaScript combinations.

Core Signal API stability

Angular 17 stabilizes the Core Signal API, ensuring a reliable and consistent experience for developers.

Esbuild as the default builder

When creating a new project in Angular 17, you'll find that esbuild is now the default builder. This streamlined building process can save time and improve build performance.

Standalone components by default

Standalone components are now the default option in Angular 17, making it even easier to create modular and maintainable code.

SSR improvements

These enhancements have resulted in significantly faster build times for hybrid rendering, with speed improvements of up to 87%, and for client-side rendering, with gains of up to 67%. This results in faster page generation, which translates into a more responsive and efficient user experience.

These are just a few of the remarkable enhancements in Angular 17. In the upcoming articles, we will delve deeper into each of these features, providing practical examples and best practices.

Conclusion

I love how the Angular team keeps us updated with new improvements all the time, in this article we have just seen what the improvements are, in the following articles we will go into detail on each of them.

Related articles:

Did you find this article valuable?

Support Rubén Peregrina by becoming a sponsor. Any amount is appreciated!