HashLocationStrategy does not produce # locations

Question

I'm running the Angular 2 beta.0 and I'm messing around with routing. Here's what I have

AppComponent:

import {Component, provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES, CORE_DIRECTIVES} from 'angular2/common';
import {Http, Response, HTTP_PROVIDERS} from 'angular2/http';
import {RouteConfig, Location, LocationStrategy, HashLocationStrategy, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';

import {HomeComponent} from './components/home';
import {RowsComponent} from './components/rows';
import {ColumnsComponent} from './components/columns';
import {TableComponent} from './components/table';

@Component({
  selector: 'app',
  directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, ROUTER_DIRECTIVES],
  templateUrl: '/app/views/root.html',
  providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
  {path:'/',       name: 'Home',     component: HomeComponent},
  {path:'Rows',    name: 'Rows',     component: RowsComponent},
  {path:'Columns', name: 'Columns',  component: ColumnsComponent},
  {path:'Table',   name: 'Table',    component: TableComponent}
])
class AppComponent {
  public title = 'Responsive Layout';
  public SelectedTab = 'Home';

  constructor(location: Location) {
    //location.go('Rows');
  }
}

bootstrap(AppComponent, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

Every tutorial and API reference seems to point to me doing it just like I have above. I also have <base href="/app/" /> in the head of my index.html. Here are my RouterLinks

  <ul class="nav navbar-nav">
    <li [class.active]="SelectedTab=='Home'"><a [routerLink]="['Home']" (click)="SelectedTab='Home'">Home</a></li>
    <li [class.active]="SelectedTab=='Rows'"><a [routerLink]="['Rows']" (click)="SelectedTab='Rows'">Rows</a></li>
    <li [class.active]="SelectedTab=='Columns'"><a [routerLink]="['Columns']" (click)="SelectedTab='Columns'">Columns</a></li>
    <li [class.active]="SelectedTab=='Table'"><a [routerLink]="['Table']" (click)="SelectedTab='Table'">Table</a></li>
  </ul>

The routing behaves like it should. I get no errors. When I click on one of these entries in the bootstrap nav-bar I see that the views have switched out and are showing the proper templates and that their Components have run and are being bound to. However, despite using HashLocationStrategy in my bootstrap(...) call, the URLs are still "HTML5 Style": localhost:8080/app/Rows when it should be localhost:8080/app/#/Rows.

I believe I need to use the old # based way if I want my users to be able to bookmark a particular view and come back to it. If I allow for /app/Rows then refreshing the page causes a 404 because Rows doesn't exist in the app folder.

Answer 1

I tried your code, it works

my code below:

boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {provide} from 'angular2/core';
import {AppComponent} from './app.component'
import {ROUTER_PROVIDERS, LocationStrategy, 
        HashLocationStrategy,
        PathLocationStrategy,
        APP_BASE_HREF, } from 'angular2/router'


bootstrap(AppComponent,[
     ROUTER_PROVIDERS,
     provide(APP_BASE_HREF, { useValue: '/' }),
     provide(LocationStrategy, {useClass : HashLocationStrategy})
]);

-

app.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

@Component({
  selector:'second',
  template: `<h1>second</h1>`
})

export class SecondComponent{}

@Component({
   selector: 'home',
   template: `<h1>hello</h1>`
})

export class HomeComponent{}

@Component({
   directives : [ROUTER_DIRECTIVES],
   selector: 'my-app',
   template: 
    `<a [routerLink]="['Home']">home</a>
     <a [routerLink]="['Second']">Second</a>
     <router-outlet></router-outlet>
    `
})


 @RouteConfig([
   {path :'/' ,name: 'Home', component: HomeComponent},
   {path :'/second', name : 'Second', component : SecondComponent}

  ])

 export class AppComponent { }

I find your problem, delete this line

providers : [ROUTER_PROVIDERS]

the details I don't know why, maybe angular can't not process when you are using ROUTERPROVIDERS twice, looking forward someone can help u

Answer 2

As per Angular 2 final release you have to include LocationStrategy to use HashLocationStrategy class by putting it inside providers of main @NgModule by doing {provide: LocationStrategy, useClass: HashLocationStrategy}

app.module.ts

import {Component, NgModule} from '@angular/core';
import {
  LocationStrategy,
  HashLocationStrategy
} from '@angular/common';
@NgModule({
   imports: [...], //put module to import here
   declarations: [...], //put all component, pipe & directive
   exports: [...], //module to export
   //providers should reside here
   providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
})
class AppModule {}