Search code examples
cordovaangularcordova-plugins

Use Cordova Plugin in Angular 2 + Cordova app

I have an Angular 2 app, that I'm building into cordova and deploying to Android/IOS. I'm NOT using ionic, I've seen a number of solutions that use ionic but I can't convert this entire project to ionic now.

So far everything has worked fine, except I can't figure out how to use the cordova plugins. Specifically I'm trying to use 'cordova-plugin-file' to store local files on the device.

I can't figure out how to import/access plugin files or functions? I may be missing something with how cordova plugins work. Most tutorials show just using whatever the plugin added functionality wise like for example..

window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, function (fs) {
   console.log('file system open: ' + fs.name);
   createFile(fs.root, "newTempFile.txt", false);
}, onErrorLoadFs);

However the above code breaks angular 2 and I get errors like this.

 Property 'requestFileSystem' does not exist on type 'Window'.

It's pretty obvious that somethings not getting imported or reverenced correctly. Most likely because cordova is a sub-folder of the angular 2 app. And I run ng build and put the output files into the cordova folder, so at that time it's unaware of cordova?

 Angular_2_project
 ├── cordova
 │   └── plugins
 ├── src
 │   └── index.html
 │   └── app
 │        └── html/ts files
Solution

  • It seems cordova.js is not loaded.

    Add cordova.js & Plugin related .js

    If it's angular-cli.json just load them up in scripts.

    Also when you will add it in your *.ts files, it will throw an error while trans when u will try to build it. To avoid that add it in declare at beginning of your *.ts file.

    Example : i want to use cordova.on in my ts file.

    I will just write 

    declare var cordova:any