Router and multiples outlets

[Cristian Rinaldi]

I working in a new project with Angular 2 and have a single question, and I need a suggestion. 

I need a sidenav, where your content differs, according to a route (secondary router). This sidenav have your outlet named.

By example: 

    I have a principal route, "one list of person", and each time click over person, some information about person is displayed in sidenav. 

    If I define the dom structure the following way (app.component), this throw a error.

<md-sidenav-layout fullscreen>

  <md-sidenav #sidenav mode="side">

    <md-nav-list>

      <a md-list-item>

        <md-icon md-list-icon></md-icon>

        <span md-line></span>

        <span md-line class="desc"></span>

      </a>

      <a md-list-item>

        <md-icon md-list-icon></md-icon>

        <span md-line></span>

        <span md-line class="desc"></span>

      </a>

    </md-nav-list>

  </md-sidenav>

  <md-toolbar color="primary">

    <div style="flex:1">

      <button md-icon-button (click)="sidenav.toggle()">

        <md-icon>menu</md-icon>

      </button>

      <span>---</span>

    </div>

    <button md-icon-button [mdMenuTriggerFor]="account">

      <md-icon>more_vert</md-icon>

    </button>

    <md-menu #account="mdMenu">

      <button md-menu-item>

        <md-icon>settings</md-icon>

        <span>Settings</span>

      </button>

      <button md-menu-item>

        <md-icon>help</md-icon>

        <span>Help</span>

      </button>

      <button md-menu-item>

        <md-icon>logout</md-icon>

        <span>Logout</span>

      </button>

    </md-menu>

  </md-toolbar>

  <router-outlet></router-outlet>

  <md-sidenav  #sidenavInfo align="end" mode="side">

    <router-outlet name="info"></router-outlet>

  </md-sidenav>

</md-sidenav-layout>

And the router definition is:

export const ContactsAppRoutes = [
    { path: '',   redirectTo: '/planos', pathMatch: 'full' },
    { path: 'viewer/:id', component: ViewerComponent },
    { path: 'planos', component: AgendaComponent },
    { path: 'planos/:id', outlet: 'info', component: AgendaDetailsComponent }
]

I see severals examples about multiples outlets, by example:

• https://github.com/onehungrymind/ng2-named-router-outlets

I see in this project, that two "outlets" are in the same dom level, underneath the parent component, is this a restrictions?, or I can define outlets in any place of DOM structure and link this of any component whitout distintion.

When from the component: "AgendaComponent", I want to navigate to the details "AgendaDetailsComponent"

this.router.navigate (['planos', {outlets: {'info': [p.id]}}]);

The error is:

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'planos'
Error: Cannot match any routes. URL Segment: 'planos'
    at ApplyRedirects.noMatchError (http://localhost:4200/vendor.bundle.js:109231:16) [angular]
    at CatchSubscriber.selector (http://localhost:4200/vendor.bundle.js:109200:29) [angular]
    at CatchSubscriber.error (http://localhost:4200/vendor.bundle.js:55124:31) [angular]
    at MapSubscriber.Subscriber._error (http://localhost:4200/vendor.bundle.js:471:26) [angular]
    at MapSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:445:18) [angular]
    at MapSubscriber.Subscriber._error (http://localhost:4200/vendor.bundle.js:471:26) [angular]
    at MapSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:445:18) [angular]
    at MapSubscriber.Subscriber._error (http://localhost:4200/vendor.bundle.js:471:26) [angular]
    at MapSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:445:18) [angular]
    at LastSubscriber.Subscriber._error (http://localhost:4200/vendor.bundle.js:471:26) [angular]
    at LastSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:445:18) [angular]
    at MergeAllSubscriber.OuterSubscriber.notifyError (http://localhost:4200/vendor.bundle.js:850:26) [angular]
    at InnerSubscriber._error (http://localhost:4200/vendor.bundle.js:115294:21) [angular]
    at InnerSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:445:18) [angular]  

Any idea??

[林水明]

 export const ContactsAppRoutes = [
    { path: '',   redirectTo: '/planos', pathMatch: 'full' },
    { path: 'viewer/:id', component: ViewerComponent },
    { path: 'planos', component: AgendaComponent },
    { path: 'planos/:id', outlet: 'info', component: AgendaDetailsComponent }

{ path: '**', component: AgendaComponent }

]