Angular v16 Features And Improvements We’re Excited About

With Angular version 15 released on November 16 and the next version expected before summer, let’s see what upcoming changes look the most exciting.

New bundlers

A lot of optimization in Angular happens at build time. For this to be possible, Angular provides a custom compiler. The compiler takes care of things specific to Angular: ahead-of-time compilation or catching issues in the templates. The build is complex, but Angular CLI provides you all the configuration you need. Under the hood, Angular CLI uses Webpack, a well established bundler with a very active community.

While Webpack is the most popular bundler available, it has its downsides—especially speed when it builds larger codebases. Whereas Webpack is in active development and there are incremental improvements in speed between versions, there are other bundlers that take a fundamentally different approach and boast greatly improved speeds. A slower bundler causes slower builds, and this can negatively affect productivity in the project at all stages—from development to continuous integration.

To allow the Angular community to enjoy the benefits of faster bundlers, the Angular CLI has offered an experimental esbuild configuration since version 14, and it’s been reported to lower build time by up to 44%. The Roadmap also lists further investigation and progress toward making the improved builds stable, so we hope to see continued speed increases coming to applications built with the Angular CLI.

Further development of the image directive

Due to their size, images have a disproportionately large impact on web performance. Managing them well is especially important for the mobile user experience for a couple of reasons:

• When on the go, mobile users can experience slower and less stable internet connections or may be charged for the data transfer.
• Because of their often smaller screens, images on mobile devices don’t need the same high resolution as desktop users.

Managing images well can be difficult, especially in applications rendered on the client side. Improvements to image management for both users and developers are welcome. So it’s promising to see on the roadmap further enhancements to NgOptimizedImage that the Angular team plans to add to the framework.

Debugging dependency injection

In my AngularJS development work, I often use this snippet to access my services from the dev tools console:

 angular.element(document.body).injector().get('serviceName')

I find it very helpful to be able to test my methods interactively in the browser as I develop them. For that reason, I’m looking forward to seeing the updates in Angular DevTools that will bring dependency injection debugging APIs.

Upcoming changes

Those are the changes I’m the most excited about in that are on the way to becoming part of Angular v16. You can find the list of priorities for the current development in the project’s roadmap.

Looking for more support for your Angular projects?

Our team at DevIntent is highly experienced in Angular development, testing, and software quality. If you'd like to chat about how we can help you, please contact us at sales@devintent.com.