What’s New in Angular 15: Features & Updates

Initially launched in September 2016, Angular is a prominent open-source front-end web framework developed by Google. It is based on the TypeScript programming language and helps design and develop the part of a web application that the users can see and experience. Although it was initially supposed to be a sub-version of AngularJS, the Google developers decided to release it as a completely separate platform.

Angular is a popular JavaScript framework used for building dynamic web applications. It offers a variety of features and updates to help developers create high-performing and scalable applications. Some of the key features of Angular include its powerful template system, easy-to-use dependency injection, and comprehensive tooling support. With each new version, Angular continues to improve and add new features to make web development more efficient and effective.

The Angular team has been able to bring fantastic features with every update since 2016. But after the last update, developers worldwide were satisfied with the features and just looking for operational stability. So the team at Google delivered a new stable version, Angular 15, in November 2022, with some improved features that would help with the web application development quite effectively.

In this blog, we’ll check out the new features introduced in Angular 15 and how you can update from Angular 14 to 15.

Latest Features Of Angular 15

The latest version of Angular, a highly-popular open-source front-end web application framework, has brought some excellent features that aim to design and create the best web applications and ease the development process.

So let’s check out the latest features that would help improve every aspect of your web application development process quite comprehensively:

Standalone APIs

Although the Angular team introduced Standalone APIs with its previous version, it was on a developer’s preview basis. That helped the developers create the best web application without the Ng Modules. It turned out to be successful. So with Angular 15, the platform contributors have delivered a new stable version of standalone APIs for everyone to use. They work in sync with HttpClient, Angular Elements, router, etc., and even enable you to bootstrap an application in a single component.

Let’s see how the standalone APIs work.

import {bootstrapApplication} from ‘@angular/platform-browser’;
import {ImageGridComponent} from’./image-grid’;

With Angular 15, you can now use provideHttpClient to offer HttpClient without HttpClientModule. With Angular 15, you don’t need to declare the components, directives, and pipes into NgModule. Instead, you can just mark them as “standalone: true”.

Multi-Route Application

Thanks to the standalone APIs, you can now create multi-route applications through Angular 15.

Here’s the code to declare the root route:

export const appRoutes: Routes = [{
path: ‘lazy’,
loadChildren: () => import(‘./lazy/lazy.routes’)
.then(routes => routes.lazyRoutes)
}];

Let’s check out the code to declare lazyRoutes:

import {Routes} from ‘@angular/router’;

export const lazyRoutes: Routes = [{path: ”, component: LazyComponent}];

The developers can even register the appRoutes in the bootstrapApplication and call it through the ProvideRouter API.

bootstrapApplication(AppComponent, {
providers: [
provideRouter(appRoutes)
]
});

Moreover, this latest version of Angular lets the developers use bundlers to remove the unused features in routers during the development to bring down the bundle size by around 11%.

Directive Composition API

Directive composition API has been highly requested by developers on online forums. So the contributors have finally delivered this API to assist with the code reusability. The directives let the developers increase the host elements to ensure reusable codes for your web applications. That helps save time during application development.

@Component({
selector: ‘mat-menu’,
hostDirectives: [HasColor, {
directive: CdkMenu,
inputs: [‘cdkMenuDisabled: disabled’],
outputs: [‘cdkMenuClosed: closed’]
}]
})
class MatMenu {}

In the code shown above, the hostDirectives CdkMenu and HasColor can help make MatMenu more effective. This enhancement lets MatMenu reutilize the properties of these two directives.

Since all directives are already declared, developers can declare the Directive Composition API feature.

Stable Image Directive (NgOptimized Image)

This feature was initially launched in Angular 14 in combination with Chrome Aurora. In an experiment conducted by Land’s End, the developers found the Largest Contentful Paint or LCP improved by around 75%.

Now, in Angular 15, you can upload and size the image properly through the automatically generated SRC set, which would help bring down the download time of the images. Then, there’s Fill mode, an experimental feature that ensures you won’t need to declare the image dimensions and won’t have to worry about filling the image to its parent container. If you are migrating the CSS background image for this directive, this feature would be of great benefit.

You can use the Ngoptimizedimage directive like such:

import { NgOptimizedImage } from ‘@angular/common’;

// … or a standalone Component
@Component({
standalone: true
imports: [NgOptimizedImage],
})
class MyStandaloneComponent {}

Functional Router Guards

The Angular contributors used tree-shakable standalone router APIs to refactor the code and reduce the boilerplate. After that, the functional router guards helped reduce the bundle size of Angular.

@Injectable({ providedIn: ‘root’ })
export class MyGuardWithDependency implements CanActivate {
constructor(private loginService: LoginService) {}

const route = {
path: ‘somePath’,
canActivate: [MyGuardWithDependency]
};

This code shows LoginService contains the main logic, wherein the guard–only isLoggedIn () is invoked. Although having such a clear structure, this code segment has many boilerplates, which must be reduced.

Through the necessary boilerplates, Functional Router Guards help this code be refactored as such.

const route = {
path: ‘admin’,
canActivate: [() => inject(LoginService).isLoggedIn()]
};

Functional Guards are compostable, so you can create factor-like functions in a preset configuration and return a guard or function that could help resolve a matter.

Router Unwraps Default Imports

The latest update in the Angular framework has made the router even simpler and reduced the boilerplate further. Moreover, the router now uses lazy loading to auto-unwrap the default exports, which helps reduce the code even further.

Suppose you have the following LazyComponent:

@Component({
standalone: true,
template: ‘…’
})
export default class LazyComponent { … }

{
path: ‘lazy’,
loadComponent: () => import(‘./lazy-file’),
}

Better Stack Traces

Angular contributors saw the code debugging struggles of developers and introduced this feature in the latest version. So when you compare this iteration of Angular with the older versions, you can trace the code quite effortlessly and identify the issues in case of any errors.

Stable MDC-Based Components

Till Angular 14, developers used to find it quite complex to refactor the component-based Angular material. But now, Angular 15 has MDC (Material Design Component for Web), which makes it relatively easier to refactor the Angular material.

Other than these new features, the Angular team has introduced certain already-existing features with much-needed improvements. Let’s check them out.

CDK (Component Dev Kit) Listbox

Component Dev Kit provides various behavior components and plays a role in building user interface elements. In Angular 15, the platform contributors introduced the Component Dev Kit Listbox, which facilitates the customization of Listbox interactions according to the WAI-ARIA Listbox pattern as needed by the developers.

Automatic Language Service Import

Now, with Angular 15, you can import components used in the template that have not been added to a standalone component or Ng Module through the language service.

Extended esbuild Support

Angular 14 brought the esbuilt experimental support to simplify the pipeline and ensure a faster build time. Now in Angular 15, you can save it as a file replacement, SVG template, and even ngbuild -watch support.

These new features and improvements in the older ones have made Angular one of the most highly-regarded front-end platforms.

How To Upgrade From Angular 14 to Angular 15?

Here are the instructions to follow when upgrading the Angular 14 to Angular 15:

# For Angular 15, update Node.js to either 14.20.x, 16.13.x, or 18.10.x.

# Update TypeScript to version 4.8 or higher before upgrading to Angular 15.

# Run ng update @angular/core@15 @angular/cli@15 in the application project directory to update to Angular 15.

# Then, to upgrade the material components, Run ng update @angular/material@15.

# For Angular 15, the compiler uses the component’s scope in the prefix of the @keyframes in CSS. That’s why the TypeScript codes that rely on the keyframes names won’t function in Angular 15. It would be best to use global stylesheets to update these kinds of instances to Define Keyframes programmatically or change the view encapsulation of the component.

# In the tsconfig.json file, remove enableIvy, the only rendering engine in Angular 15; so it’s unnecessary.

# Use decorators in base classes with child classes that inherit constructors and use DI. That kind of base classes should be cited with either @Injectable or @Directive; otherwise, the compiler may show errors.

# In version 15 of Angular, the setDisabledState is called when a ControlValueAccessor is attached. To stave off the same behavior, use ReactiveFormsModule.withConfig or FormsModule.withConfig.

# Make sure there is a title property in all ActivatedRouteSnapshot objects. In Angular 15, the title property is a required property of ActivatedRouteSnapshot.

# In Angular 15, relativeLinkResolution is not configurable in the router. It was used to opt out of an earlier bug fix that is now standard.

# To use DATE_PIPE_DEFAULT_OPTIONS for time zone configuration, change the instances of the DATE_PIPE_DEFAULT_TIMEZONE token. In Angular 15, the DATE_PIPE_DEFAULT_TIMEZONE token is deprecated.

# There might be some existing < iframe > instances with security-sensitive attributes as an attribute or property binding. These attributes may occur in a template or a directive’s host bindings. Such occurrences warrant an update to make sure the platform complies with the new and much stricter rules regarding < iframe > bindings.

# To use an InjectOptions parameter, ensure you update the instances of Injector.get() that use an InjectFlags parameter. The InjectFlags parameter of Injector.get() is deprecated in Angular 15.

# Update instances of TestBed.inject() that use an InjectFlags parameter to use an InjectOptions parameter. The InjectFlags parameter of TestBed.inject() is deprecated in Angular 15.

# Using providedIn: ngModule for an @Injectable and InjectionToken is deprecated in Angular 15.

# Using providedIn: ‘any’ for an @Injectable or InjectionToken is deprecated in v15.

# Update instances of the RouterLinkWithHrefdirective to use the RouterLink directive. The RouterLinkWithHref directive is deprecated in version 15.

# In Angular material of version 15, many of the components have been refactored to be based on the official MDC or Material Design Component, affecting several components’ DOM and CSS classes.

# After you have updated Angular to its latest version, check your web application and its interactions thoroughly to ensure the features and everything else is working as intended.

Conclusion

Angular 15 brought a host of new features and improved a lot of older ones. But above all, through Standalone APIs, Multi-Route Applications, Directive Composition APIs, Better Stack Traces, Stable Image directives, Functional Router Guards, etc., it provided the developers with much-needed stability in application development.

When you look at the comparison between Angular 11, 12, 13, and 14 with the latest version, the Angular Framework team has primarily focused on the development experience and application development. These features have definitely been the right step in achieving their aim to help the developers and design and create the best high-quality web applications possible. That’s why, despite just being launched a few months back, Angular 15 is already a revelation in the web development space.

So if you are looking for a well-performing web application, hire Angular developers. But suppose you are more inclined to or prefer JavaScript frameworks. In that case, there are several Angular JS frameworks, like Mobile Angular UI, Ionic, LumX, Angular Material, Angular UI Bootstrap, etc., that you can use to create the best web applications possible.