Meteor JS Routing on Angular 2 Tutorial doesn'

Question

I'm trying to make the socially tutorial from the meteor js web but I'm stuck on the step 5 Routing & Multiple Views When I click on the link to see "party details" the javascript console says that the route doesn't exists. This is the code from the view that has the link.

<a [routerLink]="['/party', party._id]">{{party.name}}</a>

And this is the code from the routes:

const routes: RouterConfig = [
  { path: '', component: PartiesListComponent },
  { path: 'party/:partyId', component: PartyDetailsComponent }
];

This is the output from the console.

browser_adapter.js:84 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'party;_str=57df4efc74ee85f397a687f3'

Answer 1

The most likely reason for this is that party._id is actually an object, not the id primitive. If I had to put my money on it, I'd say this it what it looks like

party: {
  _id: {
    _str: '57df4efc74ee85f397a687f3'
  }
}

When you add an object into the routerLink array, it becomes a matrix parameter for the previous path segment. So if the above is the actual structure, then would result in

/party;_str=57df4efc74ee85f397a687f3

which is the problem you are facing. If you want to just add the id value to the path, then you should extract the _str

<a [routerLink]="['/party', party._id._str]">

This will give you the route

/party/57df4efc74ee85f397a687f3

which is what you want.

See Also:

• Angular docs on Route Parameters