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?

Does that mean that you want associate ItemDetailsComponent with the route url of your app ? — Mehdi
– Mehdi, Commented Jan 11, 2019 at 14:43
@Abhishek I tried that, but angular complains about routes not beginning with a slash — Tobias Gassmann
– Tobias Gassmann, Commented Jan 11, 2019 at 14:44

SiddAjmera · Accepted Answer · 2019-01-11 14:44:31Z

2

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.

answered Jan 11, 2019 at 14:44

SiddAjmera

39.6k7 gold badges78 silver badges114 bronze badges

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

7 Comments

Tobias Gassmann Over a year ago

your stackblitz works! But it does not work within my applocation... I put in the route by hand

SiddAjmera Over a year ago

@TobiasGassmann, what route did you put? Please tell me the exact path that you're trying to navigate your user to.

Tobias Gassmann Over a year ago

www.example.com/123

Tobias Gassmann Over a year ago

and I cannot get my hands on the "123"

SiddAjmera Over a year ago

Can you please fork my StackBlitz link and make changes as per your scenario so that you can replicate this issue?

|

Sachin Gupta · Accepted Answer · 2019-01-11 14:46:05Z

1

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

answered Jan 11, 2019 at 14:46

Sachin Gupta

5,3493 gold badges19 silver badges33 bronze badges

3 Comments

Sachin Gupta Over a year ago

Create a stackblitz please

Tobias Gassmann Over a year ago

It seems I cannot reproduce my local problem in a stackblitz.. in stackblitz it works fine.. I will keep trying

Sachin Gupta Over a year ago

If the route configuration is inside some module other than the AppModule, then you may need to subscribe to the parent's params using this.activatedRoute.parent.params.subscribe

Mehdi · Accepted Answer · 2019-01-11 14:55:26Z

1

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);
  }
);

answered Jan 11, 2019 at 14:55

Mehdi

2,4081 gold badge19 silver badges28 bronze badges

Collectives™ on Stack Overflow

angular routing parameter not accessible

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related