CODEWITHSUNDEEP
angular2-routing
Gregor
Gregor

Reputation: 3027

Angular2 Routing no Hash even with HashLocationStrategy

This is a follow up to Angular 2.0 router not working on reloading the browser Even if I configure the router to use the HashLocationStrategy I still get the url paths without #. I follow exactly the Angular2 docs https://angular.io/docs/ts/latest/tutorial/toh-pt5.html and set the location strategy as described here https://angular.io/docs/ts/latest/guide/router.html

My bootstrap:

import {bootstrap}    from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {
    ROUTER_PROVIDERS,
    LocationStrategy,
    HashLocationStrategy
} from 'angular2/router';

import {AppComponent} from './app.component';

bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    provide(LocationStrategy, { useClass: HashLocationStrategy })
]);

And the router config:

@RouteConfig([
    {
        path: '/detail/:id',
        name: 'HeroDetail',
        component: HeroDetailComponent
    },
    {
        path: '/heroes',
        name: 'Heroes',
        component: HeroesComponent
    },
    {
        path: '/dashboard',
        name: 'Dashboard',
        component: DashboardComponent,
        useAsDefault: true
    }
])

I'd expect to see a url like http://localhost/#/dashboard in the browser, but I get http://localhost/dashboard. What am I missing?

Upvotes: 1

Views: 4371

Answers (4)

Olexandr Polishchuk
Olexandr Polishchuk

Reputation: 135

it's works for me:

...

import { RouterModule, Routes } from '@angular/router';

import {
  APP_BASE_HREF,
  LocationStrategy,
  HashLocationStrategy
} from '@angular/common';


...

const appRoutes: Routes = [
  { path: '', loadChildren: './user-profile/user-profile.module#UserProfileModule'},
  ...
];

@NgModule({
 ...
  providers: [ { provide: APP_BASE_HREF, useValue: "/core/user" }, {provide: LocationStrategy, useClass: HashLocationStrategy}],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 0

Gregor
Gregor

Reputation: 3027

The problem seems to be, that the LocationStrategy has to be defined within the providers array, as pointed out by SilverJan and KochFolie. See HashLocationStrategy not working as expected

Upvotes: 0

SilverJan
SilverJan

Reputation: 444

Try to move the ROUTER_PROVIDER and provide(..)-stuff into your app.component.ts file.

In there you should paste it into the @Component.providers-Array.

For a more detailed answer have a look at this post, it solved my problem which seems to be close to yours: https://stackoverflow.com/a/35879541/4977476

Upvotes: 1

manuBriot
manuBriot

Reputation: 2715

My understanding (which might be wrong, I am just beginning with Angular2) is that the useAsDefault acts as a redirect. But this isn't needed when using hash locations, since from the server's point of view, all pages are on '/' anyway.

Upvotes: 0

Related Questions