Angular Routes not rendering child components, instead render parent component

Question

I want to create a nested route movies/:id However with my current configuration, when user navigates to movies/1 the parent component is always rendered. I need MovieDetailComponent to render on movies/1 url. Here is my configuration:

const routes: Routes = [{
    path: '',
    component: HomeView
  },
  {
    path: 'movies',
    component: MoviesView,
    children: [{
      path: ':id',
      component: MovieDetailComponent
    }]
  },
  {
    path: 'not-found',
    component: PageNotFoundComponent,
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'not-found'
  }
];

I have tried adding pathMatch: 'full' to the parent component first and then child component, and then both. When I add pathMach: 'full' to the parent component, the child URL doesn't even get hit, when I add the pathMatch: 'full' just to the child component, only the parent component ever gets rendered even if the URL is /movies/:id Why is this happening?

When I moved the child path into its own route, not being nested, the component rendered correctly.

const routes: Routes = [{
    path: '',
    component: HomeView
  },
  {
    path: 'movies',
    component: MoviesView
  },
  {
    path: 'movies:id',
    component: MovieDetailComponent
  } {
    path: 'not-found',
    component: PageNotFoundComponent,
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'not-found'
  }
];

Zoltán Szepesi · Accepted Answer · 2019-01-26 19:35:13Z

34

If you have route that has a component and also a children field Angular will use that component's router outlet to place the children component DOM. So in your case you should have a router outlet in your MoviesView component:

<router-outlet></router-outlet>

If you want to have a different view when you go to movies and movies/:id you need to go with the second method. If you need now or in the future to have more than one extra route under the movies route I prefer to write it as

const routes: Routes = [
  { path: '', component: HomeView },  
  { path: 'movies',
    children: [
    { path: '', component: MoviesView }
    { path: ':id', component: MovieDetailComponent }
  ]},
  { path: 'not-found', component: PageNotFoundComponent, pathMatch: 'full' },
  { path: '**', redirectTo: 'not-found'}
];

Also if you don't need the movies route (without the id) you can do:

const routes: Routes = [
  { path: '', component: HomeView },  
  { path: 'movies',
    children: [
    { path: ':id', component: MovieDetailComponent }
  ]},
  { path: 'not-found', component: PageNotFoundComponent, pathMatch: 'full' },
  { path: '**', redirectTo: 'not-found'}
];

edited Jan 26, 2019 at 19:35

answered Jan 26, 2019 at 19:19

Zoltán Szepesi

5915 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

O.MeeKoh Over a year ago

I see, so in order to have one component be displayed at a time, I have to just put it as another route, instead of as a child route. Chile routes will always display inside parents then right?

Zoltán Szepesi Over a year ago

Yes you're correct. But if you don't specify a component for the "parent" (so you remove the component: MoviesView) then it uses the first router outlet it finds in the chain (probably you only have one router outlet so it is going to be the one in your root component)

Zoltán Szepesi Over a year ago

@O.MeeKoh I edited the answer to have an example for my previous comment

O.MeeKoh Over a year ago

This is perfect, exactly what I needed. Thank you!

Zoltán Szepesi Over a year ago

I am glad I was able to help.

Amir Arbabian · Accepted Answer · 2019-01-26 19:13:25Z

0

Check your <router-outlet> directives, you have to have one inside the MoviesView component. Hope that helps.

answered Jan 26, 2019 at 19:13

Amir Arbabian

3,7092 gold badges9 silver badges13 bronze badges

2 Comments

O.MeeKoh Over a year ago

Adding <router-outlet> inside MoviesView worked, however now both components are rendered when hitting movies/:id, how can I make it so only the MoviesDetailComponent gets displayed instead of both MoviesView and MoviesDetail?

Amir Arbabian Over a year ago

@O.MeeKoh Hm, you can do something like that then: const routes: Routes = [ ..., { path: 'movies', component: MoviesContainer, children: [ { path: ':id', component: MovieDetailComponent }, { path: '', component: MoviesView }, ] } ... ];

Collectives™ on Stack Overflow

Angular Routes not rendering child components, instead render parent component

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related