Using a Cordova plugin with Capacitor - ionic-framework

I've been working through this example:
https://capacitor.ionicframework.com/docs/basics/cordova
I've run:
npm install cordova-plugin-qrscanner
npx cap sync
and I can see the plugin installed in my node_modules.
What I do not know how to do is call one of the functions on the cordova-plugin. I'm wondering if I need a packager like webpack?
I'm also confused as to how this works if the cordova plugin contains native swift (or other) code.

Remember you can install the native wrapper too. It should work just the same as using it with Cordova.
npm install #ionic-native/qr-scanner
From:
ionic cordova plugin add cordova-plugin-qrscanner
npm install #ionic-native/qr-scanner
To:
npm install cordova-plugin-qrscanner
npm install #ionic-native/qr-scanner
npx cap sync
https://ionicframework.com/docs/native/qr-scanner

Related

Upgrade Ionic 5.0 to 5.3 Commands

What is the proper set of npm commands to update Ionic from v5.0 to v5.3.1 (latest release), as well as, bump the version of Capacitor, Ionic Native, and the dev dependencies appropriately?
I can't find an update guide with commands in the Ionic docs unlike in Angular where you would follow the update steps on https://update.angular.io. They don't seem to indicate whether the CLI version should match the Ionic version, or whether the version of Capacitor for a specific version of Ionic or the CLI is required, or if none of that matters.
Would I run these commands:
// dependencies
npm install #capacitor/android#latest
npm install #capacitor/core#latest
npm install #capacitor/ios#latest
npm install #ionic/core#latest
npm install #ionic-native/core#latest
npm install #ionic-native/in-app-browser#latest
npm install #ionic-native/splash-screen#latest
npm install #ionic-native/status-bar#latest
npm install #ionic/angular#latest
npm install #ionic/storage#latest
// dev dependencies
npm install #capacitor/cli#latest
npm install #ionic/angular-toolkit#latest
npm install #ionic/lab#latest
or equivalently just run npm upgrade <LIST_OF_ABOVE_PKGS>? and are there dependencies between Ionic, Ionic CLI, Capacitor, and Ionic Native?
run at cmd in "npm install -g ionic#5.3.2"

Difference between "ionic cordova plugin add" and "npm install #ionic-native/plugin --save"

I have been trying to use the ionic-native plugins provided by Ionic 3. When I read the install instructions, there are always 2 command lines instead of one.
ionic cordova plugin add cordova-plugin-camera
npm install --save #ionic-native/camera
If my memory serves me right, only a single command similar to ionic plugin add somepluginhere will get the job done in the old days.
What are the differences here?
The difference is they are different packages.
ionic cordova plugin add
This command will download the cordova plugin - in this case, camera and set the config.xml , package.json, save in plugins folder and set it for each of your platforms.
Ionic leverages the cordova CLI to do this.
ionic-native
Ionic Native is simply a wrapper to the corresponding plugin.
npm install --save #ionic-native/camera
It installs the package #ionic-native/camera to your node-modules folder and sets that in package.json and nothing more.
This wrapper allows you to inject the corresponding cordova plugin as an Angular provider wherever you need instead of trying to declare the global variable and other workarounds.

How to solve: Detected locally installed Ionic CLI, but it’s too old -- using global CLI?

ionic -v results in this warning:
[WARN] Detected locally installed Ionic CLI, but it’s too old -- using global CLI.
How to uninstall local Ionic CLI?
ionic-cli has been updated to version 4.0.1 a couple of days ago.
https://github.com/ionic-team/ionic-cli/blob/develop/CHANGELOG.md
You should remove local cli by npm remove ionic --save-dev and use global one instead.
npm i -g ionic
PS: For ionic v1 project, you have to install #ionic/v1-toolkit now.
https://www.npmjs.com/package/#ionic/v1-toolkit
I had this issue on my app as well.
I no longer had '#ionic/cli' or 'ionic' as a dependency, but every time I re-ran "npm i" it would return as a locally installed item. Looking through my package-lock.json I saw that it was also being installed as a dependency of #types/ionic which I then removed and solved this issue as well.
Remove old ionic:
npm remove ionic
And then install ionic v 4.0.1:
npm install ionic#latest --save
Remove local Ionic CLI npm package:
npm rm ionic --save

Ionic and cordova(Latest versions) installation problems

I'm trying to install the Ionic framework with npm. It successfully installed. But when I try installing new versions of Ionic and Cordova, I was unable to install and Error messages are coming frequently in the ubuntu terminal.
I had a same problem but i recovered it using following command:
npm install -g cordova ionic --verbos
if its not work then you need to try yarn. you can download and install form https://yarnpkg.com/lang/en/docs/install/ this website
After install, run the following command
yarn add global cordova
yarn add global ionic

ionic v1 TypeError: _.set is not a function

I get the following error in my project:
TypeError: _.set is not a function
It doesn't matter if I type ionic info or ionic cordova build android
ionic cli always asks
The Ionic CLI (local version) has an update available (3.7.0 => 3.9.2)! Would you like to install it? Yes / No
Even if I type No I always get this error message.
Try these steps
npm uninstall --save-dev --save-exact #ionic/cli-plugin-cordova
npm uninstall --save-dev --save-exact #ionic/cli-plugin-ionic1
npm uninstall --save-dev --save-exact #ionic/cli-plugin-gulp
outdated version of the inquirer npm module
npm install inquirer
(Should update it from version 3.0 to 5.0 or so)