问题
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.
回答1:
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.
回答2:
I hade the same problem and solve it as below:
@sasensi's solution is correct but it requires one more step and therefore, you should add something else to your project to make it work.
This is the precise answer:
STEP 1: Add this <script>document.write('<base href="' + document.location + '" />');</script> instead of <base href="./"> in index.html file.
STEP 2: Add this RouterModule.forRoot(routes,{useHash:true}) instead of this RouterModule.forChild(appRoutes) in your app.routing.module file.
来源：https://stackoverflow.com/questions/59866439/why-angular-8-router-is-not-working-in-cordova-ios-with-wkwebview