Menu
I have an existing application built with Angular 8 and its code is shared by a website and 2 mobile applications for Android and IOS, bundled with the help of Cordova.
It is working fine but Apple has announced that they will soon no longer supports apps built with 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.
So I am forced to migrate it to WkWebView. There are several threads that I am aware of in the Cordova repository and elsewhere, that talk about possible migration plans (see here for example).
I have also read this other question but it is old (different version of Angular) and doesn't provide any concrete solution.
So I decided to go with the cordova-plugin-wkwebview-engine plugin which seemed to be the simplest solution in my case.
Everything went well until I launched my app in the IOS simulator and see that routing is no longer working.
I managed reducing the issue to the minimal possible Angular app with routing, which you can see working here.
I put all the steps needed to reproduce the issue in this repository.
The following steps require having node, npm and cordova installed globally:
1. clone repository: git clone https://github.com/sasensi/cordova-ios-angular.git
2. move to repository directory: cd cordova-ios-angular
3. install dependencies: npm i
4. create cordova project: cordova create cordova com.demo.app DemoApp
5. build Angular app: npm run build
6. move to cordova directory: cd cordova
7. add WkWebView plugin: cordova plugin add cordova-plugin-wkwebview-engine
8. add <preference name="WKWebViewOnly" value="true"/> in ./config.xml
9. add cordova IOS platform: cordova platform add ios
10. open platforms/ios/DemoApp.xcodeproj in XCode (10.1)
11. run with IPhone X simulator
12. See that routing doesn't work: nothing is rendered below the navigation section (whereas there should be the current page content)
As mentioned in the repository, everything is working as expected when using UIWebView (skipping steps 7. and 8.)
I hope that someone already faced the same issue and can help me make my existing Angular application work in this new context.
445
Add the AppRoutingModule link. In Angular, the best practice is to load and configure the router in a separate, top-level module. The router is dedicated to routing and imported by the root AppModule . By convention, the module class name is AppRoutingModule and it belongs in the app-routing.
Generate an application with routing enabledlink The following command uses the Angular CLI to generate a basic Angular application with an application routing module, called AppRoutingModule , which is an NgModule where you can configure your routes.
At the basic level, routing allows angular to display different "pages" or components. You probably want to have it, if you want to navigate across pages in your application. It shouldn't hurt anything if you add it, but don't use it.
@angular/routerlink. Implements the Angular Router service , which enables navigation from one view to the next as users perform application tasks.
After digging deeper, the issue was linked to the fact that in WkWebView, files are loaded with the file:// protocol and this protocol is not compatible with Angular LocationStrategy.
I found a workaround here, which consist in using HashLocationStrategy instead and setting <base> element href attribute value to document.location.
In or to do that, you have to replace the common <base> element by <script>document.write('<base href="' + document.location + '" />');</script> which creates it at runtime.
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
