angular routing parameter not accessible

Question

EDIT: (solution)

The root-cause of my problem was, that there had been additional routes added programmatically within the app.component. I found this by disabling all routes in the app-routing.module and still being mysteriously able to navigate to the route in question. After removing the programmatically added routes everything was working as expected. Thanks for the help everyone! :-)

ORIGINAL (question):

I am using the following code within my component to subscribe to parameters of the route:

this.activatedRoute.params.subscribe((values) => {
  console.log('these are my parameters: ', values);
});

Everything works fine, I get the parameters of the route without any problems.

This is the working configuration of the route:

{
  path: 'details/:itemId',
  component: ItemDetailsComponent,
},

Now to the problem: When I try to simplify my route (since I do not need any other routes) the following problem arises: After making the following simple change to the route-configuration, I cannot access the route-parameters anymore (they are empty).

This is the defective configuration of the route:

{
  path: ':itemId',
  component: ItemDetailsComponent,
},

Does anybody know, why I cannot access the single route-parameter anymore after I shortend the route?

Answer 1

Looks like you're still trying to navigate to details/:itemId when you should have done it for just :itemId. Make sure you're navigating to the proper path.

After you've done the change, /details would work and would be considered as itemId. But /details/1 or any such path would result in an error.

Here's a Working Sample StackBlitz for your ref.

Answer 2

It does work fine. See the stackblitz: https://stackblitz.com/edit/angular-nqzpum

Answer 3

in this case you don't really need to specify the variable in your router.module which should look like this :

{
  path: '',
  component: ItemDetailsComponent,
},

Then if you need to open a item in particular then use the

this.router.navigate(["", {itemId: 123}]);

provided that router is injected as Router where is call is made.

Then you need to inject in your ItemDetailsComponent activatedRoute: ActivatedRoute

this.activatedRoute.params.subscribe(
  (params) => {
    //ItemId will be available here when url changes
    console.log(params.itemId);
  }
);