Web App to Native App in Angular6

Building Native Mobile Apps Using Cordova in Angular-6

Steps for Converting Angular-6 Project To Mobile Application

Step 1:
Open the Angular build project and go-to that specified path in Node.js command prompt and give the command “ng serve” to check the project in browser.

Step 2:
Give command "ng build --prod"

ng build --prod

Step 3:

Install the Cordova project by giving the below command.

npm install -g cordova

Step 4:

This is the major step in the process, in this step Create a new Cordova Project, using the Cordova command below.

cordova create MyAndroidapp

Goto MyAndroidapp folder path giving the below command.

cd MyAndroidapp

One new folder will be created in the project as shown in the below screen-shot.

Step 5:

Add your Cordova building platform:

Where platform can be either browser, Android, Blackberry or IOS.
cordova platform add android

cordova platform add browser

Step 6:

Go to src->index.html page and change <base href="/">to<base href-"./"> and add this script <script type="text/javascript" src="cordova.js"></script> below the <app-root></app-root>

Step 7:
Change the outputpath in angular.json to "dist" and build the app giving the command.

“ng build --prod”

Step 8:

Copy all the files in my-project1->dist folder and paste it inside MyAndriod->www

Note: Delete all previous css,js,index.html files present inside the MyAndriod->www path and paste the files present in dist path.

Step 9:
Run the app in browser using cordova command.

cordova run browser

You can see the Angular developed screens in the web page in browser as shown in below screenshots.

Step 10:
In the same way we need to build and run in android platform, if we run the app then the app will be displayed in android studio emulator or else if we build then an .apk file will be created in the below path.

“D:\Cordova\my-project1\MyAndriodApp\platforms\android\app\build\outputs\apk\debug\app-debug.apk”

so we can install the above .apk file in the andriod mobile,after installation we can see the below screens in the android mobile app.

Use Cordova if you are:

• A mobile developer and want to extend an application across more than one platform, without having to re-implement it with each platform's language and tool set.
• A web developer and want to deploy a web app that's packaged for distribution in various app store portals.
• A mobile developer interested in mixing native application components with a WebView (special browser window) that can access device-level APIs, or if you want to develop a plugin interface between native and WebView components.

I hope this blog will help to Convert your Angular build Project to mobile App using CORDOVA.

By:

Alekhya Pulle

Mouri Tech Pvt Ltd