7

I have an existing application built with Angular 8 and its code is shared by a website and 2 mobile applications for Android and IOS, bundled with the help of Cordova. It is working fine but Apple has announced that they will soon no longer supports apps built with UIWebView:

The App Store will no longer accept new apps using UIWebView as of April 2020 and app updates using UIWebView as of December 2020.

So I am forced to migrate it to WkWebView. There are several threads that I am aware of in the Cordova repository and elsewhere, that talk about possible migration plans (see here for example).
I have also read this other question but it is old (different version of Angular) and doesn't provide any concrete solution.

So I decided to go with the cordova-plugin-wkwebview-engine plugin which seemed to be the simplest solution in my case.
Everything went well until I launched my app in the IOS simulator and see that routing is no longer working.
I managed reducing the issue to the minimal possible Angular app with routing, which you can see working here.
I put all the steps needed to reproduce the issue in this repository.

The following steps require having node, npm and cordova installed globally:
1. clone repository: git clone https://github.com/sasensi/cordova-ios-angular.git
2. move to repository directory: cd cordova-ios-angular
3. install dependencies: npm i
4. create cordova project: cordova create cordova com.demo.app DemoApp
5. build Angular app: npm run build
6. move to cordova directory: cd cordova
7. add WkWebView plugin: cordova plugin add cordova-plugin-wkwebview-engine
8. add <preference name="WKWebViewOnly" value="true"/> in ./config.xml
9. add cordova IOS platform: cordova platform add ios
10. open platforms/ios/DemoApp.xcodeproj in XCode (10.1)
11. run with IPhone X simulator
12. See that routing doesn't work: nothing is rendered below the navigation section (whereas there should be the current page content)

As mentioned in the repository, everything is working as expected when using UIWebView (skipping steps 7. and 8.)

I hope that someone already faced the same issue and can help me make my existing Angular application work in this new context.

sasensi
  • 4,610
  • 10
  • 35
  • With Cordova iOS 6 you no longer need the wkwebview plugin but I still had the same issue. Your location strategy stuff was a huge help, thank you. – adamdport Aug 07 '20 at 00:12

2 Answers2

10

After digging deeper, the issue was linked to the fact that in WkWebView, files are loaded with the file:// protocol and this protocol is not compatible with Angular LocationStrategy.
I found a workaround here, which consist in using HashLocationStrategy instead and setting <base> element href attribute value to document.location.
In or to do that, you have to replace the common <base> element by <script>document.write('<base href="' + document.location + '" />');</script> which creates it at runtime.

sasensi
  • 4,610
  • 10
  • 35
  • 1
    Thanks alot! With Angular 9 + Cordova – Buzzet Mar 10 '20 at 17:56
  • 2
    Any idea when I am running into `Origin null is not allowed by Access-Control-Allow-Origin.` issues when it is trying to load the compiled .js files? – CularBytes Aug 20 '20 at 06:08
  • @CularBytes try opening your chrome browser with this command inside the run application(win + R): chrome.exe --user-data-dir="C:/Chrome dev session/test" --disable-web-security – Kamran Taghaddos Jan 25 '21 at 09:33
  • Winner Winner Chicken Dinner. Solved my NG11 + Cordova problem. – Brant Mar 31 '21 at 14:18
0

When using HashLocationStrategy for iOS the app finally started working - thanks for finding that out.

However, I want to mention that it is not neccessery to add

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

because HashLocationStrategy does not need <base> flag. It works without it. Just make sure it is not in index.html if you build for iOS

Antoni
  • 41
  • 1
  • 5