2020-05-01
zelder
2020-05-01
01/05
2020

Сборка приложения Angular под Android.


Требования
Windows 10, Node, Android SDK, JDK.
Предполагается наличие готового проекта на Angular (в этой статье версии 9), собственно, его и будем собирать как apk.

Подготовка переменных среды.
В командной строке (Win+R): sysdm.cpl, далее Дополнительно - Переменные среды.
Переменные среды пользователя:
ANDROID_HOME=D:\AndroidSDK
JAVA_HOME=D:\Program Files\Java\jdk1.8.0_201\
Системные переменные, к PATH добавить:
D:\AndroidSDK\tools\
D:\AndroidSDK\platform-tools\
%JAVA_HOME%
Пути, конечно, могут отличаться.

Далее, все команды выполняем из PowerShell (под администратором).
Устанавливаем Cordova
npm install -g cordova

Создание проекта Cordova
в папке, где будем создавать папку с проектом:
cordova create MyAppDir com.zelder.myapp MyApp
далее, переходим в папку с проектом:
cd MyAppDir

Добавляем платформу
Cordova поддерживает несколько платформ, мы добавим поддержу Android
cordova platform add android

Тестовый запуск
cordova run android
Возможные проблемы с наличием SDK и переменных среды (указано выше).
Запустилось, но еще не наше приложение.

Внедрение Angular приложения
- В папке проекта cordova (MyAppDir), в папке www удаляем все
- Если еще не собрали angural приложение (в папке с приложением angular): ng build --prod --aot
- Копируем angular-приложение (angular/dist/my-app/*.*) в папку с приложением cordova (cordova/MyAppDir/www/*.*)
- Конфигурация приложения:
В файле index.html заменяем <base href=“/”> на <base href=“./”>
При необходимости, поправляем описание приложения в файле config.xml.

Запуск
cordova run android
Возможные проблемы:
1. Не запускается эмулятор: для этого вручную запустите эмулятор, через Android Studio - Tools - AVD Manager.
2. Приложение запустилось, но белый экран (просто статическая страница index.html без логики): в проекте Angular в tsconfig.json установите "target": "es5" (по-умолчанию могло быть es2015)

Сборка с подписью
cordova build android --release -- --keystore="..\mykeys.keystore" --storePassword=password --alias=mykey --password=password
Это как пример. Предполагается, что файл с ключами (mykeys.keystore) лежит на уровень выше.
О том, как подписывать свои приложения можно почитать тут.

Файл apk
Будет по пути: MyAppDir\platforms\android\app\build\outputs\apk\release

Доступ в интернет
Если ваше приложение использует запросы в интернет, то необходимо подключить разрешение:
Создать файл 'platforms\android\app\src\main\res\xml\network_security_config.xml' с содержимым:
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true" />
</network-security-config>
Подробнее о конфигурации безопасности сети можно почтить тут.

В файле манифеста 'platforms\android\app\src\main\AndroidManifest.xml' в тэг 'application' прописать атрибуты:
android:usesCleartextTraffic="true"
android:networkSecurityConfig="@xml/network_security_config"


.