Access Android Device with localhost development server — Ionic 3 Angular 4

One of the challenges I’ve experienced with Ionic 3 is how to debug the application I’ve written.

The structure/architecture of my projects was a standard, even basic one -

You have an app which you want to debug on device without connecting to some hosted server . It’s all on your own PC.

You want to connect to the localhost WCF/WebApi/Node.js or whatever server you use on your own development machine, home pc, laptop — whatever .

So here are my list of things to do:

1.Using VSCode with the right plugin — Cordova Tools

before this plugin I’ve created launch.js by myself for running ionic in a browser .

That was my launch.js file — configuration for running app with yet another plugin I’ll describe in a sec.:

{
“version”: “0.2.0”,
“configurations”: [
{
“type”: “chrome”,
“request”: “launch”,
“name”: “Launch Chrome against localhost”,
“url”: “http://192.168.99.1:8100",
“webRoot”: “${workspaceRoot}/www” ,
“sourceMaps”: true
},
{
“type”: “chrome”,
“request”: “attach”,
“name”: “Attach to Chrome”,
“port”: 9222,
“webRoot”: “${workspaceRoot}/www”
}
]
}

I would’ve pressed the bug icon in VSCode and would activate “Launch Chrome against localhost” option form the debugging menu

All the debugging is enabled by this plugin —Debugger for Chrome

you just write in the terminal (ctrl+`) window inside your ionic project:

> ionic serve

and of you go. You have a running mobile app in your browser.

super starter template by ionic 2

That a neat-cool trick. But the plot thickens

Now you need to debug those parts of the app that can and would work only on the device itself..

Like for instance — native facebook plugin or a google map.

All that stuff uses cordova native plugins which are working only on physical device itself!!

So now , after installation of the Cordova tools , I got a lot more options for debugging . We actually have a full team working on that. Naturally their finishes are better ang qualified for debuging.
So here are my options after installing the Cordova tools:


2. Add android_home as entry to global environment .

In my case it was

C:\Users\2bher\AppData\Local\Android\sdk

3. Add adb to the path .

In my case it was

C:\Program Files (x86)\Android\android-sdk\platform-tools

4. Enable remote devices and ways to wok with them

In chrome browser > f12 > goto settings (3 dots in the corner)

> More Tools > Remote Devices >

after enabling the device and going through this tutorail you can see the device in the chrome in remote devices

or you can inspect the available devices :

write chrome://inspect in address bar

5. The most problematic stuff was configuring the ports and ips .

Here it took me a bit time and effort.

So what needs to be done in my case —

Forwarding to the ip of your local machine with the same port as before.

For getting ip go to cmd and write ipconfig:

Look for Wireless LAN adapter WiFi:

And get your IPv4 Address. . . . . . . . . . . :

that’s your lucky number to use.

in the chrome write in address : chrome://inspect and click Port Forwarding

6.Adjust your development to point to the right direction/machine

Other than that you need to change the address of the local development server in your code :

So as you see after a few trial I did hit the jackpot — the IP should be the same from the ipconfig. The device should be connected to the same WIFI

export const environment = {
production: false,
apiUrl: ‘http://192.168.1.16/Kai.Wcf/Service1.svc'
// apiUrl: ‘http://desktop-h714b4l/Kai.Wcf/Service1.svc'
// apiUrl: ‘http://localhost/kai.wcf/Service1.svc'
};

7.config.xml adjustment for your app to run smoothly

added:

<access origin=”*” />
<access launch-external=”yes” origin=”tel:*” />
<allow-navigation href=”*” />
<allow-navigation href=”http://*/*" />
<allow-navigation href=”https://*/*" />
<allow-navigation href=”data:*” />
<allow-intent href=”*” />
<preference name=”loadUrlTimeoutValue” value=”90000" />
<hook src=”hooks/copy-fonts.js” type=”after_prepare” />

at the hooks folder added copy-fonts.js file, to resolve issues with roboto resources uploading to the device. There’s the code to set inside the file.

var copyfiles = require(‘copyfiles’);
module.exports = function (context) {
copyfiles([
‘node_modules/ionic-angular/fonts/**/*’,
‘www/assets/fonts’
],
true,
() => { });
}

That’s it . 
Now I have an app running on the android device working with local development server iis with wcf services , and I can debug it.

From VSCODE with my ionic

To wcf in Visual Studio 2017

If you are working with WCF don’t run it with Test Client , but with Chrome — it’ll enable you to attach the process and debug automatically.
What a rush!

Enjoy..