ParamMap returns a number if number used in navigate

[narthur157]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Optional route params that are given as numbers in navigate remain as numbers until page is refreshed.

Expected behavior

Would expect this to always be a string, as paramMap.get() claims

Minimal reproduction of the problem with instructions

https://angular-gitter-gd3f8s.stackblitz.io/notTheRoot;numVal=9;strVal=14
https://stackblitz.com/edit/angular-gitter-gd3f8s

The values change every 3 seconds. On page load, numVal will be a string, but then after updating will be a number. strVal is the same, except toString is called.

What is the motivation / use case for changing the behavior?

Actual types matching types declared by api

Environment

See StackBlitz

Angular version: X.Y.Z


Browser:
- [x ] Chrome (desktop) version 65
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[kambleaa007]

At the start they both are of type Object (Output shows)
As you declared them as Any (Line no. 13,14)
There is nothing like String as per your question
Its fine I checked with output not test cases :-

ngOnInit() {
setInterval(() => {
this.router.navigate([{
numVal: Math.floor(Math.random()*20).toString(),
strVal: Math.floor(Math.random()*20).toString()}
], {relativeTo: this.route});
}, 3000);

this.route.paramMap.subscribe((paramMap: ParamMap) => {
  this.numVal = paramMap.get('numVal');
  this.strVal = paramMap.get('strVal');

  this.numValType = typeof this.numVal;
  this.strValType = typeof this.strVal;
});

}

output:-
numVal: 11 string strVal: 16 string
numVal: 16 string strVal: 11 string

Conclusion :-
There is something goes wrong with actual implementation of paramMap.get() method and its return type is " : String" ???
How this can be fixed (Where will i get implementation code for .get() method)

Solution :-
// this is need to be put at implementation side
if(typeof (paramMap.get()) != 'String') return paramMap.get().toString();

[narthur157]

I can't tell what you're trying to say EDIT: I have decoded it I think. The issue is that if you put a number into the url using router navigate, it will be of type "number", which breaks the promise of the API that param.get() will return a string. So your solution is right, the implementation should toString the router input. What is confusing is that after a refresh (you can test in example) the value becomes a string again, naturally

…

On Tue, 17 Apr 2018, 01:52 kambleaa007, ***@***.***> wrote: At the start they both are of type Object (Output shows) As you declared them as Any (Line no. 13,14) There is nothing like String as per your question Its fine I checked with output not test cases :- ngOnInit() { setInterval(() => { this.router.navigate([{ numVal: Math.floor(Math.random()*20).toString(), strVal: Math.floor(Math.random()*20).toString()} ], {relativeTo: this.route}); }, 3000); this.route.paramMap.subscribe((paramMap: ParamMap) => { this.numVal = paramMap.get('numVal'); this.strVal = paramMap.get('strVal'); this.numValType = typeof this.numVal; this.strValType = typeof this.strVal; }); } output:- numVal: 11 string strVal: 16 string numVal: 16 string strVal: 11 string — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#23165 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AB8rgNc1W4B6RaeO1m6a2bB0DLD_Votwks5tpS6ygaJpZM4THEYl> .

[benneq]

I just experienced this issue, too.

And it's getting even worse with objects:

router.navigate([..., { foo: { bar: true } }])
// now activatedRoute.snapshot.paramMap.get('foo') === { bar: true }

// reload the page
// now activatedRoute.snapshot.paramMap.get('foo') === "[object Object]"

[r4vn]

It seems like this is not only limited to paramMap. Just encountered the very same problem with accessing queryParams after using navigate with a number.

I would definitely prefer #25095 since this solves the root issue with createUrlTree. The first pull request #23641 would only solve it for paramMap in my opinion.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}