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

Question

我有一个用Angular8构建的现有应用程序，它的代码由一个网站和 2 个用于Android和 的移动应用程序共享，并IOS在Cordova. 它运行良好，但 Apple 宣布他们很快将不再支持使用UIWebView以下内容构建的应用程序：

自 2020 年 4 月起，App Store 将不再接受使用 UIWebView 的新应用程序和自 2020 年 12 月起使用 UIWebView 的应用程序更新。

所以我被迫将它迁移到WkWebView. 我知道在Cordova存储库和其他地方有几个线程讨论可能的迁移计划（例如，请参见此处）。
我还阅读了另一个问题，但它很旧（Angular 的不同版本）并且没有提供任何具体的解决方案。

所以我决定使用cordova-plugin-wkwebview-engine插件，这在我的情况下似乎是最简单的解决方案。
一切都很顺利，直到我在 IOS 模拟器中启动我的应用程序并看到路由不再工作。
我设法通过路由将问题减少到最小的 Angular 应用程序，你可以在这里看到它的工作。
我把重现问题所需的所有步骤都放在了这个存储库中。

以下步骤需要具有node,npm并cordova全局安装：
1. 克隆存储库：git clone https://github.com/sasensi/cordova-ios-angular.git
2. 移动到存储库目录：cd cordova-ios-angular
3. 安装依赖项：npm i
4. 创建cordova 项目：cordova create cordova com.demo.app DemoApp
5. 构建Angular 应用程序：npm run build
6. 移动到cordova 目录：cd cordova
7. 添加WkWebView插件：cordova plugin add cordova-plugin-wkwebview-engine
8.附加<preference name="WKWebViewOnly" value="true"/>在./config.xml
9.添加科尔多瓦IOS平台：cordova platform add ios
10.开放platforms/ios/DemoApp.xcodeprojXCode中（10.1）
11运行与IPhone X模拟器
12看到，路由不工作：没有呈现导航部分下方（而应该有电流页面内容）

如存储库中所述，使用时一切都按预期工作UIWebView（跳过步骤7.和8.）

我希望有人已经遇到了同样的问题，并且可以帮助我让我现有的 Angular 应用程序在这个新环境中工作。

Answer 1

深入挖掘后，该问题与以下事实有关：在WkWebView, 文件中加载了file://协议，并且该协议与Angular LocationStrategy不兼容。
我在这里找到了一种解决方法，其中包括使用HashLocationStrategy并将<base>元素href属性值设置为document.location.
为此，您必须替换在运行时创建它的公共<base>元素<script>document.write('<base href="' + document.location + '" />');</script>。