A Guide To Angular 15: Everything You Need To Know

The most popular front-end framework among developers, Angular, has released a new version of it, Angular 15. The new version is focused more on gaining stability. In this blog post, we have discussed all the latest updates of Angular 15. Also, in the end, you can find a small guide to upgrading from Angular 14 to Angular 15.

On November 16, 1022, the Angular Team at Google released the new version of Angular, Angular 15, for production. It was released with the corresponding versions of Angular Framework, the Angular CLI, and the Angular Material Component system. Although the previous version of Angular had many amazing updates, Angular 15 looks like it is winning the heart of developers.

What is new in Angular 15?

Previously, Angular’s legacy compiler was removed from Angular 14, and it has considerably enhanced the developer's experience. Now, the latest Angular 15 updates brought many new updates, mainly focusing on stability and extended supportability.

The new feature of Angular 15 includes stable standalone APIs and allows the developer to develop apps without using NgModules. With the new version, developers do not have to use boilerplate code which helps them improve their performance.

Now let us dive deep into the updates of Angular 15.

Stable Standalone Component API: The standalone feature was first introduced in Angular 14. It allowed developers to develop applications without NgModules. But now in Angular 15, the standalone components API has achieved a higher degree of stability and can work in sync with HttpClient, Angular Elements, router, and more.

Also, the stability achieved in Angular 15 has allowed bootstrapping an application. To do so, we can import the bootstrap application from the platform browser. And the import function allows us to reference standalone directly into the pipes and mark component pipe and directive as standalone True.

Development of Multi-Route Application: Angular 15 has a router standalone API to develop the multi-route application. Also, Angular Bundlers got the flexibility to remove unused features at the build time. This feature results in an 11% reduction in the code file size.

Introducing Directive Composition API: In the GitHub Community, most developers were asking for the API that can help them re-use the directives for a long time. The Angular Team has fulfilled their wish and introduced the new feature that was lying on the feature request on GitHub.

The Directive Composition API increases the possibility of code re-usability. It allows developers in boosting the host elements with directives with the help of an Angular compiler.

Stable Image Directive: The NgOptimizedImage was launched in the previous version of Angular for loading image performance. But now with the latest release, the directive has achieved a stable form. An experiment conducted by Land’s End with NgOptimizedImage has observed a 75% of improvement in the image loading of the Largest Contentful Paint (LCP).

Although the previous NgOptimizedImage offered many features and functionality, Angular 15 has added new updates in the Image Directive. The updates are as follows:

Auto srcset Generation
Fill Mode(Experimental)

Auto srcset Generation: It automatically generates srcset and uploads the image of the appropriate size of an image as requested, resulting in low image download time.

Fill Mode (Experimental): The image Directive feature removes the need for declaring image dimensions and fills the image to its parent container. It is very effective and useful when you migrate the CSS background image without knowing the image dimensions.

Additionally, NgOptimizedImage can be directly used in your Angular component or NgModule. Also, you need to replace the src attribute with ngSrc while using the Angular image directive within a component.

Functional Guards: The Angular Team has reduced the boilerplate by refactoring the code by using tree-shakable standalone router APIs. The code can be refactored by reducing the bundle size of Angular with the new Functional Router Guards.

Improved Stack Traces: Debugging Angular applications has been simplified, cleaned, and straightforward with stack traces. The Angular team focused on tracing the development code more than the showing libraries it calls. Also, Angular 15 has made it possible for the error messages to use some improvements. Previously, developers used to get one-liner error messages with no detailed description, leading to a lengthy process to solve the bug. But with new updates, errors show detailed descriptions.

Stable MDC-Based Components: With the previous versions of Angular, it was a complex task to refactor component-based Angular material. But with Material Design Component for Web (MDC) it is easy to refactor. Although the old implementation of each new component has been deprecated, you can access them using legacy import.

CDK Listbox: CDK stands for Component Dev Kit. It offers different behavior primitives that help in developing UI components. Developers can customize Listbox interactions drawn up by the WAI-ARIA Listbox pattern by using a new primitive called CDK Listbox in Angular 15. The behavioral interactions include keyboard interactions, bidi layout support, and focus management.

esbuild Support: Angular 15 has experimental support for the ng build --watch support, Saas, SVG template, and file replacement. The command for upgrading the angular.json builder is:

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

Other Improvements:

Automatic Language Service Import: The components that are not added to a standalone component or an Ng Module can be imported by using a language service

Improved Angular Components: The Angular component of version 15 encapsulates a range of accessibility enhancements like effective contrast ratio, expanded touch target size, and more.

How to Upgrade to Angular v15?

To review and refactor your existing Angular build, the knowledge of support extension, cancellation, and deprecations is a must while upgrading to Angular v15.

In Angular v15 the Node.js versions like 14.20.x, 16.13.x, and 18.10.x are supported, and it has removed its support for version 14.[15-19].x and 16[10-12].x.
Update your TypeScript version, Angular v15 only supports TypeScript version 4.8 or older versions.
To make your app compatible with Angular v15, run the ng update @angular/core@15 @angular/cli@15 command in the app directory.
Now, run ng update @angular/material@15 to update Material components.
@keyframes name format has changes to “@keyframes host-my-cmp_foo { ... }” . To make your code compatible with this change, change the component’s encapsulation view to None or ShadowDom. Then define this rule in global stylesheets and your code.
The addition of an explicit constructor to the class can trigger an error.
The enable call has been removed from the tsconfig.json file. Ivy is now only a rendering engine.
It is compulsory to use analyze and hint parameters as the canParse method is removed.
RouterOutlet will only instantiate the component after the completion of change detection.
The DATE_PIPE_DEFAULT_TIMEZONE function has been replaced with DATE_PIPE_DEFAULT_OPTIONS to define the time zone.
The routerLinkWithHref directive is removed and replaced with RouterLink directive to handle elements with href attributes.
Use the following command to update Angular 14 to Angular 15:

ng update @angular/cli @angular/core

Now print the following command in CLI to update your global Angular:
npm i -g @angular/cli

To learn in deep, we suggest you go through the Angular Update Guide to ensure seamless application migration.

Winding-Up

The Angular Team at Google has done a tremendous job with the updates and not only that, they listened to the community and fixed the issues raised by developers in the GitHub community. With that, we can infer that the latest Angular version focused mainly on stability and improving the developer's experience. Now, the Angular Team is working on a server-side rendering pipeline and improvements in code re-usability to make the Angular Framework more effective.

If you are planning to use Angular for your next project or to upgrade to a new version of Angular, we are here for you.

OZVID Technologies is one of the best and leading Angular Development Companies. Our developers have helped businesses grow globally by offering clients the best Angular Services.