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
...

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay