Почему роутер Angular 8 не работает в Cordova IOS с WkWebView? - PullRequest
1 голос
/ 22 января 2020

У меня есть существующее приложение, созданное с Angular 8, и его код доступен для веб-сайта и 2 мобильных приложений для Android и IOS, связанных с помощью Cordova. Он работает нормально, но Apple объявила, что скоро они больше не будут поддерживать приложения, созданные с UIWebView:

В App Store больше не будут приниматься новые приложения с использованием UIWebView с апреля 2020 года и обновления приложений с использованием UIWebView по состоянию на декабрь 2020 года.

Так что я вынужден перенести его на WkWebView. Есть несколько потоков, о которых мне известно в репозитории Cordova и других местах, в которых говорится о возможных планах миграции (см., Например, здесь ).
Я также прочитал this другой вопрос, но он старый (другая версия Angular) и не дает никакого конкретного решения.

Поэтому я решил go с плагином cordova-plugin-wkwebview-engine , который казался самым простым решением в моем случае.
Все шло хорошо, пока я не запустил свой приложение в симуляторе IOS и увидите, что маршрутизация больше не работает.
Мне удалось сократить проблему до минимально возможного Angular приложения с маршрутизацией, которое вы можете увидеть здесь .
Я поместил все шаги, необходимые для воспроизведения проблемы в этом репозитории .

Для следующих шагов необходимо, чтобы node, npm и cordova были установлены глобально:
1 репозиторий .one: 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. build 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 ios
10. открыть platforms/ios/DemoApp.xcodeproj в XCode (10.1)
11. запустить с IPhone X симулятор * 10 58 * 12. Обратите внимание, что маршрутизация не работает: под разделом навигации ничего не отображается (тогда как должно быть текущее содержимое страницы)

Как уже упоминалось в репозитории, все работает, как ожидается, при использовании UIWebView (пропуская шаги 7. и 8.)

Я надеюсь, что кто-то уже сталкивался с той же проблемой и может помочь мне заставить мое существующее приложение Angular работать в этом новом контексте.

1 Ответ

2 голосов
/ 24 января 2020

После копания глубже проблема была связана с тем, что в WkWebView файлы загружаются с протоколом file://, и этот протокол не совместим с Angular LocationStrategy .
Я нашел обходной путь здесь , который заключается в использовании HashLocationStrategy и установке <base> element href значения атрибута на document.location.
В или для этого вы должен заменить общий элемент <base> на <script>document.write('<base href="' + document.location + '" />');</script>, который создает его во время выполнения.

...