ERROR: router cannot match any routes in child component named router-outlet

[denisyilmaz]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
I have a module with two router-outlets. The main outlet and one named 'side_menu'.
In the module I have following routes:

RouterModule.forChild([{
  path: ':lang',
  component: PageComponent,
  children:  [{
      path: '',
      component: MainComponent
  },{
      path: 'imprint',
      children: [{
        path: '',
        component: MainComponent
      },{
        path: '', // THIS ONE WORKS ( example.com/en/imprint)
        component: SideMenuComponent,
        outlet: 'side_menu'
      }]
  },{
      path: ':any',
      component: MainComponent
  },{
      path: 'imprint', // THIS ONE DOENST WORK ( example.com/en/anypage(side_menu:imprint) )
      outlet: 'side_menu',
      component: SideMenuComponent
  }]
}])

when navigating to example.com/en/imprint the app correctly activates PageComponent with MainComponent in the router-outlet and SideMenuComponent in the "side_menu" router-outlet.
But: when I navigate for example toexample.com/en/anypage(side_menu:imprint) I get Error: Cannot match any routes. URL Segment: 'imprint'

Expected behavior
That I can show the "side_menu" router-outlet no matter which other views are currently active.

Minimal reproduction of the problem with instructions
http://plnkr.co/edit/e8lUPmvni1LgWCKilz6t?p=preview

What is the motivation / use case for changing the behavior?
having an overlay that can be displayed and hidden based on params and without changing the current visible main view

Please tell us about your environment:
macOS Sierra, Visual Studio Code, Safari, Chrome

• Angular version: 4.0.0-rc.1
  Angular Quickstart Master Seed updated to @angular ">=4.0.0-beta <5.0.0" and typescript "~2.1.0"

• Browser:
  tested in Chrome & Safari

[denisyilmaz]

any updates or suggestions? can't figure it out how to get this to work. or is this by design?

[miguelnavarro89]

same for me, not working.

[southeastcon2017]

@denisyilmaz Hi, not sure if this is the same issue, but might be worth a look, just in case.

https://stackoverflow.com/questions/44741936/angular-4-multiple-named-router-outlets-in-a-child-route-supported/44742481

The routerlink syntax wasn't behaving as I had initially expected.

[denisyilmaz]

actually changing the router-link to adding the /en in

<a [routerLink]="[ -->'/en', <-- {outlets: {side_menu: ['imprint']}}]" title="show Sidemenu in named router-outlet">Show Sidemenu</a>

get the auxiliary route to work.

but I don't understand why this would be necessary?

as the router-link is already in the active component (PageComponent) and showing the correct path /en(site_menu:imprint) (which will throw the error) i would guess it should work.
changing like mentioned above the link is then /en/(site_menu:imprint) (and works)…

--> shouldn't both solutions work?

[southeastcon2017]

i would have thought so. which is why I created that stackoverflow question. documentation isn't very great for angular's secondary routing. i did pick up Victor Savkin's (the creator of the angular router) book "Angular Router", hopefully that helps.

[jasonaden]

Closing as resolved.

[jlberrocal]

well it was not resolved it just have a workaround currently i'm facing a similar behavior, mi problem is that my routes are more dynamic so i can't just write my current route + the inner outlet

[dgroh]

not resolved...there should be a way to have a fallback for not found outlets.

[jlberrocal]

most probably this will only fails when using lazy loading, because router is not determining exactly where it's at the moment, however i was able to continue after using the property relativeTo, to the current route (ActivatedRoute), as i wrote before, my problem was that where i was planning to use the second router i have a dinamic param which will not allow me to set the route manually as @denisyilmaz did in his comment, after several expended hours this was the only workaround i found, not sure if will possible to make a fix for this, but seems to be more complicated than what i thought at the beggining

[dgroh]

It's also gonna fail if you have multiple angular applications on a single app. Which was my case.
Nevertheless I could solve this without using named outlets.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}