Hash Location Strategy in Angular 2
Solution 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)
Solution 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
Solution 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 },
Diego Unanue
Specializing in Information Systems I own expertise in developing information systems and business modeling, using the latest technologies and IT tools. Ready to respond throughout the development process of software systems. Specialties: .NET, MVC, Javascript, jQuery, CSS, angularjs
Updated on July 23, 2022Comments
-
Diego Unanue almost 2 years
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: '/' }) ]);
-
Pradeep over 7 yearsThis helped me as this is more suitable for Angular 2 final (I am on 2.2.3). All other answers are for older versions of Angular 2.
-
TRiNE about 4 yearsYou are having a huge misunderstanding.