Estrategia de location Hash en angular 2

Intento crear una aplicación con la estrategia de location de hash, pero no agrega el hash a la url. Por ejemplo, cuando hago clic en un button asociado a {path: '/ polls', nombre: 'Polls', componente: PollsComponent}, carga la página con esta url: localhost: 3000 / polls.

¿Qué tengo que cambiar para get la estrategia de location hash? ¿Por qué tengo que configurar la URL base pnetworkingeterminada si quiero usar la estrategia de location hash?

Este es el routing en el app.component.ts donde se define todo el routing:

import {Component} from 'angular2/core' import {HTTP_PROVIDERS, Http} from 'angular2/http'; import 'rxjs/Rx'; // load the full rxjs import {ROUTER_PROVIDERS, RouteConfig , ROUTER_DIRECTIVES} from 'angular2/router'; import { ResultsComponent } from './results/results.component' import { VotingCardsComponent } from './votingcards/votingcards.component' import { DashBoardComponent } from './dash/dash.component' import { PollsComponent } from './pollslist/pollslist.component' @Component({ selector: 'my-app', templateUrl: 'app/app.component.html', directives: [ROUTER_DIRECTIVES, ResultsComponent, VotingCardsComponent, DashBoardComponent], providers: [HTTP_PROVIDERS, ROUTER_PROVIDERS] }) @RouteConfig([ { path: '/vote', name: 'VotePage', component: VotingCardsComponent }, { path: '/votepoll/:id', name: 'VotePoll', component: VotingCardsComponent }, { path: '/results', name: 'Results', component: ResultsComponent }, { path: '/polls', name: 'Polls', component: PollsComponent }, { path: '/', name: 'DashBoard', component: DashBoardComponent, useAsDefault: true } ]) export class AppComponent { } 

Y este es mi main.ts donde configuro la url base:

 import {bootstrap} from 'angular2/platform/browser'; import {AppComponent} from './app.component'; //this is to avoid the href empty issue import {provide} from 'angular2/core'; import {APP_BASE_HREF, ROUTER_PROVIDERS} from 'angular2/router'; bootstrap(AppComponent, [ //this is to avoid the href empty issue ROUTER_PROVIDERS, provide(LocationStrategy, { useClass: HashLocationStrategy }), provide(APP_BASE_HREF, { useValue: '/' }) ]); 

ROUTER_PROVIDERS no se debe agregar a los componentes secundarios,

solo para

 providers: [ROUTER_PROVIDERS] 

o alternativamente solo para

 bootstrap(AppComponent, [ROUTER_PROVIDERS]); 

HTTP_PROVIDERS es, en mi opinión, también una mejor HTTP_PROVIDERS para el componente raíz o bootstrap() pero no rompe nada para agregarlos a otro lugar.

(Consulte también Error de routing con angular 2 e IIS )

Puede usar la opción "useHash" en RouterModule.forRoot ().

 RouterModule.forRoot(appRoutes, {useHash: true}); 

https://discuss.atom.io/t/angular-2-routes-breaking-on-electron-app-refresh/28370/4

Todo funcionó bien con el código de muestra OP publicado como con lo que está en la respuesta aceptada. Pero como nota menor, el formatting requerido para cambiar la Estrategia de location de hash en el file de arranque a partir de RC.4 es el siguiente:

 { provide: LocationStrategy, useClass: HashLocationStrategy }, 

Se recomienda utilizar el estilo HTML 5 (PathLocationStrategy) como estrategia de location en Angular

Porque

  1. Produce las URL limpias y optimizadas para el SEO que los usuarios entienden y restringn más fácilmente.
  2. Puede aprovechar la representación del lado del server, lo que hará que nuestra aplicación se cargue más rápido, representando primero las páginas en el server antes de entregarlo al cliente.

Use Hashlocationstregy solo si tiene que admitir browseres más antiguos.

Haga clic aquí para más información