Existing Angular 2 and Cordova Apps

I have done some searches and cannot find an answer to my question.

I have an existing Angular 2 app. Can I use Cordova to build it for multiple platforms? If not, are there any special measures to make this happen? Is there actual documentation on how this works?

Before that is suggested, I'll tell you that I don't want to have anything to do with Ionic.

+3


source to share


1 answer


You can of course add cordova support to your existing Angular2 app. I haven't found any official documentation, but there are several resources out there that provide some helpful advice on how to do this.

See here , here and here

Basic steps:

  • Create cordova project: cordova create myApp com.example MyApp
  • Add required platforms: cordova platform add myPlatform
  • Copy all generated files from your new cordova project to your existing angular project except: www folder and package.json .
  • Merge your angular package.json with the content of the new cordova ackage.json.
  • Modify your existing angular build script to dump the dist files into the www folder so that cordova can find the final source files.

This is where you should be able to run rootova runroid / ios / browser and your application should work. If you need to use special cordova plugins you need to add this to your index.html



<script type="text/javascript" src="cordova.js"></script>

      

Don't worry that the cordova build will ensure that this file exists on the target platform.

Then on main.ts or index.ts add a check to make sure the device is ready and load your angular app. Something like that:

let bootstrap = () => {
    platformBrowserDynamic().bootstrapModule(AppModule);
}

if(window['cordova']){
    console.log("Cordova found")
    document.addEventListener('deviceready',bootstrap);
} else {
    console.log("Cordova not found")
    bootstrap()
}

      

Hope this helps someone.

+2


source







All Articles