为什么 Angular 8 路由器不能在 Cordova IOS 中使用 WkWebView 工作？
Why Angular 8 router is not working in Cordova IOS with WkWebView?
我有一个使用 Angular 8 构建的现有应用程序，其代码由一个网站和 Android 和 IOS 的 2 个移动应用程序共享，在 [= 的帮助下捆绑在一起15=]。
它运行良好，但 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.在./config.xml
中添加<preference name="WKWebViewOnly" value="true"/>
9. 添加 cordova IOS 平台：cordova platform add ios
10. 在 XCode (10.1)
中打开 platforms/ios/DemoApp.xcodeproj
11. 运行 与 IPhone X 模拟器
12. 看到路由不起作用：导航部分下方没有呈现任何内容（而应该是当前页面内容）
如存储库中所述，使用 UIWebView 时一切正常（跳过步骤 7. 和 8.）
我希望有人已经遇到了同样的问题并且可以帮助我使我现有的 Angular 应用程序在这个新环境中工作。
深入挖掘后，问题与以下事实有关：在 WkWebView 中，文件是使用 file:// 协议加载的，而该协议与 Angular [=18] 不兼容=].
我找到了解决方法 here, which consist in using HashLocationStrategy，并将 <base> 元素 href 属性值设置为 document.location.
为此，您必须将公共 <base> 元素替换为 <script>document.write('<base href="' + document.location + '" />');</script>，后者会在运行时创建它。
当 HashLocationStrategy 用于 iOS 时，应用程序终于开始工作了 - 感谢您发现这一点。
但是，我想提一下，不需要添加
<script>document.write('<base href="' + document.location + '" />');</script>
因为HashLocationStrategy不需要<base>标志。没有它它也能工作。如果您为 iOS
构建，请确保它不在 index.html 中
我有一个使用 Angular 8 构建的现有应用程序，其代码由一个网站和 Android 和 IOS 的 2 个移动应用程序共享，在 [= 的帮助下捆绑在一起15=]。
它运行良好，但 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.在./config.xml
中添加<preference name="WKWebViewOnly" value="true"/>
9. 添加 cordova IOS 平台：cordova platform add ios
10. 在 XCode (10.1)
中打开 platforms/ios/DemoApp.xcodeproj
11. 运行 与 IPhone X 模拟器
12. 看到路由不起作用：导航部分下方没有呈现任何内容（而应该是当前页面内容）
如存储库中所述，使用 UIWebView 时一切正常（跳过步骤 7. 和 8.）
我希望有人已经遇到了同样的问题并且可以帮助我使我现有的 Angular 应用程序在这个新环境中工作。
深入挖掘后，问题与以下事实有关：在 WkWebView 中，文件是使用 file:// 协议加载的，而该协议与 Angular [=18] 不兼容=].
我找到了解决方法 here, which consist in using HashLocationStrategy，并将 <base> 元素 href 属性值设置为 document.location.
为此，您必须将公共 <base> 元素替换为 <script>document.write('<base href="' + document.location + '" />');</script>，后者会在运行时创建它。
当 HashLocationStrategy 用于 iOS 时，应用程序终于开始工作了 - 感谢您发现这一点。
但是，我想提一下，不需要添加
<script>document.write('<base href="' + document.location + '" />');</script>
因为HashLocationStrategy不需要<base>标志。没有它它也能工作。如果您为 iOS