The router in Angular is closely coupled to our component tree. The design of the Angular router is built on the assumption that a component tree is directly related to our URL structure. This is certainly true for most of the cases. If we have a component B, which is nested within a component A, the URL to represent our location would very likely be /a/b.

To specify the location in our template where we'd like to enable the router to instantiate components, we can use so-called outlets. Simply by including a <router-outlet> element, we can mark the location in our template, where the Angular router will instantiate components.

Based on some route configuration that we can provide in our main module, the router then decides which components need to be instantiated and placed into the corresponding router outlets. Routes can also...