Click here to share this article on LinkedIn »

After breaking up your app in various modules like I’ve done here, you will likely want to have a parent route with its individual children routes loading their respective components. What we’re trying to avoid is our app-routing.module.ts getting cluttered like below:

To achieve this, we first need to break our app into modules and then use a simple angular convention to match child routes to child components. The purpose of this article is to provide clear guidelines on how to achieve this. The angular.io guide for this also pretty good but I’m writing this to aid my learning of the subject, and hopefully help some other people while I’m at it. I will also try to be more concise.