title: How to handle hash fragments from oauth redirect urls in Angular2 rc3 routing
body: <p>I'm trying to find a way to handle setting up an Angular2 Typescript route (using the 3.0.0-alpha.8 router) that will handle routes that begin with hash fragments.</p>
  
  <p>The app I'm working on handles all login externally (something I have no control over) through a rails backend with oauth2. Redirecting users to the external login page works fine but when the redirect url, always some form of <code>http://localhost:4200#access_token=TOKEN</code> (where TOKEN is a series of numbers and letters) is sent back but I can't figure out how to set up a route that can handle the <code>#</code> sign so I can catch it and redirect to the appropriate component.</p>
  
  <p>In a previous Angular1 app the <code>ui-router</code> was able to use in a route of:</p>
  
  <pre><code>.state('accessToken', {
    url: '/access_token=:token',
    controller: 'LoginController',
    params: { token: null }
  })
  </code></pre>
  
  <p>and this had no problem accepting the redirect url that was sent back and would then pass everything over to the LoginController to handle the rest of the authentication/token business on the front end.</p>
  
  <p>This app however is Angular2 and Typescript and the router query params seem way less flexible and I'm having trouble implementing a similar solution. I've been going based on <a href="https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters" rel="nofollow noreferrer">this section</a> in the docs but all of the examples are building of something else, ex <code>/heroes</code> before getting to the complicated part of the query params, ex <code>/heroes/:id</code>. I searched through stackoverflow as well and wasn't able to find anything that worked with Angular2 and Typescript and the current router.</p>
  
  <p>This is my current (non working) solution:</p>
  
  <pre><code>import { provideRouter, RouterConfig } from '@angular/router';
  
  import { HomeComponent } from './components/home/home.component';
  import { TestComponent } from './components/test/test.component';
  
  
  export const appRoutes: RouterConfig = [
    {
      path: '',
      component: HomeComponent,
      terminal: true
    },
    {
      path: 'access_token',
      component: TestComponent
    }
  ];
  
  export const APP_ROUTER_PROVIDERS = [
    provideRouter(appRoutes)
  ];
  </code></pre>
  
  <p>If I take the redirect url that is sent back and modify it (purely for testing purposes) to something like <code>http://localhost:4200/access_token=TOKEN</code> it works fine. Unfortunately I don't actually have control over the format of the redirect url in real life, and I am unable to come up with a solution that can handle the fact that it begins with a hash fragment rather than a <code>/</code> and then my query params. All of the examples of routing with complicated symbols or characters that I can find begin with a <code>/</code>. </p>
  
  <p>I tried modifying my solution above to be <code>:access_token</code>, which did not work, as well as listing it as a child route under the base route like so:</p>
  
  <pre><code>{
    path: '',
    component: HomeComponent,
    terminal: true,
    children: [
      { path: 'access_token',  component: TestComponent },
    ]
  }
  </code></pre>
  
  <p>which resulted in the following console error: 
  <code>platform-browser.umd.js:2312 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: ''</code></p>
  
  <p>I feel like there absolutely has to be a clean solution to this, especially since so many APIs handle their authentication through a redirect url like this but no matter how much I dig through the docs I can't seem to find it. Any advice on how to implement this would be much appreciated.</p>