Go Back Behaviour of Angular 2 Router

Question

When I try to access my Angular 2 Application using the direct URL to my index.html file (eg http://localhost:4200/index.html ) everything first works as expected.

However, I use the Angular Router in my application and wanted to implement a back button.

Following the Angular Documentation just calling the window.history.back() function should do just what I want. This is true when I access my application without index.html at the end (eg http://localhost:4200/ ).

However, when I access the application using a link like this http://localhost:4200/index.html and then try to use my back button, I get the following error:

browser_adapter.ts:84 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'index.html/about'
browser_adapter.ts:74 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'index.html/about'BrowserDomAdapter.logError @ browser_adapter.ts:74BrowserDomAdapter.logGroup @ browser_adapter.ts:85ExceptionHandler.call @ exception_handler.ts:50(anonymous function) @ application_ref.ts:353schedulerFn @ async.ts:140SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:125onError @ ng_zone.ts:134onHandleError @ ng_zone_impl.ts:87ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
browser_adapter.ts:74 STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:74ExceptionHandler.call @ exception_handler.ts:53(anonymous function) @ application_ref.ts:353schedulerFn @ async.ts:140SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:125onError @ ng_zone.ts:134onHandleError @ ng_zone_impl.ts:87ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
browser_adapter.ts:74 Error: Uncaught (in promise): Error: Cannot match any routes: 'index.html/about'
    at resolvePromise (zone.js:538)
    at zone.js:515
    at ZoneDelegate.invoke (zone.js:323)
    at Object.onInvoke (ng_zone_impl.ts:64)
    at ZoneDelegate.invoke (zone.js:322)
    at Zone.run (zone.js:216)
    at zone.js:571
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.onInvokeTask (ng_zone_impl.ts:53)
    at ZoneDelegate.invokeTask (zone.js:355)BrowserDomAdapter.logError @ browser_adapter.ts:74ExceptionHandler.call @ exception_handler.ts:54(anonymous function) @ application_ref.ts:353schedulerFn @ async.ts:140SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:125onError @ ng_zone.ts:134onHandleError @ ng_zone_impl.ts:87ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
zone.js:461 Unhandled Promise rejection: Cannot match any routes: 'index.html/about' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: 'index.html/about'(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
zone.js:463 Error: Uncaught (in promise): Error: Cannot match any routes: 'index.html/about'(…)

Because I use Angular 2 in conjunction with Electron I need to access the page with an URL terminating with index.html

How can I fix this issue?

Answer 1

The URL is not matching any route.

If you have followed the documentation provided by Angular team you probably have set your base href as follow:

<base href="/">

Try setting it like this instead:

<script>document.write('<base href="' + document.location + '" />');</script>