Cordova + Angular 4 + Typescript boilerplate template

Question

I'm working on a Web Progressive App using Angular 4. This app needs to be wrapped up in an Apache Cordova as a Hybrid app built for Android and iOS platforms.

I'm looking for a working boilerplate template for Cordova + Angular 4. Cordova is using www folder for web app and Angular 4 is using src folder for web app. How to merge this two together to work? Angular 'ng serve' should also work?

Answer 1

I finally manage to solve my problem.

• We need to merge Cordova "www" folder and angular "src" folder in one "src" folder where angular app should be.
• package.json needs to be merged as well to fit for both Cordova and Angular.
• Then, (thanks to Gangadhar Jannu for the tip), we need to change in ".angular-cli.json" property "outDir" to "www" because Cordova uses that folder for building their app.
• Then we need to compile Angular app using CLI: "ng build --prod".
• Finally build cordova app: cordova build android|browser|ios|..

Here is a working boilerplate:

https://github.com/NavCore/ngCordova

Answer 2

If you want to change the output directory of ng cli you can configure outDir property in the .angular-cli.json as shown below:

  "outDir": "../public",

Then you can use ng build command to build the angular application in the outDir that you've specified previously