Angular 12路由在Cordova-ios 6.2.0环境运行异常启动白屏求助

问题根因 #

Cordova-iOS 6.x版本默认使用WKWebView加载本地应用资源，访问协议为file://，没有对应Web服务器处理Angular默认的PathLocationStrategy路由重定向逻辑，同时<base>标签的href属性如果配置为/，会指向WKWebView的根路径，和Angular构建产物的实际存放路径不匹配，最终导致资源加载失败出现白屏。

可行解决方案 #

方案1：使用哈希路由模式+调整构建参数 #

该方案改造成本最低，兼容性最好：

• 修改Angular项目的路由配置，在AppRoutingModule中给RouterModule.forRoot()添加useHash: true参数，启用哈希路由模式：

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

• 执行Angular生产构建命令时，指定base href为当前目录：
  ng build --prod --base-href ./
• 重新执行Cordova打包流程，验证白屏问题是否解决。

方案2：保留Path路由模式，动态配置基础路径 #

如果不想在路由中出现#后缀，可通过Angular依赖注入动态指定基础路径，无需依赖<base>标签：

• 先删除index.html中原有的<base href="xxx">标签
• 在应用根模块AppModule的providers数组中添加如下配置，动态读取当前路径作为基础路径：

import { APP_BASE_HREF } from '@angular/common';

@NgModule({
  // 其他 declarations、imports 配置保持不变
  providers: [
    { provide: APP_BASE_HREF, useValue: window.location.pathname }
  ]
})
export class AppModule { }

• 正常执行Angular构建和Cordova打包即可。

必要Cordova配置校验 #

如果上述方案执行后仍存在异常，检查Cordova项目根目录的config.xml中是否添加了以下WKWebView适配配置：

<preference name="WKWebViewOnly" value="true" />
<preference name="AllowFileAccessFromFileURLs" value="true" />
<preference name="AllowUniversalAccessFromFileURLs" value="true" />

内容的提问来源于stack exchange，提问作者appalouza