I need open a link into my Ionic-3 project and when I google it I saw InAppBrowser Plugin.
Actually there is only one picture in this link so If you know any other method for get it or show directly this picture it is can be enough for me.
I done all of it like what documentary done.
The Documentary which is I used for : https://blog.paulhalliday.io/ionic-3-integrating-inappbrowser-plugin/
Step-1: I installed ionic cordova plugin add cordova-plugin-inappbrowser
Step-2: I installed as well npm install #ionic-native/in-app-browser --save
And there was no error in Command Line(Terminal)
Step-3: I imported the plugin into app.module.ts import { InAppBrowser } from '#ionic-native/in-app-browser';
And there was no error in code editor
!!! Step-4: When I tried to add InAppBrowser into providers part I faced an error like picture which below
If you can not see : http://prntscr.com/mc964l link is here.
Why that error happened I do not get it.
Can anybody help me about this issue?
Thanks in advance!
Ionic 3:
Install the Cordova and Ionic Native plugins:
$ ionic cordova plugin add cordova-plugin-inappbrowser
$ npm install --save #ionic-native/in-app-browser#4
You must append version 4 to the package name after the # character (version 5.x is not compatible with Ionic 3):
Then, add to Provider:
import { InAppBrowser } from '#ionic-native/in-app-browser';
...
#NgModule({
...
providers: [
...
InAppBrowser
...
]
...
})
export class AppModule { }
Source: https://ionicframework.com/docs/v3/native/in-app-browser/
Ionic 4:
For Angular, the import path should end with /ngx
import { InAppBrowser } from '#ionic-native/in-app-browser/ngx';
Then, add to Provider:
// app.module.ts
import { InAppBrowser } from '#ionic-native/in-app-browser/ngx';
...
#NgModule({
...
providers: [
...
InAppBrowser
...
]
...
})
export class AppModule { }
Source: https://ionicframework.com/docs/native#angular
Just in case there are people still facing this issue after upgrading to Angular 11 + I found out that the problem is with the ivy.
The import should look like this:
import { InAppBrowser } from '#ionic-native/in-app-browser/__ivy_ngcc__/ngx';
Related
NullInjectorError: No provider for Magnetometer
My goal is to read sensordata, like magnetometer. Using Ionic 5, Angular, capacitor android.
You can find my project at https://github.com/kpproce/ionicMagnoMeter
I can't get access to the magnetometer, because the object is empty. I did manage to access the camera, but this is standard available in the web version also...
I understand that the magnetometer probably doesn't exist in the web app version.
There are many instructions about plugins, but could not get them working
followed instructions: https://ionicframework.com/docs/native/magnetometer
To prepare: In the terminal VScode:
--- npm install --save #ionic-native/core
--- npm install cordova-plugin-magnetometer
--- npm install #ionic-native/magnetometer
--- npx cap add android
Code used:
import { Component } from '#angular/core';
import { Plugins } from '#capacitor/core';
import { Magnetometer, MagnetometerReading } from '#ionic-native/Magnetometer/ngx';
...
export class HomePage {
constructor(private magnetometer: Magnetometer) {} // this seems to be the problem, empty object
see error NullInjectorError: No provider for Magnetometer!
See: https://forum.ionicframework.com/t/getting-error-no-provider-for-mediaplugin/53570/5
Usually you add ionic native plugins like that:
add the plugin to your app with cli command
ionic plugin add --save PLUGINNAME
install the ionic native plugin from npm
npm install --save #ionic-native/PLUGINNAME
import it in your page/provider and in your app.module.ts
import { PLUGINNAME } from '#ionic-native/PLUGINNAME';
add it to your app.module.ts
providers: [ PLUGINNAME ]
use DI in your constructor in your page/provider
constructor(private pluginName: PLUGINNAME) { }
then you can use it in your code
I am trying to add AppRate to my app based on the
https://ionicframework.com/docs/v3/native/app-rate/
example
TypeError: AppRate.preferences.openUrl is not a function. (In
'AppRate.preferences.openUrl(iOSStoreUrl)', 'AppRate.preferences.openUrl' is undefined)
That method is indeed missing on the object when inspected in debugger.
On the plugin documentation they add the method manually.
https://github.com/pushandplay/cordova-plugin-apprate
This approach fails for me however, too. My ionic app has no window object.
I had the same issue, but in ionic 4.
I solved it, firstly, reinstall the plugin from git repository or cordova plugins registry (to make sure we have the function openUrl added) and adding the missing method to #ionic-native/app-rate/ngx/index.d.ts like :
export interface AppRatePreferences {
...
...
...
openUrl?:(url:string) => void;
}
And after where you have used the call of the plugin, you add openUrl: appRate.preferences.openUrl to preferences properties like :
appRate.preferences = {
displayAppName: '',
storeAppURL: {
ios: '<my_app_id>',
android: 'market://details?id=<package_name>',
windows: 'ms-windows-store://pdp/?ProductId=<the apps Store ID>',
blackberry: 'appworld://content/[App Id]/'
},
openUrl: appRate.preferences.openUrl
};
Hope it helps you.
For ionic 3, Make sure the latest versions are installed with support for #ionic-native/app-rate#4
In my case I have solved it by installing version 4 of #ionic-native and version 1.4.0 of apprate.
Try this:
$ ionic cordova plugin rm cordova-plugin-apprate
$ ionic cordova plugin add cordova-plugin-apprate#1.4.0 --save --exact
$ npm install --save #ionic-native/app-rate#4
I am creating an ionic app with Ionic 4 based on angular 6!
To set the screen orientation installed the below plugin.
ionic cordova plugin add cordova-plugin-screen-orientation
npm install --save #ionic-native/screen-orientation
And imported in required typescript! But when i run the project i got the error below.
ERROR in node_modules/#ionic-native/screen-orientation/index.d.ts(2,10): error TS2305: Module '"/Users/karthikcp/Documents/IONIC/myBake/node_modules/rxjs/Observable"' has no exported member 'Observable'.
[ng] node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
Can anyone help me in fixing this error?
In Ionic 4 you need to install all your native plugins as beta:
npm install --save #ionic-native/screen-orientation#beta
Inside your code, for Angular, the import path should end with /ngx.
import { ScreenOrientation } from '#ionic-native/screen-orientation/ngx';
Don't install rxjs-compact.
npm i rxjs-compat
Please add these command on your root folder
I need to modify cordova-plugin-media, but when I run app with ionic cordova run android my changes are not applied.
How should I modify and run plugin correctly?
I found the answer.
cordova files should be edited in /plugins folder, not in /node_modules
after editing, I should do: ionic cordova platform rm android and ionic cordova build android
After that modifications work.
You should paste some code, showing the code of app module and config.xml.
But basically you should only do:
ionic cordova plugin add cordova-plugin-media
npm install --save #ionic-native/media
And then add your plugin to the project into file
App.module.ts:
import { Media } from '#ionic-native/media';
...
providers: [
....
Media,
...
]
And that's it, then you should be able to use the functionalities inside your components.
I am trying to use Gyroscope plugin from Ionic native. Following is my ionic info.
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
cordova (Cordova CLI) : 8.0.0
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
Node : v8.9.1
npm : 5.8.0
OS : Windows 10
Following is my code:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
// import { Platform } from 'ionic-angular';
import { Gyroscope, GyroscopeOrientation, GyroscopeOptions } from '#ionic-native/gyroscope';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
btnLabel_ReadSensors: string;
constructor(public navCtrl: NavController,
// private platform: Platform,
private gyroscope: Gyroscope
) {
this.btnLabel_ReadSensors = "Start";
// platform.ready().then(() => {
// });
}
ReadGyroscope() {
this.gyroscope.getCurrent({ frequency: 500 }).then((orientation: GyroscopeOrientation) => {
console.log(orientation.x, orientation.y, orientation.z, orientation.timestamp);
}).catch((reason) => console.log("Rejected:", reason));
}
}
In above code, ReadGyroscope() is a click callback for a button on UI. In this function, I am trying to read current gyro data and log it on console.
I get following console output whenever I click the button.
[23:36:28] console.warn: Native: tried calling Gyroscope.getCurrent, but the Gyroscope plugin is not installed.
[23:36:28] console.warn:Install the Gyroscope plugin: 'ionic cordova plugin add cordova-plugin-gyroscope'
[23:36:28] console.log: Rejected:plugin_not_installed
Following is already done:
I have already installed the plugin as per ionic documentation.
Updated app.module.ts as suggested in documentation.
Tried to read data in HomePage constructor with check for
platform.ready().
Tried reading data periodically using watch method.
My issue is similar to this issue but as it is old, no solution was suggested and the tool versions are changed, I am posting this issue.
I also referred here; but I think the issue was specific to other plugin.
Someone suggested to install gyro plugin directly from git (see here). Tried that too but no success.
Thank you!