The new Angular v15 was released on November 16, 2022. Many developers and business owners are wondering what new features and functionalities this version is going to bring. Although developers were facing certain problems while working with the previous versions of the framework, it is expected that this new version comes with more stable angular features that can deliver an enhanced developer experience as well as help them build high-performance web applications. So, let's discuss these new features.
New features of Angular v15
Stable Standalone API
Standalone was originally introduced in Angular 14. It was used by the developers to create apps without taking the help of Ng Modules. Now, what's new in the latest Angular v15 is that the Angular team has made the standalone API more stable.
By making sure that the stable standalone API was ready to graduate, Angular Team also ensured that it is fully functional across the entire Angular framework. And what’s more is that they can also work just fine in all Angular elements, HTTPClient, router, and more. The stable standalone component used in Angular 15 also enables it to work in synchronization with them all.
After becoming stable, the standalone API also allows bootstrapping an app in each component. To achieve that, you have to import the Bootstrap app from the platform browser and then make it through the component. The standalone APIs can be directly referenced to the pipes by using the same import function. You can later mark the directive and component pipe as standalone true.
Enablement to Develop Multi-Route Application
The greatest change ever brought by Angular v15 is that it supports multiple route applications. Developers can use it to create apps that have multiple pages and routes. This can help them create apps with multiple states and transitions. This makes the app easy to maintain and quite flexible.
This newly added feature allows developers to not only create multiple routes and pages but also enable them to have different functionalities. For example, if you are building an app where users have to register or log in, separate routes can come in handy for that.
Introduction to the Directive Composition API
The frameworks that offer reliable and reusable directives are very popular among developers. This directive was in demand for a long time and the Angular Team at Google has fulfilled the wish of their community by introducing directive composition API in the new Angular v15.
This directive not only elevates the usability of the code but also takes it to the whole another level. This ultimate code reuse strategy can help the developers make the most of the Angular application by boosting the host elements. But you will need the help of an Angular compiler to accomplish this task.
It is also important to note that a developer can only use Direct composition API with the standalone directives.
@Component({
selector: 'mat-menu',
hostDirectives: [HasColor, {
directive: CdkMenu,
inputs: ['cdkMenuDisabled: disabled'],
outputs: ['cdkMenuClosed: closed']
}]
})
class MatMenu {}
Two host directives namely CdkMenu and HasColor are used to make the MatMenu more effective. All the properties of MatMeny can be reutilized with the help of these two directives. From CdkMenu, it's just logic and input whereas from hasColor, its logic, input, and output with which the MatMenu can be inherited.
Stable “NgOptimizedImage” Image Directive
Same as standalone APIs, Image Directive was also introduced with Angular 14. And similar to the standalone, this feature was also stabilized with the latest version of angular.
In the new Image Directive, SRC sets are generated automatically which later helps in sizing the image properly and then uploading it wherever needed. This also cuts down the image’s downloading time. And the Fill Mode feature in this would automatically fill the image dimensions in the parent container. This Ngoptimized image directive is very beneficial when a CSS background image is migrated. This directive can also be used in Ng modules and Angular components.
Cleaner, Better Stack Traces
The stack traces for debugging the Angular apps are now better and cleaner with the latest Angular v15. Rather than showing the calls of the libraries, the Angular development team at Google decided that they need something more standard to trace the code. This change is the reason why error messages are improved.
While working with the previous version of Angular, when developers were discovering the code, they would usually get an error message of just a single line. This would leave them to work out a lengthy process to find the bugs. Below is an example of what those indications used to look like.
ERROR Error: Uncaught (in promise): Error
Error
at app.component.ts:18:11
at Generator.next (<anonymous>)
at asyncGeneratorStep (asyncToGenerator.js:3:1)
at _next (asyncToGenerator.js:25:1)
at _ZoneDelegate.invoke (zone.js:372:26)
at Object.onInvoke (core.mjs:26378:33)
at _ZoneDelegate.invoke (zone.js:371:52)
at Zone.run (zone.js:134:43)
at zone.js:1275:36
at _ZoneDelegate.invokeTask (zone.js:406:31)
at resolvePromise (zone.js:1211:31)
at zone.js:1118:17
at zone.js:1134:33
The developers were having difficulty understanding what the actual error was. It could be that the error messages were sent from third parties such as Angular framework, RxJS, and zoneJS. Or there wasn't enough information about which user has interacted with the bug in the code of the application.
So the Angular team collaborated with the Chrome DevTool team which helped them integrate those third-party dependencies which are now helping in getting linked stack traces. The improvements made in the stack traces are as mentioned below:
ERROR Error: Uncaught (in promise): Error
Error
at app.component.ts:18:11
at fetch (async)
at (anonymous) (app.component.ts:4)
at request (app.component.ts:4)
at (anonymous) (app.component.ts:17)
at submit (app.component.ts:15)
at AppComponent_click_3_listener (app.component.html:4)
These new and improved error messages offer accurate information on exactly where the error is made so the developers can skip directly to that section to rectify the code.
Stable MDC-based Components
Stability has always been an issue with Angular Materials. The angular team worked hard to resolve that issue by refactoring the components as the design components of the Angular Material for web apps. These enhanced components can not only provide better accessibility but can also abide by the design specifications for Angular material.
There were some old styles in the angular app that needed some adjustments especially when the CSS was used to override internal elements of the migrated components. So the Angular team did some major refactoring in some parts of DOM and CSS.
In the latest version of Angular v15, developers have deprecated the old implementations of many components. In case, if you wish to recover them then you have to choose Legacy import. For example, if you want the old implementation of the mat button then you can do it by implementing it from the legacy button module
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
CDK Listbox
The full form of CDK is Component Dev Kit. This kit provides various types of behavior primitives that can help developers in creating UI components. The Angular v15 was released with a new feature called CDK Listbox. This feature allows the developers to customize their Listbox interactions that are drawn up by the WAI-ARIA Listbox pattern based on requirements.
Every directive in the behavioral interaction like focus management, bidi layout support, keyboard interactions, and more is associated with ARIA roles with respective host elements.
Extended esbuild support
An experimental esbuild support was included in Angular 14 which was a fast javascript bundler. Developers can use it to simplify the pipelines and rapidly develop applications.
In Angular 15 many similar but new experimental supports were included for the ng build like file replacement, SVG template, SaaS, watch support, and more. If you wish to upgrade your angular.json builder then you can use the following command:
"builder": "@angular-devkit/build-angular:browser-esbuild"
Router Now Auto-Unwarps Default Exports For Lazy Loading
If you are adding some enablements to reduce boilerplates then in the process, it will also simplify the router functions. The lazy file will be imported in the code if the router can successfully find out the default export for lazy loading.
Automatic Imports In-Language Support Service
You can make the most of your language service because the new version of Angular supports automatic import in-language service. This new feature allows the automatic import of components and their fixes in the template. The components that are automatically imported using these features are only those components that are not used in either NgModule or standalone components.
How to Install Angular 15?
The angular framework provides a large variety of tools. So, if you want to install the new Angular v15 then you will need a node package manager. You then have to run the following command in CLI: npm install --global @angular/cli@next. This command will help you install the latest version of Angular CLI on your system.
How to Upgrade to Angular 15?
The above method was to install Angular 15 if you weren't using any previous versions. But if you are using one, say Angular 13 or 14 then you have to upgrade your framework to Angular v15. You can do it using the following command: ng update @angular/cli @angular/core. Now you can use the following code if you want to update your global angular: npm i -g @angular/cli.
Conclusion
The Angular Team at Google has carefully considered the requests and feedback of the community on previous versions of the Angular framework and had done a good job of improvising upon it and bringing forth a dependable Angular version 15.
The major improvements done in the latest version were to enhance the performance of the framework and make it more stable. Surely, more improvements can be done in the future but as of now, the new Angular v15 is looking stronger than ever before.
So, if you want to develop a software application then you can surely consider the Angular framework and hire Angular developers for the same. It is going to be beneficial in the long run.