I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support request here, instead see https://g...

At the core of the Angular router lies a powerful URL matching engine, which transforms URLs and converts them into router states.



In this article I will show how to use three of the engine’s features: empty-path routes, componentless routes, and redirects. And how using them together, we can implement advanced patterns in just a few lines of code.







Empty-Path Routes



Let’s start with this configuration.



[
{
path: 'team/:id',
component: TeamComponent,
children: [
{
path: 'users',
component: AllUsersComponent
},
{
path: 'user/:name',
component: UserComponent
}
]
}
]




When navigating to ’/team/11/user/bob’, the router will instantiate the team component with the user component in it. And when navigating to ’/team/11/users’, the router will show the list of all users. This configuration works. But a more common way of doing this would be to render the list when navigating to /team/11. That’s what empty-path routes are…