Ionic 3 super slow with firebase on device/emulator


#1

Hi,
Did anyone try using firebase with Ionic 3 and testing on a device or emulator? It’s taking forever to load…
I have angularfire ^2.0.0-beta.7-pre installed.
It’s weird because on browser it works good…

Any ideas? recommendation?

PS. This problem didn’t appear before I upgraded to Ionic3


Ionic View slow to load app after upgrade to Ionic 3
#2

Did you have any errors in your logs? Did you run with the --prod flag to make use of AOT compiling?


#3

Looks like a problem with your emulator. I also use firebase in many Ionic 3 projects and never had any perfirmancd problem.
Did you installed your app also on a real device?


#4

I have tried on 2 real devices and also on IOS simulator, and its exactly the same
What do you think could be the problem them?


#5

@luukschoen

When I try to run using --prod I get this error

Failed at the ionic-hello-world@ ionic:build script ‘ionic-app-scripts build “–prod”’.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-hello-world package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ionic-app-scripts build "–prod"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ionic-hello-world
npm ERR! Or if that isn’t available, you can get their info via:
npm ERR! npm owner ls ionic-hello-world
npm ERR! There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/innogarage/.npm/_logs/2017-04-20T14_26_56_712Z-debug.log

npm -v: 4.5.0
node -v: v6.9.4
I have recent versions of npm & nodejs


#6

What exactly is taking “forever to load”? Parts of your app? App startup? Firebase actions?
Please post the output of ionic info.


#7

No you don’t. Your npm is way ahead of your Node. You should def upgrade to at least the most recent LTS.


#8

@Sujan12 Thanks for your reply

This video shows what I mean, showing the difference between running the same code on normal browser and device/emulater to read simple data
Edit: The data retrieved from Firebase is the picture and name on the top of the screen

https://youtu.be/qc3vxchD-Es

Output from Ionic info

Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.4
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.2.1 Build version 8C1002

Package.json

“dependencies”: {
"@angular/common": “4.0.2”,
"@angular/compiler": “4.0.2”,
"@angular/compiler-cli": “4.0.2”,
"@angular/core": “4.0.2”,
"@angular/forms": “4.0.2”,
"@angular/http": “4.0.2”,
"@angular/platform-browser": “4.0.2”,
"@angular/platform-browser-dynamic": “4.0.2”,
"@ionic/storage": “2.0.1”,
“angularfire2”: “^2.0.0-beta.7-pre”,
“firebase”: “^3.8.0”,
“ionic-angular”: “3.0.1”,
“ionicons”: “3.0.0”,
“rxjs”: “5.3.0”,
“sw-toolbox”: “3.6.0”,
“zone.js”: “^0.8.4”},
“devDependencies”: {
"@ionic/app-scripts": “1.3.4”,
“typescript”: “~2.2.1”
}


#9

From a first look at the video browser takes ~5 seconds, emulator takes ~6 seconds. That’s not that big of a difference.


#10

@Sujan12 I mean for the data to load from firebase, not for the app to start
The name and picture that shows on the top are the data im getting from firebase, it takes like 1 minute to show


#11

@AaronSterling I have updated now to latest LTS v6.10.2 and still same error


#12

So somethings to check…

  • How/When is this data being loaded?
  • Simulators can be super slow and aren’t a reliable source for debugging some times.

Another note regarding the startup time… make sure you’re using the --prod flag when building and deploying. This will greatly improve startup time


#13

Ok, so we are not talking about startup time of the app but only about the small round image and text next to it that appears beneath the header and above the horizontal line over “Campus”. That’s also why the Youtube Video is so long :wink:

Did you test on a real device yet?
What code is used to load and display that text and image?


#14

@mhartington Thanks for your reply. I have broke down my app to a simple home page to figure out this issue.
The code related to this part is attached here
I have also used 2 real devices and IOS simulator to check and all had same issue. I also didn’t have this problem before upgrading to ionic3

uid="Q0x7Fk8kAEO41QeVuMuRnR5Buk73"

 ionViewDidLoad() {
    console.log('ionViewDidLoad WelcomePage');

     this.angularfire.database.object('/accounts/' + this.uid).subscribe(user=> {
       this.user=user;
       console.log(user)
      })
}
<ion-content  padding>
  
   <ion-item  class="welcome" (click)="editProfile()">
    <div *ngIf="user">
    <ion-row >
      <ion-col width-20> 
  <img class="user" src="{{user?.img}}"/>
  </ion-col >
  <ion-col width-67 class="name">
    <p> Welcome, {{user?.name}}</p>
  </ion-col>
  <ion-col width-10>
  </ion-col>
  </ion-row>
    </div>

    <ion-spinner name="circles" *ngIf="!user"></ion-spinner>
  </ion-item>

#15

@Sujan12 Yup exactly :wink:

I have attached the code in the previous comment and I have alternatively tried running on 2 other devices and iOS simulator and its exactly the same


#16

Try

this.user = this.angularfire.database.object('/accounts/' + this.uid);

and

[src] ="(user | async).img"


#17

@AaronSterling Thanks for your reply, but it did’t work…


#18

It’s still slow or you got an error?


#19

@AaronSterling this was the result of console.log(this.user)
FirebaseObjectObservable {_isScalar: false, $ref: U, source: FirebaseObjectObservable, operator: ObserveOnOperator}


#20

That looks correct. What’s the problem?