Photo by Clay Banks on Unsplash
Angular 14 brought us a lot of amazing features. Functional route guards are one of my favorite new features. Instead of creating a class that extends a particular interface, you could write a simple function that returns true or false. This opened up a lot of new opportunities for route guards.
One of my favorite route guards is the canMatch guard. canMatch is effectively a replacement for canLoad and canActivate. Pop quiz: What is the difference between canLoad and canActivate, and when should you use them? Yeah… I’m not 100% sure, either.
canMatch is simple. It says whether or not a route matches the current URL. Angular matches the routes in a Routes array from top to bottom. This means that if we want to have the same route go to different places we can. For example, let’s say we have the following routes:
https://medium.com/media/9483fa50795f0480ac5b83ba5f0a1d7d/href
In this example, we have a function d100() that returns a random number between 1 and 100 inclusively. Notice that every path matches the same path ’’. When Angular tries to match the first path, it calls d100() and gets a value. If that value is less than 20, this path matches, and we lazy load the AComponent. If the value exceeds 20, this path doesn’t match, and we move on to the next route. Angular again calls d100() and gets a new value. If this value is less than 50, then the BComponent loads. Otherwise, it moves on to the following route.
This pattern continues until the last path that doesn’t have a canMatch on it. This path will always match ’’. This is the key to our strategy. The last path should always match. This way, we can handle every possibility. We can load different components based on how canMatch resolves.
“What is the benefit of this strategy?” you might ask. There are a lot of reasons to set paths like this. For example, let’s say you have a service that tells you if someone is an admin, authorized user or unauthorized. With this strategy, we can use canMatch for admin to show the AdminViewComponent. We can use canMatch for authorized users to show the LoggedInViewComponent. Finally, we can use the default path (without canMatch) to show the GuestViewComponent.
Another use for this strategy is AB Testing. In the example above, we can consider this simple AB Testing. But, of course, you can be much more complicated if you wish.
Finally, you can use this strategy with feature flags. For example, you can put feature flags on your routes to show one component if the user has the flag set and another if they don’t.
Using canMatch, we can reliably and predictably control the order in which our routes match. This allows us to set up complicated scenarios in an easy-to-use manner. Can you think of other scenarios where this strategy might work?
Join us at ng-conf 2023!
ng-conf | June 14–15, 2023
Workshops | June 12–13, 2023
Location | Salt Lake City, UT
ng-conf 2023 is a two-day single track conference focused on building the Angular community. Come be a part of this amazing event, meet the Angular Team and the biggest names in the community. Learn the latest in Angular, build your network, and grow your skills.
Why You Should Use canMatch in Your Routes was originally published in ngconf on Medium, where people are continuing the conversation by highlighting and responding to this story.