I want to add Cordova plugins into my ionic app. But it seems that it isn't working.
I will walk you through the steps I took:
Added cordova plugins in the plugins folder.
Included ng-cordova.min.js file in index.html before codova.js
Injected ngCordova in app.js
Injected the required plugin in my controller ( $cordovaBarcodeScanner in this case)
Can someone please help me with that?
You can add the plugin with
cordova plugin add https://github.com/wildabeast/BarcodeScanner.git
then use the plugin in your page like this
module.controller('BarcodeCtrl', function($scope, $cordovaBarcodeScanner) {
document.addEventListener("deviceready", function () {
$cordovaBarcodeScanner
.scan()
.then(function(barcodeData) {
// Success! Barcode data is here
}, function(error) {
// An error occurred
});
)};
This example and more information are available at http://ngcordova.com/docs/plugins/barcodeScanner/
See also https://blog.nraboy.com/2014/09/implement-barcode-scanner-using-ionic-framework/
Did you run the cordova cli command to install the barcodeScanner plugin? something like:
$ cordova plugin add <plugin url>
Related
I modified an existing cordova plugin and want to integrate it now into my application.
I already created a link to my source directory
cordova plugin add --link ~/path/to/plugin
but now I can not find my plugin in my project. I suggest, that the plugin needs to be build?
Is it needed to modify my package.json?
Add the plugin to project:
ionic cordova plugin add [plugin]
Documentation
Install and save the plugin:
npm install --save [plugin]
Example
This is related to stackoverflow/questions/30345035
Since you modify existing plugin there is possibility that you didn't modify it right. Also there is possibility that plugin is not working for specific platform version.
If you are looking to add your own cordova plugin in Ionic v2 here can be your solution.
If you have exported your module / plugin like
module.exports = new YourPluginJavaClass();
then you will be able to use it in your Ionic application as
(window as any).YourPluginJavaClass.yourFunction();
Please see this link as well
Hope this helps.
We are developing an app which uses Native File Transfer plugin. But due to a weird issue we can not create the Test Flight / Release Build for iOS.
Issue:
Even after successful installation of the 'File Transfer' plugin we see the following error while running the app with
ionic cordova run ios -lc
console.warn: Native: tried accessing the FileTransfer plugin but it's not installed.
As we tap a button that invokes the fileTransfer.download(..) method - the app halts to perform without throwing any Error.
I have created a detailed post with logs and code at:
https://github.com/ionic-team/ionic-native/issues/2110
Any help ??
After a thorough brainstorming I found the answer -
My issue was that the FileTransfer object could be accessed from inside the platform ready function but not inside a provider - this too on iOS [ Android version is working correctly ]
Here is what I did:
As I need an instance of the FileTransfer inside the provider - I created a variable - and an updater method -
private fileTransfer: any;
public setFileTransferRef( param ){
this.fileTransfer = param;
}
And as I could access the FileTransfer inside the platform.ready() - I instantiated the FileTransferObject right there and updated the provider as follows -
initializeApp() {
this.platform.ready().then(() => {
console.log('fileTransfer: ');
console.log(JSON.stringify(this.fileTransfer));
//
let fileTransfer: FileTransferObject = this.fileTransfer.create();
//
this.mediaIOSProv.setFileTransferRef(fileTransfer);
.....
....
Where mediaIOSProv is the Provider responsible to download the zip.
I also placed with the cordova.js inclusion after build/vendor.js in the index.html - ( I came across some posts where developers reported that doing so solved their missing plugin issue ) - Though there is no such official documentation.
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
Since the app successfully ran on iOS - I did not dare to change the
placement of cordova.js
What I presume is -
1: It would be best to create a Provider to store references of each Native Plugin instantiated within the platform ready - and use the references as and when needed
2: There might be some information missing, specially regarding iOS, about the Ionic-Native Wrapper
Any suggestion / discussion will be highly appreciated.
Use this:
Run ionic cordova platform add [platform] then ionic cordova build [platform] and run in your device.
It worked for me!
Remove the platform
ionic cordova platform rm android
And then add the Platform again
ionic cordova platform add android
I am trying to use the cordova GooglePlus plugin in a new ionic 2 project (latest ionic2 version) but I always run into errors regarding cordova.
The plugin is properly installed and shows up in the plugin folder.
One approach I tried is this:
import { GooglePlus } from "ionic-native";
and then
GooglePlus.login().then(...)
The login method executes but always throws an error saying "cordova_not_available"
I want to test the app with ionic serve on my windows system first before deploying it to my android phone.
How can I make cordova available in the localhost server? From searching I understand that cordova.js is generated and always included in the deploy package for the device.
Another approach I tried is using
window.plugins.googleplus.login(...)
But this approach does not go through the typescript compiler who does not know anything about a plugins property on the windows object.
How can I fix this?
If you want the plugin to work for the browser you should add platform browser and run it:
ionic cordova platform add browser
and run it:
ionic cordova run browser
instead of ionic serve.
This error usually occurs when you're running the app in chrome using ionic serve which is normal as in the browser cordova native components are not there but also occur on emulator and devices when an ionic native plugin that you're using was nod added, even if you have added the ionic plugin for it.
For instance if you are using native Toast
then you need to add proper ionic dependencies:
ionic plugin add cordova-plugin-x-toast --save
but you also need to add cordova dependencies:
cordova plugin add cordova-plugin-x-toast --save
If you forget to add the later cordova plugin you'll get an error like:
Runtime Error Uncaught(in promise): cordova_not_available
Which can be tricky to find the cause.
Once you have added ionic and cordova dependencies you should be able to use it.
Make sure you import it:
import { Toast } from 'ionic-native';
inject Platform in constructor:
constructor(public navCtrl: NavController, private platform: Platform) {...
then use the native item:
this.platform.ready().then(() =>
Toast.show("Successfull", '5000', 'center')
.subscribe(
toast => {
console.log(toast);
}
));
Using ionic serve disables all the cordova plugins, because it is not running on a device.
Rather use ionic cordova run android
This will start an android emulator that should allow all the cordova plugins to function
I have also come across the second approach, but the syntax then has to be windows['plugins'].googleplus.login(...)
Sometimes using ionic cordova run browser is not the best option, since it takes a long time for it to compile your changes.
In my case, what was causing the issue was the FCM plugin. It cannot run on the browser, if I use ionic serve. Since my code was inside app.component.ts, it was easy for me to get around the problem. I simply used the following line:
if (platform.is('cordova'))
{ this.fcmx.onTokenRefresh().subscribe(token => {
this.pushNoti.storeNewToken(token); }); }
Using platform.is('cordova'), you can prevent the code causing trouble to run on the browser.
Simply Run after attaching android device
ionic cordova run android
make sure you correct google map key
I'm trying to get the Phonegap Facebook plugin to work, but no errors occur and the plugin's login() function just doesn't do anything (it's being called, but doesn't do anything).
Whenever I try to install the plugin in the Cordova CLI, I get a Plugin already installed notice. I've added the plugin files manually, by adding FacebookConnectPlugin.h and FacebookConnectPlugin.m in the plugins folder. I've added the FacebookSDK.framework to the frameworks folder. However, when I open my app and tap on the login button (which correctly calls the function), nothing happens. The activity console in Xcode doesn't show any errors and no action is performed.
My JS code looks like this:
var login = function () {
if (!window.cordova) {
var appId = prompt("<MyAppId>", "");
facebookConnectPlugin.browserInit(appId);
}
facebookConnectPlugin.login( ["email"],
function (response) { alert(JSON.stringify(response)) },
function (response) { alert(JSON.stringify(response)) });
}
$('.login-btn').click(function() {
login();
});
What step am I missing to make this work? The plugin can be found here.
Also, when I start the app the activity console shows the following info:
2015-10-20 19:58:38.586 MyApp[5143:2355309] Apache Cordova native platform version 3.8.0 is starting.
2015-10-20 19:58:38.590 MyApp[5143:2355309] Multi-tasking -> Device: YES, App: YES
2015-10-20 19:58:38.595 MyApp[5143:2355309] Unlimited access to network resources
2015-10-20 19:58:39.033 MyApp[5143:2355309] Resetting plugins due to page load.
2015-10-20 19:58:39.711 MyApp[5143:2355309] Finished load of: file:///var/mobile/Containers/Bundle/Application/365E079A-56F7-4874-9914-182A57D6DFED/Qwest.app/www/index.html
Adding plugins manually in cordova usually leads to bad things, especially in the future if you ever want to update. For now I would try removing and adding the plugin:
cordova plugin rm phonegap-facebook-plugin
cordova plugin -d add -d plugin add /path/to/cloned/phonegap-facebook-plugin --variable APP_ID="123456789" --variable APP_NAME="myApplication"
(You did follow the instructions at https://github.com/Wizcorp/phonegap-facebook-plugin/blob/master/platforms/ios/README.md on how to install the plugin and cloned it to a different directory) See if that works, if not go with the more nuclear option of adding and removing the platform.
cordova platform rm ios
cordova platform add ios
This is sometimes required, but should only be performed if you have made no changes to the XCode project.
Also the plugin has been forked and https://github.com/jeduan/cordova-plugin-facebook4 which uses the Facebook4 SDK rather than Facebook3 SDK, as well it requires less fiddling to get the IOS plugin to work. It is api compatible so it should just work.
I am just trying to use the notifications plugin to start, I will need others later but having a problem getting it to work. When I try to use
navigator.notification.alert('test', myCallbackFn);
It says navigator.notification is undefined. my config file added this line when I added the plugin via CLI.
<plugin name="org.apache.cordova.dialogs" spec="~0.3.0" />
I am using this in the deviceReady function, where it looks like cordova.js is loaded without any problems.
Here is my whole snippet:
<script type="text/javascript">
document.addEventListener('deviceready', function onDeviceReady() {
angular.bootstrap(document, ['app']);
try{
//alert(navigator.notification);
navigator.notification.alert("test", function(){});
}catch(error){
alert(error);
};
}, false);
</script>
Also I did make sure to run this each time
$ cordova build ios
I don't use phonegap, I use cordova. The reason is, that phonegap uses older versions of cordova and you have less plugins in phonegap. The dialog plugin, which you are using, is v0.3 the current official version from Apache is v1.1.1.
To check, that the notification plugin is running, just use in your deviceready function:
console.log(navigator.notification);
Attention: Before you can use the console, you have to install the console plugin, found here: https://github.com/apache/cordova-plugin-dialogs
Do it with:
cordova plugin add cordova-plugin-console
But I suggest to restart the project and use cordova instead of phonegap, if you have an Apple machine.
Start from here and always use the edge version (select it in the top right corner):
http://cordova.apache.org/docs/en/edge/guide_cli_index.md.html#The%20Command-Line%20Interface