Angular Routing RootPath With Parameters

Question

We're developing an admin panel with using angular 4. And we have a routing file for one of our modules like in below:

import { Routes } from '@angular/router';

import { ShowPeriodsComponent } from './periods/show-periods/show-periods.component';
import { CreatePeriodsComponent } from './periods/create-periods/create-periods.component';
import { EditPeriodsComponent } from './periods/edit-periods/edit-periods.component';
import { ShowVideosComponent} from './videos/show-videos/show-videos.component';
import { CreateVideosComponent} from './videos/create-videos/create-videos.component';
import { EditVideosComponent} from './videos/edit-videos/edit-videos.component';
import { PeriodCommonComponent } from './periodCommon.component';


export const EvolutionsRoutes: Routes = [{
  path: '',
  component: PeriodCommonComponent,
  children: [
    {
      path: 'periods',
      children: [
        { path: '', component: ShowPeriodsComponent, data: { heading: 'Assesment Periods' } },
        { path: 'create', component: CreatePeriodsComponent, data: { heading: 'Create assesment period' } },
        { path: 'edit/:id', component: EditPeriodsComponent, data: { heading: 'Edit assesment period' } },
      ]
    } ,
    {
      path: 'videos',
      children: [
        { path: ':id', component: ShowVideosComponent, data: { heading: 'Assesment Videos' } },
        { path: 'create', component: CreateVideosComponent, data: { heading: 'Create assesment videos' } },
        { path: 'edit/:id', component: EditVideosComponent, data: { heading: 'Edit assesment videos' } },
      ]
    }
  ]

}];

However the problem starts here. Our root path is: /evolutions , and everything works ok when I call below urls:

/evolutions/periods
/evolutions/periods/edit/{periodId}
/evolutions/videos/{periodId}
/evolutions/videos/edit/{videoId}

But when I call the below link

/evolutions/videos/create

The page fails to load. And the reason is: it calls one of the methods in the constructor of /evolutions/videos link(I mean in ShowVideosComponent) However I dont want that link to be loaded all I want is to load the template file related with /evolutions/videos/create link. Is something like that possible?

Thanks

Grégory Gossart · Accepted Answer · 2019-01-06 01:05:44Z

1

Isn't it just a path order problem ?

When you type an URL, your router checks every path in your router configuration one by one from top to bottom.

Your router considers that /evolutions/videos/create is a valid path for your ShowVideosComponent where :id = 'create'.

If you put your videos/:id path below your videos/create path, it should work.

answered Jan 6, 2019 at 1:05

Grégory Gossart

8377 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Angular Routing RootPath With Parameters

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related