Angular2 Final: Page Refresh error, 'Cannot GET' route. HashLocationStrategy failed

Question

I have recently upgraded to Angular2 final release. I don't think this is a duplicate because HashLocationStrategy stopped working for me after the Angular2 Final/RC7 update. Previously, refreshing the page would fetch/GET the related route with a hash (#) and reload the page. Now, I get this error on any refreshed page:

I believe this is happening because it is trying to load http://localhost:3000/main/home instead of http://localhost:3000/#/main/home.

Any idea why HashLocationStrategy stopped working? Should I be importing HashLocationStrategy in my @NgModule?

Possible duplicate of http://stackoverflow.com/questions/38265536/angular-2-rc-4-hashlocationstrategy-no-longer-working — Supamiu, Sep 20 '16 at 13:53
https://angular.io/docs/ts/latest/guide/router.html#!#-hashlocationstrategy- here is everything you'll need. — Supamiu, Sep 20 '16 at 14:08

Stefan Svrkota · Accepted Answer · 2016-09-20T13:59:37.333

4

You should set LocationStrategy to HashLocationStrategy in your AppModule's providers:

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

@NgModule({
    imports: [
        ...
    ],
    declarations: [
        ...
    ],
    bootstrap: [...],
    providers: [
        { provide: LocationStrategy, useClass: HashLocationStrategy }
    ]
})

export class AppModule { }

edited Sep 20 '16 at 13:59

answered Sep 20 '16 at 13:56

Stefan Svrkota

48,787
9
98
87

score 0 · Answer 2 · answered Sep 20 '16 at 14:05

I don't know if that is still valid but there is a cleaner way:

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

@NgModule({
    imports: [
        RouterModule.forRoot(ROUTES_ARRAY, {useHash: true})
    ],
    declarations: [
        ...
    ],
    bootstrap: [...],

})

export class AppModule { }

Angular2 Final: Page Refresh error, 'Cannot GET' route. HashLocationStrategy failed

2 Answers2