Upgrading the Ionic Native package inside your Ionic app involves only a few steps, and the rewards are a smaller app package size and ability to run even more parts of your app inside the browser.

In this Quick Win we will upgrade our existing app and the Text to Speech Plugin which uses Ionic Native 2.x and change all places where we used the Cordova plugin before.

Update Packages

We start by installing the Ionic Native core package (which is included already in every new app) and also install the package for our Cordova plugin, which is new. The different packages are now all separate and can be installed one by one!

So in our case we would now run:

The result is that our package.json now reflects these changes and if you still have an old entry of Ionic Native 2.x you can remove it now:

To use any Cordova Plugin with Ionic Native 3 we also have to load and add it insie our src/app.module.ts, so go ahead and add yours to the providers array like this:

Update Plugin Usage

Now it’s time to change the actual usage of our plugin. Wherever you used your plugin before, you now have to change the import statement to import the plugin from the correct Ionic Native package:

Also, we now have to add the dependency to our constrcutor to create a public available variable like we do with any other service as well:

Finally, as we changed the import and the constructor we are now able to call the plugin different. We are not using the direct name of the package but our public variable which is accessible through this:

You can now go through all your files and change the usage everywhere (so much fun).

Conclusion

Besides the smaller package size which is already pretty awesome, you also get a better mocking feature which helps to develop even more parts of your app directly inside the browser! To learn how to Mock your Plugins, check out the official documentation to use native plugins in the browser.

You can find a video version of this quick win below!