I need to open payment method url inside ionic app, but i didn't found any solution of that. I have tried Iframe but it doesn't work for payment method urls, because of security reasons i guess. I have also treid InAppBrowser that doesn't work.
What I have tried open the url in browser but i need it to open within app.
Any solution?
You can use InAppBrowser-plugin to open an external url.
Install:
ionic plugin add cordova-plugin-inappbrowser --save
npm install --save #ionic-native/in-app-browser
See here:
import { Component , OnInit } from '#angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser } from '#ionic-native/in-app-browser';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements OnInit{
constructor(public navCtrl: NavController,private iab: InAppBrowser) {
}
ngOnInit(){
const browser = this.iab.create('https://www.stackoverflow.com','_self',{location:'no'});
}
}
Related
I'm running in the browser an ionic 5 APP using capacitor and I'm trying to use the file transfer functionality. I follow the documentation https://ionicframework.com/docs/native/file-transfer and configure my app using capacitor. Thus running:
npm install cordova-plugin-file-transfer
npm install #ionic-native/file-transfer
ionic cap sync
In my app.module, I registered the providers:
import { FileTransfer } from '#ionic-native/file-transfer/ngx';
import { File } from '#ionic-native/file/ngx';
...
providers: [
StatusBar,
SplashScreen,
...
FileTransfer,
File
],
Note that I also installed the native file package, so in total I have the following 4 new packages:
"#ionic-native/file": "^5.27.0",
"#ionic-native/file-transfer": "^5.27.0",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-file-transfer": "^1.7.1",
My code in the component is:
import { Input, Component } from '#angular/core';
import { FileTransfer, FileTransferObject } from '#ionic-native/file-transfer/ngx';
import { File } from '#ionic-native/file/ngx';
#Component({
selector: 'app-order-detail-order-card',
templateUrl: './order-detail-order-card.page.html'
})
export class OrderDetailOrderCardPage {
#Input() pdfUrl: string;
#Input() orderCardId: string;
constructor(private transfer: FileTransfer, private file: File) { }
public downloadFile(): void {
const fileTransfer: FileTransferObject = this.transfer.create();
fileTransfer.download(this.pdfUrl, this.file.applicationDirectory + `${orderCardId}.pdf`).then((entry) => {
console.log('download complete: ' + entry.toURL());
}, (error) => {
// handle error
});
}
}
When I run the app in the browser, I get the following warning and I'm not sure whether the file should donwload somewhere?
common.js:284 Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
Even if I don't get the file, I would be expecting to see the "download complete" message. It's not very clear to me as to whether I have to configure something else in my app to be able to run it locally or I have to use this functionality ONLY in either the emulator or the device itself.
What else needs to be configured to get this to work?
common.js:284 Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
this means that you are using the browser emulator which doesn't have any splashscreen, you can totally ignore that warning ( you won't get it using a simulator or a real device).
You should paste the html section of that page too, because probably the download doesn't start because an incomplete url and it doesn't proceed with the "then()"
maybe i'm wrong, but it can be possible.
I want to use InAppBrowser to open all target blank links. I follow the documentation and I always get an error when I declare the plugin on constructor:
Can't resolve all parameters for MyApp: (?, ?, ?).
This error appears to me when I put private iab: InAppBrowser on constructor.
My code:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser } from '#ionic-native/in-app-browser';
import { Platform } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
constructor(public navCtrl: NavController, public plt: Platform, private iab: InAppBrowser) {
this.plt.ready().then((readySource) => {
console.log("Ready!");
window.open = this.iab.open;
});
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { InAppBrowser } from '#ionic-native/in-app-browser';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
InAppBrowser,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Someone knows whats it can be?
Thanks!
Your code looks good, so the problem seems to be because of the #ionic-native/core version that your project uses.
As you can see in the docs the Ionic team has updated the Ionic Native commands in order to avoid this error:
Installation
To add Ionic Native to your app, run following command to install the core package:
npm install #ionic-native/core#4 --save
And...
Usage
Install the Needed Plugins
Install the Ionic Native package for each plugin you want to add.
For example, if you want to install the Camera plugin, you will need to run the following command:
npm install #ionic-native/camera#4 --save
Then install the plugin using Cordova or Ionic CLI. For example:
ionic cordova plugin add cordova-plugin-camera
Notice the #4 in both commands. That allows you to install the right version of the Ionic Native dependencies even if you're using the new CLI.
TLDR; So if you installed the plugin using the #4 you can import it like this: import { InAppBrowser } from '#ionic-native/in-app-browser';
If not, you may be using a newer version of Ionic Native so you need to import it like this: import { InAppBrowser } from '#ionic-native/in-app-browser/ngx'
I am trying to use ionic 4 and cordova-plugin-file to get files from phone but it trows an error;
When i do console.log(cordova.file) like in the doc it shows cordova does not have property 'file'.
When i do
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, fail); it show 'requestFileSystem' not a property of window.
even if i do window.cordova it trow thesame error.
and unlike ionic 3 here if i add File to providers it trows an error as well
Please what is it i'm doing wrong?
Here is my ** home.page.ts**
import {Component} from '#angular/core';
import {Platform} from '#ionic/angular';
import {File} from '#ionic-native/file';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(public platform: Platform) {
platform.ready().then(() => {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
console.log(fileSystem)
}, function(error) {
console.log(error);
});
});
}
}
For Ionic 4 you should add 'ngx' at the end of the import.
Like this,
import {File} from '#ionic-native/file/ngx';
Make sure to add it to the providers list of your module file, and also inject it to the constructor of the class where ever you are using the plugin.
Reference https://ionicframework.com/docs/native
I want to make webview to show my webpage with crosswalk plugin. When I put my url, and click the button. I got error
"Application Error"
"net:ERR_INSECURE_RESPONSE
(https://example.dummy.com:8444)"
my home page is using https
this is my code :
home.html
<ion-slide>
<h2>Please, Enjoy to call with our customer service</h2>
<button ion-button block full (click)="goToPage('https://oscar2.kebhana.co.id:8444/gibPT/intn/info/call#359854')">Start Video Call</button>
</ion-slide>
home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
goToPage(url : string) {
window.open(url, '_self');
}
}
Please help me to fix. Thank you
#anggaerlangga you can use InAppBrowser to open an external link. because IONIC is not a web application you have to use any browser for open external URL. I will show you how can you use the InAppBrowser.
first of all you have to install InAppBrowser NPM from the ionic native.
import { InAppBrowser} from '#ionic-native/in-app-browser';
let baseurl = 'your url';
let target = "_blank";
this.iab.create(baseurl,target);
Thank you. this will definitely help you.
I tried to use tensorflowjs in ionic. After converting existing model from python then import from ionic it works only when i runs on my local server (http://localhost:8100/ionic-lab)
However, when i build the project for android
tf.loadModel method not working, it fails to load model from local folder ( ie. assets/model )
I already checked this link Tensorflow.js with react-native
, but it doesn't help. I guess, lots of hybrid mobile app frameworks are pretty much the same line. Any advice and suggestions will be greatly appreciated.
import {Component} from '#angular/core';
import {IonicPage, AlertController} from 'ionic-angular';
import {HttpClient} from "#angular/common/http";
import * as tf from "#tensorflow/tfjs";
#IonicPage()
#Component({
selector: 'page-tfpretrainedversion',
templateUrl: 'tfpretrainedversion.html',
})
export class TfpretrainedversionPage {
kerasTraindedModel: tf.Model;
KERAS_MODEL_JSON = 'assets/model/model.json';
constructor(private httpClient: HttpClient,
private alertCtrl: AlertController) {
this.loadPretrainedModel();
}
loadPretrainedModel() {
tf.loadModel(this.KERAS_MODEL_JSON)
.then((result) => {
this.kerasTraindedModel = result;
})
.catch((error)=>{
let prompt = this.alertCtrl.create({
title: 'Error',
subTitle: error,
buttons: ['OK']
});
prompt.present();
});
}
}
Here is an error message
Failed to fetch
And here is a project structure
Project structure
TensorflowJs loads the models via fetch(). fetch() does not support loading local-files. https://fetch.spec.whatwg.org/
My Workaround:
Use a polyfill (https://github.com/github/fetch) and replace the fetch.
window.fetch = fetchPolyfill;
Now, it's possible to load local files (file:///) like:
const modelUrl = './model.json'
const model = await tf.loadGraphModel(modelUrl);