Angular 2 + Phonegap: how can they works together? How to set a basic template and a working apk?

Question

i'm new on angular 2 and phonegap. I want to use them together, but i can't figured out how they works together:

• a phonegap basic project has a structure (e.g. the source folder is "www", it has his "package.json" file, etc)

• an angular2 basic project has a different structure (e.g. the source folder is "src", it needs a node_modules folder, it has his "package.json", etc)

I tried to merge them (e.g. for the "package.json" I merged the content of the two package.json, etc). I don't know if the merge is correct, but anyway i don't understand how they works together, because they have different way to test:

• phonegap: i can use the desktop application for run the project, or "phonegap serve" from terminal. I tried to create the apk too, and test it on a real device, but in every of these way, my angular2 section doesn't work (only the basic html)
• angular2: for testing an agular2 project, i have to do "npm start"...if I do it into the phonegap-merge project, the angular section2 works.

So i can't figured out how to make them works together in a apk build. Few days ago, i experimented with Ionic 2, e when I build an apk with Ionic2, angular2 sections works. So I wonder if phonegap "compile" command does not include some "server" for angular2. Anyway, i don't want use Ionic2 because it has his own speciale tags

Thanks

Answer 1

You make project using angular-cli, You make one cordova project Then in your angular-cli.json file -> change the path to cordova's www folder.

Then when you do ng prod build, your resources would be copied to cordova's www folder.

I wrote one cordova hook for the same,

const fs = require('fs');
const execSync = require('child_process').execSync;



module.exports = function(context) {
    const basePath = context.opts.projectRoot;
    const baseWWW = basePath + '/www';

process.chdir('../bmi-surgical-app');
console.log(`New directory: ${process.cwd()}`);

    execSync("ng build --prod --base-href .",{stdio:[0,1,2]});

    var files = fs.readdirSync(baseWWW);
    for (var i = 0; i < files.length; i++) {
      if (files[i].endsWith('.gz')) {
        fs.unlinkSync(baseWWW + '/' + files[i]);
      }
    }
    fs.writeFileSync(baseWWW + '/.gitignore', `# Ignore everything in this directory

*
# Except this file
!.gitignore
`);


};

However many better options are available like NativeScript & Ionic 2.

Answer 2

If you want to stick up Phonegap your best bet would be angular-cli it uses webpack as well as automated build for dev or production can be configurable and after all you would need to add less js files in your production build

Answer 3

You can use Ionic Framework 2 that was released just yesterday. It uses Cordova though, but Phonegap is distro of Cordova, so you can go for it if it suites you.

Here is documentation http://ionicframework.com/docs/