Quantcast
Channel: Ionic Forum - Latest topics
Viewing all 70435 articles
Browse latest View live

[Ionic 5] Style ion-select > select-text in shadow dom not working

$
0
0

@The_Unknown wrote:

Hello,

I’d like to add white-sprace: normal to the “select-text” div in an ion-select which is the div that holds the select items. Unfortunately there’s no option to have the select multiline (I mean the select itself not its options)- So I tried to style the generated .select-text without success, since it’s in this shadow dom element.

Is there any way to style it the way I like? What’s the matter with this shadow dom anyway? Why is it so hard to simply style a div in ionic 4+?

Thanks in advance for any help!

Bye

Posts: 1

Participants: 1

Read full topic


Admob error Type ‘AdMobFreeOriginal’ is missing the following properties from type ‘TypeProvider’

$
0
0

@guadyass wrote:

ng.cmd run app:ionic-cordova-build --platform=android

ERROR in src/app/app.module.ts:29:51 - error TS2322: Type ‘AdMobFreeOriginal’ is not assignable to type ‘Provider’.
Type ‘AdMobFreeOriginal’ is missing the following properties from type ‘TypeProvider’: apply, call, bind, prototype, and 5 more.

29 Clipboard,Device,AdMobFree,
~~~~~~~~~

[ERROR] An error occurred while running subprocess ng.

    ng.cmd run app:ionic-cordova-build --platform=android exited with exit code 1.

    Re-running this command with the --verbose flag may provide more information.

Posts: 2

Participants: 1

Read full topic

Ionic 5 ion-select change event not working

$
0
0

@RehanHassan wrote:

I’m using Ionic 5 core with vanillaJS and ion-select is not dispatching change event.

<ion-item>
    <ion-select value="-1" interface="popover" onchange="test()">
      <ion-select-option value="-1">All</ion-select-option>
      <ion-select-option value="a">A</ion-select-option>
      <ion-select-option value="b">B</ion-select-option>
      <ion-select-option value="c">C</ion-select-option>
    </ion-select>
</ion-item>



test()
{
     console.log("test");
}

Posts: 2

Participants: 2

Read full topic

Angular Firebase not installing in Ionic 4

$
0
0

@Sandeep776 wrote:

Hi,
I’m trying to run the command “npm install firebase @angular/fire --save” but every time failed to install this plugin. Plz help.

Thnx in Advance :slight_smile:

Posts: 1

Participants: 1

Read full topic

Android build failing - Program type already present: android.support.v4.app.INotificationSideChannel

$
0
0

@alexmcurry wrote:

Hi,

Have Ionic changed the way it builds an Android project? The other week my project built fine. I have made some changes recently (upgraded a facebook login component) and it started failing with this error…

*** What went wrong:**
Execution failed for task ‘:app:transformDexArchiveWithExternalLibsDexMergerForRelease’.
**> com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives: **

I have since tried various builds using different commits and I ended up going right the way back to the commit that worked the last time I got a successful build and that now fails too.

Any ideas what is going on before I go mad?

Thanks
Alex

Posts: 1

Participants: 1

Read full topic

Strange ellipses show up in mobile view

$
0
0

@SamKish wrote:

Hi there,

I’m using ion-card to display a number of app users. When I select the mobile view I see these strange ellipses scattered around.

Here’s my code:

<ion-header>
  <ion-navbar color="hcolor"> </ion-navbar>
</ion-header>

<ion-content>
  <ion-searchbar
    [(ngModel)]="searchstring"
    (input)="searchuser($event)"
    placeholder="Search"
  ></ion-searchbar>
  <ion-row center>
    <ion-col text-center col-4 *ngFor="let key of filteredusers">
      <ion-card>
        <ion-card-header>
          <ion-avatar item-left>
            <img src="{{key.photoURL}}" />
          </ion-avatar>
          <ion-card-title class="font">
            {{key.displayName}}
          </ion-card-title>
          <button class="btncolor" icon-only (click)="sendreq(key)">
            <ion-icon name="md-add-circle"></ion-icon>
          </button>
        </ion-card-header>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-content>

Thanks for your help! :slight_smile:

Posts: 1

Participants: 1

Read full topic

About the launch pricing plan

$
0
0

@chris0309 wrote:

I wanted to build iOS app but I don’t really understand the difference between ( Compile native app binaries / ionic package ) anyone can help much appreciate

Posts: 1

Participants: 1

Read full topic

How to listen on IonRouterOutlet transition start/complete?

$
0
0

@j-carignan wrote:

Hello,

I’m using an <IonTabs> component which contains an <IonRouterOutlet> with the iosTransitionAnimation set as animation. I would like to have an event handler when the transition of the <IonRouterOutlet> starts and finishes.

I want this callback at the <IonTabs> / <IonRouterOutlet> level. So using the lifecycle hooks inside their children is not an option.

I tried using the onIonTabsWillChange and onIonTabsDidChange props on <IonTabs> with no success.
I tried extending the animation I am providing to the <IonRouterOutlet> with no success either. This is what I tried:

import { iosTransitionAnimation } from '@ionic/react';
<IonTabs onIonTabsWillChange={ () => console.log('start?') } onIonTabsDidChange={ () => console.log('end?') }>
	<IonRouterOutlet animation={ (el, opts) => iosTransitionAnimation(el, {...opts, ...{ progressAnimation: true, progressCallback: (ani) => { console.log('progress?', ani) }}}) }>
		<Route { ... }  />
		<... />
	</IonRouterOutlet>
	<IonTabBar ... />
</IonTabs>

Thank you for help!

Posts: 1

Participants: 1

Read full topic


Call to Google API is not Working for me!

$
0
0

@jngomezd wrote:

ionic 5

Call of map = new google.maps.Map(… no return to next line

  • Called in OnInit event (async declared LoadMap)
  • var google is declared
  • in the Template with Api KEY (I try some KEYS)
  • I’m in Venezuela

simplely, function stay in the call.The Next line is no executed.

Any ideas?

Posts: 1

Participants: 1

Read full topic

Warning in console when using ion-virtual-scroll

$
0
0

@sanz wrote:

Hi all … implemented ion-virtual-scroll as per the docs and getting the following warning in the console:

“Can’t bind to ‘virtualItemOf’ since it isn’t a known property of ‘ion-item’.”

My component HTML

<ion-list lines="full">
	<ion-virtual-scroll [items]="terms$" approxItemHeight="44px">
		<ion-item *virtualItem="let term of terms$; let i = index">
			<ion-label>{{ term.name }}</ion-label>
		</ion-item>
	</ion-virtual-scroll>
</ion-list>

Anyone noticed this or know what it means and how to fix?

Thanks :slight_smile:

Posts: 1

Participants: 1

Read full topic

Ionic 4 How do I use cordova firebase.dynamiclinks plugin?

$
0
0

@nishamane wrote:

I want to implement dynamic link in my ionic project… I have installed following 2 plugins for the same.

  • ionic cordova plugin add cordova-plugin-firebase-dynamiclinks
  • npm install @ionic-native/firebase-dynamic-links

Now I want to create dynamic link and for that I want to use
cordova.plugins.firebase.dynamiclinks.createDynamicLink(parameters) method. But when I implemented this method I got error Property ‘firebase’ does not exist on type ‘CordovaPlugins’.
How to use this plugin’s method in ionic 4 project…?

Posts: 1

Participants: 1

Read full topic

virtualScroll for javascript

Ionic Local Notification only once scheduled on iOS until restart of I-Phone or I-Pad

$
0
0

@DonPabelito89 wrote:

Dear Ionic Community, maybe you can help me with an issue? I use “Local Notification” Plugin for Cordova by Katzer with @ionic-native/local-notifications module to recieve Local Notifications, if one user action occurs inside the app as a reminder for the user. It works perfect in Android system. Each time when the user action happens a local notification is send. It doesn’t matter if the user clicked on the notification and opens the app again. However in iOS its not the case. A local notification is always send if this user action happens, but not if the user opened the local notification one time. After that the I-Phone needs to restart, so that local notifications are send again. If the user opens one, again its not send until the user restarts the I-Phone (or I-Pad) again. Can you tell me the problem please? I dont understand this I-Phone issue! Thanks for your help.

Posts: 1

Participants: 1

Read full topic

Zoom Integration in IONIC 3 Project

$
0
0

@srinup0526 wrote:

HI All,

I am already working on the IONIC 3 with Saleforce SDK integrated project but recent crisis of COVID-19, we get a requirement of ZOOM Integration in same exisiting project.

I go through the documentation of ZOOM Market Place and Installed demo project but its not running/Building in XCode, i got the 6 different issues, any one have a similar kind of issues or any suggestions on this please kindly suggest on this.

For your rederence i am attaching screenshots for you.

Posts: 1

Participants: 1

Read full topic

Ionic 4 Angular proper routing approach

$
0
0

@Verthon wrote:

Hello I have a problem with same routes /activities:name that for example /activities/supplies is used for POST or PUT method based on params provided isEditModeOn. However it works only when I’m navigating to the route for the first time.

When I navigate to the route multiple times it just output old outdated data from previous params.

Do I really need to create different pages like plain activities:name and activities:name-edit ?
Thank you for any suggestion :pray:

Function where I navigate to the page:

let navigationExtras: NavigationExtras = {
      state: {
        date: this.reportDate,
        href: this.getCurrentUrlWithoutTabs(this.router.url),
        report: data,
        editMode: true,
        reportData: report,
        previewMode: preview
      },
      replaceUrl: true,
      skipLocationChange: true
    };
    let backHref = 'daily-overview'
    this.router.navigateByUrl(`/tabs/activities/${pageUrl}`, navigationExtras)
    .then(() => this.router.navigate([`/tabs/activities/${pageUrl}`]))

App routing module

{
    path: 'activities/:name',
    loadChildren: () =>
      import('./pages/activities/activities-routing.module').then(m => m.ActivitiesRoutingModule)
  }

Posts: 1

Participants: 1

Read full topic


Some assets return 404 when they try to load in ionic 5

$
0
0

@Chuuone wrote:

Hey i have recently discovered an issue with some of my asset files. I have some svg icons under the path “/assets/icons/fas/home.svg” etc. Some of them load just fine whereas others don’t. The issue seems to coincidentally have started after i ran my first “ionic cordova run android” There were no issues during that process. However while adding some additional icons to my assets i noticed that they do not get loaded up.

So far, specifically the following icons do not load for me. I can provide further proof if required that the icons do in fact exist under the paths specified.

/assets/icons/fas/search.svg
/assets/icons/fas/thumbs-up.svg
/assets/icons/fas/thumbs-down.svg

I have about 30 more icons all which work perfectly fine.

Is there any process to debugging something like this?

Ionic Info:

Ionic:

   Ionic CLI                     : 5.4.14 (C:\Users\agaci\AppData\Roaming\npm\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

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 8 other plugins)

Utility:

   cordova-res : 0.8.1
   native-run  : 0.3.0

System:

   Android SDK Tools : 26.1.1 (C:\Users\agaci\AppData\Local\Android\Sdk)
   NodeJS            : v12.14.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.13.4
   OS                : Windows 10

Angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "defaultProject": "app",
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              },
              "src/manifest.webmanifest"
            ],
            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ],
              "serviceWorker": true,
              "ngswConfigPath": "ngsw-config.json"
            },
            "ci": {
              "progress": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "styles": [],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              },
              "src/manifest.webmanifest"
            ]
          },
          "configurations": {
            "ci": {
              "progress": false,
              "watch": false
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "app:serve:production"
            },
            "ci": {
              "devServerTarget": "app:serve:ci"
            }
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        }
      }
    }
  },
  "cli": {
    "defaultCollection": "@ionic/angular-toolkit"
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}

All comments are appreciated! This is really doing my head in :smiley:

Posts: 1

Participants: 1

Read full topic

Installing WKWebView plugin

$
0
0

@Thilo1992 wrote:

Hello,

I’m trying to install the cordova-plugin-ionic-webview plugin because of the deprecation of UIWebView for future iOS releases.
I’ve also added <preference name="WKWebViewOnly" value="true" /> to the config.xml.

But unfortunately now when running on Android I get following error: ERR_FILE_NOT_FOUND(file:///android_asset/www/index.html)

What else do I have to do? The documentation on the Ionic announcement does not show any more steps: https://ionicframework.com/blog/understanding-itms-90809-uiwebview-api-deprecation/

Posts: 1

Participants: 1

Read full topic

IonSlider.getActiveIndex Promise never resolves on second page entry

$
0
0

@peterjc wrote:

Hi, I have a very frustrating problem with IonSlider.

I have always called getActiveIndex() from within the ionSlideWiilChange handler (I swapped to ionSlideDidChange to see if this made any difference, and it didn’t

@ViewChild('slider', { static: true }) private slider: IonSlides;
....

 public async ionSlideDidChange(): Promise<void> {
    try {
      this.logger.debug(`getting active index...`);
      this.currentSliderIndex = await this.slider.getActiveIndex();
      if (!this.currentSliderIndex)
        this.currentSliderIndex = 0;
      
      this.logger.info(`index set to ${this.currentSliderIndex}`);
      await this.dataStore.setNumber(DataStorageKeys.vals.lastActiveSlideIndex, this.currentSliderIndex);
      this.subscribeToUpdates();
    } catch (error) {
      this.logger.error(`ionSlideWillChange: ${error}`);
    }
  }

This has always worked for me in Ionic 4 - I have never had any problems with it.

I have just upgraded to Ionic 5. The first time I go into this feature page, the above still works.

But if I navigate away (to another page), and then back, the next time I “slide” ionSlideDidChange is still called, but the call to this.slider.getActiveIndex() never returns.

I have also tried using tradition promise syntax…

this.slider.getActiveIndex().then (index => {
..
}

But exactly the same problem, the then is never called.

I Have tried to step into getActiveIndex(), but it goes into code I just don’t understand.

I am getting no exceptions or console errors.

If I do the same thing in a small sample app, i do NOT get the same problem, so I cannot even use this to report it.

I am stuck, I have no idea how I am going track down this problem.

Does anyone have any advice, or had anything similar?

Thanks in advance for any help.

$ ionic info

Ionic:

   Ionic CLI                     : 5.2.3 (C:\Users\pchapman\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.901.0
   @angular-devkit/schematics    : 9.1.0
   @angular/cli                  : 9.1.0
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, windows 7.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.3, (and 14 other plugins)

Utility:

   cordova-res : 0.7.0-testing.0
   native-run  : 0.2.8

System:

   Android SDK Tools : 26.1.1 (C:\Users\pchapman\AppData\Local\Android\sdk)
   NodeJS            : v10.15.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

Posts: 1

Participants: 1

Read full topic

Two wan binding

$
0
0

@mehraj786 wrote:

hi i want to check condition for two way binding if my value is >3 it should not update in api instead it update 3 or less then 3 which we enter through ngmodel can anyone now how to achieve this value here 3 is getting through api

Posts: 1

Participants: 1

Read full topic

Filepath ios

Viewing all 70435 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>