Angular 15: What’s New in the Latest Version of Angular v15?

Quick Summary: The latest version of Angular v15 is out and available now in the market for developers. Angular 15 comes with stable standalone APIs (graduated from developer preview), allowing Angular developers to build applications without the need of NgModules. The latest version of Angular v15 also offers less boilerplate code, enhanced performance, directive composition API, and many more updates and features for developers.

The year 2022 has not ended yet, and there are many frameworks, which have released their latest versions along with new updates and features, including Node.js 19, Vite 3.0, TezJS, React 18, and many more.

This time, it’s the Angular framework.

The Angular 15 version, the Google-developed, TypeScript-based web application framework, was released on 16th November 2022, with the prior success of Angular 14.

The latest version of Angular 15 was officially launched on November 16 with stable standalone APIs, allowing developers to bootstrap an app using a single component. While we talk about Angular 14, it was the most prominent released by the Angular team, based on TypeScript. And it supports the latest TypeScript 4.7 release as well.

However, the core Angular team has revealed that the removal of Angular’s legacy compiler and rendering pipeline over the past year has made it possible to implement a series of developer experience improvements in the last few months.

The result of all the dozens of refinements leads to the latest version of Angular v15, which includes enhanced performance and better developer experience.

TL;DR

The latest version of Angular 15 offers:

• Stable Standalone APIs
• Http with provideHttpClient
• Directive Composition API
• Angular CLI Improvements
• Improved Stack Traces for Debugging
• Stable Image Directives
• Router Unwraps Default Imports
• Automatic Imports in Language Service
• Dependency Injection
• Forms
• CDK Listbox
• Better Experimental ESbuild Support
• Deprecation

Planning to Upgrade Your App with Angular 15?

Switch Easily

What is New in Angular 15?

Just like a Swiss watch, Angular comes up with a new release every six months. And today, Angular v15 made its way to the developer’s community.

To get into the details, we got a chance to have word with one of our senior Angular developers who has explored the Angular 15 version. And this is what he said,

“Angular v15 is small incremental changes, addressing the bottlenecks of Angular framework and pain points of Angular developers. Honestly, this update is one of the major and interesting releases I have come across in the last two years”.

With the latest version of Angular 15, a single component works in Angular Elements, router, HttpClient, and elsewhere.

Compared to its previous updates, Angular 15 introduces several notable upgrades. If we talk about “Standalone Components,” they streamline the development process and serve as an alternative to NgModules, a method of handling dependencies that developers consider unnecessarily complex. Additionally, the improved error messages provide more actionable information, making debugging a less frustrating experience.

Features of Angular 15

Angular v15.0.0 offers many interesting features, offering a better developer experience. So, let’s dive into all the features in detail.

Stable Standalone APIs

The good news is that standalone components in Angular v15 are finally stable now. Thus, the standalone component feature is out of “Developer Preview” mode.

Now Angular 15 can allow developers to build Angular applications without any module.

This is the best news for Junior Angular developers who wish to simplify their development practices and streamline their dev experience.

Now Angular standalone components can work across Angular. They are now fully functional in Angular Elements, router, HttpClient, and more.

With the help of standalone APIs, you can easily bootstrap an Angular application using a single component.

Now, let’s understand the usage of standalone API with the given example, as per the official document:

The finest improvement in Angular 15 is now you can use provideHttpClient to offer HttpClient without using HttpClientModule.

Http with provideHttpClient

The new Angular 15 world, where modules are optional, stresses an evolution and adaption of HTTP support. With the help of provideHttpClient(), it’s possible to offer the HttpClient. HTTP interceptors are also evolving and can now be defined as functions.

Directive Composition API

Another feature of Angular 15 is the directive composition API.

The directive composition API gives developers the ability to add directives to host elements, giving Angular a strong code reuse approach. However, it only works with standalone directives.

This feature was inspired by the most popular feature request on GitHub, asking to apply directives to a host element.

Optimized CLI with a Bunch of Improvements

Here, Angular CLI supports standalone stable APIs. This allows you to create a standalone component via ng g component --standalone.

However, the Angular team is planning to optimize the output of ng new.

The first step is the configuration step which is reduced by removing test.ts, polyfills.ts and environments. Furthermore, you can also specify your polyfills directly in angular.json in the polyfills section, like:

Now you can specify the target ECMAScript version using .browserlist in order to further reduce configuration overheads.

Improved Stack Traces for Debugging

The improvements in stack traces were challenging issues shared by developers in a developer survey to the Angular team. That’s the reason the core Angular team went deeper into the struggles with debugging experience.

As a result, now Angular 15 offers more understandable stack errors. The version now shows the error messages focused on code instead of showing errors from third-party dependencies.

The team has partnered with Chrome DevTools to fix this issue.

For a better understanding, let’s look at a sample stack trace in an Angular app:

After partnering with Chrom DevTools, they created a mechanism to eliminate scripts coming from node_modules with the notation source maps via the Angular CLI.

And that leads to better improvements in the stack trace in Chrome DevToos:

Here you can implement the execution from the button press in the AppComponent through the error. More information about the upgrades is available here.

Stable Image Directives

Here’s good news for everyone who is in the race of achieving the best LCP score in the lighthouse.

The image directive feature is now stable with Angular v15. One of the major websites - Lands’ End - implemented this feature and observed almost 75% of improvements in LCP.

The new features for the image directive are:

Automatic Generation of srcset: By creating the srcset property for you, the directive makes sure that the right-sized image is requested. As a result, your download times for images can be reduced.

Fill mode [experimental]: By making the image fill its parent container, this option eliminates the need to declare the image's width and height. If you don't know the sizes of your photos or want to go over to using CSS background images with the directive, this is a useful tool.

You can use the standalone NgOptimizedImage directive directly in your component or NgModule:

Simply replace the image's src attribute with ngSrc to use it within a component, and be sure to give your LCP images the priority attribute.

Router Unwraps Default Imports

The router now automatically unwraps default exports when lazy loading, simplifying the router even more and reducing boilerplate.

Suppose you have the following LazyComponent:

Prior to this update, to lazy load a standalone component, you had to:

The router will now automatically use default exports if it finds them, simplifying the route declaration to:

Automatic Imports in Language Service

Now, components that you use in templates but haven't added to standalone components or NgModules can be automatically imported by the language service.

Dependency Injection

The @Injectable() decorator is no longer supported with the providedIn: NgModule syntax. So, you can use providedIn: "root".

Use NgModule.providers if providers need to be genuinely limited to a single NgModule. Additionally, the providedIn: 'any' syntax is also deprecated.

Forms

The forms package now includes the utility functions like, isFormControl, isFormGroup, isFormRecord, and isFormArray.

Since custom validators include AbstractControl in their signatures but you frequently know that the validator you write is for a certain FormControl, FormGroup, etc., they are very helpful when you wish to write a custom validator.

CDK Listbox

For the creation of UI components, the Component Dev Kit (CDK) provides a collection of behavior primitives. The CDK listbox is a new primitive that is added in version 15 and you can modify it for your use case.

In order to create unique listbox interactions based on the WAI ARIA listbox pattern, directives are provided by the @angular/cdk/listbox module.

You get all the expected behaviors for an accessible experience when using @angular/cdk/listbox, including support for bidi layout, keyboard interaction, and attention management. Every directive applies the ARIA roles associated with it to the host element.

Better Experimental ESbuild Support

Angular 15 offers experimental Sass, SVG template, file replacement, and ng build --watch support. You have to update your builders angular.json with esbuild from:

"builder": "@angular-devkit/build-angular:browser"

to:

"builder": "@angular-devkit/build-angular:browser-esbuild"

Deprecations

Now the provideIn: ‘any’ is deprecated along with provideIn: NgModule. However, if you wish to use truly scope providers to a specific NgModule, you can use NgModule.providers.

In fact, with the evolving layout in CSS, the team is going to stop publishing new releases of @angular/flex-layout.

Have Angular App Development Challenge to Address?

Share Your Requirements

How to Install Angular 15?

Angular offers multiple Angular tools. Therefore, you just need to install Angular 15 via npm.

Run the following command in the CLI.

npm install --global @angular/cli@next

Using this command, you can easily install Angular CLI’s latest version on your system.

How to Upgrade to Angular 15?

If you are using the older version of Angular, like Angular 13 or Angular 14 and wish to upgrade to Angular 15, below are the steps you can follow:

ng update @angular/cli @angular/core

If you wish to update your global angular, execute the following code:

npm i -g @angular/cli

Excited to Implement Angular 15?With the new release of Angular v15, we can see that it’s jam-packed with many features, offering the stable standalone APIs most promising development. The whole roadmap includes better improvements on the CLI, which could generate standalone applications without modules.The option of using Angular without zone.js is also mentioned, along with some improvements on the server-side rendering narrative, which is not Angular's strongest point (in comparison to other popular frameworks).Thus, Angular 15 is turning out to be the most promising update for Angular developers. Now is the time to move your project into Angular 15 with the help of Angular experts like Radixweb. As a top-notch Angular development company, we will help you implement the latest version of Angular as per your requirements without losing any data or track record.So, what are you waiting for? Hire Angular developers and move to the new world.