3 Key Recipes to Navigate Your Angular Routes

Let’s get out of tutorial hell together

I’m going to be honest, I have a love-hate relationship with Angular. When things are working as it should, it’s fantastic. When it’s not and there’s minimum guidance or ‘harder’ resources to help you out, then it becomes super frustrating.

But then again, it’s the same for any library, framework, or strange error that good ol’ Google doesn’t have a straight answer to.

For many, Angular routing is an issue that makes you just want to quit. In part, it’s because many of the tutorials online give are just examples of how to implement basic routes and that’s it. Finding something that fits complex scenarios can suddenly become a time-consuming trial-and-error process.

Because Angular is a framework and frameworks often take time to soak in on an intrinsic mental level, the way routing is implemented, it can feel like overkill. However, after figuring it out, I think it’s actually an underrated gem.

Compared to something like React, which can be an ad-hoc patchwork of different methodologies, Angular’s set-in-stone-this-is-how-we-do-it approach makes it less painful when you’re working across multiple teams.

In Angular, you define the routes in a separate module (usually AppRoutingModule) and use the RouterModule.forRoot() method to register your routes. Routes are defined as an array of objects, with each object containing a path and the associated component. In React, routes are defined using components provided by the React Router library, like Route, Switch, and BrowserRouter. These components are used directly within your JSX code, and the route configuration is more declarative.

The pros of Angular routing (through AppRoutingModule and RouterModule.forRoot()) is that configuration is centralized and provides a consistent approach by being strongly typed. In contrast, React routing (through Route, Switch, BrowserRouter components) lacks centralization, has no built-in type checks, and can result in high occurrences of inconsistency.

Enough of my ramblings, let’s get to the point of this piece — that is, three Angular routing scenarios/recipes that cover every app-building exercise and project that I…