Angular 4 Router. Why "/path1/(<outlet-name>:'path2')" is a thing?

Question

Are this kind URLs “/services/55/(section:'data')” a workaround to connect named outlets and paths? I don't get why they can't simply be “/services/55/data” when having a Route with the outlet property specified like following:

{
  path: 'services/:id',
  component: ServicesComponent,
  children: [
    {
      path: 'data',
      outlet: 'section',
      component: ServicesDataComponent
    }
  ]
}

Answer 1

I'll provide an answer incase anyone else comes across this issue. To use multiple router outlets and avoid having to use the aux router syntax you have to manipulate your routing. Normally you provide routes to your aux named router-outlet like the config below.

Normal named router outlet syntax

{
  path: 'services/:id',
  component: ServicesComponent,
  children: [
    {
      path: 'data',
      outlet: 'section',
      component: ServicesDataComponent
    }
  ]
}

To navigate to the about route you would use /services/55/(section:'data'). You can avoid this by nesting child routes

1. Initial path will be your core path. In the above example services/:id.
2. You will then declare child routes on this path with all your sub paths. These sub paths will set the component attribute to your component that contains your aux named router-outlet.
3. Each sub path will then declare another set of children containing an empty path with the component to be loaded in the aux router outlet.

New router configuration without the aux router syntax

{
  path: 'services/:id',
  children: [
    {
      path: 'data',
      component: ServicesComponent,
      children: [
        {
          path: '',
          outlet: 'section',
          component: ServicesDataComponent
        }
      ]
    },
    {
      path: 'another',
      component: 'ServicesComponent',
      children: [
        {
          path: '',
          outlet: 'section',
          component: AnotherComponent
        }
      ]
    }
  ]
}

Your new route will look like /services/55/data & /services/55/another

By declaring the named aux router route with an empty path, you no longer have to deal with the aux name router outlet syntax.