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: \'/p

Answer 1

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

Answer 2

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 3

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 4

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