CODEWITHSUNDEEP
angularangular-routing
chuckd
chuckd

Reputation: 14520

Can't route to correct component in Angular

Not sure if I'm setting my routing up correctly. I can't seem to route to the 'MemberEditComponent' using

[routerLink]="['/members/edit']"

Here is my app-routing section for my members module

{
  path: 'members',
  runGuardsAndResolvers: 'always',
  canActivate: [AuthGuard],
  loadChildren: () =>
    import ('./members/members.module')
    .then(mod => mod.MembersModule)
},

Here is my members-routing file, where routing to members works fine and routing to '/members/1' works fine, but I can't figure out how to route to '/members/edit'

I tried both

path: ':edit',

and

path: '/edit',

and

path: 'edit',

and none work

const routes: Routes = [{
    path: '',
    component: MembersComponent
  },
  {
    path: ':id',
    component: MemberDetailsComponent,
    resolve: {
      user: MemberDetailResolver
    }
  },
  {
    path: ':edit',
    component: MemberEditComponent,
    canDeactivate: [PreventUnsavedChangesGuard]
  },
];

Upvotes: 0

Views: 176

Answers (1)

KShewengger
KShewengger

Reputation: 8269

That is because, in your route, you have specified 2 parameters that are of can be read the same so by default if you access /members/edit, it will first land to your MemberDetailsComponent as angular treats your /edit as the :id parameter of MemeberDetailsComponent

{
    path: ':id',
    component: MemberDetailsComponent,
    resolve: {
      user: MemberDetailResolver
    }
  },
{
    path: ':edit',
    component: MemberEditComponent,
    canDeactivate: [PreventUnsavedChangesGuard]
},

Instead, you can implement it like this:

{
    path: 'edit',                                   // without :, so this will be matched first if the route has /edit in it
                                                    // or edit/:id if you are editing something in this component
    component: MemberEditComponent,
    canDeactivate: [PreventUnsavedChangesGuard]
},
{
    path: ':id',
    component: MemberDetailsComponent,
    resolve: {
      user: MemberDetailResolver
    }
},

Upvotes: 1

Related Questions