fix(angular): account for query params and fragments within a string (#18356)

* account for defaultHref, switch to serializer

* bug fix

Author: liamdebeasi

angular/src/providers/nav-controller.ts

@@ -1,6 +1,6 @@
 import { Location } from '@angular/common';
 import { Injectable, Optional } from '@angular/core';
-import { NavigationExtras, NavigationStart, Router, UrlTree } from '@angular/router';
+import { NavigationExtras, NavigationStart, Router, UrlSerializer, UrlTree } from '@angular/router';
 import { NavDirection, RouterDirection } from '@ionic/core';
 
 import { IonRouterOutlet } from '../directives/navigation/ion-router-outlet';
@@ -29,6 +29,7 @@ export class NavController {
   constructor(
     platform: Platform,
     private location: Location,
+    private serializer: UrlSerializer,
     @Optional() private router?: Router,
   ) {
     // Subscribe to router events to detect direction
@@ -190,13 +191,18 @@ export class NavController {
        * would change the url, so things like queryParams
        * would be ignored unless we create a url tree
        * More Info: https://github.com/angular/angular/issues/18798
-       *
-       * Additionally, the router does some encoding under the hood,
-       * so make sure we are not encoding special characters more than once
        */
-      return this.router!.navigateByUrl(
-        this.router!.createUrlTree([decodeURIComponent(url.toString())], options)
-      );
+      const urlTree = this.serializer.parse(url.toString());
+
+      if (options.queryParams !== undefined) {
+        urlTree.queryParams = { ...options.queryParams };
+      }
+
+      if (options.fragment !== undefined) {
+        urlTree.fragment = options.fragment;
+      }
+
+      return this.router!.navigateByUrl(urlTree);
     }
   }
 }