Angular2 - APP_BASE_HREF with HashLocationStrategy

Question

I have an angular application uses routing with HashLocationStrategy, I need to set different value in main html file and different in routing.

I tried this solution:

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        MyRouting // with useHash set to true
    ],
    declarations: [
        AppComponent,
    ],
    providers: [
        { provide: APP_BASE_HREF, useValue: '/prefix' }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Works almost well but value '/prefix' is insert after hash, like this:

http://myapp.com/#/prefix/home

Whereas i want:

http://myapp.com/prefix/#/home

For clarity, my base tag is:

<base href="/">

score 17 · Accepted Answer · edited Jun 13 '18 at 09:04

I came across the same problem and fixed it with my own Subclass of HashLocationStrategy

import { Injectable } from '@angular/core';
import { HashLocationStrategy } from '@angular/common';

@Injectable()    
export class CustomLocationStrategy extends HashLocationStrategy {
    prepareExternalUrl(internal: string): string {
        return this.getBaseHref() + '#' + internal;
    }
}

Then just using it in my module

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LocationStrategy } from '@angular/common';
import { APP_BASE_HREF } from '@angular/common';
import { CustomLocationStrategy } from './app.common';

const appRoutes: Routes = [...];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes, { useHash: true })
    ],
    providers: [
        { provide: APP_BASE_HREF, useValue: window.location.pathname },
        { provide: LocationStrategy, useClass: CustomLocationStrategy },
    ]
})
export class AppModule {
}

That was it! But you don't have to use option useHash for routerModule when you use HashLocationStrategy. — Jarek, Dec 16 '16 at 08:14
@Jarek Ah ok, thanks. I opened an issue at angular, so maybe there will be a core option for this in the future https://github.com/angular/angular/issues/13482 — Volker Andres, Dec 16 '16 at 09:16

score 1 · Answer 2 · answered Nov 18 '16 at 10:22

1

yahoooooooooooo !! got it to work.

in your index.html file, specify the baseurl as "." like this:

<base href=".">

and specify the hash location strategy in your providers property in your NgModule decorator in your app.module.ts, like this:

@NgModule({
  declarations: [AppComponent],
  imports: [
    FormsModule,
    HttpModule,
    AppRoutingModule,
    ShellModule,
    ShellProvidersModule,
    BrowserModule
  ],
  providers: [
    SessionService,
    { provide: LocationStrategy, useClass: HashLocationStrategy },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

see: https://github.com/datumgeek/plotter-app-seed-angular2/blob/master/src/app/app.module.ts#L26

running demo here: https://datumgeek.github.io/plotter-app-seed-angular2/#/shell;stateRepositoryId=file-host-01;sessionId=session-03

answered Nov 18 '16 at 10:22

Datum Geek

1,358
18
23

This won't work in this case, it's all about how to angular add the hash in url. Solution I found is to create a class that inherits from HashLocationStrategy and overwrite method adding hash and then use that as LocationStrategy provider. – Jarek Dec 16 '16 at 07:53
hmmm... did you click the "running demo link"? it works for me... https://datumgeek.github.io/plotter-app-seed-angular2/#/shell;stateRepositoryId=file-host-01;sessionId=session-03 – Datum Geek Dec 17 '16 at 10:15
Yes, I see that your demo works. But it's not solution for my case. Look at Volker Andres code, it's about change the hash position in url. – Jarek Dec 19 '16 at 07:47
I do not have Index.html. My project is in MVC5 with angular 4. Where should I write this? in Home/Index.cshtml or Layout.cshtml? – captainsac Jan 02 '19 at 16:00

Angular2 - APP_BASE_HREF with HashLocationStrategy

2 Answers2

Linked