@Imboden wrote:

Any plan to support Garmin IQ devices ? https://developer.garmin.com

PWAs for mobile (iOS, Android) and Garmin Watches and GPS would be a perfect framework for us.

Thanks

Posts: 1

Participants: 1

Read full topic

@AthleticNet wrote:

Bug Report

Ionic version:
4.x

Current behavior:

On iOS devices, the screen jumps to the top of the list when items are added to a list via the infinite scroll component.

This is not a problem on the web (Chrome or Safari) or on Android devices.

71850543-86a4bd80-30a2-11ea-95c0-53d0e443decd450×600 1.96 MB

Expected behavior:

The screen scroll should not be affected by adding items to a list. The user should see new posts appear and continue scrolling as normal.

Steps to reproduce:

1. Build the app in Xcode
2. Run on a device
3. Start scrolling down. Once you hit Post 5, you’ll be sent to the top of the screen (Post 1).

Related code:

The repo is at https://github.com/bennyt2/ionic-infinite-scroll-test. Here are the two relevant files:

src/app/home/home.page.html: HTML that uses ion-infinite-scroll

<ion-content>
  <ng-container *ngFor="let post of posts;let i = index">
    <div class="post post-{{post % 2}}">Post {{post}}</div>
  </ng-container>

  <div class="no-posts-yet" *ngIf="posts.length === 0">No posts yet...</div>
  <div class="end-of-feed" *ngIf="allPostsLoaded">End of feed</div>

  <ion-infinite-scroll class="infinite-scroll" threshold="300px" (ionInfinite)="getMorePosts($event)">
    <ion-infinite-scroll-content loadingSpinner="circles" loadingText="Loading more posts...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>

src/app/home/home.page.ts: Component that handles post retrieval and the ionInfinite event

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-infinite-scroll-test',
  templateUrl: './infinite-scroll-test.page.html',
  styleUrls: ['./infinite-scroll-test.page.scss'],
})
export class InfiniteScrollTestPage implements OnInit {

  posts: number[] = [];
  maxPosts: number = 100;
  step: number = 5;
  loadedPosts: number = 0;
  allPostsLoaded: boolean = false;

  constructor() {
  }

  ngOnInit() {
    this.addPosts(5);
  }

  addPosts(number: number) {
    for (let i = 0; i < number; i++) {
      this.posts.push(this.posts.length + 1);
      this.loadedPosts = this.posts.length + 1;
    }
  }

  getMorePosts(event) {
    setTimeout(() => {
      this.addPosts(5);
      event.target.complete();

      // App logic to determine if all data is loaded
      // and disable the infinite scroll
      if (this.loadedPosts > this.maxPosts) {
        event.target.disabled = true;
        this.allPostsLoaded = true;
      }
    }, 500)
  }
}

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.1 (/home/spikefalcontwo/.nvm/versions/node/v10.15.3/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Capacitor:

   Capacitor CLI   : 1.4.0
   @capacitor/core : 1.4.0

Utility:

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

System:

   NodeJS : v10.15.3 (/home/spikefalcontwo/.nvm/versions/node/v10.15.3/bin/node)
   npm    : 6.11.3
   OS     : Linux 5.0

Any thoughts on what might cause this problem?

Posts: 1

Participants: 1

Read full topic

@droggam wrote:

ionicpossible603×703 202 KB

Posts: 1

Participants: 1

Read full topic

@jsmythe wrote:

Ionic generates numerous JavaScript files in the www directory when I create a production build. Is there any easy way to put the JavaScript files in a www subdirectory and change all required references to these files? This would make it a lot cleaner when I deploy an app as a PWA and not bloat the top-level directory.
If there is no easy way, an additional option when running “ionic build --prod” would be useful.

Posts: 2

Participants: 2

Read full topic

@mrcameron999 wrote:

Hello, im new to inoic as well as react and java script. I have a lot of knowledge of other languages such as java python and c#. I have a question that is probebly really stupid and simple to answer but im finding it hard to get my head around. I will add my code below. I have a if statements and i want both results use the component however if i do not add a blank one then ionic says that there is no as its needed for tabs. How do i essentially create a class that contains as well as another infomaton and then just beable to use this component instead of having to copy and paste. I hope my code makes it easyer to understrand what im trying to do and i think its proably more of a react or javascript question but thought i would ask here as i might be wrong thank you!

const RoutingComp: React.FC= () => {
  return(
    //This is what im talkinga bout below -----------------
    <IonRouterOutlet>
          <Route path="/dashboard" component={Dashboard} exact={true}/>
          <Route path="/home" component={Home} exact={true} />
          <Route path="/page2" component={Page2} exact={true} />
          <Route path="/login" component={Login} exact={true} />
          <Route path="/register" component={Register} exact={true} />
          <Route exact path="/" render={() => <Redirect to="/login" />} />
        </IonRouterOutlet>
  )
}

const RoutingSystem: React.FC = () => {

  return(
    <IonReactRouter>#
      
      {true ? 
      <IonTabs>
--Have to create a "fake" IonRouterOutlet as it does not recognise routingcomp as a IonRouterOutlet
        <IonRouterOutlet>
          <RoutingComp/>
        </IonRouterOutlet>
        
        <IonTabBar slot="bottom" >
          <IonTabButton tab="home" href="/home">
            <IonLabel>Liked Properties</IonLabel>
          </IonTabButton>
          <IonTabButton tab="dashboard" href="/dashboard">
            <IonLabel>Find Properties</IonLabel>
          </IonTabButton>
          <IonTabButton tab="page2" href="/page2">
            <IonLabel>Profile</IonLabel>
         </IonTabButton>
        </IonTabBar>
      </IonTabs> : 
      <IonRouterOutlet>
         <RoutingComp/>
      </IonRouterOutlet>     
  
      }
    </IonReactRouter>
    
  )
}

Posts: 1

Participants: 1

Read full topic

@jf1 wrote:

I have 2 pages : MainPage and ModalPage.
ModalPage will be a modal

Basically it’s working.
a) MainPageModule imports ModalPageModule,
b) MainPage imports MainPage
c) async open_modal is the function that use modalCtrl with ModalPage as component

But now i would like to use a service which manage ModalController.

ModalService import ModalPage and Dependecy Injection of ModalController

Angular say
!! Error: No component factory found for ModalPage.
!! Did you add it to @NgModule.entryComponents?

I try

1. add ModalPage inside declarations and entryComponents arrays of MainPageModule
2. add ModalPage inside declarations and entryComponents arrays of ModalPageModule

No way

googling to use modalCtrl inside a service:
https://www.damirscorner.com/blog/posts/20191011-OpeningIonic4ModalsFromACommonService.html

I try this because MainPage use ngrx, and have to manage a lot of state (workflow), i would try to organize it by splitting code into différents services.

Hope somebody could say me where i have to declare ModalPage when i want to use a service that manage ModalController.

Best regards

Posts: 1

Participants: 1

Read full topic

@rclatorre wrote:

Como puedo agregar una imagen en cada elemento del ion-select

Necesito mostrar monedas con la bandera respectiva, he tratado de agregar una clase con renderer pero no me sale

Posts: 1

Participants: 1

Read full topic

@JulienRos wrote:

Hello everyone,

we was using this tutorial for our sliders with ionic 3
: https://www.damirscorner.com/blog/posts/20171006-HiddenAdvancedFeaturesOfIonicsSlides.html

for this result:

However, we have problems implementing it with ionic 4.
Anyone have a solution to get the same result?

thank you

Posts: 1

Participants: 1

Read full topic

@tivowatcher wrote:

I’ve seen some posts asking this, but no answers.

I’d like to interactively debug with VS Code (and Capacitor) when running my Ionic app in an Android emulator. Is this possible? If so, can you direct me to a white paper/video showing how to wire this up?

Breakpoints, for example, that fire in VS Code from an emulator is what I am after…

Posts: 1

Participants: 1

Read full topic

@smidhunraj wrote:

Is it possible to place ion-tab at the middle of the screen.I have an image with some text on the top of the page.Is it possible to place ion-tabs at the middle of the screen that is beneath the image and content.

Schedule 6

<ion-tab-button tab="speakers">
  <ion-icon name="contacts"></ion-icon>
  <ion-label>Speakers</ion-label>
</ion-tab-button>

<ion-tab-button tab="map">
  <ion-icon name="map"></ion-icon>
  <ion-label>Map</ion-label>
</ion-tab-button>

<ion-tab-button tab="about">
  <ion-icon name="information-circle"></ion-icon>
  <ion-label>About</ion-label>
</ion-tab-button>

```

Posts: 3

Participants: 2

Read full topic

@vasanthb wrote:

I’m posting this question after not getting any proper way to execute end to end testing of native functionalities in Ionic. I have been on it since a week.
I have referred this official link: https://ionicframework.com/docs/building/testing It just speaks about testing Ionic app in browser. There are no explanation for testing the Ionic native functionalities.
I have also read this link : https://ionicframework.com/integrations/appium which does nothing other than redirecting to official Appium page.
I posted a question asking best approach to end to end testing in Ionic, almost 6 days ago and I haven’t received any reply for that. (Best approach for E2E testing)
Let me know is there any preferred way to perform end to end testing Ionic app with native functionality or not. Thanks in advance.

Posts: 1

Participants: 1

Read full topic

@haresh333 wrote:

Is it possible to include Capacitor particularly it’s push notification plugin in Ionic v3 and build it as PWA?

Any sample example of Ionic v3 and Capacitor?

Posts: 1

Participants: 1

Read full topic

@atish11pune wrote:

Hello everyone,
I want to integrate my ionic 5 application with my custom Oauth2 which uses internally google auth
these are steps need to be done to achieve this
1.my users will redirect to my custom OAuth login page
2.from that screen they can log in using google, google returns token to my custom OAuth
3.using that token my custom OAuth authenticate a user
4.return that to my ionic application
on the last step, I am stuck
I am using an in-app browser plugin to achieve this, I won’t able to get any response of any request.
in-app browser events are not firing if in

Posts: 1

Participants: 1

Read full topic

@smidhunraj wrote:

My text is breaking due date into two lines.How to avoid that

<ion-header>
  <ion-toolbar>
    <ion-title>Fees</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid fixed="true">

  <ion-row><h1>Grand Total</h1></ion-row>
  <ion-row>
    <ion-col>
    Amount 
    </ion-col>
    <ion-col>
     Discount
    </ion-col>
    <ion-col>
     Fine 
       </ion-col>
       <ion-col>
         Paid
       </ion-col>
       <ion-col>
        Balance
      </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
    $22946 
    </ion-col>
    <ion-col>
$0
    </ion-col>
    <ion-col>
     $0 
       </ion-col>
       <ion-col>
         $39734
       </ion-col>
       <ion-col>
      $-16788
      </ion-col>
  </ion-row>

</ion-grid>
<ion-grid fixed="true">
<ion-row><h1>Overheads /operating costs</h1></ion-row>
<ion-row>
<ion-col>
  Due Date
</ion-col>
<ion-col>
 Amount
</ion-col>
<ion-col>
Paid
</ion-col>
<ion-col>
 Balance
</ion-col>
<ion-col>
  status
</ion-col>
</ion-row>
<ion-row>
  <ion-col>
    2020-01-01
  </ion-col>
  <ion-col>
$1619
  </ion-col>
  <ion-col>
   $6518
  </ion-col>
  <ion-col>
    $-4899
   </ion-col>
   <ion-col>
     <ion-button color="danger" class="round">unpaid</ion-button>
   </ion-col>
  
</ion-row>

</ion-grid>
<hr>

 
  
</ion-content>

Posts: 1

Participants: 1

Read full topic

@Hshaukat wrote:

I want to run sqlite on windows using ionic3
I have created a blank ionic project and everything is working fine when I run the command
ionic cordova build windows

After I add the sqlite plugins
ionic-native/sqlite
ionic-native/sqlite-porter

It is giving error

C:\Program Files (x86)\MSBuild\14.0\bin\Microsoft.Common.CurrentVersion.targets(724,5): error : The OutputPath property
 is not set for project 'SQLite3.UWP.vcxproj'.  Please check to make sure that you have specified a valid combination o
f Configuration and Platform for this project.  Configuration='debug'  Platform='Win32'.  You may be seeing this messag
e because you are trying to build a project without a solution file, and have specified a non-default Configuration or
Platform that doesn't exist for this project. [C:\CC\NativeApps\Sample-Windows\sample-windows\plugins\cordova-sqlite-st
orage\src\windows\SQLite3-WinRT-sync\SQLite3\SQLite3.UWP.vcxproj]
Error: C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe: Command failed with exit code 1
[ERROR] An error occurred while running subprocess cordova

Here is my package.json

{
  "name": "samplewindows",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "4.20.0",
    "@ionic-native/splash-screen": "4.20.0",
    "@ionic-native/sqlite": "^5.20.0",
    "@ionic-native/sqlite-porter": "^5.20.0",
    "@ionic-native/status-bar": "4.20.0",
    "@ionic/storage": "2.2.0",
    "cordova-android": "6.3.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.1.3",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^4.0.0",
    "cordova-windows": "5.0.0",
    "ionic-angular": "3.9.9",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "uk.co.workingedge.cordova.plugin.sqliteporter": "^1.1.1",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.4",
    "typescript": "2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-sqlite-storage": {},
      "uk.co.workingedge.cordova.plugin.sqliteporter": {}
    },
    "platforms": [
      "android",
      "windows"
    ]
  }
}

Posts: 1

Participants: 1

Read full topic

@lohith95 wrote:

I have a page where i am displaying the list of data using the load more functionality(i.e, IonInfiniteScroll).
IonInfiniteScroll works fine. But the problem is when i try to search data using element, IonInfiniteScroll will not work. Its not triggering any event when i reach the bottom of screen.
Can anyone tell me what could be the issue.

Thanks in advance!

Posts: 1

Participants: 1

Read full topic

@Hariid wrote:

Hi,

I’m trying to record video with low size in android platform using “cordova-plugin-media-capture” plugin. Able to record video, but video size is too high. I used “cordova-plugin-video-editor” to compress video but its taking too much of time to compress.

For Eg: To compress 1min of video, it takes almost 50 sec to compress, which i don’t want.

previously i used “https://android-arsenal.com/details/1/719” CWAC-Cam2 android library. where i created custom plugin to record video and to meet my requirement. But now this library got deprecated. Please suggest me if any 3rd party android libraries or any ionic cordova plugins available, which satisfy my below requirements.

Video Requirement:

1. Control to access flash light
2. Should compress captured video with less amount of time
3. Should convert video format to “.mp4” always

Posts: 1

Participants: 1

Read full topic

@DMoney wrote:

I keep getting this error whenever the app is launched. It doesn’t appear to cause any other issues but the error appears and I’d like to get it resolved before the deploying the app.

Angular is running in the development mode. Call enableProdMode() to enable the production mode.

/plugins/cordova-plugin-fcm-with-dependecy-updated/www/FCMPlugin.js:6 FCMPlugin.js: is created

/plugins/cordova-plugin-fcm-with-dependecy-updated/www/FCMPlugin.js:59 FCMPlugin Ready OK

vendor.js:114077 Ionic Native: deviceready event fired after 910 ms

Failed to load resource: the server responded with a status of 404 ()
polyfills.js:3040 Unhandled Promise rejection: Error Status 404: App not found ; Zone: <root> ; Task: Promise.then ; Value: Error: Error Status 404: App not found
    at IonicDeployImpl.<anonymous> (/plugins/cordova-plugin-ionic/dist/common.js:291)
    at step (/plugins/cordova-plugin-ionic/dist/common.js:37)
    at Object.next (/plugins/cordova-plugin-ionic/dist/common.js:18)
    at fulfilled (/plugins/cordova-plugin-ionic/dist/common.js:9)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.js:2749)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (polyfills.js:2508)
    at polyfills.js:3247
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2781)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:2553)
    at drainMicroTaskQueue (polyfills.js:2959) Error: Error Status 404: App not found
    at IonicDeployImpl.<anonymous> (http://localhost/plugins/cordova-plugin-ionic/dist/common.js:291:35)
    at step (http://localhost/plugins/cordova-plugin-ionic/dist/common.js:37:23)
    at Object.next (http://localhost/plugins/cordova-plugin-ionic/dist/common.js:18:53)
    at fulfilled (http://localhost/plugins/cordova-plugin-ionic/dist/common.js:9:58)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost/polyfills.js:2749:26)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost/polyfills.js:2508:43)
    at http://localhost/polyfills.js:3247:34
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost/polyfills.js:2781:31)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost/polyfills.js:2553:47)
    at drainMicroTaskQueue (http://localhost/polyfills.js:2959:35)
api.onUnhandledError @ polyfills.js:3040

Here is my app.component code:

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      if (!firebase.apps.length) {
        firebase.initializeApp(firebaseConfig);
        const unsubscribe = firebase.auth().onAuthStateChanged( user => {
          if (!user) {
              this.router.navigateByUrl('login');
            // unsubscribe();
           }  else {
              this.router.navigateByUrl('tabs/itinerary-feed');
            // unsubscribe();
          }
        });
      }
    });
  }```

I've tried removing my node_modules and plugin folders and running
npm install @ionic/app-scripts@latest --save-dev to no avail.

I've read in some forums it may be a ngZone issue but doesn't provide any resolutions.  Any help would be greatly appreciated.

Posts: 1

Participants: 1

Read full topic

@lingot wrote:

Hi ! i want to make login befor to enter in my app using API

Posts: 1

Participants: 1

Read full topic

@blandich wrote:

Hello,

So i’m well aware of HttpClient as a module to send request to a REST API server. The thing is I have developed a REST API in Php and have it hosted in my bought web server. Whenever I send a get request from postman/browser, I get the desired response. However, when I try to send a get request from my ionic app. I’m faced with Http 406 error.

Can somebody try and send a request to this url: ‘http://pdcatapi.usc-dcis.com/hcf/read_one.php?hcfId=5’ ?

If you’re successful, kindly teach me how to do so as I’ve had this problem for 1 week now. And I am stuck.

Here are the screenshots of my codes:

Ionic-Angular-

Ionic-Angular671×610 52.7 KB

PHP REST API

PHP REST API1920×1080 83.4 KB

Desired response is {“id”:“5”,“name”:“Gullas Memorial Hospital”,“type”:null} of JSON type.

Thanks!

Posts: 1

Participants: 1

Read full topic