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

Ionic app dynamically data not showing correctly iOS, Android works

$
0
0

@Krycek wrote:

I have an Ionic 3 app for Android and iOS. The app uses an API to get data from the server. This works for Android, but for iOS I don’t get the view updated with the response of the server.

.ts file

ionViewWillEnter() {
    this.rest.get(this.url).subscribe(res => {
        this.profile = res['profile'];
        this.statistics = res['statistics'];
    });
}

provider

return this.http.get(`${this.API_URL}/${resource}`, {'params': param})
        .map(response => response);

Template

<ng-container *ngIf="this.rest.isLoading === false">
    <ion-row class="stats" padding-horizontal="">
        <ion-col col-6>Friends</ion-col>
        <ion-col col-6 text-right>{{statistics?.friends}}</ion-col>
    </ion-row>

    <ion-row class="stats" padding-horizontal="">
        <ion-col col-6>Achievements</ion-col>
        <ion-col col-6 text-right>{{statistics?.achievements}}</ion-col>
    </ion-row>
</ng-container>

in Android the stats are nicely updated, but on iOS it stays blank except the fixed text, that is shown.

But when we go to a subpage and then use the back button or open and close the menu, we get the data visible (see attached screenshot).

Ionic info

Ionic:

   ionic (Ionic CLI)  : 4.12.0 (C:\Users\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.4
   @ionic/app-scripts : 3.2.3

Cordova:

   cordova (Cordova CLI) : 9.0.0
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-webview 1.2.1, (and 11 other plugins)

System:

   Android SDK Tools : 26.1.1 (C:\Android\android-sdk)
   NodeJS            : v10.15.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 10

Posts: 1

Participants: 1

Read full topic


Google Plus plugin not working when we download our app from Play Store

An annoying little square on Android devices in ionic3?

$
0
0

@RomnEmpire wrote:

Recently I created an hybrid application developped with Ionic 3. I noted a little problem: sometimes a little square appears when I activate a page from the side menu.initially not show any little square but after jump new page and jump to previous screen now show little square.

Steps to reproduce:

add Below css in app:

scroll-content{ overflow-y: auto; }

.scroll-content{ overflow-y: auto !important; }

.content .scroll-content { overflow-y: auto; }

Posts: 1

Participants: 1

Read full topic

Failed to find 'ANDROID_HOME' and 'android'

Push Notification expansion in ionic 3

$
0
0

@hasnainsakir001 wrote:

Hi,
am trying to get an expandable push notification. which shows image from my backend. am using the cordova fcm plugin for push notification is there any way to implement this in ionic 3, can anyone help me with this.

Thanks in advance

Posts: 1

Participants: 1

Read full topic

Imagemapster with Ionic3 (Angular5)

$
0
0

@vishwaprasad123 wrote:

Iam trying to use imagemapster plugin with Ioinc3 and Angular5 combination, I tried using JQuery method, it is not working. May i know to implement this?

Thanks in Advance

Posts: 1

Participants: 1

Read full topic

Can't find command ionic

$
0
0

@DargEdge wrote:

after npm install -g ionic
when i try to use “ionic start …”
it response “The command “ionic” is either misspelled or could not be found.”

Posts: 3

Participants: 3

Read full topic

Multiple File Selection for Android and IOS

$
0
0

@AJ.M.A wrote:

Hi guys,

I just started recently and I collided with this issue. I can’t find any plugin or a way to select multiple files on Android or IOS.

Thanks.

Posts: 1

Participants: 1

Read full topic


How to access cordova.plugins

$
0
0

@yesdedoo wrote:

Hi guys, now I’m a newbie in this framework.

While I doing the AndroidPermission, AndroidPermission there will be:

var permissions = cordova.plugins.permissions;
permissions.checkPermission(permission, successCallback, errorCallback);
permissions.requestPermission(permission, successCallback, errorCallback);
permissions.requestPermissions(permissions, successCallback, errorCallback);

The point is, I unable to call cordova.plugins.permissions.
In my editor showed that " Property does not exist on type CordovaPlugin

My project was successful in installed cordova AndroidPermissions and added in the app module provider

Posts: 1

Participants: 1

Read full topic

Wrap a LoadingController around observables

$
0
0

@mpallante wrote:

Hello everyone,

I’m trying to use a LoadingController to show an indicator while I’m doing calls to a remote service, but I have some troubles.

My current situation is the following. I have a PageComponent with a simple loading method, something like:

export class PageComponent {

  constructor(private itemsService: ItemsService) { }

  fillData() {
    this.itemsService.getItems().subscribe(items => {
      this.items = items;
    });
  }

}

The ItemsService is simple too:

export class ItemsService {

  constructor(private http: HttpClient) { }

  getItems() {
    let url = 'http://example.org/items/endpoint';

    return this.http.get(url).pipe(
      map(this.buildItems.bind(this)
    );
  }

  private buildItems(items: any[]) {
    // convert remote data format to internal one
  }
}

Now I’d like to put a LoadingController between the twos, by making both the caller and the callee basically unaware of what’s really happening.

So my idea is to create an intermediate service class that’s called from the page class. To make it flexible enough to be used with any kind of service (I have more than ItemsService), I tried to pass to the intermediate class the same Observable I got from the ItemsService like this:

(in PageComponent)

fillData() {
  this.loadingService.loadData(this.itemsService.getItems()).subscribe(items => {
    this.items = items;
  });
}

and I defined a new service like this:

export class LoadingService {

  loadData(observable: Observable<any>): Observable<any> {
    return observable.pipe(
      finalize(() => {
        console.log('after data received');
      })
    );
  }

}

This code seems to work. When I call the fillData in PageComponent, I get the observable from ItemsService, add a finalize() operator to it and finally (in fillData()) I subscribe the observable, having the real remote request called.

This way, if I have many services shaped like ItemsService, I can do

this.loadingService.loadData(this.service1.getData()).subscribe( /* ... */ );
this.loadingService.loadData(this.service2.getData()).subscribe( /* ... */ );
this.loadingService.loadData(this.service3.getData()).subscribe( /* ... */ );
/* ... and so on */

However, as soon as I add the LoadingController in LoadingService, things go weird. This is how I changed the service:

export class LoadingService {
  private loader = null;

  constructor(private loadingController: LoadingController) { }

  loadData(observable: Observable<any>): Observable<any> {
    this.openLoader();
    return observable.pipe(
      finalize(() => {
        this.closeLoader();
      })
    );
  }

  private async openLoader() {
    if (! this.loader) {
        this.loader = await.loadingController.create();
    }
    await this.loader.present();
  }

  private async closeLoader() {
    if (this.loader) {
      await this.loader.dismiss();
      this.loader = null;
    }
  }
}

Now what I get is that the loading controller actually presents the indicator and usually does not dismiss it after the remote call ends. Sometimes, however, I get the correct behavior: the indicator shows, the call starts, the call ends, the indicator goes away.

I’m not very confident with event-based programming in JS, so it is probably a very stupid question, but I need some help to solve this problem.

Thanks a lot,

Marco

Posts: 1

Participants: 1

Read full topic

Ion-input in modal with Ios move to right

$
0
0

@ferdinandpc wrote:

Hi, I have a problem with the input field in Ios. If i put the focus in one ion-input and scroll down/up move the field to the right. Finded that when i do this the ion-input element add a transformt property to the field. This is only in ios in a modal. What can I do?

Posts: 1

Participants: 1

Read full topic

Ionic 3: Reload page in browser with F5/with browser refresh button

$
0
0

@maxkoch wrote:

after F5(or browser refresh button) pressed, navigation stack will be reseted and back button is not visible.

Please help me.

Thnx!

Posts: 1

Participants: 1

Read full topic

Can't build ionic V1 app on ionic cli v4

$
0
0

@aubreyq wrote:

Here is my ionic info:

[WARN] Bad integration name: gulp

Ionic:

   ionic (Ionic CLI) : 4.12.0 (C:\Program Files\nodejs\node_modules\ionic)
   Ionic Framework   : ionic1 1.3.5
   @ionic/v1-toolkit : 1.0.22

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.0.0
   Cordova Plugins       : no whitelisted plugins (15 plugins total)

System:

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

I am working on a legacy Ionic v1 app with the most recent Ionic CLI and when I run ionic-v1 build it fails. I get these errors:

C:\>ionic-v1 build
[16:09:31] Cannot load gulp: ReferenceError: internalBinding is not defined
[16:09:31] Cannot load gulp: ReferenceError: internalBinding is not defined
[16:09:31] Cannot run sass task: missing in gulpfile.js
[16:09:31] Cannot load gulp: ReferenceError: internalBinding is not defined

This is very strange because when I run gulp build it works fine and I do have a gulp sass function.

  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@ionic/v1-toolkit": "^1.0.22",
    "angular-mocks": "1.7.8",
    "bower": "^1.8.8",
    "del": "^4.0.0",
    "fancy-log": "^1.3.3",
    "gulp": "^4.0.0",
    "gulp-angular-templatecache": "^2.2.6",
    "gulp-babel": "8.0.0",
    "gulp-clean-css": "4.0.0",
    "gulp-cli": "2.0.1",
    "gulp-concat": "2.6.1",
    "gulp-if": "2.0.2",
    "gulp-inject": "5.0.2",
    "gulp-jscs": "4.1.0",
    "gulp-jshint": "2.1.0",
    "gulp-load-plugins": "1.5.0",
    "gulp-minify-css": "1.2.4",
    "gulp-ng-annotate": "2.1.0",
    "gulp-print": "5.0.2",
    "gulp-rename": "1.4.0",
    "gulp-sass": "4.0.2",
    "gulp-sourcemaps": "2.6.5",
    "gulp-uglify": "3.0.2",
    "jasmine": "3.3.1",
    "jasmine-core": "3.3.0",
    "jscs": "3.0.7",
    "jshint": "^2.10.2",
    "jshint-stylish": "2.2.1",
    "karma": "4.0.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage": "^1.1.2",
    "karma-jasmine": "2.0.1",
    "karma-remap-istanbul": "0.6.0",
    "main-bower-files": "2.13.1",
    "natives": "^1.1.6",
    "preen": "1.2.0",
    "shelljs": "0.8.3",
    "yargs": "13.2.2"   },

Posts: 1

Participants: 1

Read full topic

How to disable ionic slide over google maps

$
0
0

@mluisls wrote:

Hi,

I have something like:

<ion-content scroll="true">
...
  <ui-gmap-google-map ... data-tap-disabled="true">
  </ui-gmap-google-map>
...
</ion-content>

but can’t manage to disable the drag that opens the side-menus while navigating the ui-gmap-google-map.
This turns out that the side-menus open while moving horizontally.

How is it possible to disable the side-menus from opening while navigating in the map?

Posts: 1

Participants: 1

Read full topic

Vertical align text or any content inside the card to center


Ionic 3/4 - Android 9 - App crash on permission requests

$
0
0

@ABonino wrote:

So i have this app that i’m working on for a few months now, and i used to test it on my Samsung Galaxy S8. The problem i have presents itselft since i received the update to Android Pie (version 9, sdk 28). The app is written in Angular 7.

Basically whenever a pop-up that is not part of the ionic app needs to come on screen, the app crashes, without any log errors. The pop-ups can be for example the runtime request permission confirmation, or the login form autocomplete feature (native of android).

Opening the generated android project in android studio and debugging it turns out that the cause of the crash is the FOREGROUND_SERVICE permission not granted to the app. As stated from google release note beheaviouor changes page any app that targets Android 9 or higher and use foreground services must request the FOREGROUND_SERVICE permission.

Android studio debug logcat:

Adding the following rule to the config.xml: <preference name="android-targetSdkVersion" value="27" />, and running the app on the same device (android 9) results in the following error:

Even using the cordova-plugin-android-permissions to request at runtime the aformentioned permission ends having the same problem, the app crashes. (tough to test it i actually had to edit the permissions array in the ionic-native npm module, since it’s not even there, i guess beacuse it’s a normal level permission that shouldn’t need user action to be granted).

I also tested the app on a Xiaomi MI A2 Lite with android 9 on it, and the behaviour is the same. Testing it on another samsung phone, with android 8 still on it, it works as expected, no problems whatsoever.

I searched the web a lot for a solution to this, but i wasn’t able to find any valid resource.

I’m not sure what i should do now, i can’t get the app to work properly on Android 9 devices.

Thank you in advance for any help in this matter

Posts: 1

Participants: 1

Read full topic

Ionic pro (now called appflow) removal

$
0
0

@bensnape wrote:

I have a live ionic 3 app in both the IOS and Android app stores. I initially setup ionic pro so we could push live updates without having to submit a new app to the app stores each time.

We realised now that we don’t actually want/need the appflow integration. How can I totally remove all traces of the pro/appflow bits from our app please?

Posts: 1

Participants: 1

Read full topic

Aot build, webpack missing module, cannot find module "."

$
0
0

@gambarle wrote:

When i add the --aot flag to my build i get the following error message in the console.
It used to work and I have been going through the code trying to find the culprit plugin or module, without luck so far.

Any help / insights are very much appreciated

[Error] Error: Cannot find module "."
	webpackMissingModule (vendor.js:127422:145)
	(anonymous function) (vendor.js:127422:148)
	(anonymous function) (vendor.js:127431)
	__webpack_require__ (vendor.js:55)
	(anonymous function) (main.js:10843)
	__webpack_require__ (vendor.js:55)
	webpackJsonpCallback (vendor.js:26)
	Global Code (main.js:1)

My package.json

{
    "name": "printix-app-user",
    "author": "Printix",
    "homepage": "http://iprintix.net/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "ionic:build": "ionic-app-scripts build",
        "ionic:watch": "ionic-app-scripts watch",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "5.2.6",
        "@angular/compiler": "5.2.6",
        "@angular/compiler-cli": "5.2.6",
        "@angular/core": "5.2.6",
        "@angular/forms": "5.2.6",
        "@angular/platform-browser": "5.2.6",
        "@angular/platform-browser-dynamic": "5.2.6",
        "@ionic-native/core": "4.20.0",
        "@ionic-native/device": "^4.18.0",
        "@ionic-native/in-app-browser": "4.5.3",
        "@ionic-native/ionic-webview": "^5.0.0-beta.20",
        "@ionic-native/keyboard": "4.5.3",
        "@ionic-native/local-notifications": "^5.2.0",
        "@ionic-native/network": "4.5.3",
        "@ionic-native/qr-scanner": "^4.7.0",
        "@ionic-native/safari-view-controller": "^4.7.0",
        "@ionic-native/screen-orientation": "4.5.3",
        "@ionic-native/splash-screen": "4.5.3",
        "@ionic-native/sqlite": "4.5.3",
        "@ionic-native/status-bar": "4.5.3",
        "@ionic-native/vibration": "^4.7.0",
        "@ionic/storage": "^2.2.0",
        "@nguniversal/express-engine": "^7.0.2",
        "@ngx-translate/core": "9.1.1",
        "@ngx-translate/http-loader": "2.0.1",
        "@types/lodash": "^4.14.109",
        "angular-2-local-storage": "^2.0.0",
        "angular2-moment": "^1.9.0",
        "bootstrap-sass": "^3.3.7",
        "chart.js": "2.7.1",
        "cordova-android": "7.1.4",
        "cordova-browser": "5.0.4",
        "cordova-ios": "4.5.5",
        "cordova-plugin-add-swift-support": "^1.7.2",
        "cordova-plugin-background-mode-bluetooth-central": "~1.0.0",
        "cordova-plugin-bluetooth-peripheral-usage-description": "^1.0.0",
        "cordova-plugin-bluetoothle": "~4.5.3",
        "cordova-plugin-customurlscheme": "^4.3.0",
        "cordova-plugin-inappbrowser": "^2.0.2",
        "cordova-plugin-network-information": "^2.0.1",
        "cordova-plugin-qrscanner": "^2.6.0",
        "cordova-plugin-safariviewcontroller": "^1.5.4",
        "cordova-plugin-screen-orientation": "^3.0.1",
        "cordova-plugin-splashscreen": "^5.0.2",
        "cordova-plugin-statusbar": "^2.4.1",
        "cordova-plugin-vibration": "^3.1.0",
        "cordova-plugin-whitelist": "^1.3.3",
        "cordova-sqlite-storage": "^2.2.1",
        "de.appplant.cordova.plugin.local-notification": "^0.8.5",
        "es6-promise-plugin": "^4.2.2",
        "fast-json-patch": "2.0.6",
        "flag-icon-css": "3.0.0",
        "immutable": "^3.8.2",
        "ionic-angular": "3.9.4",
        "ionic-plugin-deeplinks": "^1.0.17",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "ios-sim": "^6.1.2",
        "list": "^2.0.13",
        "lodash": "^4.17.10",
        "ngx-cookie": "^4.1.2",
        "ngx-order-pipe": "^2.0.1",
        "rxjs": "5.5.6",
        "zone.js": "0.8.20"
    },
    "devDependencies": {
        "@angular/cli": "^7.3.0",
        "@ionic/app-scripts": "3.2.3",
        "postcss": "6.0.14",
        "typescript": "^2.7.2"
    },
    "cordova": {
        "platforms": [
            "android",
            "ios",
            "browser"
        ],
        "plugins": {
            "cordova-plugin-network-information": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-sqlite-storage": {},
            "ionic-plugin-keyboard": {},
            "cordova-plugin-screen-orientation": {},
            "cordova-plugin-inappbrowser": {},
            "cordova-plugin-vibration": {},
            "cordova-plugin-customurlscheme": {
                "URL_SCHEME": "printixapp",
                "ANDROID_SCHEME": " ",
                "ANDROID_HOST": " ",
                "ANDROID_PATHPREFIX": "/"
            },
            "cordova-plugin-qrscanner": {},
            "cordova-plugin-whitelist": {},
            "cordova-plugin-safariviewcontroller": {},
            "cordova-plugin-background-mode-bluetooth-central": {},
            "cordova-plugin-bluetooth-peripheral-usage-description": {
                "TEXT": "plugin for using bluetooth on ios"
            },
            "de.appplant.cordova.plugin.local-notification": {},
            "cordova-plugin-bluetoothle": {}
        }
    }
}

Ionic info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 3.2.3
    Cordova Platforms  : android 7.1.4 browser 5.0.4 ios 4.5.5
    Ionic Framework    : ionic-angular 3.9.4

System:

    ios-deploy : 1.9.2 
    ios-sim    : 6.1.3 
    Node       : v8.11.1
    npm        : 5.6.0 
    OS         : macOS High Sierra
    Xcode      : Xcode 10.1 Build version 10B61 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

Posts: 1

Participants: 1

Read full topic

Drag and drop betwen slide between slides

$
0
0

@Arquino wrote:

Hi, I would like to know how to make drag and drop between slides as Trello app. someone can help me please?

Posts: 1

Participants: 1

Read full topic

Rectangular crop in ios

$
0
0

@manojpatel0217 wrote:

I want to crop image in rectangular i.e. width is 400 and height is 150.
In iOs it gives me square crop option but not able to crop it rectangular form.

Can anyone help me on this?

Posts: 1

Participants: 1

Read full topic

Viewing all 71531 articles
Browse latest View live


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