@ciekawy wrote:

Hey there!

while preparing to upgrade to ionic 4 I got surprised seeing mock-providers are gone in @ionic/angular (starting from most basic MockPlatform. While reading that upgrading to 4 should be seamless start to wonder if I am missing something? as was unable to google anything related to mocks and Ionic 4…

Posts: 1

Participants: 1

Read full topic

@brune83 wrote:

Hi everybody!
Can you please tell me how to upgrade my app from v4.0.0 to v4.0.1?
Thank you very much!

Posts: 2

Participants: 2

Read full topic

@javiersoto1797 wrote:

Hey guys, i need to create two applications that are connected to each other. One is mobile and the other one is web only, the idea is that the administrator app can move and manage data that then the users will see in their client app. So they need to share the same database(Firebase)
Is there any way that i can do it on Ionic? and if is there any good guide or blog for it. Thanks

Posts: 2

Participants: 2

Read full topic

@wiloooo wrote:

Hello, I have a problem that I can not solve. My v4 ionic application works great with ngx.socket.io locally and on my device.
Nevertheless, after having built --prod - on the connection is blocked, I can not even debug and know why I’m here all there is to do … How to do?

I connect to an external node.js server to my application, I do not see why I connect to an external node.js server to my application, I do not see why with “run android” it works and after the build everything is blocked

thank you for your help
(sorry for my english i’m french =))

Posts: 1

Participants: 1

Read full topic

@phongbn96 wrote:

i am using geolocation to get GPS curent but it not working in android . It run very good in IOS and windown

Posts: 8

Participants: 2

Read full topic

@Mr-Peanutbutter wrote:

I keep getting an error when i try to use some of the components in ionic 4. and a few others cause the error. Whats wrong? is there something I’m missing?

Posts: 1

Participants: 1

Read full topic

@jachno wrote:

I originally posted this on stackoverflow, forgot to check if there was an ionic forum.

I am creating a mobile application using vuejs and ionic capacitor. I am not able to use v-model to bind to ION components it looks like I am able to use regular HTML components such as input and button

<ion-input type="text" :value="email" @input="email = $event.target.value" placeholder="Username"></ion-input>

vs

  <input type="text" v-model ="username" placeholder="Username"></ion-input>

Apart from having to craft the styling myself, is there any other downside I am missing. The app appears to run fine on native ios and Android devices.

Posts: 1

Participants: 1

Read full topic

@hpjalbuna wrote:

The user is supposed to look for available parking spaces by filling out some information, and then they must click a button to invoke a function. Afterwards, the results are stored inside an array and should be displayed in ion-cards. I want all of these to occur within the same page, but I don’t know how to load the ion-cards after the array has been populated.

My code below:
reserve.html

<ion-content padding>
  <ion-list>  
    <ion-item>
      <ion-label>Start Time: </ion-label> <ion-datetime [(ngModel)]="reservation.start" pickerFormat="hh:mm A"></ion-datetime>
    </ion-item>
    <ion-item>
      <ion-label>End Time: </ion-label> <ion-datetime [(ngModel)]="reservation.end" pickerFormat="hh:mm A"></ion-datetime>
    </ion-item>
    <ion-item>
      <ion-label>Nearest to: </ion-label>
      <ion-select [(ngModel)]="category" multiple="False">
        <ion-option *ngFor="let cat of categories" value="{{cat}}">{{ cat }}</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>
 
  <button ion-button (click)="findSpace(category, start, end)">Find a space</button>

  <ion-card *ngFor="let space of spaces">
    <ion-card-header>
      <ion-title>{{space}}</ion-title>
    </ion-card-header>
    <ion-card-content>
        <button ion-button clear right color="default" (click)="reserveSpace()" ngDefaultControl>Select space</button>
      </ion-card-content>
  </ion-card>
</ion-content>

reserve.ts

findSpace(category: string, start: string, end: string){
    console.log("in");
    var spaces = new Array();
    const spaceRef: firebase.database.Reference = this.afDatabase.database.ref(`spaces`);
    const reservationRef: firebase.database.Reference = this.afDatabase.database.ref(`reservations`);
    var startTime = moment(start, 'hh:mm');
    var endTime = moment(end, 'hh:mm');

    var promise = new Promise((resolve, reject) => {
      this.afDatabase.database.ref(`categories/${category}`).orderByValue().on('value', function(snapshot){
        snapshot.forEach(function(data){
          if(data.val() === true){
            reservationRef.child(data.key).orderByKey().on('value',function(snapshot){
              // console.log("we here");
              snapshot.forEach(function(childSnapshot){
                var bookingData = childSnapshot.val();
                if(!startTime.isBefore(bookingData.start, bookingData.end)){
                  spaces.push(snapshot.key);                
                  resolve();
                }
              });
            });
          }
        });
      });
    });

    return promise;
    
  }

I am still quite new to this so suggestions are welcome.

Posts: 1

Participants: 1

Read full topic

@darrenM96 wrote:

I have been creating a simple ionic app, using firebase as my login and database. i have been following this video https://www.youtube.com/watch?v=uESqBwFVf1Q . Once I get to the end I have no errors happening but my database doesntstore the information the way his does. I think I missed something simple in setting up the database but im not sure what?

HTML file:

<!--
  Generated template for the ProfilePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Profile</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>


<ion-item>
<ion-label floating>UserName</ion-label>
<ion-input> [(ngModel)]="profile.username"</ion-input>
</ion-item>


<ion-item>
<ion-label floating>First Name</ion-label>
<ion-input> [(ngModel)]="profile.firstname"</ion-input>
</ion-item>

<ion-item>
<ion-label floating>Last Name</ion-label>
<ion-input> [(ngModel)]="profile.lastname"</ion-input>
</ion-item>

<button ion-button clear block (click)="createProfile()">Create Profile</button>
</ion-content>

TS file:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HomePage } from '../home/home';
import { AngularFireAuth } from "angularfire2/auth";
import { AngularFireDatabase } from "angularfire2/database"; 
import { Profile } from '../../models/profile';
/**
 * Generated class for the ProfilePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html',
})
export class ProfilePage {

profile = {} as Profile;
  constructor(private  afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase, public navCtrl: NavController, public navParams: NavParams) {
  }

//check `` and ''
createProfile(){
	this.afAuth.authState.take(1).subscribe(auth=> {
		this.afDatabase.object(`profile/${auth.uid}`).set(this.profile) 
	 	.then(() => this.navCtrl.setRoot(HomePage));
	})
}

  ionViewDidLoad() {
    console.log('ionViewDidLoad ProfilePage');
  }

}

Any ideas what I could do to solve this issue?

Posts: 1

Participants: 1

Read full topic

@conexcol wrote:

I have an Ionic4 + capacitor (just for camera in PWA) and after I build it for production, it won’t work on Firefox. It does work fine on the rest of the browsers.

In order to make the camera work in a browser, I had to use capacitor and include: " <script src=“https://unpkg.com/@ionic/pwa-elements@1.0.0/dist/ionicpwaelements.js”></script> " in the index.html

1. Ionic4 app
2. Make capacitor available (npx cap init)
3. Include the ionicpwaelements.js in the index.html
4. ion build --prod
5. Upload it
6. Open in the browser… it works in Chrome and Safari, won’t work in Firefox.

The error Firefox throws:

This Stencil app is disabled for this browser.

Developers:

• ES5 builds are disabled during development to take advantage of 2x faster build times.
• Please see the example below or our config docs if you would like to develop on a browser that does not fully support ES2017 and custom elements.
• Note that by default, ES5 builds and polyfills are enabled during production builds.
• When testing browsers it is recommended to always test in production mode, and ES5 builds should always be enabled during production builds.
• This is only an experiement and if it slows down app development then we will revert this and enable ES5 builds during dev.

Enabling ES5 builds during development:

npm run dev --es5

For stencil-component-starter, use:

npm start --es5

Enabling full production builds during development:

npm run dev --prod

For stencil-component-starter, use:

npm start --prod

Current Browser’s Support:

• ES Module Imports: true
• ES Dynamic Imports: false
• Custom Elements: true
• Shadow DOM: true
• fetch: true
• CSS Variables: true

Current Browser:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:65.0) Gecko/20100101 Firefox/65.0

---

Posts: 1

Participants: 1

Read full topic

@crazydeveloper wrote:

Hey guys am developing a multi dir application i have an issue to change side menu direction without refreshing app:

this is my app.html:

<ion-menu [content]="content" type="overlay" [attr.side]="dir==='ltr'?'left':'right'">
    <ion-header>
        <ion-toolbar>
        <ion-title>Menu</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <button ion-item>
                Home
            </button>
            <button ion-item>
                Friends
            </button>
            <button ion-item>
                Events
            </button>
            <button ion-item>
                Close Menu
            </button>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content></ion-nav>

and this is my app.components.ts

dir: string;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, translate: TranslateService, storage: Storage, multi: MultilangProvider) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
      storage.get('dir').then((val) => {
        multi.currentDirection();//i call this provider method to get dir //equivalent to platform.get..
        setTimeout(()=>{
          this.dir = multi.currentdir; //dir (rtl or ltr)
        },100)
      });
      
    });
  }

it works but i have to refresh app to load new direction from storage. i’ve tried to access platform.dir() from html but it give undefined. Help please.

*i dont want to use two side menus for each language i want to reuse the same.

Posts: 1

Participants: 1

Read full topic

@Indigolab wrote:

Hello guys, i have a problem when the position of an input changes after an animation, the caret cursor is not in the correct position as the image shows:

Captura de pantalla 2019-02-12 a la(s) 4.33.44 a. m..png445×795 114 KB

Iit is as if it stays stuck and after doing another action within the app corrects its position and is placed in the right place, its a really weird behavior, i tried to hide it with CSS but it does not work, it stays stuck in its initial position and the CSS classes seem not to affect it. I don’t know what else to do, please help me. This only happen on IOS.

My 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.1.2
Cordova Platforms  : android 7.0.0 ios 4.5.5
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
ios-deploy        : 1.9.1 
ios-sim           : 5.0.8 
Node              : v9.2.1
npm               : 6.1.0 
OS                : macOS
Xcode             : Xcode 10.1 Build version 10B61 

Environment Variables:

ANDROID_HOME : /Users/my-user-name/Library/Android/sdk

Misc:

backend : legacy

Posts: 1

Participants: 1

Read full topic

@zabka229 wrote:

Hello, recently I am trying new Ionic 4 combined with react framework.
I have a simple problem. I can’t customize ion-slides with my options.

Code is simple as that:

class Project extends Component {

    constructor() {
        super();
        this.options = {
            speed: 400,
            spaceBetween: 100,
            effect: 'fade'
        }
    }

    render() {
        return (
            <ion-slides options={this.options}>
                <ion-slide>
                    <img src={slide} />
                </ion-slide>
                <ion-slide>
                    <h1>Slide 2</h1>
                </ion-slide>
                <ion-slide>
                    <h1>Slide 3</h1>
                </ion-slide>
            </ion-slides>
        );
    }
}

It just ignores every option property and show basic slides.

Posts: 1

Participants: 1

Read full topic

@rbender wrote:

We’re using Ionic v4 in our Angular app and wanting to integrate Google Analytics. I am confused on which is the best Google product to use, specifically between Google Analytics and Firebase. Since the app is web based, I’m not sure if I should create a normal site tracking in GA or a “mobile app.” Then once I have the Google part set up, do I use normal tracking code in my app or use a plugin like google-analytics-plugin?

If I should create a mobile app, it looks like I need to set up Firebase for the app. Does anyone have recommendations on the steps to do this? I’m not sure where I would get the tracking IDs, and if I need to create separate Firebase apps for different platforms?

I’d appreciate any help. Thanks!

Posts: 1

Participants: 1

Read full topic

@victor10acp wrote:

Image.jpg750×1334 171 KB

Posts: 1

Participants: 1

Read full topic

@sqr08 wrote:

all my other svgs are appearing, and i’m sure i got the path right because command clicking it takes me to the right svg.

here’s the code for the tabs:

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button class="tab" tab="tab1">
      <ion-icon src="../../assets/bottom_nav_icons/menu_icon.svg"></ion-icon>
      <ion-label>{{ 'MENU' | translate }}</ion-label>
    </ion-tab-button>

    <ion-tab-button class="tab" tab="tab2">
        <ion-icon src="../../assets/bottom_nav_icons/policies_icon.svg"></ion-icon>
      <ion-label>{{ 'POLICIES' | translate }}</ion-label>
    </ion-tab-button>

    <ion-tab-button class="tab" tab="tab3">
        <ion-icon src="../../assets/bottom_nav_icons/investments_icon.svg"></ion-icon>
      <ion-label>{{ 'INVESTMENTS' | translate }}</ion-label>
    </ion-tab-button>

    <ion-tab-button class="tab" tab="tab4">
        <ion-icon src="../../assets/bottom_nav_icons/liabilityslip_icon.svg"></ion-icon>
      <ion-label>{{ 'LIABILITY_SLIP' | translate }}</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

here’s the menu_icon.svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
    <title>menu_icon</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M4,8 L8,8 L8,4 L4,4 L4,8 L4,8 Z M10,20 L14,20 L14,16 L10,16 L10,20 L10,20 Z M4,20 L8,20 L8,16 L4,16 L4,20 L4,20 Z M4,14 L8,14 L8,10 L4,10 L4,14 L4,14 Z M10,14 L14,14 L14,10 L10,10 L10,14 L10,14 Z M16,4 L16,8 L20,8 L20,4 L16,4 L16,4 Z M10,8 L14,8 L14,4 L10,4 L10,8 L10,8 Z M16,14 L20,14 L20,10 L16,10 L16,14 L16,14 Z M16,20 L20,20 L20,16 L16,16 L16,20 L16,20 Z" id="path-1"></path>
        <rect id="path-3" x="0" y="0" width="50" height="50"></rect>
    </defs>
    <g id="menu_icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <mask id="mask-2" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
        <g id="Mask"></g>
        <g id="Colors/Grey" mask="url(#mask-2)">
            <g transform="translate(-13.000000, -13.000000)">
                <mask id="mask-4" fill="white">
                    <use xlink:href="#path-3"></use>
                </mask>
                <use id="Grey" stroke="none" fill="#58595B" fill-rule="evenodd" xlink:href="#path-3"></use>
            </g>
        </g>
    </g>
</svg>

thanks

Posts: 1

Participants: 1

Read full topic

@mosesmatt wrote:

I am working on a project for web only at this time and having an issue with login / password reset if the email field autofilled by chrome.

Using with firebase I couldn’t understand why it sometimes was rejecting my email addresses as malformed.

Current work around giving the input an id and getting the value directly

let emailEl = document.getElementById(‘ngEma’);
console.log(emailEl.value)
this.ema = emailEl.value;

Posts: 1

Participants: 1

Read full topic

@helpmelearn wrote:

Not really sure what is causing this. I try to build a dev android version

ionic cordova build android

I’m getting this error.

FAILURE:
Build failed with an exception.

• What went wrong:

A problem occurred configuring root project ‘android’.

Could not find common.jar (android.arch.lifecycle:common:1.1.0).

Searched in the following locations:

  https://jcenter.bintray.com/android/arch/lifecycle/common/1.1.0/common-1.1.0.jar

The only thing I have tried it remove android and add android back (Android 6.3.0).

I try to go to that website and the path doesn’t work.

Posts: 1

Participants: 1

Read full topic

@mccumb01 wrote:

This is a weird one to reproduce, so I’m just asking for any insights to help troubleshoot …

My Ionic 3 app uses the (old) http module in a service to POST user login credentials to a server & get back the User’s profile info. It’s a poor-man “log in” to the app as the current user (no tokens or cookies involved - all I really need is to confirm their username exists on the server).

All works great on iOS, web browser, and it works perfectly AT FIRST on Android. BUT, once the user logs out all subsequent login attempts on Android fail. They still work fine on iOS & web. WHY?

The only fix is to completely uninstall & reinstall the app. Installing an updated version does not fix it. This would make some sense if the POST request was somehow relying on localStorage data tied to the user, but it’s not - it ONLY sends the username/pw from the login form, and creates the exact same request as the one that works the 1st time.

Subsequent POSTs result in a 200-OK response, but now with a null body instead of the expected user profile object it gets just fine the first time. There are also a few more ‘headers’, and content-type text/html instead of application/json like the first time.

What could be allowing, then blocking subsequent HTTP requests only on Android?
Could it be setting/caching some token/cookie I’m not aware of or not intending to use?
If it’s a server-side issue, why would the server allow Android the first time plus as many as I want from iOS and browsers? Doesn’t make sense.

Any ideas why this would work fine once & then fail afterward only on Android?
Thanks!

Posts: 1

Participants: 1

Read full topic

@jfsoftwarellc wrote:

So how do I use a modal non-asynchronously. You know, like how a normal person would use it? I can’t even wrap my head around why you would want a data capture modal to behave asynchronously.

So here’s what I’m trying to do:

async presentModal() {
        const modal = await this.modalController.create({
            component: NameComponent,
            componentProps: { value: 123 }
        });
        await modal.present();
        await modal.onDidDismiss();
    }

    public respond(response: Response) {
        this.parse(response.text);
        ...

I want to get the return from the modal before proceeding with processing of respond(). I even tried making respond itself async and doing await this.parse(response.text) but it didn’t bother to ‘await’ the call to parse and just kept going

Posts: 2

Participants: 2

Read full topic