title: Angular2 routing - adding the hashtag using LocationStrategy not working?
body: <p>I'm following the simple quickstart app from the Angular2 docs and I'm using a spring backend to run it. My problem is that the angular router ditched the hashtag from the URL so what should have been <code>example.com/#/dashboard</code> is now <code>example.com/dashboard</code>.</p>
  
  <p>I am using the <code>LocationStrategy</code> method specified in a bunch of posts on StackOverflow. Below is my simple example:</p>
  
  <p><code>File: main.ts</code></p>
  
  <pre><code>///&lt;reference path="../node_modules/angular2/typings/browser.d.ts"/&gt;
  
  import {bootstrap} from 'angular2/platform/browser'
  import {provide} from 'angular2/core';
  import {LocationStrategy, HashLocationStrategy} from 'angular2/router';
  
  import {TestComponent} from './simple/test.component'
  
  bootstrap(
      TestComponent, 
      [
          provide(LocationStrategy, { useClass: HashLocationStrategy })
      ]
  );
  </code></pre>
  
  <p><code>File: test.component.ts</code></p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
  
  @Component({
      selector: 'test1',
      template: "&lt;h1&gt;This is test1 component&lt;/h1&gt;"
  })
  export class Test1 { };
  
  @Component({
      selector: 'test2',
      template: "&lt;h1&gt;This is test2 component&lt;/h1&gt;"
  })
  export class Test2 { };
  
  @Component({
      selector: 'my-app',
  
      template: `
          &lt;h1&gt;This is my test app&lt;/h1&gt;
          &lt;nav&gt;
              &lt;a [routerLink]="['Test1']"&gt;Test1&lt;/a&gt;
              &lt;a [routerLink]="['Test2']"&gt;Test2&lt;/a&gt;
          &lt;/nav&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
      `,
  
      directives: [ROUTER_DIRECTIVES],
  
      providers: [ROUTER_PROVIDERS]
  })
  @RouteConfig([
      {
          path: '/test1',
          name: 'Test1',
          component: Test1
      },
      {
          path: '/test2',
          name: 'Test2',
          component: Test2
      }
  ])
  export class TestComponent { }
  </code></pre>
  
  <p><code>File: index.html</code></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
  
          &lt;base href="/"&gt;
  
          &lt;title&gt;This is an Angular 2 test&lt;/title&gt;
  
          &lt;!-- Angular dependencies --&gt;
          &lt;script src="/node_modules/es6-shim/es6-shim.js"&gt;&lt;/script&gt;
          &lt;script src="/node_modules/systemjs/dist/system-polyfills.js"&gt;&lt;/script&gt;
          &lt;script src="/node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
          &lt;script src="/node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
          &lt;script src="/node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
          &lt;script src="/node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
          &lt;script src="/node_modules/angular2/bundles/router.dev.js"&gt;&lt;/script&gt;
  
          &lt;!-- App --&gt;
          &lt;script&gt;
  
              System.config({
                  packages: {
                      app: {
                          format: 'register',
                          defaultExtension: 'js'
                      }/*,
                      'node_modules': {
                          format: 'cjs',
                          defaultExtension: 'js'
                      }*/
                  }
              });
  
              System.import('app/main').then(null, console.error.bind(console));
  
          &lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;my-app&gt;&lt;/my-app&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm using <code>Angular2 2.0.0-beta.9</code> and this is the behavior that I see. Note that none of the 2 paths in the @RouteConfig are marked with <code>useAsDefault: true</code>.</p>
  
  <p>When I try to open up <code>http://localhost:8080/#/test1</code> the page opens fine, but when I click on one of the 2 anchors in the TestComponent template, the hashtag gets dropped.</p>
  
  <p>Then if I set <code>path1</code> to be <code>useAsDefault: true</code>, the hashtag gets dropped immediately even when I try to visit <code>http://localhost:8080/#/test1</code>.</p>
  
  <p>Can someone please tell me if I'm doing something wrong or if that's a bug? I just want to get the hashtag back in the URL.</p>