Strategia posizione hash in Angular 2

Question

Sto provando a creare un'applicazione con strategia di posizione hash, ma non aggiunge l'hash all'URL. Ad esempio quando clicco su un pulsante associato a {path: '/ polls', nome: 'Polls', componente: PollsComponent} carica la pagina con questo url: localhost: 3000/polls.

Cosa devo modificare per ottenere la strategia di posizione hash? Perché devo impostare l'URL di base predefinito se voglio utilizzare la strategia di posizione hash?

Questo è il percorso nei app.component.ts in cui è definito tutto il percorso:

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 { } 

E questo è il mio main.ts dove configurare l'URL di 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: '/' }) 

]); 

Answer 1

ROUTER_PROVIDERS dovrebbe non essere aggiunti componenti figlio,

solo a

providers: [ROUTER_PROVIDERS] 

o in alternativasolo a

bootstrap(AppComponent, [ROUTER_PROVIDERS]); 

HTTP_PROVIDERS sono a mio parere anche una misura migliore per componente principale o bootstrap() ma non si rompe nulla da aggiungere da qualche altra parte .

(Vedi anche Routing error with angular 2 and IIS)

Answer 2

tutto ha funzionato bene con il codice di esempio OP pubblicato come con ciò che è nella risposta accettata. Ma come nota minore, il formato richiesto per cambiare il Hash posizione strategia nel file di bootstrap come di RC.4 è questa:

{ provide: LocationStrategy, useClass: HashLocationStrategy }, 

Answer 3

È possibile utilizzare l'opzione "useHash" in RouterModule.forRoot().

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

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

Answer 4

Si consiglia di utilizzare lo stile HTML 5 (PathLocationStrategy) come strategia di localizzazione in angolare

Perché

1. Produce gli URL puliti e SEO friendly che sono più facili da comprendere per gli utenti .
2. È possibile sfruttare il rendering lato server, che renderà il caricamento dell'applicazione più veloce, eseguendo il rendering delle pagine sul server prima di consegnarlo al client.

Usa Hashlocationstrtegy solo se si dispone per supportare le vecchie browser.

Click Here for More info