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.
Related
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'});
}
}
I am using the Iconic 4 framework and I'm trying to use the FirebaseUIAuth feature within my application but I am facing an issue when the user signs in.
Issue: When the user logs in, the sign in buttons disappear for the web & ios rendering of the application on my localhost (this is good), but I am having issues with the Android rendering. After logging in, the login/sign in buttons remain visible in the android rendering (not good...womp womp).
I have tried changing the signInFlow parameter to 'redirect' but the extent of my knowledge with the Ionic Framework has me a bit stumped since I am confused on how to get the login buttons redirect the user to a new view.
[app.module.ts file with firebaseUI config only]
const firebaseUiAuthConfig: firebaseui.auth.Config = {
signInFlow: 'popup', /*tried using 'redirect' to fix android rendering*/
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
{
scopes: [
'public_profile',
'email',
'user_likes',
'user_friends'
],
customParameters: {
'auth_type': 'reauthenticate'
},
provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID
},
{
requireDisplayName: true,
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID
}
],
tosUrl: '/terms',
privacyPolicyUrl: '/privacy',
credentialHelper: firebaseui.auth.CredentialHelper.NONE
};
[home.page.html file with firebaseui tag]
<ion-content padding>
<firebase-ui></firebase-ui>
<h1 *ngIf="afAuth.auth.currentUser">Welcome {{afAuth.auth.currentUser.displayName}}!</h1>
<ion-button *ngIf="afAuth.auth.currentUser" (click)="signOut();">Sign Out</ion-button>
</ion-content>
[home.page.ts file with signout method]
import { Component } from '#angular/core';
import { AngularFireAuth } from '#angular/fire/auth';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(public afAuth: AngularFireAuth,) {
}
signOut() {
this.afAuth.auth.signOut().then(() => {
location.reload();
});
}
}
I expected that the android rendering will only display:
Welcome some user!
But it also displays the sign in buttons that are configured with the firebaseui (google, facebook, email)
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 am currently working on an Ionic app and I understood that Ionic recently became Ionic 3. In the past, I worked with Ionic 2 and there was app.js.
When I created a new project and I wanted to remove sidemenu for my login page, I couldn't find the app.js.
Ionic 2 code
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
controller: 'loginCtrl',
templateUrl: 'login.html'
});
app.controller('loginCtrl', function($scope, $state,$ionicSideMenuDelegate) {
$ionicSideMenuDelegate.canDragContent(false);
});
May I know how does this work now in the new Ionic?
You can do it this way, In your login page:
LoginPage.ts
import {MenuController} from 'ionic-angular';
export class LoginPage {
constructor(private menu : MenuController){}
ionViewDidEnter()
{
// Disable the root left menu when entering this page
this.menu.enable(false);
}
ionViewWillLeave()
{
// enable the root left menu when leaving this page
this.menu.enable(true);
}
}
I'm trying to use camanjs library in my ionic v3 project. I installed it using npm install caman --save (also installed cairo, libjpg and libpng). Now in my project folder I can see a folder named caman in node_modules folder, so in my .ts I write
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Caman } from 'caman';
declare var Caman: any;
#Component({
selector: 'page-filtri',
templateUrl: 'filtri.html'
})
export class FiltriPage {
constructor(public navCtrl: NavController) {
}
addFilter(){
Caman("#image", function(){
this.sinCity();
this.render();
})
}
}
and the html file
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="addFilter()">Filtro</button>
<img id='image' src="https://firebasestorage....">
</ion-content>
but if I serve I've
ERROR ReferenceError: Caman is not defined
And that's how my node_modules folder looks like
[node_modules folder]
Can you help me?
Why don't you try changing your import to the following:
import * as Caman from 'caman';
You cannot declare both at the same time like this.
import { Caman } from 'caman';
declare var Caman: any;
you only need to use
import { Caman } from 'caman';
But you get the error "Module parse failed: ...." There is nothing wrong with the import it is because of the CamanJs Uses node-canvas. And canvas loads binary files. like "canvas.node". You need to install node-loader https://github.com/webpack-contrib/node-loader to resolve that error.