@blacktech wrote:

Hello.
I have been trying to cantact sales during the last two weeks but I didn’t receive any feedback.
I don’t know what’s wrong.

Please I need your help!

Posts: 1

Participants: 1

Read full topic

@Sweg wrote:

I am trying to display a map in my Ionic 5 app, but I’m getting this error in the console:

ERROR TypeError: Cannot read property ‘ROADMAP’ of undefined
at HomePage.loadMap

The error is in relation to mapTypeId: google.maps.mapTypeId.ROADMAP in the below typescript:

export class HomePage {

  locations: Observable<any>;
  locationsCollection: AngularFirestoreCollection<any>;
  user = null;

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

  constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore) {
    this.anonLogin();
  }

  ionViewWillEnter() {
    this.loadMap();
  }

  loadMap() {
    let latLng = new google.maps.LatLng(51.9036442, 7.6673267);

    let mapOptions = {
      center: latLng,
      zoom: 5,
      mapTypeId: google.maps.mapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  }

  anonLogin() {
    this.afAuth.auth.signInAnonymously().then(user => {
      console.log(user);

      this.user = user;

      this.locationsCollection = this.afs.collection(
        `locations/${this.user.uid}/tracks`,
        ref => ref.orderBy('timestamp')
      );

      // update map
    })
  }

}

Can someone please tell me how I can resolve this issue?

Posts: 2

Participants: 2

Read full topic

@Harkonnen wrote:

I can’t believe that Studio even have a topic here !

Posts: 1

Participants: 1

Read full topic

@subhrangshu01 wrote:

import { Geolocation } from ‘@ionic-native/geolocation/ngx’;
imported this library and then called this following function:

async loadMapJS(i: number) {
this.geolocation.getCurrentPosition().then((resp) => {
const latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
const mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

 // this.getAddressFromCoordsJS(resp.coords.latitude, resp.coords.longitude);

  this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  let marker =  new google.maps.Marker();
  // This line gets the coordinates of the clicked location
  google.maps.event.addListener(this.map, 'click', this.func = (event) => {
    marker.setMap(null);
    marker = new google.maps.Marker({
      position: {lat: event.latLng.lat() , lng: event.latLng.lng()},
      map: this.map,
      title: 'Your teaching location set here',
      snippet: 'Click on map to change location',
    });
    marker.setMap(this.map);
    this.classesArray[i].locationLatitude = event.latLng.lat();
    this.classesArray[i].locationLongitude = event.latLng.lng();
  });
}).catch((error) => {
  console.log('Error getting location', error);
});

}

If I call this function in constructor, it works immediately. But if I call this from button during runtime, geolocation takes too long, maybe few minutes to fireup. But if I go to some other tab and come back or minimize and reopen, it hits almost immediately. Can you suggest something for this?

Posts: 1

Participants: 1

Read full topic

@Sweg wrote:

I am following an Ionic tutorial, & am trying to call this method:

upload(name: string) {

    return new Promise((resolve, reject) => {

      let ref = firebase.storage().ref('postImages/' + name);

      let uploadTask = ref.putString(this.image.split(',')[1], 'base64');

      uploadTask.on('state_changed', (taskSnapshot) => {

        console.log(taskSnapshot)

      }, (error) => {

        console.log(error)

      }, () => {

        uploadTask.snapshot.ref.getDownloadURL().then((url) => {

          firebase.firestore().collection('posts').doc(name).update({

            image: url

          }).then(() => {

            resolve();

          }).catch((err) => {

            reject();

          });

        }).catch((err) => {

          reject();

        });

      });

    });

  }

Here is how it is being called in the tutorial:

if (this.image) {
        await this.upload(doc.id);
      }

It is working fine in the tutorial, however I am getting this error message when I call await this.upload(doc.id)

Can someone please tell me how I can resolve this?

Posts: 2

Participants: 2

Read full topic

@Scobee wrote:

Hello,

I have an input field where I need to type only numbers, that can have 2 decimals (like 9.99), and I need to show the keyboard with only numbers.
Is there a way to do that on both IOS and Android ?

Thanks

Posts: 1

Participants: 1

Read full topic

@lily28 wrote:

I am trying to make a button transparent, it supposedly looks like this

instead, it looks like this. With the gray background behind the icon

this is the html code

<button ion-button clear [routerLink]="['/edit-appointment/', booking.$key]">
          <ion-icon name="create" style="zoom:2.0"></ion-icon>
</button>
<button ion-button clear (click)="deleteBooking(booking.$key)">
          <ion-icon name="trash" style="zoom:2.0"></ion-icon>
</button>

Does anyone know how to make the icon clear?

Posts: 1

Participants: 1

Read full topic

@metelikk wrote:

Post state to server on close Ionic cordova native IOS app
ios angular cordova ionic-framework ionic4
So, I have an app, which I has built with Ionic 4 and Angular 7. In my app I use NgRx/store and keep necessary data in state. And now, I want to save some state data on closing my app to keep it synced for other devices (for example there is the same user on IOS and on Browser).

For Browser and Android I use this event listener in my app.component.ts which works fine

@HostListener('window:blur', ['$event'])
onBlur(event: FocusEvent): void {
   if (this.userSignedIn) {
       this.storeService.sendStateToDB();
   }
} 

On IOS devices this event is caught, but post request isn’t executed. Only happens (with error) on next iteration on open app.

So is there any other way to implement it?

Also I thought about Observable timer to post state after some period of time, but it looks like costly operation. Thank you.

Posts: 1

Participants: 1

Read full topic

@accron wrote:

I’d like to use Ionic for an app I am going to make, but I’m a bit hesitant as a few things about Ionic are still very unclear to me, no matter how much I have searched for answers:

1. Is Ionic framework free? I.e. can you create, build and deploy a complete commercial (=paid) app to the app stores, with no restrictions whatsoever in the app features available (components, plugins, etc), without any paid plan?

2. If 1) is yes, what extras does a paid plan give you that you can’t do for free?

3. Is there a free and fully functional/non restricted Sqlite plugin for Ionic?

4. As far as I can tell Vue support is still in beta. Are there any known limitations with the Vue version (besides from possible bugs due to the beta status)?

Thank you

Posts: 1

Participants: 1

Read full topic

@zerock54 wrote:

Hello,

I am trying to use Ionic Web Components in a standard Angular app. I am using Capacitor and I notice that, when I run my app in the simulator, the root HTML element has “mode=‘md’” as well as the “md” class.

Therefore, the Ionic Web Components have the Android style
If I check the platform with Capacitor.platform, I get “ios” so no problem
Am I missing something ?

Thank you

Posts: 1

Participants: 1

Read full topic

@jonasxxmoe wrote:

Hi,
I’m trying to implement a dark mode (as described in the tutorial) in my app. I’m using Ionic v5 and it doesn’t seem to work.

I added all the variables described in the tutorial to my variables.scss and added the class ‘dark’ to the body element of my index.html.

Nothing changed and everything is still white. Is this a known issue?

Posts: 1

Participants: 1

Read full topic

@syntillateapp wrote:

Has anyone experienced issues with creating an iOS project that uses the Facebook Native plugin?

I thought it might have been an issue from where I migrated my project from ionic v4 to v5, so I created a new project, but for some reason, which I can’t figure out, there’s a problem adding the Facebook native plugin to an iOS project.

iOS project created with cordova-ios@5.1.1
Installing "cordova-plugin-facebook4" for ios
Failed to install 'cordova-plugin-facebook4': undefined
CordovaError: Promise rejected with non-error: '/bin/sh: /usr/local/bin/pod: /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby: bad interpreter: No such file or directory\n'
    at /usr/local/lib/node_modules/cordova/bin/cordova:29:15
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

Posts: 1

Participants: 1

Read full topic

@imaxit-services wrote:

I need to add functions to PROMPT TO SYNCRONIZE PHOTO, CONTACT, SMS, AND LOCATION in my app on registration page.

The app is already functioning without this features. But im finding it difficult to Achieve … Someone Help

Posts: 1

Participants: 1

Read full topic

@aardra wrote:

Hi
I am trying to upgrade my Ionic 4 project to 5, but have some issues. I have made sure my app works with version 4.11.10 first.

This is my current setup.

G:\AVR_Project\Ionic Projects\app>ionic info

Ionic:

   Ionic CLI                     : 5.4.16
   Ionic Framework               : @ionic/angular 5.0.5
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 7.1.4, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 13 other plugins)

Utility:

   cordova-res : 0.8.0
   native-run  : 0.3.0

System:

   NodeJS : v10.15.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 7

I am getting various warning and errors. But before i start mentioning them…

If i am correct in saying i need upgrade the angular to version 9? How do i do that?

Is there any user guide that i can follow ?

Thanks

Posts: 1

Participants: 1

Read full topic

@outspoken_mag wrote:

Ionic:

Ionic CLI : 5.4.16 (/Users/henningjaeger/node_modules/ionic)
Ionic Framework : @ionic/angular 5.0.5
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics : 8.3.25
@angular/cli : 8.3.25
@ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 1.5.1
@capacitor/core : 1.5.1

Utility:

cordova-res (update available: 0.10.0) : 0.8.1
native-run : not installed

System:

NodeJS : v10.15.1 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS Mojave

official tutorial: https://capacitor.ionicframework.com/docs/guides/ionic-framework-app/
as a reference app.

Following this tutorial with ionic 4 capacitor - works perfect.

Following it with ionic 5 (see spec above) capacitor results in:

core.js:6014 ERROR Error: Uncaught (in promise): Requested device not found
at resolvePromise (zone-evergreen.js:797)
at zone-evergreen.js:707
at rejected (tslib.es6.js:72)
at ZoneDelegate.invoke (zone-evergreen.js:359)
at Object.onInvoke (core.js:39699)
at ZoneDelegate.invoke (zone-evergreen.js:358)
at Zone.run (zone-evergreen.js:124)
at zone-evergreen.js:855
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:39680)

after hitting the photo button in chrome.
Anybody an idea what happened?

BTW: it is working in ios flawlessly

Posts: 1

Participants: 1

Read full topic

@aardra wrote:

Hi All

I recently manged to get Ionic 5 working.

But i am getting this distortion on my menu bar. It seems the global background is also appearing in some part of the menu bar.

menucss476×750 29.1 KB

Posts: 1

Participants: 1

Read full topic

@bplogan wrote:

I have an Ionic 5 app using angular and capacitor. I am able to run the app in xcode and android studio. The problem is when I make any changes to my .ts files in the app to a page and run the “npx cap sync” command and run the app again in xcode or android studio, the changes do not get pulled in. Is there a way to force this?

Thanks

Posts: 1

Participants: 1

Read full topic

@wekas wrote:

I am adding an animation to my ion-item as it is added to the list. It works but the animation transition is not smooth as it should be. If I use the animation on a normal div (using background-color) it works as expected with the color slowly fading from blue to white. However when using --background which you have to for ion-item it stays blue until the end then jumps to white.

Any suggestions on how to get this transitioning smoothly?

I am using Ionic 5

Edit: Also on iOS the color change is ignored completely. Just the opacity is changed.

@keyframes highlight-add {
  0% {
    --background: #a8d8ea;
    opacity: 0.3;
  }
  30% {
    --background: #a8d8ea;
    opacity: 1;
  }
  100% {
    --background: #fff;
  }
}

.student-item-animate {
  -webkit-animation: highlight-add 5s; 
  animation: highlight-add 5s;
}

 <ion-item *ngFor="let student of studentsBooked" [ngClass]="{'student-item-animate': student.isNew}">

See my stackoverflow here: https://stackoverflow.com/questions/60679644/keyframe-animation-on-ion-item-is-not-transitioning-smoothly

Posts: 1

Participants: 1

Read full topic

@error264 wrote:

Hi All,

I’ve been trying to upload multiple images to my Firebase from an Array which holds the images which a user selects from their device.

Currently, when a user selects 2 or more images. only one image uploads to the database. I am relatively new to Ionic development - all help is appreciated!

Thanks in advance - please find current code below

getImage() {
    const optionsGallery: CameraOptions = {
      quality: 100,
      targetWidth: 1080,
      targetHeight: 1080,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,

    };

    this.camera.getPicture(optionsGallery)
      .then((imageData) => {
        // imageData is either a base64 encoded string or a file URI // If it's base64:
        this.captureDataUrl = 'data:image/jpeg;base64,' + imageData;
        this.productImages.push(this.captureDataUrl);
      }, (err) => {
      // Handle error
      console.log(err);
    });
  }

  upload() {

   this.productImages.array.forEach(element => {
    let storageRef = firebase.storage().ref();
    // Create a timestamp as filename
    const filename = Math.floor(Date.now() / 1000);

    // Create a reference to 'images/todays-date.jpg'
    const imageRef = storageRef.child( firebase.auth().currentUser.uid + `/${filename}.jpg`);

    let i = 0;

    for (i; i < this.productImages.length; i++)  {

    console.log('After the for loop' + this.productImages.length);

    imageRef.putString(this.productImages[i], firebase.storage.StringFormat.DATA_URL)
      .then((snapshot) => {
          // Do something here when the data is succesfully uploaded!
        this.showSuccesfulUploadAlert();
      }).catch((err) => {
        console.log(err.message);
      });
    // }
   });
  }

  async showSuccesfulUploadAlert() {
    const toast = await this.toastController.create({
      message: 'Image uploaded successfully',
      duration: 5000
    });
    toast.present();
    // clear the previous photo data in the variable
	
    // this.captureDataUrl = "";
    console.log('This is the last line: ' + this.captureDataUrl.length);

  }

Posts: 1

Participants: 1

Read full topic

@Sweg wrote:

In my ionic app, I am trying to retrieve an existing record, change some values, & then update the record with those values.

Below is the code which I’m copying from a tutorial:

admin.firestore().collection('posts').doc(postId).get().then((data) => {

        let likesCount = data.data()?.likesCount || 0;
        let likes = data.data()?.likes || [];
        let updateData = {};

        if (action == 'like') {

            updateData['likesCount'] = ++likesCount;
            updateData[`likes.${userId}`] = true;

        } else {

            updateData['likesCount'] = --likesCount;
            updateData[`likes.${userId}`] = false;

        }

        admin.firestore().collection('posts').doc(postId).update(updateData).then(() => {
            response.status(200).send('Done');
        }).catch((err) => {
            response.status(err.code).send(err.message);
        });
    }).catch((err) => {
        response.status(err.code).send(err.message);
    });

The issue I’m facing is that the below errors are appearing within the If & Else blocks when I try to assign the new values:

Element implicitly has an ‘any’ type because expression of type ‘“likesCount”’ can’t be used to index type ‘{}’.
Property ‘likesCount’ does not exist on type ‘{}’.

Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘{}’.
No index signature with a parameter of type ‘string’ was found on type ‘{}’.

Can someone please tell me how to resolve this issue?

FYI, there are more than these 2 fields within the data that I’m retrieving from firestore. So I want to keep those values in the firebase entry, & only update the 2 fields mentioned above.

Posts: 1

Participants: 1

Read full topic