Router utility functions in Angular 14+

This post illustrates some new router utility functions available in developer preview since Angular v14.

You’re probably familiar with the syntax:

imports: [
   RouterModule.forRoot([
    {path: 'crisis-list', component: CrisisListComponent},
    {path: 'heroes-list', component: HeroesListComponent},
   ])
]

We can now replace that syntax with:

providers: [
   provideRouter([
    {path: 'crisis-list', component: CrisisListComponent},
    {path: 'heroes-list', component: HeroesListComponent},
   ])
]

If you’re wondering “why” the Angular team added those functions to the framework now, the short answer is that it all comes down to the main addition to the Angular framework in Angular 14: standalone components. Standalone components can work without any module, and so can the router thanks to these new functions.

Why use that new syntax?

This functional approach is a lot more than just syntactic sugar. When we use router functions, we’re not loading the RouterModule, which means that we’re enabling improved tree-shaking of our code. As a result, only the router features we need are included in our app, and nothing else.

You can find the official explanation from the Angular team here, which reports an 11% bundle size improvement of the router code when using these new functions.

How to enable extra router configuration with those functions?

There are other functions available specifically for that purpose. For instance:

providers: [
    provideRouter(appRoutes, withPreloading(PreloadAllModules))
  ]

Other functions available are: withDebugTracing, withDisabledInitialNavigation, withEnabledBlockingInitialNavigation, withInMemoryScrolling, and withRouterConfig.

You can find the complete list of such router utility functions here.

What about guards?

Guards can also be improved using functions instead of classes.

For instance, the following syntax works with Angular 14+. One line of code to inject a service, call a method, and return its result:

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

And if that’s not impressive enough, we can even access the context of the current component to disable navigation using the following syntax — no service needed:

const route = {
  path: ‘edit’,
  component: EditCmp,
  canDeactivate: [
    (component: EditCmp) => component.hasSavedChanges
  ]
};

These features are available in Angular v14.2+. Note that they are in developer preview, which means that the API might change a little bit in the future, especially the names and the parameters of these functions, but the underlying features will remain the same.

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 Medium here.