fix(router): fix query parameters with multiple values (angular#15129)

fixes angular#14796

Author: vicb

packages/router/src/create_url_tree.ts

@@ -40,13 +40,18 @@ function isMatrixParams(command: any): boolean {
 function tree(
     oldSegmentGroup: UrlSegmentGroup, newSegmentGroup: UrlSegmentGroup, urlTree: UrlTree,
     queryParams: Params, fragment: string): UrlTree {
+  let qp: any = {};
+  if (queryParams) {
+    forEach(queryParams, (value: any, name: any) => {
+      qp[name] = Array.isArray(value) ? value.map((v: any) => `${v}`) : `${value}`;
+    });
+  }
+
   if (urlTree.root === oldSegmentGroup) {
-    return new UrlTree(newSegmentGroup, stringify(queryParams), fragment);
+    return new UrlTree(newSegmentGroup, qp, fragment);
   }
 
-  return new UrlTree(
-      replaceSegment(urlTree.root, oldSegmentGroup, newSegmentGroup), stringify(queryParams),
-      fragment);
+  return new UrlTree(replaceSegment(urlTree.root, oldSegmentGroup, newSegmentGroup), qp, fragment);
 }
 
 function replaceSegment(

packages/router/test/create_url_tree.spec.ts

@@ -16,6 +16,30 @@ import {DefaultUrlSerializer, UrlSegmentGroup, UrlTree} from '../src/url_tree';
 describe('createUrlTree', () => {
   const serializer = new DefaultUrlSerializer();
 
+  describe('query parameters', () => {
+    it('should support parameter with multiple values', () => {
+      const p1 = serializer.parse('/');
+      const t1 = createRoot(p1, ['/'], {m: ['v1', 'v2']});
+      expect(serializer.serialize(t1)).toEqual('/?m=v1&m=v2');
+
+      const p2 = serializer.parse('/a/c');
+      const t2 = create(p2.root.children[PRIMARY_OUTLET], 1, p2, ['c2'], {m: ['v1', 'v2']});
+      expect(serializer.serialize(t2)).toEqual('/a/c/c2?m=v1&m=v2');
+    });
+
+    it('should set query params', () => {
+      const p = serializer.parse('/');
+      const t = createRoot(p, [], {a: 'hey'});
+      expect(t.queryParams).toEqual({a: 'hey'});
+    });
+
+    it('should stringify query params', () => {
+      const p = serializer.parse('/');
+      const t = createRoot(p, [], <any>{a: 1});
+      expect(t.queryParams).toEqual({a: '1'});
+    });
+  });
+
   it('should navigate to the root', () => {
     const p = serializer.parse('/');
     const t = createRoot(p, ['/']);
@@ -209,18 +233,6 @@ describe('createUrlTree', () => {
     });
   });
 
-  it('should set query params', () => {
-    const p = serializer.parse('/');
-    const t = createRoot(p, [], {a: 'hey'});
-    expect(t.queryParams).toEqual({a: 'hey'});
-  });
-
-  it('should stringify query params', () => {
-    const p = serializer.parse('/');
-    const t = createRoot(p, [], <any>{a: 1});
-    expect(t.queryParams).toEqual({a: '1'});
-  });
-
   it('should set fragment', () => {
     const p = serializer.parse('/');
     const t = createRoot(p, [], {}, 'fragment');

packages/router/test/url_serializer.spec.ts

@@ -163,6 +163,7 @@ describe('url serializer', () => {
   it('should handle multiple query params of the same name into an array', () => {
     const tree = url.parse('/one?a=foo&a=bar&a=swaz');
     expect(tree.queryParams).toEqual({a: ['foo', 'bar', 'swaz']});
+    expect(url.serialize(tree)).toEqual('/one?a=foo&a=bar&a=swaz');
   });
 
   it('should parse fragment', () => {