LocationStrategy für den Angular 2 Router ändern

In Single Page Applications in Opera Mini und einigen älteren Browser löst die Standardstrategie der URL-Bildung von Angular einen unerwünschten Rundgang zum Server aus. Die Umstellung auf die HashLocationStrategy ist die Lösung.

Die URL bildet der Router im Webframework Angular (ab Version 2.0) im Standard mit der PathLocationStrategy mit dem Schrägstrich (http://server/pfad) ab, was aber nur in modernen Browser funktioniert, die das Session History Management mit history.pushState() unterstützen (siehe caniuse.com). Ältere Browser und auch aktuelle Versionen von Opera Mini lösen bei einer URL mit Schrägstrich immer einen Rundgang zum Server aus. Für diese Fälle können Entwickler in Angular die LocationStrategy auf HashLocationStrategy setzen und damit die relativen URLs per Hash abtrennen (http://server/#/pfad), was auch in älteren Browser keinen Rundgang auslöst.

Für das Umstellen auf Hash-basierte URLs muss man in app.module.ts die für LocationStrategy zu benutzende Klasse auf HashLocationStrategy umstellen:

import {
 LocationStrategy,
 HashLocationStrategy
} from '@angular/common';
...
@NgModule({
 imports: [...],   // Komponenten
 bootstrap: [AppComponent], // Startkomponente
 providers: [  // Depdendency Injection
  { provide: LocationStrategy, useClass: HashLocationStrategy }, ...  ]
})
export class AppModule { }


()