Я пишу это здесь, потому что я изо всех сил пытался найти эти ответы в одном месте и собрал их воедино из различных постов в блоге и постов stackoverflow, каждый из которых казался неполным каким-то образом.
(1) Очень важно начальная загрузка
Источником постоянных ошибок и головной боли оказалось то, что в определенных условиях Angular и основное приложение будут загружены до того, как мобильное устройство (как Android, так и iOS) будет готово кобеспечить доступ к системным ресурсам, таким как камера.Это было чем-то, с чем я танцевал до тех пор, пока, наконец, добавление единого входа в качестве первого шага в нашем приложении не заставило меня столкнуться с проблемой более чем в 75% сценариев загрузки
Решение здесь довольно простое в main.tsвашего углового приложения добавьте javascript document.addEventListener, который ожидает, что cordova сообщит, что устройство готово, прежде чем начнется угловая загрузка.Тег script только тогда, когда мы включаем его в нашей переменной окружения.Это упростило тестирование функций non cordova с помощью ng serve в нашей тестовой среде.
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule).catch(e => console.error(e));
const bootstrapCordova = () => {
/** Dynamically load cordova JS **/
console.log('bootstrapped cordova');
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'cordova.js';
document.head.appendChild(script);
if (script['readyState']) {
// IE 2018 and earlier (?). They're migrating to using Chromium under the hood, so this may change
script['onreadystatechange'] = () => {
if (script['readyState'] === "loaded" || script['readyState'] === "complete") {
document.addEventListener('deviceready', bootstrap, false);
}
};
} else {
// All other browsers
document.addEventListener('deviceready', bootstrap, false);
}
};
environment.cordova ? bootstrapCordova() : bootstrap();
(2) Распознавание типов
Поскольку cordova и ее плагины не нужныС самого начала, как часть Angular, нам нужно добавить наброски Cordova в наш проект Angular.Хотя можно написать код без этого, используя «оконные» функции особым образом, мы обнаружили, что важная типизация решает множество проблем.К счастью, кто-то предоставил машинописные наборы почти каждому ядру Cordova.Мы попытались просто установить эти типизации в файле типов, но обнаружили, что angular будет ворчать во время компиляции из-за наличия типов, но без библиотеки.Для записи, мы не чувствуем, что следующий метод должен работать, но снова и снова они были единственными повторяемыми шагами, которые стали угловатыми, чтобы прекратить ворчать.
Во-первых, мы поддерживаем наше угловое приложение в отдельном файловом пространстве от cordova.Затем мы записываем приложение в папку www, когда запускаем ng build --prod.это означает, что наше приложение cordova и наше угловое приложение имеют уникальный package.json для управления зависимостями npm.Для того чтобы получить доступ к наборам текста в angular, нам нужно добавить cordova и все плагины, которые мы используем, в package.json нашего углового проекта.
"cordova": "latest",
"cordova-plugin-camera": "latest",
"cordova-plugin-inappbrowser": "latest"
Второе - после того, как вы установили эти зависимости, нам нужно сгенерировать файл наборов для нашего проекта.Стоит отметить, что пакет "typings" устарел в npm в пользу "@types".однако мы не смогли выяснить, как достичь конечного результата, который мы хотели, с помощью "@types", поэтому на данный момент мы используем "typings"
npm install –g typings
typings search cordova
typings install dt~cordova --global --save
. Это создаст папку для наборов, где бы вы ни работаликоманда, поэтому мы рекомендуем сделать это в корне вашего углового проекта.Как только это будет сделано, добавьте файл типов в ваш tsconfig.app.json, и вы можете приступить к написанию кода.
"types": [
"./typings/globals/cordova"
]
Третий - импорт на уровне файлов
В нашем исследовании мы видели многоспособов реализовать типизации на уровне кода, но только один работал в нашем проекте.Логика будет диктовать, что мы должны быть в состоянии сделать простое:
import {*} from 'typings/globals/cordova'
, и хотя наша идея была в порядке с этой сборкой ng --prod не было.вместо этого мы ссылаемся на файл наборов следующим образом:
/// <reference path="../../../../typings/globals/cordova/index.d.ts" />
, как только мы это сделали, мы смогли воспользоваться полной интеллигенцией в нашей IDE.
export class SplashComponent implements AfterViewInit, OnDestroy {
private browser: InAppBrowser;
private cordova: Cordova;
constructor(private route: Router) {
this.cordova = window['cordova']
this.browser = this.cordova.InAppBrowser;
}
ngAfterViewInit(){
this.currentBrowser = this.browser.open('https://www.google.com', '_blank', 'location=yes');
}
}
(3) Сборка cordova
Если вы нигде не видели этого, знайте, что лучший способ справиться с остальными проблемами, с которыми вы сталкиваетесь при сборке в cordova, - это удалить свою платформу и добавить ее снова.
cordova platform rm android
cordova platform add android
Используя этот рабочий процесс, мы смогли устранить почти 100% ошибок времени выполнения, которые мы испытали с нашим приложением, и производительность нашего приложения взлетели до небес.
Надеемся, что если у вас возникли эти проблемы, высчитаю этот пост полезным, так как все, что я хотел, существовало.
Примечания:Правильный Angular способ обработки элементов «окна» этого кода - использовать токен инъекции. Я не включил это здесь, потому что это был длинный пост. Я могу обновить его позже, чтобы включить это.