CODEWITHSUNDEEP
angularangular2-routing
peaceUser
peaceUser

Reputation: 457

Angular 2 (stable), route with outlet and path = non-empty, not working..!

A route with router path as below, 

{ path: 'lefttoggle', redirectTo: 'lefttoggle', pathMatch: 'full', outlet: 'lefttoggle_name'},

in Angular2 is throwing exception:

Edit:
MainCompnent.template.html

<div><a href="/lefttoggle">click to show left</a></div>
<div class="col-md-10" style="top:70;left:-1%;position:relative;">
            <router-outlet name="righttoggle_name"></router-outlet>
              <router-outlet name="lefttoggle_name"></router-outlet>
</div>

AppRoutes.ts

    { path: '', component: AppComponent },
    { path: 'lefttoggle', outlet: 'lefttoggle_name', component: LeftToggleComponent},
    { path: 'righttoggle', outlet: 'righttoggle_name', component: RightToggleComponent}

Error produced onClick:

core.umd.js:3462 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: 'lefttoggle'

Upvotes: 0

Views: 153

Answers (2)

micronyks
micronyks

Reputation: 55443

{ path: '', component: AppComponent },
{ path: 'lefttoggle', outlet: 'lefttoggle_name', component: LeftToggleComponent},
{ path: 'righttoggle', outlet: 'righttoggle_name', component: RightToggleComponent}

Change it to,

{ path: '', component: AppComponent },
{ path: '', outlet: 'lefttoggle_name', component: LeftToggleComponent},
{ path: '', outlet: 'righttoggle_name', component: RightToggleComponent}

I also assume that MainComponent.html is AppComponent's html.

Working DEMO ; https://plnkr.co/edit/inHDLkO8qbteUORfjUQl?p=preview

Upvotes: 1

Alexander Ciesielski
Alexander Ciesielski

Reputation: 10824

You have defined a redirect, but you haven't defined any route with an actual component.

Try this:

{ path: '', redirectTo: 'lefttoggle', pathMatch: 'full' }, { path: 'lefttoggle' , component: LeftToggleComponent},

When you open the app, you will be redirected from '', to 'lefttoggle'and there the actual component will load. If you don't want to be redirected from '' just remove that line.

The important factor here is to define a component to be displayed.

Edit:

I see you have added more code. Still you have defined two routes with the path: 'lefttoggle'.

How do you want the router to redirect from lefttoggle to lefttoggle? You have to define different paths.

Upvotes: 1

Related Questions