@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

@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

@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: 2

Participants: 2

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: 2

Participants: 2

Read full topic

@itosoft wrote:

hi i can not creat project got these errors:

 PS C:\Users\Arashsoft\Desktop\ionic\start_angular> ionic start

Every great app needs a name!

Please enter the full name of your app. You can change this at any time. To bypassthis prompt next time, supply name, the first argument to ionic start.

? Project name: test

Pick a framework!

Please select the JavaScript framework to use for your new app. To bypass this
prompt next time, supply a value for the --type option.

? Framework: Angular

Let's pick the perfect starter template!

Starter templates are ready-to-go Ionic apps that come packed with everything you
need to build your app. To bypass this prompt next time, supply template, the
second argument to ionic start.

? Starter template: blank
√ Preparing directory .\test - done!

Downloading and extracting blank starter

────────────────────────────────────────────────────────────

     Ionic CLI update available: 5.4.16 → 6.2.1
The package name has changed from ionic to @ionic/cli!

       To update, run: npm uninstall -g ionic
           Then run: npm i -g @ionic/cli
────────────────────────────────────────────────────────────

Error: Client network socket disconnected before secure TLS connection was
established

at connResetException (internal/errors.js:570:14)
at TLSSocket.onConnectEnd (_tls_wrap.js:1361:19)
at Object.onceWrapper (events.js:299:28)
at TLSSocket.emit (events.js:215:7)
at endReadableNT (_stream_readable.js:1183:12)

i upgrade ionic and here is info

Ionic:

   Ionic CLI : 6.2.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.16.1
   npm    : 6.13.4
   OS     : Windows 10

here is a a new errro:

Project name: testarash Let's pick the perfect starter template! Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass this prompt next time, supply template, the second argument to ionic start. ? Starter template: blank √ Preparing directory .\testarash - done! | Downloading and extracting blank starter Error: read ECONNRESET 

Posts: 2

Participants: 2

Read full topic

@nishamane wrote:

I have created iOS build for my ionic4 app having Cordova version 9.0.0. I am using firebase authentication in app. For this, I have registered app with firebase and also added configuration file in project root directory.
But when I am trying to run it on Xcode(11.2.1), its doesn’t log any error message on console, but app consistently hangs at the splash screen. I have installed following plugins:

• com-badrit-base64 0.2.0
• cordova-admob-sdk 0.24.1
• cordova-background-geolocation 3.5.1
• cordova-open-native-settings 1.5.2
• cordova-plugin-add-swift-support 2.0.2
• cordova-plugin-admob-free 0.27.0
• cordova-plugin-advanced-http 2.1.1
• cordova-plugin-android-permissions 1.0.0
• cordova-plugin-app-version 0.1.9
• cordova-plugin-background-fetch 5.6.1
• cordova-plugin-background-mode 0.7.3
• cordova-plugin-camera 4.1.0
• cordova-plugin-contacts 3.0.1
• cordova-plugin-crop 0.3.1
• cordova-plugin-device 2.0.3
• cordova-plugin-fcm-with-dependecy-updated 4.1.1
• cordova-plugin-file 6.0.2
• cordova-plugin-file-transfer 1.7.1
• cordova-plugin-firebase 2.0.5
• cordova-plugin-geolocation 4.0.2
• cordova-plugin-googlemaps 2.6.2
• cordova-plugin-ionic-keyboard 2.2.0
• cordova-plugin-ionic-webview 4.1.1
• cordova-plugin-nativegeocoder 3.2.2
• cordova-plugin-network-information 2.0.2
• cordova-plugin-request-location-accuracy 2.3.0
• cordova-plugin-splashscreen 5.0.3
• cordova-plugin-statusbar 2.4.3
• cordova-plugin-telerik-imagepicker 2.3.3
• cordova-plugin-whitelist 1.3.4
• cordova-plugin-x-socialsharing 5.6.0
• cordova-promise-polyfill 0.0.2
• cordova-sms-plugin 1.0.0
• cordova-support-android-plugin 1.0.1
• cordova-support-google-services 1.3.2
• es6-promise-plugin 4.2.2
• mx.ferreyra.callnumber 0.0.2

Anybody faced this issue and or have any idea to resolve this issue. I have tried every possible solutions.
Please help.

Posts: 1

Participants: 1

Read full topic

@kkhanhluu wrote:

I tried to create a loading spinner while making a http request, the ionic-loading is inserted to the DOM but it is invisible. Here is the code

from(this.loadingCtrl.create({ message: 'Loading...' }))
      .pipe(
        tap(loadingEl => {
          loadingElement = loadingEl;
          loadingEl.present();
        }),
        switchMap(() => self.dataService.getdata())
      )
      .subscribe(
        (response: any) => {
          console.log(response);
          loadingElement.dismiss();
        },
        error => {
          console.error(error);
        }
      );

Does anyone have the same problem?

Posts: 1

Participants: 1

Read full topic

@boka003 wrote:

Hello,

I hope you all are safe from corona!

I have problem while i try update my ionic appliacation: https://play.google.com/store/apps/details?id=app.in4s.net to new version: https://ufile.io/tb30xgmr

Errors that i have>

If i remove old version of application from my phone and try to install new, it will work fine.
But if i try to update my application, i will get that error.

Anyone have similar experience?

Thank you!

Posts: 1

Participants: 1

Read full topic

@bilalbakirci44 wrote:

Hello my lords,I’m doing an ionic wordpress application My website address https://www.clinicbuzlazer.com I was able to shoot everything okay but I have to search for articles by choosing a city how can I do it ?

Posts: 1

Participants: 1

Read full topic

@ndblackandblue wrote:

For some reason at IOS 13, on IPHONE XR, when i use that code to get a picture:

const options: CameraOptions = {
quality: 50,
targetWidth: 400,
targetHeight: 400,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
allowEdit: true
}
this.camera.getPicture(options).then((imageData) => {
if(imageData){
let base64Image = data:image/jpeg;base64,${imageData};
}
}).catch((err) => {
let alert = this.alertCtrl.create({
title: ‘error’,
subTitle: Um erro foi encontrado: ${err},
buttons: [‘OK’]
});
alert.present();
});

For some reason IMAGEDATA is coming null, and i cant get image, only at iphone xr

Posts: 1

Participants: 1

Read full topic

@developer-wovvtech wrote:

Hello,

 <input type="file" accept="image/*;capture=camera">

is does not showing the options of camera in android platform, it is working in ios platform. please help me to solve this issue .

i am using ionic version 4.1.2,

Thanks

Posts: 1

Participants: 1

Read full topic

@ayoimansor wrote:

Hye, i code my ionic in windows and now i want to transfer it to XCode because i want to transfer it into my iPhone.
Is there any tutorial on how to open up my ionic folder becasue it seems XCode can’t open the folder

Posts: 1

Participants: 1

Read full topic

@vishalsingh24 wrote:

I’m using Ionic slide and have set the following options {autoHeight: true}. The problem is if I am updating the current slide dynamically the content does not show up because of the height change. I’m using the update() function inside setTimeout() but the slide updates with slightly left positioned.

Posts: 1

Participants: 1

Read full topic

@ankit-codechintan wrote:

Ionic menu is flickering on browser, Android and iOS devices. Please check this image

Posts: 1

Participants: 1

Read full topic

@Mnrock wrote:

Hi,

The issue is that ionic is continuing to cache every page as the user continues to push() new pages, which adds to memory and event listener heap. Eventually the app is taking 10 seconds to respond to events.

I need to reset the cache for app when IonRouterOutlet component save a lot of html and large amount of nav pushes through history. Is it possible as easily as in Ionic Angular issue?

Looking forward to your reply. Thank you for supporting React!

Posts: 1

Participants: 1

Read full topic

@Sweg wrote:

I am trying to send a HTTP request to a firebase cloud function in my Ionic Angular app, but am facing a CORS issue.

Here is the function I am trying to execute:

import { HttpClient } from '@angular/common/http';
private http: HttpClient

like(post) {
this.http.post('cloudFunctionUrl', JSON.stringify(body), {
      responseType: 'text'
    }).subscribe((data) => {
      console.log(data);
    }, (error) => {
      console.log(error);
    });
}

To get over the CORS issue, I installed the Allow CORS: Access-Control-Allow-Origin chrome plugin. Below is a list of the whitelisted domains:

• http://localhost:8100
• chrome.google.com
• localhost
• localhost:8100
• localhost:8100/profile
• cloudFunctionUrl

The like function above is executed on localhost:8100/profile

I’m experiencing two issueS:

1. I navigate to localhost:8100/profile no problem, but when I execute like , I get this error message:

Access to XMLHttpRequest at ‘cloudFunctionUrl’ from origin ‘http://localhost:8100’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

2. If I go to the firebase console, & I have the CORS plugin turned on, it says "There was an error loading your projects"

Can someone please tell me how I can resolve this?

I also tried to add the below headers to the request, but the error is still appearing:

let headers = new HttpHeaders({
      'Access-Control-Allow-Origin': '*'
    });
    this.http.post('cloudFunctionUrl', JSON.stringify(body), {
      headers: headers,
      responseType: 'text'
    }

Posts: 3

Participants: 2

Read full topic

@nahuelreymundo wrote:

Hi
Im my register page i have a Register Form, and my .ts it’s like:

Register.ts

register(user:User){
this.auth.auth.createUserWithEmailAndPassword(user.email,user.password).then(()=>{
this.auth.authState.subscribe(auth =>{
this.db.collection(Empresas/${auth.uid}).add({
‘empresa’: user.empresa,
‘email’: user.email,
‘telefono’:user.telefono,
‘razon’:user.razon,
‘cuit’:user.cuit,
‘ciudad’:user.ciudad,
‘direccion’:user.direccion,
‘rubro’:user.rubro,
‘trabajadores’:user.trabajadores,
‘descripcion’:user.description
}).then(()=>{
this.storage.set(‘user’, user.empresa);
this.storage.set(‘loged’,true)
this.router.navigateByUrl(‘tabs’)
})
})
})
}

I want to get the user data stored in firestore to display it in my Profile Page
I thought filtering by mail in the firestore collection.
Can anyone help me with this?

Posts: 1

Participants: 1

Read full topic