Angular 2 route change to same component causing reload

Question

Looking for some advice on why a route change to the same component in my Angular 2 application is reloading the component.

I have 2 routes, both with the same component:

• /home
• /home/:id

const appRoutes = [
    {path:'', redirectTo:'/home', pathMatch:'full'},
    {path:'home', component: HomeComponent},
    {path:'home/:id', component: HomeComponent},
];

When changing between the two routes, the component is reloaded. When changing the parameter on the second route, the component is not reloaded (as expected).

Is there any way of being able to change between these routes without reloading the component, just as changing the parameter does?

Check out this Plunker to see what I mean

Answer 1

I have the same issue so here is my solution. Hope it helps.

    {
      path: '',
      redirectTo: 'home/',
      pathMatch: 'full',
    },
    {
      path: 'home',
      redirectTo: 'home/',
      pathMatch: 'full',
    },
    {
      path: 'home/:id',
      component: HomeComponent,
    }