Finally! The updated version of Angular V15 is here. Angular developers can create apps without NgModules, thanks to Angular 15’s stable standalone APIs.

Now, angular development has become much better than ever before. Less boilerplate code, improved performance, directive composition API, and other upgrades are also included in the most recent version of Angular, version 15.

On November 16, the most recent version of Angular 15, which features solid independent APIs, was formally released.

When Angular 14 was published, it was the most well-known version and was developed using TypeScript. Additionally, the Angular 14 version supports the most recent TypeScript 4.7 release.

Over the past few years, the removal of Angular’s outdated compiler and renderer pipeline has made it possible to deploy developer’s experience improvements in recent months.

The most recent version of Angular, version 15, delivers improved performance and a better development experience as a result of all the numerous improvements. There is much more than Angular V15 has brought to the plate. Let’s discover the latest angular v15 features in this blog.

What’s New in Angular 15?

Every six months, Angular releases a new version, and now Angular v15 has entered the developer community. One of the experienced Angular developers who has experimented with Angular 15 concluded that –

“Angular v15 is a tiny set of incremental updates that target Angular framework bottlenecks and developer pain spots. In all honesty, this upgrade is among the most significant and intriguing updates I have encountered in the past two years.”

A single component works in Angular Elements, router, HttpClient, and other places with Angular 15. Talking about the ‘Standalone components,’ they streamline the development process and serve as an amazing alternative to NgModules.

5 Latest Features of Angular V15: Discover What’s New!

1. API for Stable Stand-Alone Components

In Angular 14, the standalone components API was added to allow developers to create Angular applications without defining the NgModules. After careful analysis and modifications, the standalone components API in Angular 15 finally reached its level of stability.

Also, the Angular developer community discovered that independent components might function in unison with Angular Elements, HttpClient, and other components. To bootstrap, an application in a single component, use the following standalone API.

  import {bootstrapApplication} from '@angular/platform-browser';
  import {ImageGridComponent} from'./image-grid';
  <@Component({
  standalone: true,
  selector: 'photo-gallery',
  imports: [ImageGridComponent],
  template: `
    … 
  `,
  })
  export class PhotoGalleryComponent {
    // component logic
  }>
  bootstrapApplication(PhotoGalleryComponent);

While using the ‘imports’ function, you can even reference standalone directives and pipes.

2. Enable Multi-Route Application Enablement

For the purpose of creating multi-route applications, Angular 15 includes a standalone router API. The root route can be declared using the following code –

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

To declare lazy routes, use the following code –

 import {Routes} from '@angular/router';

import {LazyComponent} from './lazy.component';

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

The ProvideRouter API is used to call the appRoutes that are registered in the bootstrap application method!

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

3. API for Directive Composition

Today, code reuse has reached a whole new level, thanks to the directive composition API! The most well-liked feature request on GitHub serves as an inspiration for this feature.

Now, developers can use the directive composition API to add directives to host components. It gives Angular a powerful code reuse technique that is made possible by the compiler. Only the solitary directives are compatible with the API.

For Example –

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

With the exception of the fact that we have a mechanism for resolving name conflicts, this strategy may remind you of multiple inheritance or traits in programming languages.

4. Functional Router Guards

The Guards are basically the services implementing interfaces like CanActivate. It works as standalone component. Let’s have a look at how to define a guard that checks to see if the user is logged in or not.

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

  canActivate() {
    return this.loginService.isLoggedIn();
  }
}

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

Here, the majority of the logic is implemented by LoginService, and we simply use isLoggedIn in the guard (). With the newly installed and operational router guards, you can condense this code to:

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

5. Advancements to Stack Traces for Debugging

As per the survey conducted, one of the major problems developers face is the improvements in stack traces. The core Angular team dig deeper into the issues with debugging experience for this reason.

Because of this, Angular 15 now provides more explicable stack failures. Instead of presenting issues from third-party dependencies, the version now displays error messages.

To address this problem, the team has collaborated with Chrome DevTools. The following is the example showcasing an example stack trace from an Angular project.

    ERROR Error: Uncaught (in promise): Error
Error
at app.component.ts:18:11
at Generator.next ()
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 community was able to incorporate those third-party dependencies and create linked stack traces as a result of extensive collaboration with the Angular and Chrome DevTool teams.

Here are the improved stack traces.

    ERROR Error: Uncaught (in promise): Error
Error
at app.component.ts:18:11
at Generator.next ()
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

Closing Thoughts!

As you can see, Angular V15 was released with exclusive features, and the standalone APIs promise a bright future. According to the roadmap, the CLI will be improved so that standalone applications devoid of modules can be generated.

Additionally, it mentions some initiatives on the server-side rendering story, a weakness of Angular, and the option to use Angular independently of zone.js.

Businesses with angular-based business applications can think of developing a successful app while using these latest Angular V15 features best.