且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

为什么 Angular 8 路由器在带有 WkWebView 的 Cordova IOS 中不起作用?

更新时间:2023-01-22 15:00:55

深入挖掘后,问题与以下事实有关:在 WkWebView 中,文件与 file:// 协议,此协议与 Angular 不兼容 LocationStrategy.
我在此处找到了一种解决方法,其中包括使用 HashLocationStrategy 代替并设置 元素 href 属性值到 document.location.
为此,您必须将常见的 元素替换为 在运行时创建它.

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.

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.