-3

This is my current routes config of latest version Angular app

const routes = [
  { path: 'board', component: BoardComponent, canActivate: [AuthGuard], children: [
    { path: 'stories', component: StoryComponent }]},
    { path: '**',   redirectTo: 'board', pathMatch: 'full' }
];

It works fine, both components are displayed, I want to work it the same way but with a little change: when user routes to /board/stories, I want the path to be just /stories, is it possible to do so?

Louen Leoncoeur
  • 25
  • 6
  • Hi Louen, welcome to Stack Overflow. I'm having a hard time discerning exactly what you are trying to do here, can you perhaps provide some images/diagrams, or some code with comments explaining what you'd like to happen on each line? – Woohoojin Aug 30 '18 at 17:16
  • @Louen Leoncoeur its difficult to understand your use case could you provide a template of code or some relevance? – Vaibhav Aug 30 '18 at 17:20
  • Sorry for confusing, I've made some changes and hope It's more clear now – Louen Leoncoeur Aug 30 '18 at 17:41

1 Answers1

0

With the way your routes are defined - No, it is not possible.

By defining stories as a child of board you quite literally defined your route to be .../board/stories. Therefore a route of just /stories will not match any route as you have it defined.

If you want the route to just be /stories then you could simply redefine your routes to be

const routes = [
  { path: 'board', component: BoardComponent, canActivate: [AuthGuard]},
  { path: 'stories', component: StoryComponent, canActivate: [AuthGuard]},
  { path: '**',   redirectTo: 'board', pathMatch: 'full' }
];
Narm
  • 10,677
  • 5
  • 41
  • 54
  • Okay, but then either a BoardComponent or StoryComponent is displayed. I want BoardComponent to be displayed for `/board` path and both BoardComponent and StoryComponent to be displayed for `/stories` path and additionally BoardComponent should save its state (scroll position and etc) when routes change from `/board` to `/stories` and vice versa – Louen Leoncoeur Aug 30 '18 at 18:42
  • Yes, well **what you want to happen unfortunately does not influence what will happen** based on the design constraints of the Angular framework. If you want the `board` component & `stories` component to be displayed at the same time then you can keep `stories` component a child (as you have) or consider using a secondary `router-outlet`. – Narm Aug 30 '18 at 18:49