Angular Router

One redirect at a time

You can set up redirects at different levels of your router configuration. Let's modify the preceding example to illustrate this:

[
  {
    path: 'legacy/:folder/:id',
    redirectTo: ':folder/:id'
  },
  {
    path: ':folder/:id',
    component: ConversationCmp,
    children: [
      {
        path: 'legacy/messages/:id',
        redirectTo: 'messages/:id'
      },
      {
        path: 'messages/:id',
        component: MessageCmp
      }
    ]
  }
]

When navigating to /legacy/inbox/33/legacy/messages/44, the router will first apply the outer redirect, transforming the URL to /inbox/33/legacy/messages/44. After that the router will start processing the children of the second route and will apply the inner redirect, resulting in this URL: /inbox/33/messages/44.

One constraint the router imposes is at any level ...