CODEWITHSUNDEEP
angularnavigationrouterrouter-outlet
Erik R
Erik R

Reputation: 201

Angular: routing to an auxiliary routes with route children

In my app want to have a default route to my child route, that if given experiments/1 the router would route to experiments/1(browsePanel:overview)

I have currently have been using this site as my reference and it has an example almost identical to what I want to achieve, here is their code:

{
    path: 'team/:id',
    children: [
      { path: '', pathMatch: 'full', redirectTo: 'list' },
      { path: 'list', component: TeamListComponent,
        children: [
       { path: '', pathMatch: 'full', redirectTo: 'default' },
       { path: 'default', component: DefaultComponent }
        ]
      },
      { path: '', pathMatch: 'full', redirectTo: 'details' outlet: 'aux' }
    ]
  }

Their code is more complex than what I am trying to do, but for some reason I get this error:"Invalid configuration of route 'experiments/:id/': a componentless route cannot have a named outlet set"

Here is my code: 

 { path: "experiments/:id", component: BrowseExperimentsComponent , children:[
        {path: '', redirectTo: 'overview', pathMatch: 'full', outlet:'browsePanel'},
        {path:'overview',component: BrowseOverviewComponent, outlet: 'browsePanel', resolve:{project:ProjectResolverService}},
        {path:':id', component: ExperimentDetail, outlet: 'browsePanel',resolve: {experiment: ExperimentResolverService}}]
},

Assuming their code is functional and a good approach I don't understand why I get this error for having a outlet in a componentless route. I did remove the "outlet:'browsePanel'" and made the error go away, but it won't route to the child when providing "experiments/1"

If I can't put the outlet in my redirect path, how do I route to an auxiliary route? Thanks

UPDATE

After using @Davide Perozzi approach it fixed redirecting to an outlet for the route, experiments without an id. 

{ path: "experiments/:idLab", component: BrowseExperimentsComponent , children:[ // for navigating via url
        {path: '', pathMatch: 'full', redirectTo: '/experiments/:idLab/(browsePanel:overview)' },
        {path:'overview',component: BrowseOverviewComponent, outlet: 'browsePanel', resolve:{project:ProjectResolverService}},
        {path:':id', component: ExperimentDetail, outlet: 'browsePanel',resolve: {experiment: ExperimentResolverService}}],
        canActivate: [SubRouteGuardService]
    },
    { path: "experiments", component: BrowseExperimentsComponent , children:[ 
        {path: '', pathMatch: 'full', redirectTo: '/experiments/(browsePanel:overview)' },
        {path:'overview',component: BrowseOverviewComponent, outlet: 'browsePanel', resolve:{project:ProjectResolverService}},
        {path:':id', component: ExperimentDetail, outlet: 'browsePanel',resolve: {experiment: ExperimentResolverService}}],
        canActivate: [SubRouteGuardService]
    }

The issues is with the route 'experiments/:idLab'. It doesn't appear to recognize the id correctly and if I navigate to the url like this "/experiments/1" it results in this exception:

Uncaught (in promise): Error: Cannot redirect to '/experiments/:id/(browsePanel:overview)'. Cannot find ':idLab'. Error: Cannot redirect to '/experiments/:idLab/(browsePanel:overview)'. Cannot find ':idLab'

When I navigate to the full like 'experiments/1/(browsePanel:23)' the route resolves to the correct outlet and component are loaded, but I get this exception: 

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'experiments'
Error: Cannot match any routes. URL Segment: 'experiments'

The the two exceptions are I am sure occurring for the same reason, the parent route with an id can't be matched.

I am having a hard time seeing what is wrong with what I am doing with the route with an id though.

Upvotes: 3

Views: 2288

Answers (1)

Davide Perozzi
Davide Perozzi

Reputation: 386

I had the same problem. I got it working by changing the redirectTo property to the absolute path of the child route, like this (Angular 5.2.5): 

{ 
    path: "experiments/:id", 
    component: BrowseExperimentsComponent, 
    children: [
        {path: '', pathMatch: 'full', redirectTo: '/experiments/:id/(browsePanel:overview)'},
        {path: 'overview', component: BrowseOverviewComponent, outlet: 'browsePanel', resolve:{project:ProjectResolverService}},
        {path:':id', component: ExperimentDetail, outlet: 'browsePanel', resolve: {experiment: ExperimentResolverService}}
    ]
},

I hope this helps you :)

Upvotes: 2

Related Questions