@vovchyk wrote:

Paypal works fine only when using Cordova. But when I used the Capacitor it doesn’t work on iOs. I understand that it is not on the Ionic side. But I just want to inform you that
https://github.com/paypal/PayPal-Cordova-Plugin plugin works correctly only with Cordova.

This guide https://ionicframework.com/docs/native/paypal works only using Cordova. I created empty apps (only with PayPal plugin) using both Cordova and Capacitor and tested it with the latest library versions.

Error body from PayPal pop-up:
Invalid merchant
Payments to this merchant are not allowed (invalid clientId)

Error from console:
PayPal SDK: Request has failed with error: invalid_client - System error (invalid_client). Please try again later. (401) | PayPal Debug-ID: 61c53ad41d07b [mock, PayPal iOS SDK 2.17.0] | Details: ( { “error_description” = “Client Authentication failed”; } ).

The clientId is correct from the correct production environment and works only on Android using Capacitor and on both platforms using Cordova.

Posts: 1

Participants: 1

Read full topic

@ccssmnn wrote:

I’m using IonSelect inside an IonGrid. The displayed options text is shorter that it has to be. It is especially short when a Label is provided.

Here are the images:

The code:

import * as React from "react";
import { render } from "react-dom";
// core css for ionic to work properly
import "@ionic/react/css/core.css";
import {
  IonSelect,
  IonItem,
  IonSelectOption,
  IonGrid,
  IonRow,
  IonCol,
  IonLabel
} from "@ionic/react";

function App() {
  const [value, setValue] = React.useState("");
  const options = ["short", "loooooooooong", "veeeeeeeeeery loooooooooong"];
  return (
    <IonGrid>
      <IonRow>
        <IonCol size="6">
          <IonItem>
            <IonLabel>Label</IonLabel>
            <IonSelect
              interface="popover"
              placeholder="Select one"
              value={value}
              onIonChange={e => setValue(e.detail.value)}
            >
              {options.map((option, i) => (
                <IonSelectOption value={option} key={i}>
                  {option}
                </IonSelectOption>
              ))}
            </IonSelect>
          </IonItem>
        </IonCol>
      </IonRow>
    </IonGrid>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

Any suggestions?

Thanks

Posts: 1

Participants: 1

Read full topic

@keber wrote:

When I’m uploading a build to AppStoreConnect (to test it via TestFlight for example), I’m getting the well known deprecation message:

ITMS-90809: Deprecated API Usage - Apple will stop accepting submissions of new apps that use UIWebView APIs starting from April 2020. See https://developer.apple.com/documentation/uikit/uiwebview for more information.

However I have followed all the instructions (e.g. from the official Ionic Blog) and don’t know what I could have missed.

What I did:

1. Updated all cordova plugins to the latest version (e.g. cordova-plugin-ionic-webview is now on v4.1.3; cordova-plugin-inappbrowser is on v3.2.0)
2. Checked Cordova Platform (it is ios 5.1.1 )
3. Made sure that I have <preference name="WKWebViewOnly" value="true"/> in my config.xml
4. Ran ionic cordova prepare ios and ionic cordova build ios

I still get the deprecation message, I already tried removing the whole ios platform and adding it again afterwards, that didn’t help.

List of cordova plugins I’m using:

card.io.cordova.mobilesdk 2.1.0 "CardIO"
com-badrit-base64 0.2.0 "Base64"
com.paypal.cordova.mobilesdk 3.5.0 "PayPalMobile"
cordova-plugin-add-swift-support 2.0.2 "AddSwiftSupport"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-camera-with-exif 1.3.1 "cordova-plugin-camera-with-exif"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-file-opener2 2.2.1 "File Opener2"
cordova-plugin-file-transfer 1.7.1 "File Transfer"
cordova-plugin-filepath 1.5.6 "cordova-plugin-filepath"
cordova-plugin-ftp 1.1.1 "Ftp"
cordova-plugin-google-analytics 1.8.6 "Google Universal Analytics Plugin"
cordova-plugin-inappbrowser 3.2.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.3 "cordova-plugin-ionic-webview"
cordova-plugin-nativegeocoder 3.2.2 "NativeGeocoder"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-taptic-engine 2.1.0 "Taptic Engine"
cordova-plugin-vibration 3.1.1 "Vibration"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 3.4.0 "Cordova sqlite storage plugin - cordova-sqlite-storage plugin version"
cordova.plugins.diagnostic 5.0.1 "Diagnostic"

Ionic Info:

Ionic:

   Ionic CLI                     : 5.4.16 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.10
   @angular-devkit/build-angular : 0.803.21
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 17 other plugins)

Utility:

   cordova-res (update available: 0.11.0) : 0.8.1
   native-run                             : 0.3.0

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.2
   NodeJS     : v10.16.3 (/usr/local/bin/node)
   npm        : 6.14.4
   OS         : macOS Mojave
   Xcode      : Xcode 11.2.1 Build version 11B500

Does anybody have an idea what could cause the issue?
I’m about to release an app in the next couple of days/weeks.

Thank you so much in advance!

Posts: 1

Participants: 1

Read full topic

@peterkhang69 wrote:

There is so good webRTC media server :
http://www.kurento.org/

10:49

Could anybody suggest me ionic v5 webRTC client module connecting to kurento ?

Posts: 2

Participants: 2

Read full topic

@dodomui wrote:

Everything is working fine but suddenly unable to start new project with error.

> npm i
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated mkdirp@0.5.4: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm ERR! Unexpected end of JSON input while parsing near '...XuvJHwJRfyznxU\nqPi4D'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/.../.npm/_logs/2020-03-26T13_55_17_902Z-debug.log
[ERROR] An error occurred while running subprocess npm.

Command: ionic start myApp

Ionic:

Ionic CLI : 6.3.0

Utility:

cordova-res (update available: 0.11.0) : 0.9.0
native-run : 0.3.0

System:

NodeJS : v12.16.1
npm : 6.14.4
OS : macOS Catalina

npm 6.14.4
node v12.16.1

Posts: 5

Participants: 2

Read full topic

@ioclaudio wrote:

Hi
when I add a Cordova plugin to Ionic I use this code

ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

To update the same plugin do I have to run these commands?

npm uninstall @ionic-native/in-app-browser
ionic cordova plugin rm cordova-plugin-inappbrowser
ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

Or there is a simpler way?
When i update a plugin i have to update also the ionic-native wrapper?

Thank you very much

claudio

Posts: 2

Participants: 2

Read full topic

@Sweg wrote:

I am adding Google Maps Javascript to my ionic app below.

The map is displaying as expected when I run ionic serve ,

However, when I try to run on my android device using below commands, the map is displaying sometimes , but not always.

1. ionic build
2. npx cap sync
3. npx cap open android

Can someone please tell me why this is occurring, & how it can be resolved?

Here is my code below, I’ll also show the console output in Android studio when I try to run the app:

<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-title>
      Google Maps
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div #map id="map" [hidden]="!user"></div>
</ion-content>

Typescript:

  user = null;
  @ViewChild('map', { static: false }) mapElement: ElementRef;
  map: any;
  markers = [];
  watch = null;
  latLng = null;

  constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore) { }

  ionViewWillEnter() {
    this.anonLogin();
    this.loadMap();
  }

  anonLogin() {
    this.afAuth.auth.signInAnonymously().then(res => {
      this.user = res.user;
      this.watch = Geolocation.watchPosition({}, (position, err) => {
        if (position) {
          this.deleteMarkers();
          var newLocation = { lat: position.coords.latitude, lng: position.coords.longitude };
          this.addMarker(newLocation);
        }
      });
    });
  }

  addMarker(location) {
    var marker = new google.maps.Marker({
      position: location,
      map: this.map,
      animation: google.maps.Animation.BOUNCE,
    });
    this.markers.push(marker);
  }

  deleteMarkers() {
    this.clearMarkers();
    this.markers = [];
  }

  clearMarkers() {
    this.setMapOnAll(null);
  }

  setMapOnAll(map) {
    for (var i = 0; i < this.markers.length; i++) {
      this.markers[i].setMap(map);
    }
  }

  loadMap() {

    var locationOnLoad = null;

    Geolocation.getCurrentPosition().then((resp) => {
      this.latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
      locationOnLoad = { lat: resp.coords.latitude, lng: resp.coords.longitude };
    }).then(() => {

      this.map = new google.maps.Map(this.mapElement.nativeElement, {
        center: locationOnLoad,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      this.addMarker(locationOnLoad);

    }).catch((err) => {
      console.log(err);
    });
  }

And here is the console output when I try to run in Android Studio:

03/26 14:53:18: Launching ‘app’ on samsung SM-G965F. $ adb shell am start -n “io.ionic.starter/io.ionic.starter.MainActivity” -a android.intent.action.MAIN -c android.intent.category.LAUNCHER Connected to process 29347 on device ‘samsung-sm_g965f-2410169c6d0c7ece’. Capturing and displaying logcat messages from application. This behavior can be disabled in the “Logcat output” section of the “Debugger” settings page. E/Zygote: isWhitelistProcess - Process is Whitelisted E/Zygote: accessInfo : 1 I/SELinux: SELinux: seapp_context_lookup: seinfo=untrusted, level=s0:c139,c258,c512,c768, pkgname=io.ionic.starter I/o.ionic.starte: Late-enabling -Xcheck:jni D/ConnectivityManager_URSP: Ursp sIsUrsp=false, sIsCheckUrsp=false, uid=10651 D/Proxy: urspP is null: 10651 W/FirebaseApp: Default FirebaseApp failed to initialize because no default options were found. This usually means that com.google.gms:google-services was not applied to your gradle project. I/FirebaseInitProvider: FirebaseApp initialization unsuccessful D/libEGL: loaded /vendor/lib64/egl/libGLES_mali.so W/o.ionic.starte: Accessing hidden method Landroid/graphics/drawable/Drawable;->getOpticalInsets()Landroid/graphics/Insets; (light greylist, linking) Accessing hidden field Landroid/graphics/Insets;->left:I (light greylist, linking) Accessing hidden field Landroid/graphics/Insets;->right:I (light greylist, linking) Accessing hidden field Landroid/graphics/Insets;->top:I (light greylist, linking) Accessing hidden field Landroid/graphics/Insets;->bottom:I (light greylist, linking) E/o.ionic.starte: Invalid ID 0x00000000. W/o.ionic.starte: Accessing hidden method Landroid/view/View;->getAccessibilityDelegate()Landroid/view/View$AccessibilityDelegate; (light greylist, linking) W/o.ionic.starte: Accessing hidden method Landroid/view/View;->computeFitSystemWindows(Landroid/graphics/Rect;Landroid/graphics/Rect;)Z (light greylist, reflection) W/o.ionic.starte: Accessing hidden method Landroid/view/ViewGroup;->makeOptionalFitsSystemWindows()V (light greylist, reflection) I/WebViewFactory: Loading com.android.chrome version 80.0.3987.149 (code 398714932) E/o.ionic.starte: Invalid ID 0x00000000. E/o.ionic.starte: Invalid ID 0x00000000. I/cr_LibraryLoader: Loaded native library version number “80.0.3987.149” W/o.ionic.starte: Accessing hidden method Landroid/content/Context;->bindServiceAsUser(Landroid/content/Intent;Landroid/content/ServiceConnection;ILandroid/os/Handler;Landroid/os/UserHandle;)Z (light greylist, reflection) D/ConnectivityManager: requestNetwork; CallingUid : 10651, CallingPid : 29347 D/ConnectivityManager: requestNetwork; CallingUid : 10651, CallingPid : 29347 D/Capacitor: Starting BridgeActivity D/Capacitor: Registering plugin: App D/Capacitor: Registering plugin: Accessibility D/Capacitor: Registering plugin: BackgroundTask D/Capacitor: Registering plugin: Browser D/Capacitor: Registering plugin: Camera D/Capacitor: Registering plugin: Clipboard D/Capacitor: Registering plugin: Device D/Capacitor: Registering plugin: LocalNotifications D/Capacitor: Registering plugin: Filesystem D/Capacitor: Registering plugin: Geolocation D/Capacitor: Registering plugin: Haptics D/Capacitor: Registering plugin: Keyboard D/Capacitor: Registering plugin: Modals D/Capacitor: Registering plugin: Network D/Capacitor: Registering plugin: Permissions D/Capacitor: Registering plugin: Photos D/Capacitor: Registering plugin: PushNotifications D/Capacitor: Registering plugin: Share D/Capacitor: Registering plugin: SplashScreen D/Capacitor: Registering plugin: StatusBar D/Capacitor: Registering plugin: Storage D/Capacitor: Registering plugin: Toast D/Capacitor: Registering plugin: WebView E/Capacitor: Unable to read file at path public/plugins D/Capacitor: Loading app at http://localhost W/o.ionic.starte: Accessing hidden method Landroid/media/AudioManager;->getOutputLatency(I)I (light greylist, reflection) W/cr_media: Requires BLUETOOTH permission I/ConfigStore: android::hardware::configstore::V1_0::ISurfaceFlingerConfigs::hasWideColorDisplay retrieved: 0 android::hardware::configstore::V1_0::ISurfaceFlingerConfigs::hasHDRDisplay retrieved: 0 W/AudioCapabilities: Unsupported mime audio/ac4 W/AudioCapabilities: Unsupported mime audio/x-ima W/AudioCapabilities: Unsupported mime audio/x-ape W/AudioCapabilities: Unsupported mime audio/eac3-joc W/AudioCapabilities: Unsupported mime audio/mpeg-L1 Unsupported mime audio/mpeg-L2 W/AudioCapabilities: Unsupported mime audio/x-ms-wma D/Capacitor/Plugin/LN: LocalNotification received: null Activity started without notification attached D/Capacitor: App started D/Capacitor/Plugin/App: Firing change: true W/VideoCapabilities: Unrecognized profile 4 for video/hevc V/Capacitor/Plugin/App: Notifying listeners for event appStateChange D/Capacitor/Plugin/App: No listeners found for event appStateChange W/VideoCapabilities: Unsupported mime video/mp43 W/VideoCapabilities: Unrecognized profile/level 1/32 for video/mp4v-es Unrecognized profile/level 32768/2 for video/mp4v-es Unrecognized profile/level 32768/64 for video/mp4v-es D/Capacitor: App resumed W/VideoCapabilities: Unsupported mime video/wvc1 D/OpenGLRenderer: Skia GL Pipeline W/VideoCapabilities: Unsupported mime video/wvc1 D/EmergencyMode: [EmergencyManager] android createPackageContext successful D/InputTransport: Input channel constructed: fd=133 D/ViewRootImpl@edef802[MainActivity]: setView = DecorView@80c6513[MainActivity] TM=true MM=false W/VideoCapabilities: Unsupported mime video/x-ms-wmv7 W/VideoCapabilities: Unsupported mime video/x-ms-wmv8 D/ConnectivityManager: requestNetwork; CallingUid : 10651, CallingPid : 29347 D/ConnectivityManager: requestNetwork; CallingUid : 10651, CallingPid : 29347 D/Capacitor: Handling local request: http://localhost/ I/VideoCapabilities: Unsupported profile 4 for video/mp4v-es D/ViewRootImpl@edef802[MainActivity]: dispatchAttachedToWindow D/ViewRootImpl@edef802[MainActivity]: Relayout returned: old=[0,0][1080,2220] new=[0,0][1080,2220] result=0x7 surface={valid=true 493862674432} changed=true I/OpenGLRenderer: Initialized EGL, version 1.4 D/OpenGLRenderer: Swap behavior 2 D/mali_winsys: EGLint new_window_surface(egl_winsys_display *, void *, EGLSurface, EGLConfig, egl_winsys_surface **, EGLBoolean) returns 0x3000 D/OpenGLRenderer: eglCreateWindowSurface = 0x72f5333200, 0x72fc826010 D/InputTransport: Input channel constructed: fd=146 D/ViewRootImpl@528b903[MainActivity]: setView = android.widget.ImageView{607e080 V.ED… …ID 0,0-0,0} TM=true MM=false D/InputTransport: Input channel constructed: fd=147 D/ViewRootImpl@84a84ac[MainActivity]: setView = android.widget.ProgressBar{52f1575 I.ED… …ID 0,0-0,0} TM=true MM=false V/Capacitor/Plugin/Network: Notifying listeners for event networkStatusChange D/Capacitor/Plugin/Network: No listeners found for event networkStatusChange D/ViewRootImpl@edef802[MainActivity]: MSG_RESIZED: frame=Rect(0, 0 - 1080, 2220) ci=Rect(0, 63 - 0, 39) vi=Rect(0, 63 - 0, 39) or=1 MSG_WINDOW_FOCUS_CHANGED 1 1 D/InputMethodManager: prepareNavigationBarInfo() DecorView@80c6513[MainActivity] getNavigationBarColor() -855310 D/InputMethodManager: prepareNavigationBarInfo() DecorView@80c6513[MainActivity] getNavigationBarColor() -855310 V/InputMethodManager: Starting input: tba=io.ionic.starter ic=null mNaviBarColor -855310 mIsGetNaviBarColorSuccess true , NavVisible : true , NavTrans : false D/InputMethodManager: startInputInner - Id : 0 I/InputMethodManager: startInputInner - mService.startInputOrWindowGainedFocus D/InputTransport: Input channel constructed: fd=148 D/ViewRootImpl@528b903[MainActivity]: dispatchAttachedToWindow D/ViewRootImpl@528b903[MainActivity]: Relayout returned: old=[0,0][1080,2220] new=[0,0][1080,2220] result=0x7 surface={valid=true 493740634112} changed=true D/mali_winsys: EGLint new_window_surface(egl_winsys_display *, void *, EGLSurface, EGLConfig, egl_winsys_surface **, EGLBoolean) returns 0x3000 D/OpenGLRenderer: eglCreateWindowSurface = 0x72f541f280, 0x72f53c3010 D/ViewRootImpl@84a84ac[MainActivity]: dispatchAttachedToWindow D/ViewRootImpl@84a84ac[MainActivity]: Relayout returned: old=[0,0][1080,2220] new=[477,1047][603,1173] result=0x1 surface={valid=false 0} changed=false D/ViewRootImpl@528b903[MainActivity]: MSG_WINDOW_FOCUS_CHANGED 1 1 D/InputMethodManager: prepareNavigationBarInfo() android.widget.ImageView{607e080 V.ED… …ID 0,0-1080,2220} getNavigationBarColor this view is not DecorView or null getNavigationBarColor() Fail D/InputMethodManager: prepareNavigationBarInfo() android.widget.ImageView{607e080 V.ED… …ID 0,0-1080,2220} getNavigationBarColor this view is not DecorView or null getNavigationBarColor() Fail V/InputMethodManager: Starting input: tba=io.ionic.starter ic=null mNaviBarColor Fail mIsGetNaviBarColorSuccess false , NavVisible : true , NavTrans : false D/InputMethodManager: startInputInner - Id : 0 I/InputMethodManager: startInputInner - mService.startInputOrWindowGainedFocus D/InputTransport: Input channel constructed: fd=152 W/InputMethodManager: Ignoring onBind: cur seq=43450, given seq=43449 D/InputTransport: Input channel destroyed: fd=148 D/ViewRootImpl@528b903[MainActivity]: MSG_RESIZED: frame=Rect(0, 0 - 1080, 2220) ci=Rect(0, 63 - 0, 39) vi=Rect(0, 63 - 0, 39) or=1 D/ViewRootImpl@edef802[MainActivity]: MSG_WINDOW_FOCUS_CHANGED 0 1 D/InputMethodManager: prepareNavigationBarInfo() DecorView@80c6513[MainActivity] getNavigationBarColor() -855310 D/Capacitor: Handling local request: http://localhost/polyfills-es2015.js D/Capacitor: Handling local request: http://localhost/runtime-es2015.js D/Capacitor: Handling local request: http://localhost/vendor-es2015.js D/Capacitor: Handling local request: http://localhost/main-es2015.js D/Capacitor: Handling local request: http://localhost/styles-es2015.js I/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 69837 - Msg: Angular is running in the development mode. Call enableProdMode() to enable the production mode. D/Capacitor: Handling local request: http://localhost/5-es2015.js D/Capacitor: Handling local request: http://localhost/common-es2015.js D/Capacitor: Handling local request: http://localhost/home-home-module-es2015.js I/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 117994 - Msg: Ionic Native: deviceready event fired after 506 ms W/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 118299 - Msg: Native: tried calling StatusBar.styleDefault, but the StatusBar plugin is not installed. File: http://localhost/vendor-es2015.js - Line 118311 - Msg: Install the StatusBar plugin: ‘ionic cordova plugin add cordova-plugin-statusbar’ W/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 118299 - Msg: Native: tried calling SplashScreen.hide, but the SplashScreen plugin is not installed. File: http://localhost/vendor-es2015.js - Line 118311 - Msg: Install the SplashScreen plugin: ‘ionic cordova plugin add cordova-plugin-splashscreen’ D/Capacitor: Handling local request: http://localhost/swipe-back-d2cdbf9a-js-es2015.js V/Capacitor/Plugin: To native (Capacitor plugin): callbackId: 125075709, pluginId: Geolocation, methodName: getCurrentPosition V/Capacitor: callback: 125075709, pluginId: Geolocation, methodName: getCurrentPosition, methodData: {} D/Capacitor: Handling local request: http://localhost/tap-click-606f325e-js-es2015.js V/Capacitor/Plugin: To native (Capacitor plugin): callbackId: 125075710, pluginId: App, methodName: addListener V/Capacitor: callback: 125075710, pluginId: App, methodName: addListener, methodData: {“eventName”:“backButton”} D/Capacitor: Handling local request: http://localhost/focus-visible-70713a0c-js-es2015.js D/Capacitor: Handling local request: http://localhost/status-tap-2ec46489-js-es2015.js D/Capacitor: Handling local request: http://localhost/assets/icon/favicon.png D/TcpOptimizer: TcpOptimizer-ON D/NetworkSecurityConfig: No Network Security Config specified, using platform default V/Capacitor/Plugin: To native (Capacitor plugin): callbackId: 125075711, pluginId: Geolocation, methodName: watchPosition V/Capacitor: callback: 125075711, pluginId: Geolocation, methodName: watchPosition, methodData: {} I/Capacitor/Console: File: http://localhost/home-home-module-es2015.js - Line 2796 - Msg: new position: 51.9294869-8.5130874 D/Capacitor: Handling local request: http://localhost/33-es2015.js D/Capacitor: SplashScreen was automatically hidden after the launch timeout. You should call SplashScreen.hide() as soon as your web app is loaded (or increase the timeout).Read more at https://capacitor.ionicframework.com/docs/apis/splash-screen/#hiding-the-splash-screen W/libEGL: EGLNativeWindowType 0x72f53c3010 disconnect failed D/OpenGLRenderer: eglDestroySurface = 0x72f541f280, 0x72f53c3000 D/ViewRootImpl@528b903[MainActivity]: Relayout returned: old=[0,0][1080,2220] new=[0,0][1080,2220] result=0x5 surface={valid=false 0} changed=true D/ViewRootImpl@528b903[MainActivity]: dispatchDetachedFromWindow Surface release. android.view.ViewRootImpl.doDie:7954 android.view.ViewRootImpl$ViewRootHandler.handleMessage:4955 android.os.Handler.dispatchMessage:106 android.os.Looper.loop:214 android.app.ActivityThread.main:6986 java.lang.reflect.Method.invoke:-2 com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run:494 com.android.internal.os.ZygoteInit.main:1445 D/InputTransport: Input channel destroyed: fd=146 E/ViewRootImpl: sendUserActionEvent() returned. D/ViewRootImpl@edef802[MainActivity]: MSG_WINDOW_FOCUS_CHANGED 1 1 D/InputMethodManager: prepareNavigationBarInfo() DecorView@80c6513[MainActivity] getNavigationBarColor() -855310 D/InputMethodManager: prepareNavigationBarInfo() DecorView@80c6513[MainActivity] getNavigationBarColor() -855310 V/InputMethodManager: Starting input: tba=io.ionic.starter ic=null mNaviBarColor -855310 mIsGetNaviBarColorSuccess true , NavVisible : true , NavTrans : false D/InputMethodManager: startInputInner - Id : 0 I/InputMethodManager: startInputInner - mService.startInputOrWindowGainedFocus D/InputTransport: Input channel constructed: fd=149 D/InputTransport: Input channel destroyed: fd=152 E/Capacitor/Console: File: https://maps.googleapis.com/maps/api/js?key=AIzaSyDfdy3Tu2pS2QX8m8f_iPPKfX4vgQHBel8 - Line 55 - Msg: You must enable Billing on the Google Cloud Project at https://console.cloud.google.com/project/_/billing/enable Learn more at https://developers.google.com/maps/gmp-get-started D/ViewRootImpl@edef802[MainActivity]: ViewPostIme pointer 0 D/ViewRootImpl@edef802[MainActivity]: ViewPostIme pointer 1 D/InputMethodManager: prepareNavigationBarInfo() DecorView@80c6513[MainActivity] getNavigationBarColor() -855310 V/InputMethodManager: Starting input: tba=io.ionic.starter ic=null mNaviBarColor -855310 mIsGetNaviBarColorSuccess true , NavVisible : true , NavTrans : false D/InputMethodManager: startInputInner - Id : 0 I/InputMethodManager: startInputInner - mService.startInputOrWindowGainedFocus D/InputTransport: Input channel constructed: fd=197 D/InputTransport: Input channel destroyed: fd=149 D/InputMethodManager: HSIFW - flag : 0 Pid : 29347 I/o.ionic.starte: Compiler allocated 4MB to compile void android.view.ViewRootImpl.performTraversals() I/Capacitor/Console: File: http://localhost/home-home-module-es2015.js - Line 2796 - Msg: new position: 51.9294876-8.5130852

Posts: 1

Participants: 1

Read full topic

@Pratikjaiswa15 wrote:

I have built jwt authentication system in my ionic 4 app. If the token is available user will be redirected to the " menu/items " page else redirected to " home " page which performs login.

I have set the default path to " menu/items " page. But when the app starts or reloads " home " page is displayed for a second and then redirected to " menu/items " page even though default path is " menu/items ".

I can’t get why this is happening.

Thank you in advance

here is my code

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'menu/items', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule) },

  { path: 'details', loadChildren: () => import('./pages/details/details.module').then(m => m.DetailsPageModule) },
  { path: 'user-type', loadChildren: () => import('./pages/user-type/user-type.module').then(m => m.UserTypePageModule) },

  { path: 'menu', canActivate: [AuthGuard], loadChildren: () => import('./pages/menu/menu.module').then(m => m.MenuPageModule) },

];

authentication.service.ts

authenticationState = new BehaviorSubject(false);

  constructor(private storage: StorageService, private plt: Platform, private router: Router) {

    this.plt.ready().then(() => {
      this.checkToken();
    });
   }

   checkToken() {
    this.storage.get(TOKEN_KEY).then(res => {
      if (res) {
        this.authenticationState.next(true);
      }
    })
  }

  login() {
    return this.storage.set(TOKEN_KEY, 'Bearer 1234567').then(() => {
      this.authenticationState.next(true);
    });
  }

  logout() {
    return this.storage.clear().then(() => {
      this.authenticationState.next(false);
      this.router.navigate(['home'])

    });
  }

  isAuthenticated() {
    return this.authenticationState.value;
  }

auth.guard.ts

constructor(public auth: AuthenticationService) {}

  canActivate(): boolean {
    return this.auth.isAuthenticated();
  }

Posts: 2

Participants: 2

Read full topic

@tkclark wrote:

I asked this question on the Vue forums because I think it’s more relevant there, but maybe someone here has some insight on this:

I am creating an Ionic app using Vue/Vuex/Firebase/Plaid. So far, everything has been going pretty good considering the lack of documentation and support on Ionic/Vue. I have been able to get logins to work and even persist them with Firebase/Vuex.

Now I’d like to start persisting other bits of data as well. Not sure how to do this? Local storage? Also, should I be using Vuexfire? I want to not only keep things in sync all the time, but maybe also offer offline support in the future.

Any tips or tricks would be great! Thanks!

Posts: 1

Participants: 1

Read full topic

@leonardofmed wrote:

Hi, I’m using the ng-select component for Angular, but I have a problem using it on my device.

While I’m just selecting the items from the ng-select element everything is working fine, but when I type something in the search box and then select an item nothing is show anymore. The value is correctly selected in .ts page, but the user can’t understand that the element was already selected because the box remains empty.

I did some investigation and found that when I type something and then select an item, the class of ng-select element changes. A new element is added: ng-select-filtered , which hide the label of the element.

I tried to create a reproduction of the error, but it seems that this is only happening in my device. Does anyone have any idea why this might be happening?

Posts: 3

Participants: 2

Read full topic

@riaranha wrote:

Hello!

I’m trying to install the native-storage.

When I run: npm install @ionic-native/native-storage

I have the return:
npm WARN karma-jasmine-html-reporter@1.5.3 requires a peer of jasmine-core@>=3.5 but none is installed. You must install peer dependencies yourself.

• @ionic-native/native-storage@5.23.0
  added 4 packages from 1 contributor, updated 1 package and audited 19780 packages in 15.085s

29 packages are looking for funding
run npm fund for details

found 2 low severity vulnerabilities
run npm audit fix to fix them, or npm audit for details

How can I fix this and install the native-storage?

Thanks!!

BRs

Posts: 1

Participants: 1

Read full topic

@Wrybread wrote:

I’m having trouble using Chrome’s new method of debugging external devices:

chrome://inspect/#devices

Previously I would go to Dev Tools -> More Tools -> Remote Devices and could connect to my phone and see console messages. But when I go to the above URL, I see a reference to my phone (SM-G965U) but I can’t figure out how to actually get any info from it.

I don’t imagine anyone has any tips?

And while I’m on the subject, in Windows 7 I only inconsistently see the console.log messages. I run my app like this:

ionic cordova run android --consolelogs --livereload --ssl --address=0.0.0.0

Usually I use the MINGW64 console, and it sometimes shows me the console messages. Sometimes I use the terminal in VSCode, which also sometimes shows me the console messages.

So I’m a little confused.

Is there some other command I should be running?

Posts: 1

Participants: 1

Read full topic

@reworked wrote:

Is there a demo app for iOS and Android that showcases the features of Ionic components that is downloadable somewhere? We’re having issues with certain features and it’d be nice to know if it’s something we’ve done incorrectly or if it’s actually a bug.

Posts: 1

Participants: 1

Read full topic

@Wrybread wrote:

Using Ionic 4, and I’m trying to show a div only if two conditions are met:

<div *ngIf="variable1 === 1 && variable2 === 2">***</div>

That doesn’t work.

This works for just one variable though:

<div *ngIf="variable1 === 1">***</div>

I don’t imagine anyone has any tips?

Posts: 1

Participants: 1

Read full topic

@deepaksharma15 wrote:

Trying to generate resources in ionic v3 using the command – ionic cordova resources but it failed with the HTTP error 503.
Tried on healthy network also but suddenly it’s not working for last 1 day. Before it was working properly.

Collecting resource configuration and source images - done!
Filtering out image resources that do not need regeneration - done!
Uploading source images to prepare for transformations - failed!
HTTP Error 503: POST https://res.ionic.io/api/v1/upload

<!DOCTYPE html>
        <html>
          <head>
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <meta charset="utf-8">
                <title>Application Error</title>
                <style media="screen">
                  html,body,iframe {
                        margin: 0;
                        padding: 0;
                  }
                  html,body {
                        height: 100%;
                        overflow: hidden;
                  }
                  iframe {
                        width: 100%;
                        height: 100%;
                        border: 0;
                  }
                </style>
          </head>
          <body>
                <iframe src="//www.herokucdn.com/error-pages/application-error.html"></iframe>
          </body>
        </html>

Posts: 1

Participants: 1

Read full topic

@Pratikjaiswa15 wrote:

I am using firebase phone-authentication in my ionic 4 app. I have successfully implemented jwt authentication. If the token is available I redirect users to the main page else redirecting to the login page.

But here comes the problem on the login page. If the user is new(coming for the first time) then I want to redirect to the details page to get some other data like email, name, else (old user) redirect to the main page.

The problem is I don’t have different buttons for login and signup in my app. The same login is used for both login and register

What is the best solution to check if the user is new or old?

Here is my code

authentication.service.ts

authenticationState = new BehaviorSubject(false);

    constructor(private storage: StorageService, private plt: Platform, private router: Router) {

        this.plt.ready().then(() => {
          this.checkToken();
        });
       }

       checkToken() {
        this.storage.get(TOKEN_KEY).then(res => {
          if (res) {
            this.authenticationState.next(true);
          }
        })
      }

      login() {
        return this.storage.set(TOKEN_KEY, 'Bearer 1234567').then(() => {
          this.authenticationState.next(true);
        });
      }

      logout() {
        return this.storage.clear().then(() => {
          this.authenticationState.next(false);
          this.router.navigate(['home'])

        });
      }

      isAuthenticated() {
        return this.authenticationState.value;
      }

app.component.ts

constructor(private authenticationService: AuthenticationService){
    this.authenticationService.authenticationState.subscribe(state => {
            if (state) {
              this.router.navigate(['menu/items']);
            } else {
              this.router.navigate(['home']);
            }
          });
}

home.page.ts

if(old user) {
// redirect to main page
}

else {
redirect to details page
}

Posts: 1

Participants: 1

Read full topic

@Ramji1980 wrote:

i am getting the below error how to resolve this

Access to XMLHttpRequest at ‘http://localhost/rmfdevmobile/public/api/getpodcasts’ from origin ‘http://localhost:8100’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.

Posts: 1

Participants: 1

Read full topic

@lhk wrote:

I would like to display dynamic HTML content in an ionic (react) app and enrich it with ionic components.

I know, this is highly discouraged. After browsing the forum, there are quite a few questions like this.
And the answer is always: Don’t have an API that returns HTML, have an API that returns data. Then use that data to inflate your components.

Which makes a lot of sense. But I think in this case it’s really justified:
I would like to display an ebook in epub format. That format is basically a collection of static websites, and some special files with metadata.

To display a chapter from the book, I can extract its body and use dangerouslySetInnerHTML to add it to one of my components. Or I can supply the entire html page as srcDoc on an iframe.

This works, my barebones ereader is up and running. But now I would like to enrich the text in the book with some custom components for markup. Here I would be really grateful for some feedback and discussion.

The first thing I realized is that this is near impossible with React. You can use dangerouslySetInnerHTML to embed dom nodes inside of the virtual dom. But then there is no going back, you can’t get components that need to live on the virtual dom in this dangerous inner HTML. That means that I can’t have my react components inside of the ebook markup.

Ok, but what about web components. They live in the dom, surely I can embed those in the ebook. It took me very long to realize that I can’t use the react components, like <IonButton> for this. Instead it’s <ion-button> and an empty import statement import "@ionic/core" to get the bundler to work. But now I can add Ionic components in the dangerous inner HTML. There are ionic styled buttons and badges in the ebook now.
This does not work for iframes, since they don’t share JS and CSS with the parent page. I have not yet figured out how to inject the import "@ionic/core" into the iframe (in bundled code, no CDN).

So it’s possible to get the ionic web components inside of dynamic markup. This is nice, but I need more functionality. The markup in the book needs to display popovers and make callbacks.

I could use jQuery, to wire up the custom logic with these ionic web components. This seems like a bad idea. Have jQuery in a React codebase, mix declarative and imperative programming, ew…

So how do I get this set up properly?
Is this a good usecase for a web component compiler like Stencil? I could mix react components and stencil components in my project. And embed the stencil components in the dynamic html markup, to still get consistent ionic styling.
Is there a good way to wire this up?
I mean, stencil could encapsulate some of the logic in these custom components.
But I still need to find them and hook up callbacks.

At this point I’m very confused and would be really happy for some discussion.
By the way, my processing pipeline looks somewhat like this:

• load epub and parse manifest data -> list of html pages as text
• process html page -> still text, but maybe with embedded <custom-tags>
• reader component is loaded -> node in the virtual dom where custom html needs to be displayed

Posts: 1

Participants: 1

Read full topic

@NthabyMogoboya wrote:

I want to disable modal dismiss when you click outside the modal. I’ve tried many different examples but didn’t work.

async openExtras(){
let modal = await this.modalCtrl.create({
component: ExtrasPage,
cssClass: ‘extras’
});
modal.present();
}

Posts: 1

Participants: 1

Read full topic

@lhk wrote:

After stumbling over the lack of interop between react and web components, I’m now seriously considering to move to preact (or even vue, but there I have no experience yet).

As far as I understand, this should be pretty much seamless. Ionic components are web components and preact should be compatible.

After searching the forums, I found this thread : @ionic/react has issues with Preact + preact/compat, @ionic/preact?

Apparently when using more complicated components, like IonModal, there are problems.

But what surprises me is, why use the react components at all?
Won’t they try to set up specifically react virtual dom entries?
And the react system of virtual events is incompatible with the dom, and preact, right ?

So I thought the right way to go would be to do import "@ionic/core" and then to use elements like .

After searching the web, I found this demo project https://github.com/elylucas/ionic-preact-app
It also uses the react components.

Is ionic ready for usage with preact?
Basically I would only want to use the neat library of Ionic components and the ionic cli to bundle to capacitor.

Posts: 1

Participants: 1

Read full topic