Hash Location Strategy in Angular 2

Question

I'm trying to create an application with hash location strategy, but it does not add the hash to the url. For instance when I click on a button associated with { path: '/polls', name: 'Polls', component: PollsComponent } it loads the page with this url : localhost:3000/polls.

What do I have to change to get the hash location strategy? Why do I have to set the default base url if I want to use hash location strategy?

This is the routing in the app.component.ts where all the routing is defined:

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

And this is my main.ts where I configure the base url:

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 should not be added to child components,

only to

providers: [ROUTER_PROVIDERS]

or alternatively only to

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

HTTP_PROVIDERS are in my opinion also a better fit for root component or bootstrap() but it doesn't break anything to add them somewhere else.

(See also Routing error with angular 2 and IIS)

Answer 2

You can use the option "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 3

Everything worked fine with the sample code OP posted as with what is in the accepted answer. But as a minor note, the format required to changing the Hash Location Strategy in the bootstrap file as of RC.4 goes like this:

{ provide: LocationStrategy, useClass: HashLocationStrategy },

Answer 4

It is recommended to use the HTML 5 style (PathLocationStrategy) as location strategy in Angular

Because

1. It produces the clean and SEO Friendly URLs that are easier for users to understand and remember.
2. You can take advantage of the server-side rendering, which will make our application load faster, by rendering the pages in the server first before delivering it the client.

Use Hashlocationstrtegy only if you have to support the older browsers.

Click Here for More info