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

Upgrade path from Ionic 3 -> 5?

$
0
0

@invisiblesandwichtm wrote:

I have a legacy Ionic 3 app that I’m planning to update to the latest version of Ionic (which I expect to be a labor intensive project, going by the Ionic 3 -> 4 migration instructions). The recent release of Ionic 5 adds some extra complexity. Should I attempt to update the project directly from Ionic 3 to Ionic 5, or stick with upgrading to Ionic 4 and investigate upgrading to Ionic 5 afterwards separately?

While I think this is more of a best practices question, some data about my system follows:
Ionic:
Ionic CLI : 5.4.14
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.4

System:
NodeJS : v12.8.1 global, v8.16.0 in project directory (using avn-nvm for switching)
npm : 6.4.1
OS : Ubuntu LTS 18.04.3

Posts: 1

Participants: 1

Read full topic


Npm ERR! Unexpected end of JSON input while parsing near '..."console-group":"^0.3

$
0
0

@abdulbasitchippa wrote:

i am having this error on ionic start appname tabs

npm.cmd i
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended
for usage due to the number of issues. Please, upgrade your dependencies to the actual ve
rsion of core-js@3.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/re
quest/request/issues/3142
npm ERR! Unexpected end of JSON input while parsing near ‘…“console-group”:"^0.3’

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ABDULBASIT CHIPPA\AppData\Roaming\npm-cache_logs\2020-03-12T15_27_2
1_179Z-debug.log
[ERROR] An error occurred while running subprocess npm.

    npm.cmd i exited with exit code 1.

Posts: 1

Participants: 1

Read full topic

Ionic stencil is slower?

$
0
0

@aabbcc1241 wrote:

I moved from ionic 3 (with angular 5) to ionic 4 (using stencil, without angular).
The app size is smaller for stencil webapp, but it load/render much slower than the old webapp.

To be more impressive, ionic 3 angular webapp loads within 1 second, ionic 4 stencil webapp loads more than 6 seconds.

I guess the old angular webapp is faster because it bundle all the pages, so less http requests for the first screen and when switch pages?
Stencil webapp (which is web component) seems to load each component in separate (e.g. ion-button, ion-chip, e.t.c.).

Also, on stencil webapp, the rendering is very slow when it’s first time display a long list. I had to use workaround like congest the data (e.g. insert into array 3 by 3 instead of pushing all items in once) but I don’t have to do so in ionic 3 (angular) app.

Posts: 2

Participants: 1

Read full topic

Error in app.component.ts -- Has no exported member 'Parse'

$
0
0

@benetj wrote:

Hello,
I’m trying to use Parse into my Ionic project.
When I tried to import parse in app.component.ts I’ve got an error:

Module ‘"…/…/node_modules/@types/parse/ts3.7"’ has no exported member ‘Parse’

Anyone have expreience using Parse-platform in ionic??

Here my Ionic info

Ionic:

Ionic CLI : 6.2.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.0.5
@angular-devkit/build-angular : 0.900.6
@angular-devkit/schematics : 9.0.6
@angular/cli : 9.0.6
@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 6 other plugins)

Utility:

cordova-res (update available: 0.10.0) : 0.8.1
native-run (update available: 0.3.0) : 0.2.9

System:

Android SDK Tools : 26.1.1 (/home/benetj/Android/Sdk)
NodeJS : v10.16.3 (/usr/local/bin/node)
npm : 6.14.2
OS : Linux 4.15

Posts: 1

Participants: 1

Read full topic

Tabs with nested sub pages

$
0
0

@abdosaeed wrote:

next is my tabs routes

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'explore',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../pages/explore/explore.module').then(m => m.ExplorePageModule)
          }
        ]
      },
      {
        path: 'browse',
        component:BrowsePage,
        children: [
                {
                  path: 'companies',
                  loadChildren: () =>
                    import('../pages/companies/companies.module').then(m => m.CompaniesPageModule)
                }
        ]
      },
      {
        path: 'profile',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../pages/profile/profile.module').then(m => m.ProfilePageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/explore',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/explore',
    pathMatch: 'full'
  }
];

i want to make sub page in browse tab called companies

when navigating /tabs/browse i want to open browse page
when navigating /tabs/browse/companies i want to open companies page

Posts: 1

Participants: 1

Read full topic

Resize image when scroll

$
0
0

@sehsah2020 wrote:

hi,

i used ionic 4, i need resize image in top when i scroll
image height is very large i need resize it when user scroll

Posts: 1

Participants: 1

Read full topic

Show IMG in img tag

$
0
0

@franciscocab wrote:

Hello, how can I display an image in an tag when the path of my image is in this format: file///data/user. Any suggestion?

Posts: 1

Participants: 1

Read full topic

Ion-alert-controller

$
0
0

@AlbaVE wrote:

Hi!
I am using Ionic 6.2.1 and I was trying to follow this Ionic tutorial but when I try to create the alarm-controller (1:54:00 in the YT video) I get this error

Uncaught TypeError: alertCtrl.create is not a function
at HTMLElement.

This is my index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Budget Planner</title>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
</head>
<body>
    <ion-app>
        <ion-header>
            <ion-toolbar color="primary">
                <ion-title>Budget planner</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-grid>
                <ion-row>
                    <ion-col size-md="6" offset-md="3"> 
                        <ion-card>
                            <ion-card-header>
                                <ion-card-title>New expense</ion-card-title>
                            </ion-card-header>
                            <ion-card-content>
                                <ion-item>
                                <ion-label position="floating">Expense Reason</ion-label>
                                <ion-input type="text" id="input-reason"></ion-input>
                                </ion-item>
                                <ion-item>
                                    <ion-label position="floating">Expense Amount</ion-label>
                                    <ion-input type="number" id="input-amount"></ion-input>
                                </ion-item>
                                <div margin-vertical class="ion-text-right ion-margin-vertical">
                                    <ion-button fill="outline" color="danger" id="btn-cancel">
                                        <ion-icon slot="start" name="close"></ion-icon>
                                        Clear
                                    </ion-button>
                                    <ion-button id="btn-confirm">
                                        <ion-icon slot="start" name="add-outline"></ion-icon>
                                        Add Expense
                                    </ion-button>
                                </div>
                            </ion-card-content>
                        </ion-card>
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col size-md="6" offset-md="3"> 
                        <ion-list id="expenses-list"></ion-list>
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col size-md="6" offset-md="3"> 
                        <p class="ion-margin">Total Expenses: <span id="total-expenses"></span></p>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </ion-content>
        <ion-alert-controller></ion-alert-controller>
    </ion-app>
    <script src="app.js"></script>
</body>
</html>

And the app.js

const reasonInput = document.querySelector('#input-reason');

const amountInput = document.querySelector('#input-amount');

const cancelBtn = document.querySelector('#btn-cancel');

const confirmBtn = document.querySelector('#btn-confirm');

const expensesList = document.querySelector('#expenses-list');

const totalExpensesOutput = document.querySelector('#total-expenses');

const alertCtrl = document.querySelector('ion-alert-controller');

let totalExpenses = 0;

const clear = () => {

    reasonInput.value = '';

    amountInput.value = '';

}

confirmBtn.addEventListener('click', () => {

    const enteredReason = reasonInput.value;

    const enteredAmount = amountInput.value;

    if (

        enteredReason.trim().length <= 0 || 

        enteredAmount <= 0 || 

        enteredAmount.trim().length <= 0

    ) {

        alertCtrl.create({

            message: 'Please enter valid reason and amount!', 

            header: 'Invalid inputs',

            buttons: ['Okay']

        }).then(alertElement => {

            alertElement.present();

        });

        return;

    }

    const newItem = document.createElement('ion-item');

    newItem.textContent = enteredReason + ': $' + enteredAmount;

    expensesList.appendChild(newItem);

    totalExpenses += +enteredAmount;

    totalExpensesOutput.textContent = totalExpenses;

    clear();

});

cancelBtn.addEventListener('click', clear);

Posts: 1

Participants: 1

Read full topic


Tabs navigation with nested pages

$
0
0

@ehboym wrote:

Hi,

Tying to build an APP with tabs and nested pages at each tab.
I started with a "ionic start tabs --type=ionic-angular witch created a tabs APP but now I am tying to understand who to add sub-pages to each tab and navigate between the pages.

All the tutorials I have seen mention a file called " app-routing.module.ts" which does not exist in the file structure created by Ionic. and once I create that file these tutorials have inside that file an import of ‘@angular/router’ which renders an error saying that that module can not be found.

Do you know of a GOOD current tutorial which can explain who tab navigation in Ionic works and who to implement it ?

Any help will be appreciated

Erez


windows
ionic -v == 6.2.0
node --version == 12.16.1
cordova -v == 9.0.0 (cordova-lib@9.0.1)
ng --version == @angular-devkit/architect 0.900.5 (cli-only)
@angular-devkit/build-optimizer 0.0.35
@angular-devkit/core 9.0.5 (cli-only)
@angular-devkit/schematics 9.0.5 (cli-only)
@schematics/angular 9.0.5 (cli-only)
@schematics/update 0.900.5 (cli-only)
rxjs 5.5.11
typescript 2.6.2
webpack 3.12.0

Posts: 1

Participants: 1

Read full topic

Ionic cli 6.2.1 with problems

$
0
0

@RaulGM wrote:

I just updated the ionic cli and somehow the localhost is not reloading when I save specific files and my vscode is not showing the errors. In order to debug my code I need to reset the whole ionic serve.

This is my ionic info:

Ionic:

Ionic CLI                     : 6.2.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework               : @ionic/angular 4.11.5
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics    : 8.3.25
@angular/cli                  : 8.3.25
@ionic/angular-toolkit        : 2.1.1


Utility:

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

System:

NodeJS : v11.10.1 (/usr/local/bin/node)
npm    : 6.13.2
OS     : macOS Catalina

I don’t know what might be happening, but it’s driving me crazy. Any ideas?

Posts: 2

Participants: 1

Read full topic

Change behavior of resource fetching with plugin (Capacitor or Cordova)

$
0
0

@mhill wrote:

Is it possible to change the behavior of how ionic fetches content using a plugin? For example, lets say I have an iframe with an src tag that contains a url type that ionic doesn’t understand. Is it possible to route that through a plugin that knows how to handle it?

Posts: 1

Participants: 1

Read full topic

What is the difference between ionic and cordova plugins?

$
0
0

@ahmadtawfik10 wrote:

Hi, I was wondering what is the difference between an ionic installation of plugin and cordova’s.

In ionic’s docs it stated as:
-ionic cordova plugin add cordova-plugin-camera
-npm install @ionic-native/camera

But in cordova it’s like:

  • cordova plugin add cordova-plugin-camera

-Why do i have to prepend the cordova command with ‘ionic’ keyword?
-Why do i have to download @ionic-native/camera from npm?

Posts: 2

Participants: 2

Read full topic

React does not rerender state change update at geolocation plugin

$
0
0

@avkonst wrote:

I am testing @mauron85/cordova-plugin-background-geolocation plugin with react. Location update events fired by this plugin update the state variable from React.useState hook and the state is rendered to the screen. I noticed it stops rerendering location data on the screen until I touch it again. It does not happen in the emulator, but happens on my mobile phone. Screen updates are stopped about 10-20 seconds before the screen goes to sleep mode. Here is the simple component code reproducing the problem:

import React from 'react'
import { isPlatform } from '@ionic/react';

import { BackgroundGeolocation, BackgroundGeolocationEvents, BackgroundGeolocationResponse, BackgroundGeolocationLocationProvider } from '@ionic-native/background-geolocation';

export const LocationTracker = () => {
    const [location, setLocation] = React.useState<BackgroundGeolocationResponse[]>([])
    React.useEffect(() => {
        if (!isPlatform('hybrid')) {
            return () => {}
        }
        
        BackgroundGeolocation.configure({
            locationProvider: BackgroundGeolocationLocationProvider.RAW_PROVIDER,
            // desiredAccuracy: 0, //BackgroundGeolocationAccuracy.HIGH,
            stationaryRadius: 50,
            distanceFilter: 10,
            notificationTitle: 'Background tracking',
            notificationText: 'enabled',
            debug: true,
            interval: 10000,
            fastestInterval: 500,
            activitiesInterval: 60000,
        })

        BackgroundGeolocation.on(BackgroundGeolocationEvents.location).subscribe(
            (location: BackgroundGeolocationResponse) => {
                console.log(location)
                setLocation(p => [location])
                BackgroundGeolocation.finish(); // FOR IOS ONLY, IMPORTANT!
            });

        BackgroundGeolocation.start();
        
        return () => {
            BackgroundGeolocation.removeAllListeners();
            BackgroundGeolocation.stop();
        }
    }, [])
    
    return (<>{
        location.map(l => <p key={l.id}>{new Date(l.time).toString()}: {l.speed}, {l.latitude}, {l.longitude}, {l.accuracy}</p>)
    }</>);
}

What am I missing? Should I do something else to keep the screen up to date with the state data?

Posts: 1

Participants: 1

Read full topic

Center SplitPane with Menu for Desktop

$
0
0

@smeeuwsen wrote:

I’m trying to create a unified mobile/desktop web UI. Is there a way to center and size appropriately a typical UI with a left hand menu and right hand ion-page element (in a split pane)? This works fine on mobile but the UI is WAY too big when stretched for the desktop, so I’d like to simply say something like: my UI is 1000px wide (200px for menu, 800px for main content) and then centered horizontally. Is there a reasonably simple way to do this? My CSS skills are very basic and I’ve been striking out so far. Thanks…

Posts: 1

Participants: 1

Read full topic

Updating Variable in Component not updating UI in HammerJS Function

$
0
0

@tylerpashigian wrote:

I am making a music player app in Ionic V3 with a player component that slides up from any parent view that includes the component in the template. I am passing the time position/song title from the parent as an @Input and that is working fine.

The problem is that I have a “timeline” which includes a position bar and a pin that represents the current position. I am trying to update the time of the song on the UI when I drag the pin in the player, but the time won’t update on the UI from within a HammerJS function (this is how I am handling the drag event to move the pin).

I added a sample button in the child component to see if updating the UI from outside of the HammerJS function would work, and that updates fine (changes the time string to ‘Hello inside updatePos function`’). I’ve also tried utilizing NgZone in the HammerJS function and that didn’t work.

Parent Page Component Reference

<page-player [activeSongName]="activeSongName" [(trackPlayerPosition)]="trackPosition"  (playPause)="togglePlaybackParent($event)"></page-player>

Child Component (Music Player)

<div ion-fixed id="myElement">
    <p>{{ activeSongName }}</p>

    <!-- Dummy button to test updating position outside of HammerJS -->
    <button (click)="updatePos()">Update Position</button>

    <div class="musicControls">
      <ion-icon size="medium" name="shuffle-outline"></ion-icon>
      <ion-icon size="medium" name="skip-backward-outline"></ion-icon>
      <ion-icon size="medium" *ngIf="isPlayingTrack" name="play-outline" (click)="togglePlayback(!isPlayingTrack)"></ion-icon>
      <ion-icon size="medium" *ngIf="!isPlayingTrack" name="pause-outline" (click)="togglePlayback(!isPlayingTrack)"></ion-icon>
      <ion-icon size="medium" name="skip-forward-outline"></ion-icon>
      <ion-icon size="medium" name="repeat-outline"></ion-icon>
    </div>

    <div class="holder">
      <div class="audio green-audio-player">
        <div class="controls">
          <p class="current-time">{{ trackPlayerPosition }}</p>
          <div class="slider" id="slider">
            <div class="progress">
              <div class="pin" id="pin"></div>
            </div>
          </div>
          <span class="total-time">{{ trackLength }}</span>
        </div>
      </div>

    </div>

  </div>

Child Component (Music Player) TypeScript

import { Component, EventEmitter, Input, Output, NgZone } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import Hammer from 'hammerjs';
import * as $ from 'jquery'

/**
 * Generated class for the PlayerPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-player',
  templateUrl: 'player.html',
})

export class PlayerPage {

  _trackPlayerPosition: string

  @Input()
  set trackPlayerPosition(position: string) {
    this._trackPlayerPosition = (position);
  }

  @Output() postitionEmitter = new EventEmitter<string>();

  get trackPlayerPosition(): string { return this._trackPlayerPosition; }

  height: any
  lastPosX = 0;
  isPinDragging: boolean = false
  sliderLeftBound: number
  sliderRightBound: number

  trackPosition: string = "0:00"


  trackLength: string = "3:21"

  trackLengthNum: number = 3.35

  constructor(public zone: NgZone, public platform: Platform) {
    this.platform.ready().then(() => {
      this.height = this.platform.height()
    })
  }

  ionViewDidLoad() {
    var pin = document.getElementById('pin');
    var slider = document.getElementById('slider');

    this.sliderLeftBound = slider.offsetLeft;
    this.sliderRightBound = slider.offsetWidth + slider.offsetLeft;

    if (pin != null) {
      var hammerPin = new Hammer(pin);

      hammerPin.add( new Hammer.Pan({ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 0 }))
      hammerPin.on("pan", this.pinDrag.bind(this), this.pinDrag)
    } else {
      console.log("Error getting pin")
    }
  }

  emitPosition(position: string) {
    console.log("Emitting position: " + position)
    this.postitionEmitter.emit(position)
  }

  updatePos() {
    // This correctlty updates the time position stirng to "Hello"
    this.trackPlayerPosition = "Hello"
  }

  timeToString(time) {
    var minutes = Math.floor(time/1)
    var seconds = Math.floor((time%1)*60)

    // I have tried both inside and outside the zone
    this.zone.run(() => {
      console.log("Inside Zone")
      this.trackPosition = minutes + ":" + seconds
    })

    // failed attempt at emitting the position
    // this.postitionEmitter.emit(this.newTrackPosition);

    // Outputs the correct track position
    console.log("New Track Time: " + this.trackPosition)

  }

  pinDrag(ev) {

    var elem = ev.target;

    var sliderPosition = ev.center.x

    var relativePosition = sliderPosition / this.sliderRightBound

    // Outputs the correct position in the logs
    console.log("relativePosition: " + relativePosition * this.trackLengthNum)

    if (ev.center.x >= this.sliderLeftBound && ev.center.x <= this.sliderRightBound) {
      if ( ! this.isPinDragging ) {
        this.isPinDragging = true;
        this.lastPosX = elem.offsetLeft;
      }

      var posX = ev.deltaX + this.lastPosX;
      elem.style.left = posX + "px";

      if (ev.isFinal) {
        this.isPinDragging = false

        this.timeToString(relativePosition * this.trackLengthNum)
        // Outputs the correct position in the logs
        console.log("End drag pin: " + this.trackPosition)

        // Does NOT update the trackPosition on the UI
        this.trackPlayerPosition = this.trackPosition
      }
    }
  }

}

Posts: 1

Participants: 1

Read full topic


HTTPS not working in signed apk

$
0
0

@angelvantony wrote:

Not able to login in my ionic app signed apk
Debug apk - Both HTTP and HTTPS working fine
Signed apk - HTTP working fine, but HTTPS requests not working
Why?

Posts: 1

Participants: 1

Read full topic

Disable back button on some of the views in ionic 4

$
0
0

@devclub wrote:

Hi guys,

I want to disable the hardware back button on dashboard page. Back button need to work on remaining pages for navigation purpose except on dashboard page. If hardware back button was used on dashboard page it need to show close message and if again click on hardware back button then it needs to be closed.

I’ve used the below code in app.component.ts . It disabling hardware back button completely even in before/after login too.

I’m unable to get page name. Please give suggestons if any. Thanks in advance.

initializeApp() {
    this.platform.ready().then(() => {
      this.platform.backButton.subscribeWithPriority(9999, () => {
        document.addEventListener('backbutton', function (event) {
          event.preventDefault();
          event.stopPropagation();
          console.log('hello');
        }, false);
      });
      this.statusBar.styleDefault();
    });
  }

Posts: 1

Participants: 1

Read full topic

Add custom transitions to ionic 5 sidemenu starter

$
0
0

@ciekawy wrote:

I’ve created new app with ionic start --type angular ionic-5-sidemenu-starter sidemenu.

I wanted to customize extra animation to menu items and so I added to global.scss

ion-menu-toggle > ion-item {
    transform: translate3d(-50px, 0, 0);
}

.show-menu ion-menu-toggle > ion-item {
    transform: translate3d(0, 0, 0);
    transition-delay: .8s;
}

yet I see no effect even if I see the styles being applied.

Would appreciate any hints how to get this working.

My ultimate goal though is to use ionic 5 animation api to add/create extra animation effects - not sure if that is possible on top of regular css, or maybe there is animation api equivalent to be used and customized?

Posts: 1

Participants: 1

Read full topic

Two menus inside ion-split-pane (ionic4)

$
0
0

@inside wrote:

Is it possible to use two menus inside ion-split-pane and keep only one open , second menu is open/close only programmatically

Posts: 1

Participants: 1

Read full topic

Securing API requests to avoid data leaks if an app is reverse engineered

$
0
0

@mfacer wrote:

Hi - I believe the ionic apps can be reverse-engineered? If so, how have people got around securing API requests to their own webserver? We have an API where the app requests data - it’s available data on the website, so it’s not sensitive.

However, now we want to let people log in to the app using their website login. To do this, we can use the API - not a problem - but I’d have to store the API key in the app to make the request. If you then reverse-engineer the app, you could get the key and essentially use that to find out about every single member?

What have other people done to stop this? I don’t (ideally) want to use firebase or anything like that as we have the web server which can be used for these calls and storing data.

Thanks for any advice!

Posts: 1

Participants: 1

Read full topic

Viewing all 70429 articles
Browse latest View live


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