Ionic 3 - slow navigation after upgrading

Ionic Framework ionic-v3
1

I upgraded my application to work with ionic 3 and Angular 4 and after that each navigation on my application became really slow.

My code hasn’t changed. When I debugged it I saw the code is arriving at nav.push(SomePage), nothing happens for a second or so and then the page is pushed.

I didn’t add support for lazy-loading.

Helppp I don’t want to downgrade :frowning:

Update
Updated my package.json to the latest ionic 3.4.0 and it didn’t help.
Pleaseeee someone :sob::sob::sob::sob::sob:

2

First thing I would try is completely vaporizing node_modules and running npm i again.

4

Post you ionic info output please.
Also include you package.json content.

5

Here is my package.json:

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "^4.1.3",
    "@angular/common": "4.1.2",
    "@angular/compiler": "4.1.2",
    "@angular/compiler-cli": "4.1.2",
    "@angular/core": "4.1.2",
    "@angular/forms": "4.1.2",
    "@angular/http": "4.1.2",
    "@angular/platform-browser": "4.1.2",
    "@angular/platform-browser-dynamic": "4.1.2",
    "@ionic-native/barcode-scanner": "^3.12.1",
    "@ionic-native/camera": "^3.12.1",
    "@ionic-native/core": "3.10.2",
    "@ionic-native/device": "^3.12.1",
    "@ionic-native/globalization": "^3.12.1",
    "@ionic-native/splash-screen": "3.10.2",
    "@ionic-native/status-bar": "3.10.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "^3.1.1",
    "ionicons": "3.0.0",
    "moment": "^2.18.1",
    "numeral": "^2.0.6",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.6.0",
    "vanilla-masker": "^1.2.0",
    "zone.js": "0.8.11"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.7",
    "typescript": "2.3.3"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "cordova-plugin-camera",
    "cordova-plugin-android-permissions",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "PriorityApp: An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-barcodescanner": {},
      "cordova-plugin-camera": {},
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-globalization": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {},
      "cordova-sqlite-storage": {},
      "cordova.plugins.diagnostic": {}
    }
  }
}

And ionic info:

ordova CLI: 6.5.0
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.7.0
Xcode version: Not installed
6

Found the problem and it was not due to upgrade. It’s angular’s change detector. When I had many items in my list it slowed down the navigation.
Will deal with that the angular way :confused:

7

That being what exactly?

8

Use this:
@Component({
// …
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
// …
}

1 Like