Unable to run Ionic 3 HelloWorld App on Android Device using VS Code

Ionic Framework ionic-v3
1

How do I resolve the following error when trying to deploy/run my Ionic 3 hello world app on android device using VS Code?

[cordova-tools] Error processing “launch”: Error: Unable to find localabstract name of cordova app

HelloWorld Ionic 2 apps successfully ran on my Android Device. HelloWorld Ionic 3 apps do not. The only change made was to upgrade to Ionic 3. Now Ionic 2 and Ionic 3 HelloWorld apps do not deploy/run on my android device. Note, the HelloWorld app successfully runs “Simulate in Android Browser”.

I’m new to Ionic and am not sure where to look. Here’s my Ionic 3 environment:

  1. Windows
  2. Ionic v 3.1.2
  3. Editor - VS Code v 1.12.2
  4. Extensions - Cordova Tools v1.2.7, Debugger for Chrome v3.1.1
  5. Android device - Note 4, Android version 6.0.1

Launch.json

       {
            "name": "Run Android on device",
            "type": "cordova",
            "request": "launch",
            "platform": "android",
            "target": "device",
            "port": 9222,
            "sourceMaps": true,
            "cwd": "${workspaceRoot}",
            "ionicLiveReload": false
        },

Please let me know what changes need to be made to run my Ionic 3 hello world app on an android device.

Thanks!

2

If you don’t get a better answer, using the Ionic CLI is quite simple: Install it via npm install -g ionic, then call ionic serve or ionic cordova platform run android in the project directory.

3

Interesting, I successfully executed “run npm install –g ionic cordova”. However, when I run “ionic cordova platform run android” nothing appears to happen. Below is the output:

C:\Source\AlertMeSol\HelloWorld2>ionic cordova platform run android
> cordova platform run android
✔ Running command - done!
Installed platforms:
  android 6.2.3
Available platforms:
  blackberry10 ~3.8.0 (deprecated)
  browser ~4.1.0
  webos ~3.7.0
  windows ~5.0.0

Sorry for asking such a newbie question, but what is supposed to happen?

Following suit with your answer I read Ionic Doc’s Deploying to a Device and ran “ionic cordova run android --livereload -cs” with the following result:

[WARN] Multiple network interfaces detected!
       You will be prompted to select an external-facing IP for the livereload server that your device or emulator has access to.
       You may also use the --address option to skip this prompt.

? Please select which IP to use: xxx.xxx.xxx
Starting app-scripts server: --livereload --l --consolelogs --c --serverlogs --s --address 0.0.0.0 --port 8100 --p 8100 --livereload-
port 35729 --r 35729 --iscordovaserve --externalIpRequired --nobrowser - Ctrl+C to cancel
[12:21:54]  watch started ...
[12:21:54]  build dev started ...
[12:21:54]  clean started ...
[12:21:54]  clean finished in 36 ms
[12:21:54]  copy started ...
[12:21:54]  transpile started ...
[12:22:01]  transpile finished in 6.45 s
[12:22:01]  preprocess started ...
[12:22:01]  deeplinks started ...
[12:22:01]  deeplinks finished in 30 ms
[12:22:01]  preprocess finished in 61 ms
[12:22:01]  webpack started ...
[12:22:01]  copy finished in 7.13 s
[12:22:23]  webpack finished in 22.12 s
[12:22:23]  sass started ...
[12:22:27]  sass finished in 3.88 s
[12:22:27]  postprocess started ...
[12:22:27]  postprocess finished in 14 ms
[12:22:27]  lint started ...
[12:22:27]  build dev finished in 32.85 s
[12:22:28]  watch ready in 33.44 s
[12:22:28]  dev server running: http://localhost:8101/

> cordova run android
[12:22:40]  lint finished in 12.58 s
ANDROID_HOME=C:\Program Files (x86)\Android\android-sdk
JAVA_HOME=C:\Program Files\java\jdk1.8.0_121
Error: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio


[ERROR] Cordova encountered an error.
        You may get more insight by running the Cordova command above directly.

[ERROR] An error occurred while running cordova run android (exit code 1).

What am I missing?

4

Not this, but it should build the app and start it on your device.
Try running ionic cordova platform list please and report the result.
If you get “Installed platforms: android …” you should be able to run run android.

Docs haven’t been updated for the v3 syntax, add cordova in between ionic and run to ionic cordova run android --device.

5

Thank you for your help! Ok, so I ran ionic cordova platform list with the below results:

ionic cordova platform list
> cordova platform ls
✔ Running command - done!
Installed platforms:
  android 6.2.3
Available platforms:
  blackberry10 ~3.8.0 (deprecated)
  browser ~4.1.0
  webos ~3.7.0
  windows ~5.0.0

I also updated my previous post with output from “Ionic cordova run android --livereload -cs”. The output gives the following error:


[12:22:40]  lint finished in 12.58 s
ANDROID_HOME=C:\Program Files (x86)\Android\android-sdk
JAVA_HOME=C:\Program Files\java\jdk1.8.0_121
Error: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio

As I’m using VS Code I don’t have Android Studio installed. Is that an issue for Ionic 3?

6

To build an Android app you need gradle (was the same with all Ionic versions), and one of the easier ways to install gradle is via Android Studio. You can also install it manually and add it to your path, as the message says.

7

My Ionic 2 HelloWorld app was built with Visual Studio 2015 Community and then later opened in VS Code. No issues with the Gradle. Now I’ve switched to VS Code where I created my first Ionic 3 app from scratch.

How do I find/include my existing gradle (that VS 2015 Comm uses) in my path for Ionic 3 builds? Or, do you just recommend installing Android Studio?

8

Actually installing Android Studio won’t hurt. It’s big and slow - but it is a lot less painful than doing all the Android SDK stuff (on Windows) by hand. So yes, install Android Studio and be done with it.

9

I just installed Android Studio (android-studio-bundle-162.3934792-windows). From what I understand the gradle should be included in the system path. Only I can’t find where the gradle is installed. Where does Android Studio put gradle?

Please note, I didn’t do anything to configure Android Studio other than just install it.

Thanks!

10

Good question, I have no idea. Not in the Android SDK directory it seems. But stuff works for me, so I never investigated. (If it really is in PATH, you should just be able to look at the PATH variables)

11

Thanks Sujan12!

I manually installed gradle, put gradle in the system path and now “ionic cordova run android --device” runs my app on the android device.

Thanks again for your help,
Mike

1 Like
12

Awesome.

Gradle seems to be a bit of a pain on non standard systems, but the Cordova folks are working on improving this as much as possible.

13

I spoke too soon. Though “ionic cordova run android --device” works, I’m still not able to run on the device using VS Code’s debugger (my original question). Below is the error using Launch.json’s “Run Android on device”:

The run command has been renamed. To find out more, run:
  ionic cordova run --help
App successfully launched
Attaching to android
Unable to find localabstract name of cordova app

I assume the issue is in Launch.json configuration. Here’s what I have:

        {
            "name": "Run Android on device",
            "type": "cordova",
            "request": "launch",
            "platform": "android",
            "target": "device",
            "port": 9222,
            "sourceMaps": true,
            "cwd": "${workspaceRoot}",
            "ionicLiveReload": false
        },

I compared that to the following output from “ionic cordova run android --device” which successfully ran:

C:\source\examples\HelloWorld>ionic cordova run android --device
Running app-scripts build: --address 0.0.0.0 --port 8100 --p 8100 --livereload-port 35729 --r 35729 --iscordovaserve --externalIpRequired --nobrowser

I’m not sure what to look for though. Please help.

14

Ok, seems the tool in VS Code you are using wasn’t updated for the Ionic CLI v3 yet where ionic run became ionic cordova run. Can you provide a link to the tool so we can investigate a bit further?

15

Sure, here’s the link: https://code.visualstudio.com/download. Once installed I added the “Cordova Tools Extension” which automatically configures Launch.json. Cordova Tools Extension configuration steps are here.

Also note, I’ve been searching for how to manually configure launch.json for Ionic 3 but can’t find it anywhere.

16

Ok, if these tools are called “vscode-cordova” there should be no changes necessary at all as this doesn’t seem to be for Ionic, but for Cordova directly.

17

Ok, after reading the docs there is Ionic support: https://github.com/Microsoft/vscode-cordova#support-for-ionic

18

I couldn’t figure out exactly where they switch from using Cordova to Ionic commands, so I created an issue with the repository: https://github.com/Microsoft/vscode-cordova/issues/279

19

Thank you for your research and post! From their response it looks like they won’t support Ionic 3 for a while.

So now for my next question, are there other light-weight Ionic 3 code editors? I really like VS code because its light-weight, has an integrated editor/git/debugger, intellisense, and error detection. I haven’t given up on trying to make VS Code work with Ionic 3 but integrating the two is over my head so I’ll need to wait for someone else to figure it out.

20

I don’t know if it qualifies as “lightweight”, but I use IntelliJ IDEA, which has all those features as well. Can’t you just use the Ionic CLI to run and Chrome to debug? That’s what I do.