angular - 为什么 Angular 8 路由器不能在带有 WkWebView 的 Cordova IOS 中工作？

Question

我有一个使用 Angular 构建的现有应用程序8 及其代码由 Android 的网站和 2 个移动应用程序共享和 IOS ，在 Cordova 的帮助下捆绑.
它运行良好，但 Apple 宣布他们很快将不再支持使用 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.

所以我被迫迁移到WkWebView .我知道 Cordova 中有几个线程。存储库和其他地方，讨论可能的迁移计划(例如，参见 here)。
我也读过this其他问题，但它很旧(Angular 的不同版本)并且没有提供任何具体的解决方案。

所以我决定选择 cordova-plugin-wkwebview-engine在我的情况下，这似乎是最简单的解决方案。
一切都很顺利，直到我在 IOS 模拟器中启动我的应用程序并看到路由不再工作。
我设法通过路由将问题减少到最小可能的 Angular 应用程序，您可以看到它正在工作 here .
我将重现该问题所需的所有步骤放在 repository 中.

以下步骤需要 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.添加cordova IOS平台:cordova platform add ios10.打开platforms/ios/DemoApp.xcodeproj在 XCode (10.1)
11. 使用 IPhone X 运行模拟器
12.看到路由不起作用:导航部分下方没有呈现任何内容(而应该有当前页面内容)

如存储库中所述，使用 UIWebView 时一切正常。 (跳过步骤 7. 和 8. )

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

Answer 1

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