Ionic + Phonegap Build: Getting it to work

Hi all, I was trying to get phonegap build working with my ionic project. After 2 days of struggle here are the steps I took to make it work nicely without conflicting with the cli:

  1. Create a repo for the www folder:
    I really didn’t like this but it was a quick job. You should consider creating a separate branch that contains only the www folder but for now this worked for me.

  2. Move your config.xml file to the www folder:
    Create a relative symlink to the config in your project root folder (ln -s -r www.config.xml config.xml). Then add www/config.xml to your main project .gitignore if you have your project already in git.

  3. Add phonegap settings to your config.xml:
    You will need to add the plugins here. Your widget tag should look like this:

    Add any plugins that you are using, in my case, I had to add:

    <gap:plugin name=“com.ionic.keyboard”>

    <gap:plugin name=“org.apache.cordova.console” />
    <gap:plugin name=“org.apache.cordova.device” />
    <gap:plugin name=“org.apache.cordova.geolocation” />
    <gap:plugin name=“org.apache.cordova.inappbrowser” />
    <gap:plugin name=“org.apache.cordova.splashscreen” />

  4. Getting the splash screen to work:
    If you follow ionic’s [guidelines][1] on generating splashscreens, you will end up with a folder called resources on your project root directory. Move that to the www directory, symlink it and optionally add it to your main project gitignore file. Then change your config.xml file removing the generated markup. This is what ionic generates:


It should look like this:

  <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" gap:platform="android" gap:qualifier="xxxhdpi"/>
  <gap:splash src="resources/android/splash/drawable-land-ldpi-screen.png" gap:platform="android" gap:qualifier="land-ldpi"/>

And that is it, point phonegap build to your git repo and everyting builds as it should.

1 Like