DEV Community

Juraj Chovan
Juraj Chovan

Posted on • Edited on

Problém s build-ovaním Ionic (ver.5 s použitím Cordova) aplikácie

Ak v Ionic (ver.5) používam pluginy frameworku Cordova (napr.geolokačný plugin), narazil som na problém s následným vybuild-ovaním celého projektu do "*.apk" súboru.
Príkaz na pridanie platformy "android" do projektu:

ionic cordova platform add android
Enter fullscreen mode Exit fullscreen mode

zbehol bez problémov:

Image description

Image description
Ale nasledujúci príkaz, na vybuild-ovanie takéhoto Ionic projektu do *.apk súboru:

ionic cordova build android
Enter fullscreen mode Exit fullscreen mode

nebol úspešný:

Image description
Len pre úplnosť doplním verzie jednotlivých framework-ov a nástrojov používaných v tomto projekte:

Image description


Riešenie tohto problému je trochu zlozitejšie, ale skúsim ho popísať.

1.) je potrebné mať zinštalované JDK (Java Development Kit) (použil som veriu 1.8.0 (01/2023), build-ovací nástroj "Gradle" a odporúčam mať (pre jednoduchšiu správu Android SDK verzii a nástrojov) aj "Android Stuio".
2.) pokiaľ tieto veci už nemáme zinštalované, tak postupovať takto:
zo stránky si stiahnúť (pre Windows 64bit) súbor "jdk-8u351-windows-x64.exe".
Poznámka: je potrebné mať na Oracle nejaký účet, aby sa dali sťahovať nejaké súbory.
3.) spustiť inštaláciu, tento súbor "jdk-8u351-windows-x64.exe" a ja som si nastavil cieľový adresár:

C:\Program Files\Java\jdk1.8.0_351\
C:\Program Files\Java\jre1.8.0_351\
Enter fullscreen mode Exit fullscreen mode

4.) overiť správnosť inštalácie, spustením príkazu:

java -version
Enter fullscreen mode Exit fullscreen mode

čo vypíše verziu Java: 1.8.0_35
5.) teraz si zinštalovať build-ovací nástroj "Gradle", ktorý si stiahnem zo stránky.
Inštalácia spočíva iba v rozbalení balika do vhodného adresára, ja som si to dal do:

C:\Gradle
Enter fullscreen mode Exit fullscreen mode

6.) teraz si zinštalovať "Android Studio", resp.aspoň SDK Platform komponenty a nástroje. Asi najjednoduchšie sa tieto komponenty pridávajú a manažujú práve cez "Android Studio", takže moja voľba padla práve na "Android Studio" (v 01/2023 to bol súbor "android-studio-2022.1.1.19-windows.exe").
"Android Studio" si stiahnúť zo stránky, resp.priamo zo stránky.
V inštalácii som zaškrtol komponenty "Android Studio" a "Android Virtual Device" (to budem neskôr používať pri ladení Ionic aplikácii cez android emulátor).

7.) po zinštalovaní "Android Studio" si cez ikonku "SDK Manager" nastaviť (v záložke "SDK Platform" ktoré android verzie budem chcieť používať):

Image description
8.) a v záložke "SDK Tools" si zase vybrať požadované nástroje (je potrebné vybrať aj "Android SDK Build-Tools, ver.30.0.3"):

Image description

9.) odporúčam tiež prekontrolovať nastavenia pre javu vo Windows systémových premenných:

Image description
tj.nastavenie premennej "JAVA_HOME" a potom nastavenie v "Path":

Image description
10.) teraz poďme naspäť do Ionic projektu - je potrebné spustiť príkaz:

npm install @ionic/cordova-builders
Enter fullscreen mode Exit fullscreen mode

11.) a v Ionic projektovom súbore "angular.json" doplniť nasledujúce:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
     // ... TOTO DOPLNIŤ na koniec sekcie "architect": 
        "ionic-cordova-build": {
          "builder": "@ionic/cordova-builders:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/cordova-builders:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        } 
Enter fullscreen mode Exit fullscreen mode

12.) ešte spustiť príkaz, ktorý prekontroluje požiadavky, ktoré má framework "Cordova":

cordova requirements
Enter fullscreen mode Exit fullscreen mode

Image description
13.) a teraz už je možné (opäť) spustiť príkaz na vybuild-ovanie Ionic projektu do android APK súboru:

ionic cordova build android
Enter fullscreen mode Exit fullscreen mode

čo by už malo zbehnúť:

Image description

Image description
14.) po úspešnom vykonaní, je vytvorený (konečne) súbor APK, tj.vybuild-ovaná Ionic (ver.5) aplikácia (používajúca Cordova pluginy) - tento súbor nájdeme v adresári projektu:

..\platforms\android\app\build\outputs\apk\debug\
Enter fullscreen mode Exit fullscreen mode

Image description
...

Top comments (0)