Angular 5 - multiple routes same controller

Question

I've got routes defined like this:

const routes: Routes = [
  { path: '', component: StartComponent},
  { path: 'route1', component: StartComponent},
  { path: 'route2', component: StartComponent},
  { path: 'route3', component: StartComponent}
];

Now if I navigate from route1 to route2, my StartComponent will be recreated. Is there any way to prevent angular doing that?

I've got some animations in this component and I need to switch between this routes without recreating my component.

Answer 1

const routes: Routes = [
  { path: '', redirectTo: 'route1', pathMatch: 'prefix'},
  { path: 'route/:routeId', component: StartComponent},
];

This should prevent the destruction of your component