Tengo una aplicación creada con Angular 8 y su código es compartido por un sitio web y 2 aplicaciones móviles para Android e IOS , incluidas con la ayuda de Cordova . Funciona bien, pero Apple ha anunciado que pronto dejarán de admitir aplicaciones creadas con UIWebView :
App Store ya no aceptará nuevas aplicaciones que utilicen UIWebView a partir de abril de 2020 ni actualizaciones de aplicaciones que utilicen UIWebView a partir de diciembre de 2020.
Así que me veo obligado a migrarlo a WkWebView . Hay varios hilos que conozco en el repositorio de Cordova y en otros lugares, que hablan sobre posibles planes de migración (ver aquí por ejemplo).
También he leído esta otra pregunta pero es antigua (versión diferente de Angular) y no proporciona ninguna solución concreta.
Así que decidí usar el complemento cordova-plugin-wkwebview-engine, que parecía ser la solución más simple en mi caso.
Todo salió bien hasta que inicié mi aplicación en el simulador de IOS y vi que el enrutamiento ya no funciona.
Logré reducir el problema al mínimo posible de la aplicación Angular con enrutamiento, que puede ver funcionando aquí .
Puse todos los pasos necesarios para reproducir el problema en este repositorio .
Los siguientes pasos requieren tener node , npm y cordova instalados globalmente:
1. Repositorio de clones: git clone https://github.com/sasensi/cordova-ios-angular.git
2. Mover al directorio del repositorio: cd cordova-ios-angular
3. instalar dependencias: npm i
4. crear proyecto cordova: cordova create cordova com.demo.app DemoApp
5. crear una aplicación angular: npm run build
6. mover al directorio cordova: cd cordova
7. agregue el complemento WkWebView: cordova plugin add cordova-plugin-wkwebview-engine
8. agregue <preference name="WKWebViewOnly" value="true"/> en ./config.xml
9. agregue la plataforma cordova IOS: la plataforma cordova platform add ios
10. platforms/ios/DemoApp.xcodeproj en XCode (10.1)
11. ejecutar con el simulador de IPhone X
12. Vea que el enrutamiento no funciona: no se muestra nada debajo de la sección de navegación (mientras que debería estar el contenido de la página actual)
Como se menciona en el repositorio, todo funciona como se esperaba cuando se usa UIWebView (saltando los pasos 7. y 8. ).
Espero que alguien ya haya enfrentado el mismo problema y pueda ayudarme a hacer que mi aplicación Angular existente funcione en este nuevo contexto.
Después de profundizar más, el problema se relacionó con el hecho de que en WkWebView , los archivos se cargan con el protocolo file:// y este protocolo no es compatible con Angular LocationStrategy .
Encontré una solución aquí , que consiste en usar HashLocationStrategy en su lugar y establecer el valor del atributo href del elemento <base> en document.location .
En o para hacerlo, debe reemplazar el elemento <base> común por <script>document.write('<base href="' + document.location + '" />');</script> que lo crea en tiempo de ejecución.
Al usar HashLocationStrategy para iOS, la aplicación finalmente comenzó a funcionar. Gracias por descubrirlo.
Sin embargo, quiero mencionar que no es necesario agregar
<script>document.write('<base href="' + document.location + '" />');</script> porque HashLocationStrategy no necesita el indicador <base> . Funciona sin eso. Solo asegúrese de que no esté en index.html si compila para iOS