iOS11 Cordova Angular 4 wrap breaking SecurityError: history.replaceState()

Question

I have an angular 4 application wrapped with cordova that was working perfectly fine before iOS11.1

Upgrading the phone to iOS11.1 I now receive the error
Error: Uncaught (in promise): SecurityError (DOM Exception 18): Blocked attempt to use history.replaceState() to change session history URL from file:///var/containers/Bundle/Application/CE4A6135-633D-49B9-9A1D-28CBFF5AB832/MyAppName.app/www/index.html to file:///var/containers/Bundle/Application/CE4A6135-633D-49B9-9A1D-28CBFF5AB832/MyAppName.app/www/. Paths and fragments must match for a sandboxed document. replaceState@[native code] replaceState@file:///var/containers/Bundle/Application/CE4A6135-633D-49B9-9A1D-28CBFF5AB832/Real%20Yeti.app/www/

My base tag is as follows <base href="./">

From the looks of it is that it does a string compare on the url and thinks I am trying to access outside of the sandboxed area, and blocks it

I do however need a base href to be specified, otherwise all links etc will be based from the root of the phone (instead of the app folder) and break.

Does anyone know how to fix this?
(issue is present with iOS11.1.1, iOS11.2)

Answer 1

I have solved this one by using HashLocationStrategy.
This will load the url via /#/ which doesn't trigger the error.

What I changed was:

In index.html set base href to #

<base href="#">

In app-routing.module.ts added the useHash option

RouterModule.forRoot( routes, { useHash: true } ),

In app.module.ts made sure the RoutingModule is the last in the imports array

imports: [
    ...,
    AppRoutingModule,
],

Answer 2

If I understand the source code of WebKit correctly (source for that error), it happens on file URIs, which you have. The only workaround I found is to use a local server so that it's running from localhost:XXX, which does allow replacing the URL