Running Angular 2 app in Android Emulator with NativeScript

This post is about running an Angular 2 app in Android emulator.

We have seen that the documentation provided on internet is not the way it should be. This is because it includes four entirely different setups (Node, Android SDK, NativeScript and GIT). Issues occurs and we end up in wasting much time in internet search to fix those issue. We know the issues well and hence have tried to document this process from scratch where you have just....
>>>> Windows 10 installed on your machine.  .... And Nothing Else

Please follow the mentioned steps in sequence (remember the only pre-requisite being Windows 10).

1) Install Node js version 6.7.0 or later. 


You can download the same from -
https://nodejs.org/en/download/current




2) NodeJS version check.


Post node.js installation, open "Node.js command prompt" from Start menu. Check the node and npm versions. Make sure you have these or later versions.

For npm version : npm -v
For node version : node -v




3) Nativescript library for Nodejs installation.


Run the following command to install native script package from Node.js command prompt

npm install -g nativescript



4) Nativescript nodejs libriary installation verification.



To verify the telerik nativescript installation, type "tns" and hit enter in the command prompt.







5) Android SDK installation:


Go to the website - https://developer.android.com/studio/index.html

Scroll to the bottom.

We don't need to install the entire Android Studio, just click on the highlighted link to download the Android Software Development Kit. Install the SDK after download.




Now, you should be seeing two applications installed in "All Programs" menu from Start button.





6) Android packages installation.


Right click SDK Manager and "Run as administrator".

Check three options under "Android 6.0 (API 23) and click "Install packages".




Also, Check four options under "Extras".







7) Android Virtual Device configuration.


Right click on AVD (Android Virtual Device) manager from "Start Menu" and click "run as administrator".

In AVD Manager home screen, click "Create" and enter the exact following information. Click OK.






After this, you should be seeing this screen.






8) Andriod HAXM installation.


Go to the folder - "C:\Program Files (x86)\Android\android-sdk\extras\intel\Hardware_Accelerated_Execution_Manager"

Double click - "intelhaxm-android.exe" to execute the wizard and finish the set up.


9) Andriod Emulator preview.


Now in AVD Manager, click on "Start" on the right side options. The following screen should appear.




10) Nativescript for Windows installation.


Open Command prompt from "Start" menu as an administrator and paste the following command and hit enter to execute.

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://www.nativescript.org/setup/win'))" 

Verify the set up by executing the below command.

tns doctor

If you see "No issues were detected" you are good to go!






11) GIT installation.


Go to the URL - https://git-scm.com/downloads

and click "Windows" under "Downloads" section. After download install the setup.


12) Nativescript's Angular 2 sample app setup.


Create a folder in any location in your drive. (say test)

Now, from start menu - Open "Git Bash" as an administrator.

In Git bash, go to the location where you have created the "test" folder. Paste the following to Git clone a sample nativescript app.

git clone https://github.com/NativeScript/sample-Groceries.git
In Git bash, go to the repo folder

cd sample-Groceries

In Git bash, check out the version

git checkout angular-start



11) Sample app execution in Andriod simulator.


Open command prompt as an administrator and go to the "sample-Groceries" folder created in previous step. Paste the below command and hit enter to execute.

tns platform add android

now run the following command :

tns run android --emulator

You should be seeing the "Hello World" app hosted in the Android emulator.


12) Congratulation! 


You have successfully created and Angular 2 app in Android with NativeScript.


Note : Please post comments, in case you find any issues. Thanks!



2 comments :

  1. Make sure Virtualization is enabled in BIOS (advanced Firmware for windows 10)
    and install manually from https://software.intel.com/en-us/android/articles/intel-hardware-accelerated-execution-manager/

    after running installation batch file, silent_install.bat of downloaded zip file.

    tns run android -->Should open up the simulator!

    ReplyDelete
    Replies
    1. Thanks for sharing this info.. :)

      Delete

Comment Here