How can I debug an Angular + Capacitor (without ionic) app in an android device?

Pujy25 · April 7, 2020, 3:08pm

Hi everyone!
I have an application created using Angular and Capacitor that stores some data in a SQLite database, so I can’t debug my application in a browser directly because I am using SQLite and that DB is not supported by the browser.

So, my problem is that I can’t find the way to debug my code directly on an Android device, right now I am using console.logs but to me it not makes sense, and I want to debug my code as usual (using debuggers and so on…) Is it possible?

After some research I got information about source-maps like this solution: https://github.com/ionic-team/ionic/issues/16455
but, it is not working… is there another solution? Has anyone had the same problem?

Thanks in advance!

leonardofmed · April 7, 2020, 7:32pm

Have you tried with Google Developer Console?

Type chrome://inspect/devices in URL, connect your device with granted developer permissions and then click on “Inspect” after the app is recognized. There you can debug as a conventional web application.

Pujy25 · April 7, 2020, 8:49pm

Hi @leonardofmed, thanks for your response!
Yes, I always use the Chrome DevTools in order to inspect my app inside the connected mobile device.
But in Android, it is not possible to see the code in the sources tab because it is minified and encrypted, I mean, I want to inspect the TypeScript source file to add breakpoints instead of console.logs to make my work easier…
So for that reason, I think that I need to generate the source-maps, but after some research I can’t find the properly solution, because I am not using Ionic in my project (it is Angular + Capacitor).

Once again, I appreciate your support

aaronksaunders · April 8, 2020, 1:40am

use live reload and then you can inspect the application on the device…

Pujy25 · April 8, 2020, 7:37am

Hi @aaronksaunders thanks for your answer!
My project is based in Angular and Capacitor without Ionic, so, I am not sure but I think that it is not possible to use the live reload… correct me if I am wrong. Is it possible to use live reload directly in Capacitor without ionic?
Anyway, I need to debug directly on the device, because I need to test logic that use SQLite DB and it is not possible to have that database in the browser. So, for that reason, I am trying to use the Chrome DevTools to inspect my app inside the connected Android device but I can’t see properly my TypesScript code (it is minified) to add breakpoints or debuggers instead of console.logs.

Thanks again!!!

aaronksaunders · April 8, 2020, 8:14am

It will work, and I was running the application on my device and debugging it on the browser which is exactly what your question is about.

Please take a look at the documentation and try it before just passing it off as not able to work… it will work I have done this multiple times… so try it and let me know how it goes.

The application I was running was written in vuejs using capacitor, deployed on a Samsung device.

Pujy25 · April 8, 2020, 9:09am

Okey @aaronksaunders. Yes, it is true, I have not try your answer… I understood that your solution was applied in a browser, I am sorry

But if I take a look the capacitor documentation I see that uses ionic…

ionic cap run android -l --external

Obviously, I can’t use that command in my project, because it is not an ionic project (another solution that I found is to add ionic in my project, but I think that I don’t need that dependency… maybe I am wrong…)

So, I understand that your project only uses VueJs and capacitor (without ionic), so I need your help because for sure I am doing something wrong…
What is the command that I need to use? Is my approach correct (without ionic dependency)?

Thanks again for your support!

lhk · April 8, 2020, 10:14am

The capacitor docs use it with npx. Maybe you could try this:

npx cap run android -l --external

https://capacitor.ionicframework.com/docs/getting-started/with-ionic#open-ide-to-build-run-and-deploy

Pujy25 · April 8, 2020, 10:37am

@lhk Yes, I tried that command but it is crashing… I don’t now if that error is related with my code…
Anyway I don’t see an option to do the live reload using the capacitor directly (at least, in the official documentation I don’t see it… )

internal/modules/cjs/loader.js:638
    throw err;

Error: Cannot find module '/Users/blabla/workspace/blabla/android'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

Thanks !!

lhk · April 8, 2020, 1:52pm

how do you usually run your code on the device?

This looks like the question is not really about debugging, but about getting the code to run in the emulator in the first place.

Pujy25 · April 8, 2020, 2:14pm

Maybe you are right @lhk
First of all I need to do the build in angular, so I execute ng build, so after that execution all my code is in the /dist folder.
Now I need to “move” that code inside the android platform using npx cap copy android, and once it is finished I execute npx cap open android to open Android Studio and run the application on the connected device.
So, if previously I put console.logs in my code I can see that information in the connected device using the Chrome DevTools, but in any case I can’t use breakpoints or debuggers because are ignored… and neither I can’t see my typescript code in the Sources tab…

lhk · April 8, 2020, 2:36pm

Hm, what do you mean when you say that your App is without Ionic.
I have no experience with Ionic + Angular.
But couldn’t you just set up the same application without using the Ionic components, and make use of the whole Ionic buildchain?

In any case, once you can actually execute the application inside of the emulator, it should be possible to find it with the Chrome dev tools.
This would then be independent of Ionic.

Missing typescript sources sounds like an issue of missing sourcemaps.
Do you see them when debugging in the browser?
(ionic serve, I don’t know the equivalent for angular without ionic)
If you can’t use Typescript sources in the browser, I would try to fix this first.
Make sure sourcemaps are generated properly.

And where do you set those breakpoints?
In your editos (vs code for example) or in the Chrome dev tab ?

Pujy25 · April 8, 2020, 2:51pm

My app is an Angular project based on Angular CLI, without any dependencies of ionic, so, in order to run my project in an Android or iOS device I use Capacitor as a “bridge”.
So obviously, for that reason I can’t execute any command that is started by ionic… maybe my approach it is not correct and it is more easier to has ionic inside the project to be able to do the live reload and debug everything.

If I do ng serve I can see all my code in the browser (so I can put breakpoints and so on), but my problem is that I am using a SQLite Database and it is not supported by any browser, for that reason, I need to run my application in a mobile device, but I can’t debug my code properly (no typescript files and no way to put debuggers in the Chrome Dev). Anyway, all my debugger; of my code are ignored in the android device (even if I run the code in debug mode)…

aaronksaunders · April 8, 2020, 4:01pm

@Pujy25 I am working on client deliverable for this afternoon, if you haven’t figured it out by later today, I will put together instructions on how to get it running

Pujy25 · April 8, 2020, 4:09pm

Thank you @aaronksaunders! I need to clarify some doubts with you (cause I am not sure if I am following the best approach), taking into advantage you expertise in that area
See you later!

aaronksaunders · April 8, 2020, 7:57pm

Here you go…

Pujy25 · April 9, 2020, 9:37am

@aaronksaunders you saved me, your solution works perfectly!
Now I understand the “server” part in the capacitor.config.json, thank you very much!

I appled the same steps that you propose for ANGULAR + CAPACITOR project:

In the capacitor.config.json file there is a node called “server”, put your pc ip here (with port 4200):

"server": {
    "hostname": "app",
    "iosScheme": "ionic",
    "androidScheme": "http",
    "url": "http://192.168.1.167:4200"
}

Create the android platform:

npx cap add android

Init the live reload in angular, using the following comand (use your pc ip):

ng serve --host=192.168.1.167 --port=4200

Open another terminal, to copy assets to the platform specific directory:

npx cap copy  android

Open Android Studio to run your app on the connected device:

npx cap open android

IMPORTANT!!! Before run, you have to modify the android manifest:

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:usesCleartextTraffic="true" // <== NEW LINE TO ADD!!!
    android:theme="@style/AppTheme">

And that’s it, every change that you do in your code triggers the reload of your application on the mobile device (including debuggers !!!)

Again, thank you very much @@aaronksaunders!!

aaronksaunders · April 9, 2020, 2:23pm

Is what you wrote below anything different than what I wrote in the readme and documentation I provided? I am confused?

Pujy25 · April 9, 2020, 2:46pm

@aaronksaunders no, of course it is the same but I prefer to put here (in the topic) the final solution.

For me it is important that the community has the final approach here directly, and of course it’s your solution. I hope it doesn’t bother you…
I have one final question, is it necessary to have the ionic.config.json file?

Thanks again and sorry for the confusion

aaronksaunders · April 9, 2020, 3:02pm

The problem is that you don’t state that there is no difference so now someone who looks at the link i provided and then looks at what you have written needs to do the analysis themselves to make sure that the two are the same… Like I had to do… it isn’t a final summary, it is exactly what I wrote in the readme I provided… that is what is confusing about you reposting what I already wrote.

This is just my opinion, either way I am glad you got it working