What’s new in Angular 15.1?

Angular evolves steadily, with major versions every six months, minor versions every month, and weekly patch versions as needed.

The first minor version since Angular 15 was released a few days ago. While it is a minor version, there are still a few noteworthy updates to mention.

Self-closing tags

This might not be a big deal, yet developers who like writing more concise code will be pleased to learn that Angular 15.1 now supports self-closing tags.

This means that what we had to do before when using a component:

<my-component></my-component>

Can now be replaced with the following:

<my-component />

Simple change yet an improvement for the developer experience.

CanMatch guard

This addition is interesting as it can change how you configure your routes. Let’s consider the following example:

const routes: Route[] = [{
  path: '/user',
  canMatch: [() => inject(LoginService).isLoggedIn()],
  loadChildren: () => import('./user-page/user-details.module')
}];

CanMatch will be called whenever /user is accessed, which can prevent the lazy loading of the specified module.

This is something that the CanLoad guard was already doing, but the catch with CanLoad is that it wouldn’t be called ever again after the code was loaded, which means we needed to add a CanActivate guard on top of it, as illustrated here:

const routes: Route[] = [{
  path: '/user',
  canLoad: [() => inject(LoginService).isLoggedIn()],
  canActivate: [() => inject(LoginService).isLoggedIn()],
  loadChildren: () => import('./user-page/user-details.moudule')
}];

CanMatch fixes that behavior as it works like a combination of CanLoad + CanActivate.

Another interesting behavior of CanMatch is that if it returns false for a given route, another path of the same name can still be matched, which removes the need for redirects in our guards.

Here is an example:

const routes: Route[] = [
  {
    path: '/user',
    canMatch: [() => inject(LoginService).isAdmin()],
    loadComponent: () => import('./admin-page/admin-details.component')
  },
  {
    path: '/user',
    canMatch: [() => inject(LoginService).isLoggedIn()],
    loadComponent: () => import('./user-page/user-details.component')
  }
]

As you can see, both routes are configured for the /user path, but if the user is an admin user, they’ll land on an AdminDetails component, and if they’re a regular user, they’ll land on a UserDetails component.

CanLoad is now officially deprecated in favor of CanMatch.

As a side note, these examples use function guards and lazy-loading of standalone components, two recent additions to the framework since Angular 14.

The full release notes are available for more details about Angular 15.1.

My name is Alain Chautard. I am a Google Developer Expert in Angular, as well as a consultant and trainer at Angular Training where I help web development teams learn and become comfortable with Angular.

If you need any help with web development, feel free to get in touch!

If you enjoyed this article, please clap for it or share it. Your help is always appreciated. You can also subscribe to my articles here, and subscribe to my Daily Angular Newsletter to receive useful daily tips.