I have an ionic 3 chat application. In the chat messages users would like to place links (urls) to external resources.
Is there any opportunitiy to make this urls clickable (for chat message receivers) for opening that external resources?
Example:
Thanks in advance
Install InAppBrowserPlugin -- link
$ ionic cordova plugin add cordova-plugin-inappbrowser
$ npm install --save #ionic-native/in-app-browser
then on url call make your logic ... eg:
import { InAppBrowser } from '#ionic-native/in-app-browser';
constructor(private iab: InAppBrowser) { }
...
const browser = this.iab.create('https://ionicframework.com/');
browser.show();
// browser.close()
Related
I am developing an ionic-cordova application with chat via Openfire.
I can’t get the si-filetransfer plugin to work
This are the npm packages:
"strophe.js": "^1.2.14",
"strophejs-plugin-http-file-upload": "^1.0.3",
"strophejs-plugins": "0.0.7",
and this the code in file .ts:
import { Strophe } from 'strophe.js';
........
this.connection.si_filetransfer.addFileHandler(self.fileHandler);
this.connection.ibb.addIBBHandler(self.ibbHandler);
but connection.si_filetransfer’ and ‘connection.ibb’ are always ‘undefined’
How can I import si_filetransfer and make it working?
Can anyone help me?
thanks in advance
It was a problem of include plugins from node modules, with this code works:
import { Strophe } from 'strophe.js';
require('strophejs-plugin-http-file-upload');
require('strophejs-plugins/si-filetransfer/strophe.si-filetransfer.js');
require('strophejs-plugins/ibb/strophe.ibb.js');
I want to integrate Google Analytics on mine Ionic / WooCommerce App, so I added a Google Analytics plugin:
cordova plugin add https://github.com/danwilson/google-analytics-plugin.git
ionic cordova plugin add cordova-plugin-google-analytics
npm install --save #ionic-native/google-analytics
I saw this codes on ionic framework so I added them on the app.component.ts:
import { GoogleAnalytics } from '#ionic-native/google-analytics';
constructor(private ga: GoogleAnalytics) { }
...
this.ga.startTrackerWithId('YOUR_TRACKER_ID')
.then(() => {
alert('Google analytics is ready now');
this.ga.trackView('test');
// Tracker is ready
// You can now track pages or set additional information such as AppVersion or UserId
})
.catch(e => console.log('Error starting GoogleAnalytics', e));
I added tracker Id…
After running this on the browser the console logs what I got was GoogleAnalytics.startTrackerWithId, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator:
cordovaWarn # util.js:66
app.component.ts:155 Error starting GoogleAnalytics cordova_not_available).
So I produced an Apk tested on a device then the console log was (Google analytics is ready now). I checked the analytics dashboard still showing 0 users, 0 device.
Any help on this is appreciated.
That is because in the browser you are not in a cordova context.
You need to wrap that code inside a platfom ready event like so:
constructor(platform: Platform, private ga: GoogleAnalytics) {
///
platform.ready().then(() => {
this.ga.startTrackerWithId('YOUR_TRACKER_ID')
.then(() => {
alert('Google analytics is ready now');
this.ga.trackView('test');
// Tracker is ready
// You can now track pages or set additional information such as AppVersion or UserId
})
.catch(e => console.log('Error starting GoogleAnalytics', e));
});
///
}
This means this will only execute when you are in a device context.
However, you can choose to implement GA in Web way by putting the GA scripts in your index.html, import typings for GA and it should work in all platforms and environments
Step 1 : Ionic create New App. (ionic start myApp1 sidemenu)
Step 2 : Create New Page home and aboutus. (ionic generate page aboutus)
step 3 : Create button at aboutus page for url redirect to another website.
aboutus.html : (<button ion-button (click)="redirect()"> GO » <button>)
aboutus.ts : redirect() { window.open("https://www.w3schools.com/php/", "_self"); }
step 4 : When i click GO button the url redirect to w3schools.com and again browser back button click the redirect to home page only. i need redirect to aboutus page. help me any one.
Use it In App Browser Ionic Native plugin
Install the Cordova and Ionic Native plugins:
ionic cordova plugin add cordova-plugin-inappbrowser
npm install --save #ionic-native/in-app-browser
In app.module.ts add InAppBrowser Provider
import { InAppBrowser } from '#ionic-native/in-app-browser';
providers: [
InAppBrowser,
]
Html:
<ion-buttons>
<button ion-button (click)="redirect()"> GO » <button>
<ion-buttons>
In ts:
import { InAppBrowser } from '#ionic-native/in-app-browser';
constructor(private inAppBrowser: InAppBrowser) {}
redirect() {
this.inAppBrowser.create("https://www.w3schools.com/php/");
}
you can also see this video tutorial
I need to do a device detection in my Ionic project so I've installed #ionic-native/device plugin per instructions here: https://ionicframework.com/docs/native/device/
However when I wire it in inside of a component, then run ionic serve to preview changes, console.log returns Device object with all values set to null, same happens when I try to use individual property e.g. this.device.model:
Here is how I use it inside of a component:
import {Device} from "#ionic-native/device";
// ...
#Component({
// ...
})
export class MyComponent {
constructor(private device: Device) {
}
ngOnInit() {
console.log(this.device);
}
}
And I've added it to AppModule as well:
import {Device} from "#ionic-native/device";
// ...
#NgModule({
// ...
providers: [
Device
]
})
export class AppModule() {
}
Cordova device plugin was auto injected into config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget <!-- ... --> >
<!-- ... -->
<plugin name="cordova-plugin-device" spec="2.0.0" />
</widget>
Here is my Ionic stack (at least packages that should be relevant to the issue):
"#angular/*": "^5.2.4", // all packages
"#ionic-native/*": "4.5.2", // all packages
"#ionic-native/device": "4.5.2"
"ionic-angular": "3.9.2",
"cordova-plugin-device": "2.0.0",
"typescript": "2.6.2"
Thanks!
UPDATE:
I was able to get device details in the browser by running:
cordova run browser
This assumes you have added browser as a platform, if not run:
ionic cordova platform add browser
(From the link in the answer posted by #AndrewLively: https://stackoverflow.com/a/49034015/448816)
If you are running in the browser using ionic serve then most of the ionic-native plugins won't work since it is not treated by ionic as a valid browser platform.
This is not well documented, but is discussed in an issue in the ionic-native repo.
Should see the packages installed and see they are in the same version in "package.json"
Core and Native packages must be in the same version or the native package should not be larger.
The folder "platforms" must be delete
Use these commands
ionic build
ionic cordova platform add browser
cordova run browser
code for .ts
console.log('Device Model is: ' + this.device.model);
And works !
I created an own cordova plugin for use in an Ionic 3 project.
The js-module requires other npm/node packages (in my case for XML processing).
e.g.
var builder = require('xmlbuilder');
I read X articles about hooks and other crazy stuff, but nothing really helpful.
Is there no easy way to add such a trivial thing to the build-chain just by some simple configuration of the dependencies?
Edit:
Let´s take that simple plugin as example: https://github.com/don/cordova-plugin-hello
The great function in https://github.com/don/cordova-plugin-hello/blob/master/www/hello.js should be able to use the xmlbuilder.
So I changed the file to:
/*global cordova, module*/
var builder = require('xmlbuilder');
module.exports = {
greet: function (name, successCallback, errorCallback) {
cordova.exec(successCallback, errorCallback, "Hello", "greet", [name]);
}
};
I added the module via npm install to the ionic project, but that doesn´t help. How can I make the modules somehow available for the plugins?