QueryParamsHandling 'merge' does not remove query parameters

I’m submitting a…

[x] Bug report

Current behavior

When navigating to a route with query params and the 'merge' queryParamHandling strategy, if a specified query param is null the specified query param is kept if it previously existed.

Expected behavior

When navigating to a route with query params and the 'merge' queryParamHandling strategy, if a specified query param is null the specified query param is removed if it previously existed.

Minimal reproduction of the problem with instructions

• an application with one route /
• router.navigate(['/'], { queryParams: { hello: 'world' }, queryParamHandling: 'merge' }) => /?hello=world
• router.navigate(['/'], { queryParams: { hello: null }, queryParamHandling: 'merge' } => /?hello=world (but expected /)

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

I have a route with multiple query params, including filters. The filters are updated independently of the other query params but I don’t want to wipe them out when filters are updated (that is why I use 'merge'). However, I currently cannot remove a query param with 'merge' currently and I expect to be able to because the provided value of null should override an existing value and remove the query param.

The current workaround I have is to use Object.assign and the snapshot of the previous query params with the default QueryParamHandling to get the behavior I desire.

Environment

Angular version: 4.2.3

[bossqone]

I wanted to send PR, but I don’t know how to properly write test for Router (especially for createUrlTree). Solution provided by @skreborn should work, but I think we could remove empty props directly in Router.createUrlTree.

Here’s my proposal of Router.createUrlTree:

createUrlTree(commands: any[], navigationExtras: NavigationExtras = {}): UrlTree {
  const {relativeTo,          queryParams,         fragment,
         preserveQueryParams, queryParamsHandling, preserveFragment} = navigationExtras;
  if (isDevMode() && preserveQueryParams && <any>console && <any>console.warn) {
    console.warn('preserveQueryParams is deprecated, use queryParamsHandling instead.');
  }
  const a = relativeTo || this.routerState.root;
  const f = preserveFragment ? this.currentUrlTree.fragment : fragment;
  let q: Params|null = null;
  if (queryParamsHandling) {
    switch (queryParamsHandling) {
      case 'merge':
        q = {...this.currentUrlTree.queryParams, ...queryParams};
        break;
      case 'preserve':
        q = this.currentUrlTree.queryParams;
        break;
      default:
        q = queryParams || null;
    }
  } else {
    q = preserveQueryParams ? this.currentUrlTree.queryParams : queryParams || null;
  }

  // HERE IS INTRODUCED CHANGE
  if (q !== null) {
    q = this.removeEmptyProps(q);
  }
  return createUrlTree(a, this.currentUrlTree, commands, q !, f !);
}

And then Router.navigate should be changed to:

navigate(commands: any[], extras: NavigationExtras = {skipLocationChange: false}):
    Promise<boolean> {
  validateCommands(commands);
  return this.navigateByUrl(this.createUrlTree(commands, extras), extras);
}

[angular-automatic-lock-bot[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.}