Add case insensitive (query) param map (CaseInsensitiveParamMap)

[rklec]

Which @angular/* package(s) are relevant/related to the feature request?

router

Description

A very common issue seems to be to get a (query) parameter in a case insensitive way.

wrong hypothesis

More back-story: This seems to happen, because this.router.navigate also seems to lower-case all query parameters you pass it in:

    const queryParams = {LoGiN: "abc"} as Params;
    console.info('Triggering filter with data:', queryParams);

    this.router.navigate(
      [],
      {
        relativeTo: this.activatedRoute,
        queryParams: queryParams
      }
    );    

This results in .../?login=abc on the current page. (I may create a new bug for this, if that is not intentional.)
Anyway, there may be other reasons to ignore the casing. And I tried...

E.g. I want to use query parameters for filtering data with specific terms in my application, so I can do this:

    this.activatedRoute.queryParams
      .subscribe(params => {
          const paramMap = convertToParamMap(params);

          const filter = {
            login: paramMap.get("login")
            // ...
          };
          
          // ...
        });            

In contrast to using params (Params) directly, it does not throw,

Now, if I pass ...?login=blaBlub this works, but if I do pass ...?Login=blaBlub it does not as the usual convertToParamMap/param map is case-sensitive, apparently.

Proposed solution

Full credit goes to Bradley Carey, who has developed a CaseInsensitiveParamMap including test cases etc.

Maybe it can just be integrated in some way or another into Angular?

Alternatives considered

Any similar solution could also be developed? Like adding a flag to the existing ParamsAsMap :

angular/packages/router/src/shared.ts

Line 75 in 87c5f3c

class ParamsAsMap implements ParamMap {

Also, it should probably support localization i.e. use toLocaleLowerCase or the Angular equivalent.