title: Routing with hashtag approach breaks application Login
body: <p>I am new to Angular 2 and I have the following problem with my routes.
  My app uses <code>Auth0</code> for user authentication and i have my main page under <a href="http://localhost:3000/" rel="nofollow noreferrer">http://localhost:3000/</a> and a profile page under <a href="http://localhost:3000/profile" rel="nofollow noreferrer">http://localhost:3000/profile</a>.</p>
  
  <p>I had the problem that when refreshing the profile page I got a CANNOT GET error 404. This error I solved using the hash approach </p>
  
  <p><code>RouterModule.forRoot(appRoutes, { useHash: true })</code> </p>
  
  <p>for my routes as I found in posts like this one: <a href="https://stackoverflow.com/questions/35284988/angular-2-404-error-occur-when-i-refresh-through-browser">Angular 2 : 404 error occur when i refresh through Browser</a></p>
  
  <p>My problem now is that with this hash approach I cannot use the login anymore, it returns an error. </p>
  
  <blockquote>
    <p>EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL >Segment: 'access_token'
    Error: Cannot match any routes. URL Segment: 'access_token'
       at ApplyRedirects.noMatchError </p>
  </blockquote>
  
  <p>So I would like to know how can I fix this.
  My code:</p>
  
  <p><strong>app.routing.ts</strong></p>
  
  <pre><code>import {ModuleWithProviders} from '@angular/core';
  import {Routes, RouterModule} from '@angular/router';
  
  import { HomeComponent }  from './components/home/home.component';
  import { ProfileComponent }  from './components/profile/profile.component';
  import { ItemsComponent }  from './components/items/items.component';
  
  import {AuthGuard} from './auth.guard';
  
  const appRoutes: Routes= [
  {
      path:'',
      component: HomeComponent
  
  },
  {
      path:'profile',
      component: ProfileComponent,
      canActivate: [AuthGuard]
  },
  {
      path:'api/items',
      component: ItemsComponent,
      canActivate: [AuthGuard]
  }
  
  ];
  
  
  
  export const appRoutingProviders: any[] = [];
  
  
  export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { useHash: true });
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code> //I skipped copying links and so on
  
    &lt;body&gt;
      &lt;base href="/"&gt;
      &lt;my-app&gt;Loading AppComponent ...&lt;/my-app&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import {Auth} from './services/auth.service';
  import {ItemService} from "./services/itemservice/item.service";
  
  @Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html',
    providers:[ItemService]
  })
  export class AppComponent  { 
    constructor(private auth:Auth ){
  
    }
  
  }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code> //skipped elements
  
  &lt;nav class="navbar navbar-default "&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;ngAuth0&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="navbar" class="collapse navbar-collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li &gt;&lt;a routerLink="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li &gt;&lt;a href="#" (click)="auth.login()" *ngIf="!auth.authenticated()"&gt;Login&lt;/a&gt;&lt;/li&gt;
          &lt;li &gt;&lt;a routerLink="/profile" *ngIf="auth.authenticated()"&gt;Profile&lt;/a&gt;&lt;/li&gt;
          &lt;li &gt;&lt;a href="#" (click)="auth.logout()" *ngIf="auth.authenticated()"&gt;Logout&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>auth.service.ts</strong></p>
  
  <pre><code>import { Injectable }      from '@angular/core';
  import { tokenNotExpired } from 'angular2-jwt';
  
  // Avoid name not found warnings
  declare var Auth0Lock: any;
  
  @Injectable()
  export class Auth {
    // Configure Auth0
    lock = new Auth0Lock('7fZnGMP3H3Sl6aTRPQbLWGwPLeHNlm9z', 'myauthID', {});
  
  
    constructor() {
      // Add callback for lock `authenticated` event
  
  
      this.lock.on("authenticated", (authResult:any) =&gt; {
      this.lock.getProfile(authResult.idToken, function(error:any, profile:any){
          if(error){
                  throw new Error(error);
          }
  
          localStorage.setItem('id_token', authResult.idToken);
          localStorage.setItem('profile', JSON.stringify(profile)); //in localStorage only strings can be stored. stringify is needed
  
        });
  
      });
    }
  
    public login() {
      // Call the show method to display the widget.
      this.lock.show();
    }
  
    public authenticated() {
      // Check if there's an unexpired JWT
      // This searches for an item in localStorage with key == 'id_token'
      return tokenNotExpired();
    }
  </code></pre>