@ctfrancia wrote:

I have a base64 string that looks like this:data:video/mp4;base64...
with an html tag that looks like this:

<video controls preload="auto">
  <source type="video/mp4" [src]="sanitizer.bypassSecurityTrustUrl(message.data.data)" />
</video>

**note: sanitizer is the DOMsanitizer so that angular will trust it.

when I click on the play button within the <video> tag nothing plays, there is nothing playing,
when trying to move the slider around I see in the safari console Unhandled Promise Rejection: AbortError: The operation was aborted. but it doesn’t point to any line of code or anything, so it has to be the video player.

this all works fine in Android but not iOS (what a surprise) any one see anything I’m doing wrong?

thanks!

Posts: 1

Participants: 1

Read full topic

@Smizz wrote:

After updating to cordova-plugin-ionic-webview to 4.1.3 version (which is Latest Version), then in app href links are not working. Earlier with webview version 1.1.12 it was working very well. In console it says ERROR Internal navigation rejected - not set for url='unsafe:ionic://localhost%23/app/ … How Can I Solve this issue… Help me. Regards

Posts: 1

Participants: 1

Read full topic

@Nsimoncini wrote:

Hi, I’m trying to build my app for production like this:

ionic build --prod
npx cap copy
npx cap sync

then I open the IDE ( let’s say Xcode) but when I launch my app on device, it takes 5-6s to hide splash screen while on Cordova Projects which I compile with “ionic Cordova build --prod” it takes 3ish seconds to boot…

There’s something I’m getting wrong and I’m not telling the compiler to build with prod flag (or maybe boot time is longer for capacitor?) for sure but that’s my first Capacitor production project.

Thanks in advance!

Posts: 1

Participants: 1

Read full topic

@smbu wrote:

Hi all,

I’m creating a pwa to scan a barcode and so far, I got this working

HTML:

  <div>
    <ion-button mode="md" size="large" expand="block" type="button" color="success" (click)="fileInput.click()">
      <ion-icon slot="start" name="barcode-outline"></ion-icon>scan barcode
    </ion-button>
    <input style="display: none" #fileInput type="file" accept="image/*" (change)="preview($event)">
  </div>

  <div class="mb-3" *ngIf="previewUrl" align="center">
    <br>
    <img [src]="previewUrl"  id="barcode"  width="320"/>
  </div>

  <div align="center" *ngIf="scanResult">
    <p style="font-weight: bolder; font-size: 25px; color: rgb(114, 114, 114);"> {{ scanResult }} </p>
  </div>

  <div align="center" *ngIf="scanError">
    <p style="font-weight: bolder; font-size: 25px; color: rgb(114, 114, 114);"> {{ scanError }} </p>
  </div>

TS:

@ViewChild("fileInput", { read: ElementRef, static: true }) fileInput: ElementRef;

  scanResult = null;
  scanError = null;

  fileData: File = null;
  previewUrl: any = null;
...
  preview(fileInput: any) {
    this.fileData = <File>fileInput.target.files[0];
    // Show preview 
    if (this.fileData != undefined) {
      if (this.fileData.type.match(/image\/*/)) {
        var reader = new FileReader();
        reader.readAsDataURL(this.fileData);
        reader.onload = () => {
          this.previewUrl = reader.result;

          const codeReader = new ZXing.BrowserBarcodeReader();
            console.log('barcode reader initialized');
            const imgnew = new Image();
            imgnew.src = this.previewUrl;

            document.body.appendChild(imgnew);
            codeReader
              .decodeFromImage(imgnew)
              .then(result => {
                this.scanError = null;
                console.log(result);
                this.scanResult = result.getText();
              })
              .catch(err => {
                this.scanResult = null;
                this.scanError = err;
                console.error(err);
              });
        },
          reader.onerror = error => console.log(error);
      }
    }
  }

The variabel “scanResult” is correct and gets immediately updated in the HTML.
But I need to resize the image to be able to decode the barcode on bigger images so I came up with this:

preview(fileInput: any) {
    this.fileData = <File>fileInput.target.files[0];
    if (this.fileData != undefined) {
     if (this.fileData.type.match(/image\/*/)) {
      const reader = new FileReader();
      reader.readAsDataURL(this.fileData);
      reader.onload = () => {
        this.previewUrl = reader.result;
        const img = new Image();
        img.src = this.previewUrl;
        img.onload = () => {
          const elem = document.createElement('canvas');
          const width = 320;
          const scaleFactor = width / img.width;
          elem.width = width;
          elem.height = img.height * scaleFactor;
          const ctx = elem.getContext('2d');
          ctx.drawImage(img, 0, 0, width, img.height * scaleFactor);
          ctx.canvas.toBlob(async (blob) => {
            const file = new File([blob], 'barcode.jpeg', {
              type: 'image/jpeg',
              lastModified: Date.now()
            });

            const codeReader = new ZXing.BrowserBarcodeReader();
            console.log('barcode reader initialized');
            const imgnew = new Image();
            imgnew.src = ctx.canvas.toDataURL(file.name);
            document.body.appendChild(imgnew);
            codeReader
              .decodeFromImage(imgnew)
              .then(result => {
                this.scanError = null;
                console.log(result);
                this.scanResult = result.getText();
              })
              .catch(err => {
                this.scanResult = null;
                this.scanError = err;
                console.error(err);
              });
          }, 'image/jpeg', 1);
        },
          reader.onerror = error => console.log(error);
      }
     }
    }
  }

The result still is correct, but my HTML does not get updated immediately anymore, only when I click the button again it is updated.

What am I doing wrong here ?

Posts: 1

Participants: 1

Read full topic

@smith11191 wrote:

error1579×49 4.7 KB

How to solve. as it’s been days i got stuck here .
Please help me out .
Thanks in advance

Posts: 1

Participants: 1

Read full topic

@jenoH wrote:

I’m working on an app with Vue.js and Ionic (Beta) and with capacitor. In all tutorial, we need to store variable with the cordova cli. cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid

But I don’t have the cordova cli… I tried to store variable in package.json like this :

"cordova": {
      "cordova-plugin-googleplus": {
        "REVERSED_CLIENT_ID": "xxx"
      }
  }

But it’s don’t work… With no error alert or message… I don’t know how I can make it work…

Thx for your help !

Posts: 1

Participants: 1

Read full topic

@EuanDScott wrote:

Hi All

I have an issue in my v4 app whereby my popover controller is not displaying anything. Even though in the constructor, if I console.log() the variable it displays the passed data.

Please see the attached code:

    async openComments (item, evt) {
      const popover = await this.popover.create({
        component: CommentPopoverComponent,
        event: evt,
        translucent: true,
        componentProps: {
          comments: item.comments
        },
        cssClass: 'popover__comment'
      })
      return await popover.present();
    }

constructor (
    private navParams: NavParams,
  ) {
    this.comments = navParams.get('comments')
    console.log('Comments: ', this.comments)
  }

The following is logged to my console:

Ionic info:

Ionic:

   Ionic CLI : 6.1.0

Utility:

   cordova-res (update available: 0.10.0) : 0.8.0
   native-run (update available: 0.3.0)   : 0.2.8

System:

   NodeJS : v12.12.0
   npm    : 6.11.3
   OS     : macOS Catalina

Any help would be much appreciated as this is a bug in a production app.

Regards,

Posts: 1

Participants: 1

Read full topic

@nitrique wrote:

Hi,

I have a mistake when I load a long list in a ion-modal using ion list, here is the sample code:

<ion-card>
        <ion-list radio-group padding-left padding-right>
            <ion-item *ngFor="let l of list">
                <ion-label>{{l[value]}}</ion-label>
                <ion-radio [value]="l[key]" (click)="select(l)" [checked]="l[key] == initialSelect"></ion-radio>
            </ion-item>
        </ion-list>
    </ion-card>

Data is an object with 200 rows (country lists) in this format :
{id: number, country: string, nationality: string}

You can see the bug in action here google drive video

It is only on iOS, but not on Android where is it working well.

Thanks for answers,
Nicolas

Posts: 2

Participants: 2

Read full topic

@Sweg wrote:

I am trying to add leaflet to my ionic app.

Below I’m displaying a map, & a button that is meant to bring me to my current location.

<div id="mapId" style="height:200px"></div>
  <ion-item style="cursor: pointer" (click)="locatePosition()">
    <ion-button fill="clear">
      <ion-icon slot="start" name="map"></ion-icon>
      Locate Position
    </ion-button>
  </ion-item>

And here is locatePosition():

locatePosition() {
    this.map.locate({ setView: true }).on("locationfound", (e: any) => {
      this.newMarker = marker([e.latitude, e.longitude], {
        draggable: true
      }).addTo(this.map);
      this.newMarker.bindPopup("You are located here!").openPopup();
      this.getAddress(e.latitude, e.longitude); // This line is added
      this.newMarker.on("dragend", () => {
        const position = this.newMarker.getLatLng();
        this.getAddress(position.lat, position.lng);// This line is added
      });
    });
  }

When I run the app on my desktop, & click LOCATE POSITION, my position is successfully displayed on the map.

However, when I run the app on my device (ionic cordova run android) & click LOCATE POSITION, the map isn’t updated with my current position.

I’ve tried debugging when running on the android device, but there are no errors being logged to the console.

Can someone please tell me what I’m doing wrong? Thanks a lot in advance!

Also here’s some more of my code, I can provide more if required:

ionViewDidEnter() {
    this.loadMap();
  }

  loadMap() {
    this.map = new Map("mapId").setView([17.3850, 78.4867], 13);
    const tiles = tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: 'Map Data <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });
    tiles.addTo(this.map);
  }

Posts: 1

Participants: 1

Read full topic

@tkclark wrote:

i have a ionic/vue project which has a login screen. when i use the screen like normal <Login/> it works fine, but when i put it in a modal i’m getting an error TypeError: Cannot read property 'dispatch' of undefined . i assume it’s because this maybe resolves to the screen that opened the Login vue instead of using what’s in the Vue page. anybody ever experienced this before?

Posts: 1

Participants: 1

Read full topic

@MarcoD1996 wrote:

Hello,
I’m trying to interface my app with the integrated barcode scanner of this Honeywell device using WebIntent.

The issue that i’m facing is that i cant register my broadcast receiver no matter what i try, it always returns an empty object as the exception.

I also tried using the window.plugins.intentShim method, but no luck.

This is my code:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { WebIntent } from '@ionic-native/web-intent/ngx';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [WebIntent]
})
export class HomePage {

  constructor(public navCtrl: NavController,
              public webIntent: WebIntent) {
  }

  ngOnInit() {
    alert('registering intent...')
    
    try {
    //Trying to register it using the Ionic Native wrapper...
    this.webIntent.registerBroadcastReceiver({
      filterActions: ['com.honeywell.ds.action.BARCODE_READ'],
      filterCategories: ['ds.testapp']
    })
    .subscribe(result => {
      alert("OK!"+JSON.stringify(result));
    }, error => {
      alert("Error!\n"+JSON.stringify(error))
    })
    } catch(error) {
      alert(JSON.stringify(error)); //This will print '{}'
      try {
        //Trying to register it using the underlying intentShim....
        (<any>window).plugins.intentShim.registerBroadcastReceiver({
          filterActions: ['com.honeywell.ds.action.BARCODE_READ'],
          filterCategories: ['ds.testapp']
        },
        (reading) => {
          alert("READ: "+JSON.stringify(reading));
        })
      } catch(error) {
        alert(JSON.stringify(error)); //This will print '{}' again
      }
    }
  }

}

this is my packages.json file:

{
  "name": "TestApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "4.20.0",
    "@ionic-native/splash-screen": "4.20.0",
    "@ionic-native/status-bar": "4.20.0",
    "@ionic-native/web-intent": "^5.22.0",
    "@ionic/storage": "2.2.0",
    "android": "0.0.8",
    "com-darryncampbell-cordova-plugin-intent": "^2.0.0",
    "cordova-android": "8.1.0",
    "cordova-android-support-gradle-release": "^3.0.1",
    "cordova-plugin-androidx-adapter": "^1.1.0",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.1.3",
    "cordova-plugin-splashscreen": "^5.0.3",
    "cordova-plugin-statusbar": "^2.4.3",
    "ionic-angular": "3.9.9",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.4",
    "typescript": "2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "com-darryncampbell-cordova-plugin-intent": {},
      "cordova-android-support-gradle-release": {},
      "cordova-plugin-androidx-adapter": {}
    },
    "platforms": [
      "android"
    ]
  }
}

Let me know if there is some info missing!
And thanks in advance for any help, I’ve been scratching my head for quite a while on this

Posts: 1

Participants: 1

Read full topic

@anton_klochko wrote:

Hi all ! Could anyone suggest please, how to get content-length from ionic-native http ?

    this.http.sendRequest(link,
        {
          method: 'get',
          timeout: 30000
        }
    ).then(result => {

      // prints 200
      console.log("method get", result.status);
     console.log("method get headers", result.headers);

    }).catch(err => {

          console.log(err.status);

 });

Posts: 1

Participants: 1

Read full topic

@Mmadzharov wrote:

Hey,Guys
Do you know if there is a way to figure out if the ion-content is scrolled to the bottom?

Posts: 1

Participants: 1

Read full topic

@fogelfish wrote:

I hope this is the correct forum in which to ask this basic, beginner question.

If I am using just Ionic Studio with no other add-on features or services (e.g., AppFlow, nor the “Launch” level subscription) how do I go about sharing with my clients my in-progress app development? Particularly if I want them to see the app on their mobile devices? I’ve searched the web for information about this but I can’t seem to turn up any answers. I hope someone here can lead me to some answers. Thank you.

Posts: 1

Participants: 1

Read full topic

@Sweg wrote:

I am trying to add leaflet to my ionic app, the map is displaying as expected.

But no markers are displaying, & I’m getting these error messages in the console:

GET http://localhost:4200/marker-icon-2x.png 404 (Not Found)

GET http://localhost:4200/marker-shadow.png 404 (Not Found)

Here is my map-component.html:

<div class="map-container">
  <div class="map-frame">
    <div id="map"></div>
  </div>
</div>

Here is my typescript:

private map;
  constructor(private markerService: MarkerService) {
  }
  ngAfterViewInit(): void {
    this.initMap();
    this.markerService.makeCapitalMarkers(this.map);
  }

  private initMap(): void {
    this.map = L.map('map', {
      center: [39.8282, -98.5795],
      zoom: 3
    });
    const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });
    tiles.addTo(this.map);
  }

And here is makeCapitalMarkers():

makeCapitalMarkers(map: L.map): void {
    this.http.get(this.capitals).subscribe((res: any) => {
      for (const c of res.features) {
        const lat = c.geometry.coordinates[0];
        const lon = c.geometry.coordinates[1];
        const marker = L.marker([lon, lat]);
        marker.addTo(map);
      }
    });
  }

Can someone please tell me why I’m getting that error message in the console, & how I can find these files? I can post whatever additional code is helpful too.

Thanks a lot in advance!

Posts: 1

Participants: 1

Read full topic

@santiago_vasquez06 wrote:

Hi everyone,
I am facing a design problem in the devices iPhone x and iPhone xs with the tab bar
is conflicting with the bar time on the device.

Posts: 2

Participants: 2

Read full topic

@Jagget wrote:

In 1.11 cannot start IE11

Encounter an error

patchBrowser().then(options => {

while running the command: stencil build --dev --watch --serve --es5

Works fine in 1.10.1

Posts: 1

Participants: 1

Read full topic

@jasonrabelo wrote:

I have a problem with width of ion-segment-button, when text of the button is overflow hidden
i need this button with overflow auto to show all text

this image show my problem:

The texts of buttons is this: [‘Promoção’, ‘Pizzas’, ‘Pizzas Doces’, ‘Calzones’, ‘Bordas Recheadas’, ‘Combos’]

localhost_8100_home(Galaxy S5) (1)1080×1920 378 KB

the itens Pizzas Doces and Bordas Recheadas is overflow

Posts: 1

Participants: 1

Read full topic

@Tanakasan1734 wrote:

I’ve been banging my head against this for days now. I have an Ioinc v5 app that won’t load in android studio. I think the issue is related to the AndroidX stuff that cropped up last year but none of the solutions help me. I’ve deleted and rerun the steps to generate the Android build several times and I’m on my latest version and again stuck at this error in Android Studio:

ERROR: Manifest merger failed : Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory) from [com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18-91
	is also present at [androidx.core:core:1.0.0] AndroidManifest.xml:22:18-86 value=(androidx.core.app.CoreComponentFactory).
	Suggestion: add 'tools:replace="android:appComponentFactory"' to <application> element at AndroidManifest.xml:5:5-43:19 to override.

I’ve tried doing that but then the AStudio complains with:

The prefix "tools" for attribute "tools:replace" associated with an element type "application" is not bound.

I have a suspicion that the AdMobFree plugin might be the source of the issue as that is the only thing that hooks in to the Firebase/Google Play world and it built fine a few weeks ago before I included that.

I’m at a loss where to go next, I’ve developed for iOS in ObjC and Swift and WebDev is my day job but I’m at a total loss with Android.

I’m building with Capacitor. This is my package.json file below. Please help

{
  "name": "CalWOD",
  "version": "0.0.1",
  "author": "Simon Barker",
  "homepage": "",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@capacitor/android": "^1.5.0",
    "@capacitor/core": "1.5.1",
    "@capacitor/ios": "^1.5.0",
    "@ionic-native/admob-free": "^5.22.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/media": "^5.22.0",
    "@ionic-native/native-audio": "^5.22.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.4",
    "cordova-admob-sdk": "^0.24.1",
    "cordova-plugin-admob-free": "^0.27.0",
    "cordova-plugin-androidx": "^1.0.2",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-media": "^5.0.3",
    "cordova-plugin-nativeaudio": "^3.0.9",
    "cordova-promise-polyfill": "0.0.2",
    "core-js": "^2.5.4",
    "moment": "^2.24.0",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.20",
    "@angular/cli": "~8.3.23",
    "@angular/compiler": "~8.2.14",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@capacitor/cli": "1.5.1",
    "@ionic/angular-toolkit": "^2.2.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.1.3",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "jetifier": "^1.6.5",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "AirBike and Rower workouts to build your cardio engine.",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-media": {},
      "cordova-plugin-admob-free": {}
    },
    "platforms": []
  }
}

Posts: 1

Participants: 1

Read full topic

@Sweg wrote:

I am having an issue displaying a Leaflet map in my ionic app.

Here is how it is displaying:

And here is the HTML:

<ion-content>
  <div class="map-container">
    <div class="map-frame">
      <div id="map"></div>
    </div>
  </div>
</ion-content>

When I remove the <ion-content> tags, this is how it’s displayed:

Here’s the map.css:

.map-container {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    margin: 30px;

  }

  

  .map-frame {

    border: 2px solid black;

    height: 100%;

  }

  

  #map {

    height: 100%;

  }

As you can see in the second one, the full map is displayed, but it’s still not presenting correctly (i.e. overlapping the toolbar).

Can someone please tell me how this can be resolved?

Posts: 2

Participants: 2

Read full topic