3 Key Recipes to Navigate Your Angular Routes

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 <code>AppRoutingModule</code>) and use the <code>RouterModule.forRoot()</code> 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 <code>Route</code>, <code>Switch</code>, and <code>BrowserRouter</code>. These components are used directly within your JSX code, and the route configuration is more declarative. <a href="https://medium.com/better-programming/3-key-recipes-to-navigate-your-angular-routes-c04528b8a38">Read More</a>