“ 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
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.
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 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.
Go ahead install it on your Android device.