Quantcast
Channel: Ionic Forum - Latest posts
Viewing all 230639 articles
Browse latest View live

Unit test issue when using LoadingController

$
0
0

Hey, Thanks for replying. I don’t think I’ve got other dependencies. When I went to debugging I noticed that my test didn’t seem to use the mocked create function. Promise.resolve() was never called.

This is the code I’m using for my loader:

  async presentLoader(duration?: number) {
    this.loading = await this.loadingController.create({
      spinner: 'crescent',
      message: this.translate.instant('generic.feedback.loading'),
      duration: duration,
      cssClass: 'custom-loader',
    });

    return await this.loading.present();
  }

  dismissLoader() {
    this.loading.dismiss().then();
  }

And I’ve mocked the LoadingController in the service.spec.ts where the above code is located. I’m getting the error from Karma in a different spec file though. The strange thing is, I’m only getting the error on my ‘JobsPage’ even though I’ve imported the service with the LoadingController in all my pages.

Karma error:

Uncaught Error: Uncaught (in promise): TypeError: controller.componentOnReady is not a function
TypeError: controller.componentOnReady is not a function
    at proxyMethod (http://localhost:9876/node_modules/@ionic/angular/dist/fesm5.js?:4339:1)
    at LoadingController.push../node_modules/@ionic/angular/dist/fesm5.js.OverlayBaseController.create (http://localhost:9876/node_modules/@ionic/angular/dist/fesm5.js?:4384:1)
    at SharedService.<anonymous> (http://localhost:9876/src/app/services/shared.service.ts?:64:49)
    at step (http://localhost:9876/_karma_webpack_/main.js:2872:23)
    at Object.next (http://localhost:9876/_karma_webpack_/main.js:2853:53)
    at http://localhost:9876/_karma_webpack_/main.js:2847:71
    at new ZoneAwarePromise (http://localhost:9876/node_modules/zone.js/dist/zone.js?:910:1)
    at ./src/app/services/shared.service.ts.__awaiter (http://localhost:9876/_karma_webpack_/main.js:2843:12)
    at SharedService../src/app/services/shared.service.ts.SharedService.presentLoader (http://localhost:9876/_karma_webpack_/main.js:2953:16)
    at FlexplaatsingenService.<anonymous> (http://localhost:9876/src/app/services/flexplaatsingen.service.ts?:23:23) thrown

Callback in oauth2 in Ionic v3,v4

$
0
0

Hi All
Can someone help me that
1.How to implement callback in oauth2 in ionic v3,v4

Present Workflow
1.From ionic app I am redirecting to other url for login using Inappbrowser
2.In auth url I added redirect_url as localhost

What is happening
Its not redirecting to ionic app after authorization

What should happen
It should redirect to ionic app and post code so that I can use it for retrieving token.

Note: I also used ssl=true but it not helped bcz portal only accepting https scheme.

Firebase plugin

$
0
0

please use the generic plugin @ionic-native/firebase for both push and analytics.

@ionic-native/firebase-analytics is not required, we ended up removing this plugin. The firebase analytics logging calls syntax are a bit different for @ionic-native/firebase, once changed, both push and analytics worked using only one single plugin @ionic-native/firebase

hope this helps

How to build Ionic Cordova with Xcode 10?

$
0
0

Use this and free from errors
But check whether iOS-deploy is installed or not, so use

npm install ios-deploy
and then next command:

ionic cordova build ios – --buildFlag="-UseModernBuildSystem=0"

Cordova Build Error: Metadata Version Mismatch

$
0
0

Hello guys, everytime I run ionic cordova build android --release --prod, I get the following error:

Error: Metadata version mismatch for module
C:/Users/Kenny/Projects/CBSTC/User/node_modules/@ionic-native/google-maps/index.d.ts, found version 4, expected 3

Anyone else experienced it before? Thanks in advance…

Here’s my ionic info by the way:

[WARN] Detected locally installed Ionic CLI, but it's too old--using global CLI.

Ionic:

   ionic (Ionic CLI)  : 4.10.2 (C:\Users\Kenny\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.3
   @ionic/app-scripts : 2.1.4

Cordova:

   cordova (Cordova CLI) : 6.5.0
   Cordova Platforms     : android 6.1.2
   Cordova Plugins       : cordova-plugin-ionic-webview 1.2.1, (and 21 other plugins)

System:

   NodeJS : v10.15.1 (C:\Program Files\nodejs\node.exe)
   npm    : 2.15.12
   OS     : Windows 10

and my package.json dependencies:

"dependencies": {
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@ionic-native/background-mode": "^4.9.1",
    "@ionic-native/browser-tab": "^4.9.1",
    "@ionic-native/call-number": "^4.9.1",
    "@ionic-native/camera": "^3.14.0",
    "@ionic-native/core": "^3.14.0",
    "@ionic-native/diagnostic": "^3.14.0",
    "@ionic-native/firebase": "^4.9.1",
    "@ionic-native/google-maps": "^4.2.1",
    "@ionic-native/http": "^3.14.0",
    "@ionic-native/in-app-browser": "^4.9.1",
    "@ionic-native/location-accuracy": "^3.14.0",
    "@ionic-native/onesignal": "^4.9.1",
    "@ionic-native/paypal": "^4.9.1",
    "@ionic-native/social-sharing": "^4.9.1",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic-native/stripe": "^4.9.1",
    "@ionic-native/vibration": "^4.9.1",
    "@ionic/storage": "2.0.1",
    "angular": "^1.7.2",
    "body-parser": "^1.18.3",
    "browser-sync": "^2.24.7",
    "call-number": "git+https://github.com/Rohfosho/CordovaCallNumberPlugin.git",
    "cheerio": "^0.19.0",
    "cordova-browser": "^5.0.4",
    "cordova-custom-config": "git+https://github.com/dpa99c/cordova-custom-config.git",
    "cordova-ios": "4.5.4",
    "cordova-plugin-accountkit": "^1.4.0",
    "cordova-plugin-advanced-http": "^2.0.1",
    "cordova-plugin-background-mode": "^0.7.2",
    "cordova-plugin-browsertab": "^0.2.0",
    "cordova-plugin-buildinfo": "^1.1.0",
    "cordova-plugin-camera": "^3.0.0",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-device": "^1.1.7",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-googlemaps": "^2.4.4",
    "cordova-plugin-inappbrowser": "^1.7.2",
    "cordova-plugin-ionic-webview": "^1.2.1",
    "cordova-plugin-ionic-wkkeyboard": "^1.1.15",
    "cordova-plugin-paystack": "git+https://github.com/blinks32/cordova-paystack-plugin-updated.git",
    "cordova-plugin-request-location-accuracy": "^2.2.3",
    "cordova-plugin-splashscreen": "^4.1.0",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-vibration": "^2.1.6",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-socialsharing": "^5.4.1",
    "cordova.plugins.diagnostic": "^4.0.10",
    "cors": "^2.8.4",
    "csp-parse": "0.0.2",
    "elementtree": "^0.1.7",
    "es6-promise-plugin": "^4.2.2",
    "express": "^4.16.3",
    "glob": "^5.0.15",
    "ionic-angular": "^3.9.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionic2-rating": "^1.2.2",
    "ionicons": "3.0.0",
    "make-dir": "^1.3.0",
    "minimist": "^1.2.0",
    "mx.ferreyra.callnumber": "0.0.2",
    "npm": "^2.15.12",
    "onesignal-cordova-plugin": "^2.4.4",
    "plist": "^1.2.0",
    "promise-polyfill": "6.0.2",
    "q": "^1.5.1",
    "rxjs": "5.4.0",
    "stripe": "^5.10.0",
    "sw-toolbox": "3.6.0",
    "xml2js": "^0.4.19",
    "zone.js": "0.8.12"
  },

How to show Wordpress post embed video in my app

$
0
0

How to show Wordpress post embed video in my app when i tried to show my response like this
<div [innerHTML]='selectedItem.content.rendered'></div>

only showing content but video not showing

please help me out.
Thanks in advance

Can't load ion-icons on macbook (ionic 4.0.0)

$
0
0

Thanks @FdezRomero for this good answer!

You were right, i hadn’t changed the angular.json. I have copied it from github.

But the problem still exists. It still cannot load any ionicon-svg. :tired_face:

Access to XMLHttpRequest at from origin 'http://localhost' has been blocked by CORS policy Ionic 4

$
0
0

Ionic 4 project HTTP request I got an error

Access to XMLHttpRequest at ‘https://u*****test.f****t.co.in/getMccList’ from origin ‘http://localhost’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I have added plugin cordova-plugin-whitelist

added chrome extension i run this app in android device and debug i chrome browser

this is my server HTTP request call

callserver(methodname, metadata, metainfo){
    var TIMEOUT_REQUEST =10;

  var request = {
    "MetaData": metadata,
    "MetaInfo": metainfo
  };
  const httpOptions = {headers: new HttpHeaders({'Content-Type': 'application/json'})};

  return this.http.post(this.URL+methodname,request,httpOptions).pipe(
    catchError(this.handleError)
  );
  }

TypeError: Object(…) is not a function at AndroidPermissions.requestPermission

$
0
0

Ohh…got it working…updated
@ionic-native/core”: “^5.1.0”,
@ionic-native/android-permissions”: “^5.1.0”,

Using React in an Ionic application in One Go

$
0
0

Hi

I followed this tutorial Custom webpack and modify angular.json.
Is not it enough?

Ok, I tried both with main.jsx and directly inside the index.html. I didn’t understand that main.jsx replaced main.ts. Thank you!

Ionic3 vs ioni4

$
0
0

i create an app in ionic 3 and i feel like i am stupid to choose ionic.
if i upgrade cli to ionic4 then ionic3 code is not working and i use ionic3 then sometimes it is giving problem like cmd stucked.
and all the people who code in ionic3 are fool if they update code in ionic4.

Ionic 4 value="" attribute not returning any data

$
0
0

I have a profile Edit form where am passing user details from an api into using the html value="{{a.firstname}}". when i click on submit button am getting “undefined” for all the fields.

please help.

bellow is the form:

<form [formGroup]=“updateForm” (ngSubmit)=“saveForm(updateForm.value)”>

<div *ngFor=“let d of profile”>

<div align=“center” style=“background-color: #3880ff; padding: 50px; color: white;”>

<!-- <ion-icon name=“add” style=“padding: 30px; border-radius: 100px; background-color: white; color: #3880ff;”></ion-icon>–>

<h6><b>Change Profile Image</b></h6>

</div>

<ion-list-header color=“primary”><h4><b>Edit Information</b></h4></ion-list-header>

<ion-item>

<ion-label position=“floating”>First Name</ion-label>

<ion-input type=“text” formControlName=“firstname” value="{{d.firstname}}"></ion-input>

<div class=“error-box” ngIf=“firstnameRequired”> firstname is required!</div>

<div class=“error-box” ngIf=“firstnameValid”> Valid firstname is required!</div>

</ion-item>

<ion-item>

<ion-label position=“floating”>Last Name</ion-label>

<ion-input type=“text” formControlName=“lastname” clearInput value="{{d.lastname}}"></ion-input>

<div class=“error-box” ngIf=“lastnameRequired”> lastname is required!</div>

<div class=“error-box” ngIf=“lastnameValid”> Valid lastname is required!</div>

</ion-item>

<ion-item>

<ion-label position=“floating”>E-Mail</ion-label>

<ion-input type=“email” formControlName=“email” clearInput value="{{d.email}}"></ion-input>

<div class=“error-box” ngIf=“emailRequired”> Email ID is required!</div>

<div class=“error-box” ngIf=“emailValid”> Valid Email ID is required!</div>

</ion-item>

<ion-item>

<ion-label position=“floating”>Phone</ion-label>

<ion-input type=“number"formControlName=“phone” clearInput value=”{{d.phone}}"></ion-input>

</ion-item>

<ion-item>

<ion-label position=“floating”>Country</ion-label>

<ion-select formControlName=“country” clearInput placeholder="–select country–" >

<ion-select-option *ngFor=“let c of items” value="{{c.id}}">{{c.name}}</ion-select-option>

</ion-select>

</ion-item>

<ion-item>

<ion-label position=“floating”>About</ion-label>

<ion-input type=“text” formControlName=“about” clearInput value="{{d.about}}"></ion-input>

</ion-item>

<ion-button color=“primary” type=“submit” expand=“full” >Save Changes</ion-button>

</div>

</form>

Ionic 4 and Firestore

Ionic 4 value="" attribute not returning any data

$
0
0

Put [(ngModel)] instead values .

Diagnostic not working

$
0
0

Hi all,

I am working on an app and would like to check if Bluetooth is on before trying to collect data. Now I tried using the ionic diagnostic plugin as given here. And added the usual this to the app.module.ts:

import { Diagnostic } from '@ionic-native/diagnostic/ngx';
...
providers: [
...
        Diagnostic,
    ]
...

The plugin is installed and shows after running the ionic cordova list command. But in-app it keeps on running into the Uncaught (in promise): TypeError: object is not a function TypeError: object is not a function at Diagnostic.BluetoothAvailable

I am calling the following function from a provider in a different provider:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Diagnostic } from '@ionic-native/diagnostic/ngx';
import { Platform } from 'ionic-angular';

/*
  Generated class for the DiagnosticProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class DiagnosticProvider {

    constructor(
        public http: HttpClient,
        private diagnostic: Diagnostic,
        private platform: Platform,
    ) {
            console.log('Hello DiagnosticProvider Provider');
    }
 
    public checkBluetooth() {
        console.log("in checkBluetooth");
        this.platform.ready().then(() =>{
            let successCallback = (isAvailable) => { console.log('Is available? ' + isAvailable); }
            let errorCallback = (e) => console.error(e);
            console.log("works");
            this.diagnostic.isBluetoothAvailable().then(successCallback).catch(errorCallback);
        });
    }
}


Ionic:

   ionic (Ionic CLI)  : 4.10.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.10

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 1.2.1, (and 9 other plugins)

System:

   Android SDK Tools : 26.1.1 (/home/thomas/Android/Sdk)
   NodeJS            : v8.11.4 (/usr/bin/node)
   npm               : 5.8.0
   OS                : Linux 4.18

Also, I tried ionic repair and removing all node_modules and reinstalling them.

Any ideas on how to tackle this


Ionic v4 migration issue

Selected sound file does not play for my notification! Ionic 4

$
0
0

I have tried that already, no luck i got an email from the plugin develpper, and he said that i should use the same path in www root and if i look at the path in the www root it is the same as the Src. So i dont know what the problem is. I think it is a bug in Ionic plugin.

if you can follow the conversation. You may comment there.

Render Nearby places according to the database location and userlocation

Ionic 4 + Firebase SDK

Ionic 4 login flow?

Viewing all 230639 articles
Browse latest View live


Latest Images