To create a hybrid application from HTML/CSS/JS there are lots of options such as ionicframework, onsen.io, monaca.io what about creating angular2 web app to hybrid app?.
When it comes to building a mobile app using super cool technology such as HTML CSS3 and javascript only one name comes in the mind Cordova.
“ Target multiple platforms with one code base Free and open source “
We will use Cordova to package our angular 2 application to work on Android power device and iPhone/iPad family.
I will be using mac book as my development machine, but these instructions will work on Windows and Linux based OS too.
Pre-requisite: You should have below items installed on your computer.
Create a new project using angular CLI by default if you run ng new project-name it will create a project but with CSS as a style for each new component, But I want to use SCSS as my default style. we can use --style=scss flag to get SCSS file generated each time when we have the new component
Let’s being…
ng new angular2MobileApp --style=scss
Angular-cli will create clean project to being with.
type ng serve with -o flag to open your default browser
ng serve -o
Your angular 2 App will open in your default web browser.
install Cordova with -g flag npm install npm cordova -g
After installation cd to your project root folder & run below command to create new Cordova project
cordova create cordova com.wwebz.angular2Mobile "Angualr 2 App"
You will see new Cordova folder with its default setting. we can test Cordova project with our browser to do that we need to add platform as a web browser.
cd cordova
cordova platform add browser
cordova run browser
This will open a new browser with default Cordova welcome page with Hello world text.
We can delete default www folder from Cordova project as we want our angular 2 app content should be here.
We can use cordovan’s Hook mechanism to do an automated task such as copying everything from angular2 www folder to cordovan’s www folder before building/packaging Cordova app.
“Cordova Hooks represent special scripts which could be added by application and plugin developers or even by your own build system to customize cordova commands.”
We need to create a new folder inside our Cordova project, we will call it “customHooks” inside customHooks folder create new javascript file.
We need to tell Cordova to use our custom hook to use before creating app bundle for us.
Open config.xml and append below line.
It’s now automated, we don’t have to manually copy & paste from angular www folder to Cordova www folder, that’s great.
It’s time to test our app in actual Android device, let’s add cordova platform for android and build andorid app
cordova platform add android
cordova build android.
We will get a message for build successful & location to our Android apk file.
path….. angular2MobileApp/cordova/platforms/android/build/outputs/apk/android-debug.apk
Go ahead install it on your Android device.
