Angular 15 – What’s New and Why to Upgrade

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { AppComponent } from'./app.component';

@Component({
    standalone: true,
    selector: 'sample-component',
    imports: [ AppComponent ],
    template: `<h1>Welcome to Angular 15</h1>`,
})
export class SampleComponent {
 
    // component logic
}

bootstrapApplication(SampleComponent);

import { Component } from '@angular/core';

@Component({
    selector: 'app-menu',
    hostDirectives: [
        HasColor, 
        {
            directive: CdkMenu,
            inputs: ['cdkMenuDisabled: disabled'],
            outputs: ['cdkMenuClosed: closed']
        }
    ]
   })
class AppMenu {
}

The concept of Image Directive (or NgOptimized Image) is first introduced in Angular 14 along with Chrome Aurora to improve the performance of image loading. After that release, developers experience around 75% of improvement in the LCP. Now, in Angular 15, the same Image directives become much more stable along with some new features. Now, in this directive, we can take benefit of the automatic generation functionality of the SRC set. It helps us to upload and return the appropriate size of the images whenever we require. Due to this, the download time of the image is reduced. Also, we can use another feature called Fill Mode (currently it is released as an experimental mode). With the help of this, we do not need to declare the image dimensions. It is quite helpful when we try to migrate the CSS-based background image to use this directive or when we don’t know the exact dimension of the image.

This directive, i.e. NgOptimized can be used directly either in the NgModule.

import { NgOptimizedImage } from '@angular/common';

// Include it in the necessary NgModule
@NgModule({
  imports: [NgOptimizedImage],
})
class AppModule {}

Also, we can use it within the Angular component directly. While we need to use the Angular Image directives within a component, we need to replace the src attribute of the image tag with ngSrc, so that the image directive can prioritize the attribute to optimize the speed of the LCP images.

import { NgOptimizedImage } from '@angular/common';

@Component({
  standalone: true
  imports: [NgOptimizedImage],
})
class MyComponent {}

04. Functional Route Concept

The angular team introduced a new concept in the implementation process of route guards in Angular 15. In the earlier version, we normally use the class-based implementation for the route guards. But now in Angular 15, it is marked as @deprecated as per the Angular documentation. A new approach called Functional Route Guards has been introduced in place of the class-based approach. By using the new approach, we need to define the functions in place of the class-based concept while defining route guards and it helps us to implement route guards in a much more efficient and streamlined way. For this purpose, we can use the inject function from the @angular/core package which helps us with the dependency injection. This implementation helps us to create a reusable and composable function that we can pass as an argument within the Angular Router’s canActivate or canActivateChild functions.

As per the Angular documentation, the benefits of the functional route guards are as follows –

1. We can define the route guards and their resolvers as a JavaScript functions as well.
2. It reduced the boilerplate code as functional route guards do not require to define different guard class definitions.
3. Functional route guards increase flexibility as they can be defined as an inline function also.
4. Performance wise functional route guards are faster as compared to class-based guards. It is because it does not require creating or initiating the separate class objects instance.

05. Http with provideHttpClient

One of the new improvements in Angular 15 is that we can now use the provideHttpClient option to use HttpClient in place of using HttpClientModule. As we know that in Angular 15, modules are becoming optional now. So, in that case, taking the support of the HTTP module is a stress. So, now we can use use the provideHttpClient() which offers the support of the HttpClient.

06. Language Service

Now, in Angular 15, we can import such components directly with the help of language services that are not either mentioned as a standalone component or within the NgModules. Now angular in-language support service provides an option called Quick Fix. Through this, we can write down our angular code much more confidently and we can use this automatic import component and its fixes in the template.

07. Dependency Injection

In Angular 15, there are some changes done in the case of Dependency Injection. They are –

• In the case of the @Injectable() decorator, it is no more supported with the provided: _NgModule syntax. In this case, we need to use providedIn : “root”.
• We can also use the NgModule.providers if we want to limit the dependency injection to a single NgModule.
• Also, the syntax provided: ‘any’ is also deprecated in Angular 15.

08. Improved Stack Trace

Now, in Angular 15 we can take benefit of the better Stack Traces which help us to identify any error or the location of any error. This feature is developers for to debug any issue during the development process. Now, during the execution of any application if an error occurred, then Angular will show the development code along with the library or packages which it calls. In the earlier version, developers faced difficulties to understand the error snippers as –

• Most of the error message-related information is generated from third-party dependencies like Angular framework, zone.js, and Rx.js.
• Also, the error message does not provide any information about which line or block code encountered this error.

But now, after a long time of collaboration between the Angular and Google Chrome DevTool team, they integrate those third-party libraries with the help of node_modules, zone.js, etc to raise proper error messages by using stack trace. So, now through this error message information, the developer can easily identify the exact code block of that error and fix it quickly.

09. MDC-based Components

With the release of Angular 15, we can use the much more stable Angular material-based components. Now, most of the Angular material components s designed in such a way that we can use them in web applications as well. Most of the changes regarding these components are based on DOM and CSS related. Now, in Angular 15, many Angular Material components related to old implementations have been deprecated or moved to the legacy section. So, if we still want to use them then we need to use the “legacy” import option for that.

import {MatLegacyButtonModule} from '@angular/material/legacy-button';

10. Improved ES-Build Supports

In the Angular 14 release, the Angular team announced one experimental functionality support called esBuild support to enable the faster build time of the application. Now, with Angular 15, the same esBuild support is extended with some new functionality like SVG template, and file replacement. Now, it also supports the ng build –watch command. The command for upgrading the angular.json builder is:-

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

How to Upgrade to Angular 15?

So, in the above section, we have discussed the new functionality and features of Angular 15. Now, let's discuss how we can upgrade any existing angular application to the Angular 15 version. Before going to upgrade to Angular 15, we need to know some dependencies related to Angular 15 like –

• Angular 15 has provided support for node.js version 14.20.x, 16.13.x and 18.10.x. And it terminates the support related to version 14.[15-19].x and 16[10-12].x.
• Angular 15 now only support TypeScript version 4.8 or older than that.

So, we can use the below commands to update Angular 14 to Angular 15 –

ng update @angular/cli @angular/core

Conclusion

This article discusses some key functionalities of Angular 15. As Angular team is majorly focusing on the performance improvement of the framework for this version like server-side rendering, code reusability, etc. This type of improvement always helps the easier learning curve more simplified. So, let's upgrade the application to the Angular 15 version and use its new features and functionality of it.