title: Angular erasing all query parameters
body: <p>Related to but not a duplicate of: <a href="https://stackoverflow.com/questions/32816388/how-to-keep-query-string-parameters-in-url-when-accessing-a-route-of-an-angular?rq=1">How to keep query string parameters in URL when accessing a route of an Angular 2 app?</a></p>
  
  <p>I have a very basic Angular app, and when I add a query parameter, it's erased (from the browser's url and everywhere else it would seem) before the code hits the <code>app.component</code> constructor.</p>
  
  <p><strong>Note</strong>: it is on the initial load (and subsequent reloads) that query parameters appear to be stripped</p>
  
  <p>Example: navigating to <code>localhost:8081/calculator?a=1</code> is changed to <code>localhost:8081/calculator</code></p>
  
  <p>I've tried this in Angular 4.3.1, 4.4.6 and 5.0.4, with the same result.</p>
  
  <p>Here's my route config:</p>
  
  <pre><code>const appRoutes: Routes = [
      {
          path: 'calculator',
          component: CalculatorComponent
      }
  ];
  
  export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
  </code></pre>
  
  <p>Here's the main app component's constructor:</p>
  
  <pre><code>public constructor(private router: Router, private route: ActivatedRoute) {
      console.log('entered app constructor');
      this.route.queryParamMap.subscribe(params =&gt; {
          console.log('app', params);
      });
  }
  </code></pre>
  
  <p>Here's the calculator component's constructor:</p>
  
  <pre><code>constructor(private router: Router, private route: ActivatedRoute) {
      console.log('entered calc constructor');
      this.route.queryParamMap.subscribe(params =&gt; {
          console.log('calc', params);
      });
  }
  </code></pre>
  
  <p>Here's the log I see in chrome:</p>
  
  <p><a href="https://i.stack.imgur.com/5ddMc.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5ddMc.png" alt="chrome log"></a></p>
  
  <p>Why is my query parameter erased?</p>
  
  <p><strong>UPDATE</strong>
  I do have navigation configured in the app component like so:</p>
  
  <pre><code>let navigationExtras: NavigationExtras = {
      queryParamsHandling: 'preserve',
      preserveFragment: true
  };
  this.router.navigate(['/calculator'], navigationExtras);
  </code></pre>
  
  <p>Note that the query parameters are already gone before it gets here though...</p>