title: Routes with query params in Angular 6 not working on page reload
body: <p>Currently, when we are routing to any route in Angular 6 with query params 
  like 
   <code>this.router.navigate(['studentInformation'], {queryParams: {filter: '12345'}});</code></p>
  
  <p>I am able to route and URL becomes
  <a href="http://localhost:4200/#/studentInformation?filter=12345" rel="nofollow noreferrer">http://localhost:4200/#/studentInformation?filter=12345</a></p>
  
  <p>but when we reload the page on that same URL, We are getting the error </p>
  
  <blockquote>
    <p>Error: Cannot match any routes. URL Segment: 'studentInformation%3Ffilter%3D12345'</p>
  </blockquote>
  
  <p>I tried to remove character encoding in URl by implementing CustomUrlSerializer like</p>
  
  <pre><code>
      parse(url: string): UrlTree {
          // Change plus signs to encoded spaces
          url.replace("%3F", '?');
          // Use the default serializer that you can import to just do the 
          // default parsing now that you have fixed the url.
          return url  
      }
  
      serialize(tree: UrlTree): string {
          // Use the default serializer to create a url and replace any spaces with + signs
          return super.serialize(tree).replace("%3F", '?');
      }
  } 
  
  after implementing this encoded character got removed from URL on reload but still getting error from the angular router
  
  &gt; Error: Cannot match any routes. URL Segment: 'studentInformation%3Ffilter%3D12345'
  
  I think angular router is trying to match full url including the query params and hence it is failing.
  Ideally Angular router should ignore the query params while matching for the routes on reload.
  Is this a bug in Angular? Any workaround for this?
  </code></pre>