Hello,
Before I use Ionic I had this piece of code:

      <div v-if="curDownloadRate !== -1">
        <p>Download: {{ curDownloadRate.toFixed(2) }} mb/s</p>
      </div>
      <div v-if="curUploadRate !== -1">
        <p>Upload: {{ curUploadRate.toFixed(2) }} mb/s</p>
      </div>

which worked well. The curDownloadRate and curUploadRate were updating every 500ms and thanks to reactivity my DOM was updated with it. Now that I have:

<template>
  <ion-page>
    <ion-content>
      <div v-if="curDownloadRate !== -1">
        <p>Download: {{ curDownloadRate.toFixed(2) }} mb/s</p>
      </div>
      <div v-if="curUploadRate !== -1">
        <p>Upload: {{ curUploadRate.toFixed(2) }} mb/s</p>
      </div>
    </ion-content>
  </ion-page>
</template>

I need to resize my browser to see the values updated in real-time, otherwise, nothing happens. I’m using Ionic-vue 5.4.0 with Vue 3. Do you think it’s some kind of bug from the framework or I’m missing something here?

Thanks!

2 posts - 1 participant

Read full topic

hi, I’m trying to build apk for ionic 3 project and I’m having this problem below, any help?
I spent days searching and nothing helps
could it be a connection problem??

• What went wrong:
  A problem occurred evaluating project ‘:app’.

Could not resolve all files for configuration ‘classpath’.
Could not download protos.jar (com.android.tools.analytics-library:protos:26.6.4)
Could not get resource ‘https://dl.google.com/dl/android/maven2/com/android/tools/analytics-library/protos/26.6.4/protos-26.6.4.jar’.
Premature end of Content-Length delimited message body (expected: 3616391; received: 1843888
Could not download aapt2-proto.jar (com.android.tools.build:aapt2-proto:0.4.0)
Could not get resource ‘https://dl.google.com/dl/android/maven2/com/android/tools/build/aapt2-proto/0.4.0/aapt2-proto-0.4.0.jar’.
Premature end of Content-Length delimited message body (expected: 615321; received: 107033
Could not download apkzlib.jar (com.android.tools.build:apkzlib:3.6.4)
Could not get resource ‘https://dl.google.com/dl/android/maven2/com/android/tools/build/apkzlib/3.6.4/apkzlib-3.6.4.jar’.
Could not GET ‘https://dl.google.com/dl/android/maven2/com/android/tools/build/apkzlib/3.6.4/apkzlib-3.6.4.jar’.
Remote host terminated the handshake

1 post - 1 participant

Read full topic

I get the following error when trying to add an android as a platform. I used to use android 7.1.4 till now and it was working, I am now trying to use android 8.0.0. BTW, I had problems app-preferences earlier too but installing from the vash15 branch resolved it. The same solution does not seem to work now.

ionic cordova platform add android@8.0.0

cordova platform add android@8.0.0
Using cordova-fetch for cordova-android@8.0.0
Adding android project…
Creating Cordova project for the Android platform:
Path: platforms/android
Package: a.b.chcode.prolear
Name: ABCD
Activity: MainActivity
Android target: android-28
Subproject Path: CordovaLib
Subproject Path: app
Android project created with cordova-android@8.0.0
Installing “cordova-plugin-app-preferences” for android
Failed to install ‘cordova-plugin-app-preferences’: CordovaError: Using “requireCordovaModule” to load non-cordova module “path” is not supported. Instead, add this module to your dependencies and use regular “require” to load it.
at Context.requireCordovaModule (/Users/gpaaapps/Documents/code/abcd_mobile/node_modules/cordova-lib/src/hooks/Context.js:57:15)
at module.exports (/Users/gpaaapps/Documents/code/abcd_mobile/plugins/cordova-plugin-app-preferences/bin/before_plugin_install.js:6:14)
at runScriptViaModuleLoader (/Users/gpaaapps/Documents/code/abcd_mobile/node_modules/cordova-lib/src/hooks/HooksRunner.js:157:32)
at runScript (/Users/gpaaapps/Documents/code/abcd_mobile/node_modules/cordova-lib/src/hooks/HooksRunner.js:136:12)
at /Users/gpaaapps/Documents/code/abcd_mobile/node_modules/cordova-lib/src/hooks/HooksRunner.js:108:40
at process._tickCallback (internal/process/next_tick.js:68:7)
Using “requireCordovaModule” to load non-cordova module “path” is not supported. Instead, add this module to your dependencies and use regular “require” to load it.
[ERROR] An error occurred while running subprocess cordova.

    cordova platform add android@8.0.0 exited with exit code 1.
    
    Re-running this command with the --verbose flag may provide more
    information.

gpaaapps@MacBook-Pro abcd_mobile % ionic info

Ionic:

Ionic CLI : 6.10.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : ionic-angular 3.5.3
@ionic/app-scripts : 3.2.4

Cordova:

Cordova CLI : 10.0.0
Cordova Platforms : android 8.0.0, ios 6.1.1
Cordova Plugins : cordova-plugin-ionic-webview 5.0.0, (and 19 other plugins)

Utility:

cordova-res : not installed
native-run (update available: 1.2.2) : 1.0.0

System:

ios-sim : 8.0.2
NodeJS : v10.20.1 (/usr/local/bin/node)
npm : 6.14.4
OS : macOS Catalina
Xcode : Xcode 12.0.1 Build version 12A7300

1 post - 1 participant

Read full topic

Hey…

I am trying to install i18n plugin using the following command:

vue add i18n

the output:

 Installing vue-cli-plugin-i18n...


+ vue-cli-plugin-i18n@1.0.1
added 12 packages from 12 contributors in 45.29s

68 packages are looking for funding
  run `npm fund` for details       

✔  Successfully installed plugin: vue-cli-plugin-i18n

? The locale of project localization. ar
? The fallback locale of project localization. en
? The directory where store localization messages of project. It's stored under `src` directory. locales
? Enable locale messages in Single file components ? No

�  Invoking generator for vue-cli-plugin-i18n...
 ERROR  Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
    at Collection.get (C:\Users\adela\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\jscodeshift\src\Collection.js:213:13)
    at injectOptions (C:\Users\adela\AppData\Roaming\npm\node_modules\@vue\cli\lib\util\codemods\injectOptions.js:15:6)    at runTransformation (C:\Users\adela\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\vue-codemod\dist\src\run-transformation.js:61:17)
    at C:\Users\adela\AppData\Roaming\npm\node_modules\@vue\cli\lib\Generator.js:290:23
    at Array.forEach (<anonymous>)
    at Generator.resolveFiles (C:\Users\adela\AppData\Roaming\npm\node_modules\@vue\cli\lib\Generator.js:276:24)       
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Generator.generate (C:\Users\adela\AppData\Roaming\npm\node_modules\@vue\cli\lib\Generator.js:175:5)      
    at async runGenerator (C:\Users\adela\AppData\Roaming\npm\node_modules\@vue\cli\lib\invoke.js:111:3)
    at async invoke (C:\Users\adela\AppData\Roaming\npm\node_modules\@vue\cli\lib\invoke.js:92:3)

so I tried without success to install it manually but I always find it tricky to install plugins in vue (where and how should I import it)…

my questions is: How to install plugins in @ionic/vue ?

1 post - 1 participant

Read full topic

I followed Udemy course where it says I can modify the webpack config file in order to import classes easily. This is simple for only React.

import classes from './InputField.css';

However, with Ionic + React, this throws an errors

/Users/<me>/Documents/GitHub/learn_frontend/mobile-app/src/components/InputField/InputField.tsx
TypeScript error in /Users/<me>/Documents/GitHub/learn_frontend/mobile-app/src/components/InputField/InputField.tsx(3,21):
Cannot find module './InputField.css'.  TS2307

    1 | import { IonRow, IonItem, IonLabel, IonCol, IonInput } from '@ionic/react';
    2 | import React from 'react';
  > 3 | import classes from './InputField.css';
      |                     ^
    4 | 
    5 | interface MyState {
    6 |   value: any;

I modified the webpack config file as

            {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                modules: true,
                localIdentName: '[name]__[local]__[hash:base64:5]',
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              sideEffects: true,
            },

Please let me know how can I make the classes importable as show above.

1 post - 1 participant

Read full topic

it’s posible to add Tailwind CSS to Vue ionic

1 post - 1 participant

Read full topic

Hello, I have following code:

<ion-select placeholder="Auswählen" value="rundenzahl" okText="Okay" cancelText="Abbrechen" [(ngModel)]="rundenzahl">
      <ion-select-option value="3">3</ion-select-option>
      <ion-select-option value="4">4</ion-select-option>
      <ion-select-option value="5">5</ion-select-option>
      <ion-select-option value="6">6</ion-select-option>
    </ion-select>

this.rundenzahlSub = this.rundenzahlService.rundenzahl$.subscribe(res => {
      console.log((res));
      
      if(res) {
        this.rundenzahl = res;
      } else {
        this.rundenzahl = 3;
      }
    });

Now there is following problem, first subscribed to rundenzahl$ the value is null because its not loaded from the storage yet. Just then it changes to lets say 3 but instead that 3 is the value selectet in ion-select, it’s still “auswählen”. How can I fix that?

2 posts - 2 participants

Read full topic

Importing component to every vue file, it could be a tedious work, so why not import App.vue file once and use globally.

3 posts - 2 participants

Read full topic

Please how i can create function in app.compenent and call in other pages

5 posts - 3 participants

Read full topic

hai i am using this package ionic-image-loader.

Capture1366×440 19.8 KB

i got this error.
Warning: Entry point ‘ionic-image-loader’ contains deep imports into ‘D:/ionicframework/updated-fm/facility_mgmt/node_modules/rxjs/observable/fromEvent’. This is probably not a problem, but may cause the compilation of entry points to be out of order.

help me to fix this issues

3 posts - 2 participants

Read full topic

help me to find a better solution to use javascript in ionic

2 posts - 2 participants

Read full topic

I’m trying to pass className dynamically for components.

import { IonRow, IonItem, IonLabel, IonCol, IonInput, IonTextarea } from '@ionic/react';
import React from 'react';
import './InputField.css';

interface MyState {
    elementType: any;
    elementConfig: any;
    value: any;
    validation: any;
    valid: boolean;
    touched: boolean;
    children: any;
    changed: any,
}

const InputField: React.FC<MyState> = (props) => {

    let inputElement: any;
    let inputClasses = "InputElement";

    switch ( props.elementType ) {
        case ( 'email' ):
            inputElement = (
                <IonInput
                    className={inputClasses}
                    {...props.elementConfig}
                    value={props.value}
                    onIonChange={props.changed} />
                );
            break;
        default:
            inputElement = (<IonInput
                className={inputClasses}
                {...props.elementConfig}
                value={props.value}
                onIonChange={props.changed} />);
    }

    return (
        <IonItem>  
            <IonLabel color="medium" position="floating">{props.children}</IonLabel>
            {inputElement}
        </IonItem>
    );

};

export default InputField;

The class name appears right when I inspect it but the style is not applied. Also, the text is floating in this case, which disappears. But when I click to enter something it reappears (pic attached below).

Screenshot 2020-10-18 at 19.41.21770×218 1.98 KB

Screenshot 2020-10-18 at 19.41.29762×184 3.07 KB

1 post - 1 participant

Read full topic

How to build app with offline video like youtube in ionic?

1 post - 1 participant

Read full topic

Try as I might, I cannot get infinite scroll working. I have tried all kinds of different thresholds but still ionInfinite does not fire.

HTML:

<ion-content>

<div *ngIf="!isLoadingError">
    <ion-list *ngIf="items.length > 0">
        <ion-item *ngFor="let item of items" (click)="nav(item)" routerDirection="forward"
                  routerLinkActive="active">
            <ion-thumbnail slot="start">
                <!--                <img *ngIf="item.imageURIs[0]" [src]="item.imageURIs[0]">-->
                <!--                <ion-skeleton-text *ngIf="!item.imageURIs[0]"></ion-skeleton-text>-->
                <ion-skeleton-text></ion-skeleton-text>
            </ion-thumbnail>
            <ion-label>
                <h3>{{item.name}}</h3>
                <p>
                    {{item.desc}}
                </p>
                <p>
                    {{formatPriceString(item.price, 'KRW')}}
                </p>
            </ion-label>
        </ion-item>
    </ion-list>

    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content
                loadingSpinner="bubbles"
                loadingText="Loading more items...">
        </ion-infinite-scroll-content>
    </ion-infinite-scroll>

</div>
</ion-content>

TS:

export class HomePage {

@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;



constructor() {

}

doInfinite(e) {
    this.getItems(e);
}

1 post - 1 participant

Read full topic

HTML:
Food

  <ion-select multiple="true" cancelText="Close" okText="Okay!" [(ngModel)]="signup.state"

    (ionChange)="getcitylist($event)" placeholder="Please Select ">


    <ion-select-option *ngFor="let state of statelist" [value]="state.state_name">

      {{state.state_name}}

    </ion-select-option>

  </ion-select>

TS:

signup = {

state: ''

}

statelist = [{

state_id: 1,

state_name: 'Stir-Fried Pumpkin',

state_cal: 130

}, {

state_id: 2,

state_name: ' Thick Noodle Dish',

state_cal: 110

}, ]

1 post - 1 participant

Read full topic

I am using a ion-slider with following slide options.

slideOpts = {
    slidesPerView: 3.5,
    loop: true,
    centeredSlides: false
  };

I fetch the data from Firebase to the slider.

this.firedb.list<any>('/2020/sliderTest').valueChanges().subscribe(data => {
      data.forEach(entry => {
        this.dataArray.push(entry);
      });
});

And then, I need my slider to start from a specific point. To do that, I do this.

ionViewDidEnter() {
    this.holidaySlider.slideTo(6, 0);
}

This setup works fine, but only in fast internet connection.

When I switch the network into slow 3G, The slider shows only the first slide for a while, and then slides. In some occasions, it slides to the required position. But in most cases, it stops halfway. (This is in browser debugging)

I experienced the same behavior when I run the app on a low end device. On the devices with enough computational power, it runs smooth as expected on the same network.

Anything I can do about this? any workaround at least?

1 post - 1 participant

Read full topic

Everything was working fine and without any major code changes I am receiving this error all of a sudden:

image699×315 14 KB

1 post - 1 participant

Read full topic

Hi all,

i have an issue and doesnt know how to look for errors…
my actual situtation:

• android build works fine
• ios build for iphone works fine
• ios build for ipad dont works also but area is empty
• ios build for ipad with livereload works also fine

is there a way to look for errors why the ion-content is empty for ipad?
with safari debugger there are no errors in the html console, also no errors in the build terminal

i think it has to do with the cordova-firebasex plugin, but i am not sure

thanks in advance for any hints or tipps

system info:
ionic 5 with angular and all plugins up to date

1 post - 1 participant

Read full topic

Problem

The status bar in our and the ionic example (list and conferenceapp) apps flashes white and then stays white.

It sometimes keeps flashing which is annoying.

What is expected to happen?

The status bar should stay black or change to the color specified (but in the case of the demo the default behavior was expected)

What does happen?

The status bar flashes white and stays white. I cannot change it to another color

Reproduce the issue

Prepare

I used the example project by running:

1. “ionic start myApp”
2. Choose “Angular” (I have tried them all and all fail)
3. Choose “list”
4. When asked for “Integrate your new app with Capacitor to target native iOS and Android? (y/N)” I choose “N” (also with Capacitor I get the error)
5. When asked for “Create free Ionic account? (y/N)” I choose “N”
6. You have the code and example project as I have

Execute

• We open our app and everything works fine
• We close our app by going to the task windows and close the app by swiping it to the right
• Clear app data
• We open our app and everything still works fine
• We close our app by going to the task windows and close the app by swiping it to the right
• We reopen our app and the behavior is visible

Sometimes it is needed to do this a bunch of times, which does not help reproducing the error

Command to execute the Code

ionic cordova run android

Environment, Platform, Device

Ionic info:

afbeelding849×492 11.9 KB

2020_10_16_15_44_18720×1280 80.2 KB

Showcase

I have recorded my screen to show the issue.
In addition I will show the issue for one of our customers:
ShowCase.zip

1 post - 1 participant

Read full topic

I am having this problem while building ionic apk
any help?

FAILURE: Build failed with an exception.

• What went wrong:
  In project ‘app’ a resolved Google Play services library dependency depends on another at an exact version (e.g. “[15.0.
  1]”, but isn’t being resolved to that version. Behavior exhibited by the library will be unknown.

Dependency failing: com.google.android.gms:play-services-stats:15.0.1 -> com.google.android.gms:play-services-basement@[
15.0.1], but play-services-basement version was 16.0.1.

The following dependencies are project dependencies that are direct or have transitive dependencies that lead to the art
ifact with the issue.
– Project ‘app’ depends onto com.google.android.gms:play-services-location@16.0.0
– Project ‘app’ depends onto com.google.android.gms:play-services-location@15.+
– Project ‘app’ depends onto com.google.android.gms:play-services-maps@16.0.0
– Project ‘app’ depends onto com.google.firebase:firebase-messaging@17.0.+

1 post - 1 participant

Read full topic