title: Angular 2 Route to non-angular url including query string parameters
body: <p>I am trying to conditionally redirect an angular 2 route to an external url including query string parameters.</p>
  
  <p>I.E the user would click a link in a user profile button dropdown and if the server had previously indicated they belonged to a specific company it would link to an external page, otherwise that same button would pass through the normal angular single page app routing systems.</p>
  
  <p>My current approach involves subscribing to the navigation start event and changing the window location href to point to the external website.</p>
  
  <p>I am running into two different issues depending on how I approach this task</p>
  
  <p>1.</p>
  
  <p>If the query string is passed along with the routerLink path, the query strings are escaped before being passed to the remote website. </p>
  
  <p>If I correct this in the subscription the browser back button will still return to the uncorrected url.</p>
  
  <p>For example the following code</p>
  
  <p>in the html template.</p>
  
  <pre><code>    &lt;a [routerLink]="['/profile?id=1']" &gt; profile &lt;/a&gt;
  </code></pre>
  
  <p>and in the app.component</p>
  
  <pre><code>    this.router.events.subscribe((event) =&gt; {
         if (event instanceof NavigationStart) {
               if(conditional logic here){  
                   let url: string = "http://example.com" + event.url
                   window.location.href = url;
               }
            }
      }
  </code></pre>
  
  <p>results in the url http://example.com/profile%3Fid%3D1 </p>
  
  <p>If I replace the escapes in my subscription it becomes
        http://example.com/profile?id=1 
  however the browser back button goes to the broken url and loads an error page.</p>
  
  <p>2.</p>
  
  <p>Due to the errors above, I attempted to pass the query string via the give parameter in the router link as described in the following SO question.</p>
  
  <p><a href="https://stackoverflow.com/questions/34599174/how-to-handle-query-parameters-in-angular-2">How to handle query parameters in angular 2</a></p>
  
  <p>the new router link looks like </p>
  
  <p> profile </p>
  
  <p>and results in a url like the following
  http://example.com?0=%3F&amp;1=i&amp;2=d&amp;3=%3D&amp;4=1</p>
  
  <p>This seems to be using the child routing and therefore matrix parameters as mentioned in the so post. </p>
  
  <p>I am not sure why this is the case as my routing.ts is simple and contains no children.</p>
  
  <pre><code>const routes: Routes = [
  {path: '**', component: RouteComponent}];
  
  @NgModule({
      imports: [ RouterModule.forRoot(routes) ],
      exports: [ RouterModule ]
  })
  export class RoutingModule { }
  </code></pre>
  
  <p>Additionally it seems to still be escaping special characters</p>
  
  <p>My first question is if there is a official or better way to redirect angular routing to external websites (including query string params)</p>
  
  <p>If not, I would appreciate any ideas about how to </p>
  
  <p>a. prevent angular from escaping the query string parameters</p>
  
  <p>b. prevent the back button from recognizing the url before I replace the escaped characters.(something like canceling the navigation start event)</p>
  
  <p>c. prevent angular from converting the parameters to matrix parameters.</p>
  
  <p>Thank you for any assistance you can provide</p>