Named router-outlet remains empty

Question

I have a question regarding a second (named) router-outlet. When clicking on the link the router-outlet doesn't show the component.

This is what my Routes looks like:

const appRoutes: Routes = [
  { path: '', redirectTo: '/projects', pathMatch: 'full' },
  {
    path: 'projects', children: [
      { path: '', component: ProjectsComponent },
      { path: ':projectId', children: [
          { path: '', component: ProjectDetailsComponent },
          { path: 'routes', component: RoutesComponent, outlet: 'project' },
          { path: 'rides/new', component: AddRideComponent, outlet: 'project' },
          { path: 'routes/:id', component: RideDetailsComponent, outlet: 'project' },
          { path: 'stops', component: StopsComponent, outlet: 'project' },
          { path: 'stops/new', component: AddStopComponent, outlet: 'project' },
          { path: 'stops/:id', component: StopDetailsComponent, outlet: 'project' }
        ]
      },
    ]
  },
  ...
];

This is what my named router outlet looks like:

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

This is what the routerLink looks like:

<a [routerLink]="['/projects', projectId, { outlets: {project: 'routes'}}]">Routes</a>

When I'm on http://.../projects/456 and click on the link the named router-outlet remains empty and doesn't show the component.

I've tried lots of things but can't seem to find the issue. What am I doing wrong?

Jimit Jimit · Accepted Answer · 2017-06-30T08:28:45

It seems you have not mentioned component for children component. I don't know what error exactly you are getting but here is my inputs. May you can try like this.

export const appRoutes: Routes = [
  { path: '', redirectTo: 'projects', pathMatch: 'full' },
  { path: 'projects', component: ProjectsComponent },
  { path: 'projects/:projectId', component: ProjectDetailsComponent,
    children: [
      { path: 'routes', component: RoutesComponent, outlet: 'project' },
      { path: 'rides/new', component: AddRideComponent, outlet: 'project' },
      { path: 'routes/:id', component: RideDetailsComponent, outlet: 'project' },
      { path: 'stops', component: StopsComponent, outlet: 'project' },
      { path: 'stops/new', component: AddStopComponent, outlet: 'project' },
      { path: 'stops/:id', component: StopDetailsComponent, outlet: 'project' }
    ]
  }
];

and your router-outlet should be in ProjectDetailsComponent

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

Named router-outlet remains empty

1 Answers