Angular 15 Update – Features, Trends & More Details

Table Of Contents

Introduction What’s New – Updates &  Features Unique API (Out of Developer, Graduated Previews) Unique API Multi-Route Application Permission Directive Composition API NgOptimized Image Now Stabilized Router Guards Default Imports From Unwrapped Routers Better Traces Of Stacks Stabilized MDC-Based Components CDK Listbox Automatic Import Of Language Service Extended Support for Esbuild Here’s How You Can Upgrade To Angular 15 From Angular 14 Conclusion

Recently, Google announced the release of Angular 15 on 16^th November 2022. The entire angular developer team has instilled various features as well as updates in the latest version for delivering an enhanced developer performance and experience. Although, with the Angular version 14, the team has been able to bring many exciting additions & edits, but with the latest version, the updates have been increasingly started to grab the attention of tech enthusiasts, entrepreneurs and of course, the developers for convenient angular development.

What’s New – Updates & Features

When Angular 14 was released, the angular development team officially said that the removal of the legacy compiler alongside significantly rendering the pipeline immensely improved the developer experience. Also, similarly, the latest version’s features include a unique of Standalone APIs that enable the developers construct apps without any NgModules. This offers directive compositions of the APIs, better performance, less boilerplate codes and many more features and updates for the developers for heightened performance.

Keep scrolling below to discuss the details of Angular 15 Updates & Features that have swooned the developers worldwide.

Unique API (Out of Developer, Graduated Previews)

• The Angular team of developers had introduced unique or Standalone API with its previous version where the worldwide developers could build app without the use of NgModules. With Angular 15, the feature has updated to a more stable format from Developer preview.
• The developing team assured that the standalone APIs were ready and ideal for graduating and working across the Angular. Now, with the latest version, they are fully enable to work with the angular elements, client routers and many others.
• The Angular 15’s standalone components allow to work in sync with HTTP using Angular elements, client routers and many more.
• As Angular 15 is more stable, it enables bootstrapping application with a single component. For doing it, the developers can bootstrap the application directly from the platform browser & making it over to component. Also, other than using the import function, Angular 15 enables the developers to reference the standalone straightly into pipes, hence marking directive and component pipe as standalone true.

Unique API Multi-Route Application Permission

• Angular Software Developer can now build a multi-route application for using the new router of standalone APIs
• Bundlers also can reduce the size by 11% through the removal of unused features of the router during build time

Directive Composition API

• Under the component, all directives get declared and hence, the Directive Composition feature of the API is greatly implemented.
• The feature assists it or allows for reusability of code.
• This allows the developers for increasing host elements along with the directives and then build the Angular application through usage of code reusability feature that contributes for effective management of time in the process of development.
• With Angular compiler by side, the directive composition API, perfectly works with Standalone directive.
• Under the component, all directives are declared and hence, the Directive Composition API gets implemented.

NgOptimized Image Now Stabilized

• The NgOptimized Image Directive was released with the previous Angular version collaboration with the Chrome Aurora in the version 14.2
• The feature was experimented with by the Land’s End in a lab test. Which experienced around 75% enhancement in the Largest Contentful Paint
• Image Directive in the Angular 15 comprises of Experimental Fill Mode committed to removes the very need of declaring image dimensions as well as filling image for its parent container. It is extremely beneficial during the migration of CSS background image for using in this directive.

With the use of this image directive, the developers can also use NgOptimized image directive in the either in Angular component or in Ng module:

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

// Include it into the necessary NgModule

@NgModule({

  imports: [NgOptimizedImage],

})

class AppModule {}

// ... or a standalone Component

@Component({

  standalone: true

  imports: [NgOptimizedImage],

})

class MyStandaloneComponent {}

Source

Router Guards

Using the potent and strong tree-shakable router APIs, the team of Angular Developers had worked on to reduce the boilerplate through refactoring code and thereby reducing the Angular’s bundle size with new functional Router Guards which refactors the code.

Default Imports From Unwrapped Routers

This features makes the router simpler and further reduces the boilerplate. The router with this update now automatically unwraps the default exports along with lazy loading that contributes further to code reduction.

Better Traces Of Stacks

Now that the developers can trace the code effectively and efficiently with the use of Stack Trace, this feature plays a significant role in contributing where there occurs any error. This feature was brought upon by looking at debugging struggles of developers.

Stabilized MDC-Based Components

• Until the previous version, it was critical for the developers to refactor component-dependent Angular material but with this feature in new 15^th version it is easily possible.
• Among the Angular 15 features, the previous implementation of every new component is disapproved of but it is still there from the legacy report.

CDK Listbox

CDK Listbox delivers various kind of behavior primitives and creates many UI components. In the latest rolled out version of Angular, this new primitive is known as CDK Listbox that helps in customization of interactions drawn by WAI-ARIA Listbox whose pattern is based on requirements.

Automatic Import Of Language Service

This language service now imports the components that are needed or that are used in templates but they have not been yet added to the NgModule or Standalone component.

Extended Support for Esbuild

• The Esbuild support (experimental) was announced back with Angular 14 in the NG build for enabling pipeline simplification and faster build time.
• With the new Angular 15 version, this step is done with save as SVG template and file replacement and NgBuild watch support in the new version.

Here’s How You Can Upgrade To Angular 15 From Angular 14

• You have to update the Node.js versions to either f 18.10.x; 16.13.x or 14.20.x
• Updating the TypeScript version to 4.8 or later before updating to Angular version 15
• Run an NG update @angulr/core@15 @angular/cli@15 in directory of application project for updating your application to the 15^th version of Angular
• Updating Material components run with @angular/material@15
• For Angular 15 version, the Angular compiler prefixes @keyframes in CSS along with the component’s scope. In this way, the TypeScript codes that rely on the keyframe names will stop functioning in the new version. Update such instances for defining keyframes through programming by using stylesheets and changing encapsulation of the component’s view.
• Remove enableIvy in the tsconfig.json file as it stands tall as the only rendering engine in Angular15.
• With child classes, use the decorators in base classes that will inherit the constructors and also use DI. Such base classes are to be decorated with either @Directive or @Injectable, or else the compiler will keep showing error.
• In the 15^th version of Angular, when ControlValueAssessor is attached, it is called setDisabledState. To avert the continuous usage of the same behavior, you should use FormsModule.withConfig or ReactiveFormsModule.withConfig.
• Ensuring that all ActivatedRouteSnapshot object do have a title property. In the latest version, this title property is a compulsory property for ActivatedRouteSnapshot
• Change instances of DATE_PIPE_DEFAULT_TIMEZONE to ken for using DATE_PIPE_DEFAULT_OPTIONS for configuring the timezone.
• The existing <iframe> instances may have attributes that are security sensitive, applied to them as property binding or an attribute. These security-sensitive attributes need an update for ensuring compliance with new stringent rules about the <iframe> bindings.
• Update the instances of Injector.get() that uses InjectFlags parameter for using InjectOptions parameter.
• Updates the instances of TestBed.inject() that uses an InjectFlags parameter for using an InjectOptions parameter.
• Update the instances of TetBed.inject() that use InjectFlags parameter for using InjectOptions parameter.
• Use providedIn: ngModule for @Injectable and InjectionToken is not accepted in version 15
• Use providedIn: ‘any’ for an @Injectable or InjectionToken disapproved in version 15
• Update the instances of RouterLinkWithHrefDirective for using the RouterLink Directive.
• Angular Material 15 has various components that are refactored for being based on official MDC affecting the CSS and DOM classes of many components.
• After updating the application in Angular 15, review your application visually and also view the interactions for ensuring smooth functioning of every feature and application.

Signing Off…

The Angular 15 version is an amazing update that is built by the team after significantly considering the requests and inputs of the developers worldwide. SBR Technologies concludes here by saying that this latest version the updates and features concentrate mainly on the stability factor and how the developers can experience a heightened performance. Of course there will a lot more to come along in future, features-wise, and we will be able to see various new improvements along the line.