Ionic app runs slow after updating angular

I was developing app using angular 2. Then I need a library which required angular 4.

I updated my app to angular 2 from angular 4.

After doing that my app is taking 30 seconds on splash screen.

How I can overcome this problem ?

Post your ionic info output and package.json file content please.
(Before and after upgrade if possible)

Before Update :

Package.json


{
  "name": "team",
  "version": "1.0.0",
  "author": " Team",
  "homepage": "http://www.team.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/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic-native/app-availability": "^4.2.1",
    "@ionic-native/core": "^3.9.2",
    "@ionic-native/device": "^4.2.1",
    "@ionic-native/file": "^3.14.0",
    "@ionic-native/file-chooser": "^3.5.0",
    "@ionic-native/file-opener": "^4.2.1",
    "@ionic-native/file-path": "^3.5.0",
    "@ionic-native/file-transfer": "^4.2.1",
    "@ionic-native/google-maps": "^3.14.0",
    "@ionic-native/in-app-browser": "^4.2.1",
    "@ionic-native/keyboard": "^3.10.3",
    "@ionic-native/network": "^3.14.0",
    "@ionic-native/photo-library": "^4.2.1",
    "@ionic-native/screenshot": "^3.14.0",
    "@ionic-native/social-sharing": "^4.1.0",
    "@ionic-native/splash-screen": "^3.5.0",
    "@ionic-native/sqlite": "^3.10.3",
    "@ionic-native/status-bar": "^3.10.3",
    "@ionic-native/toast": "^3.5.0",
    "@ionic-native/transfer": "^3.10.3",
    "@ionic/storage": "^2.0.1",
    "cordova-ios": "^4.4.0",
    "cordova-plugin-add-swift-support": "~1.7.0",
    "cordova-plugin-console": "1.0.5",
    "cordova-plugin-device": "~1.1.6",
    "cordova-plugin-splashscreen": "~4.0.3",
    "cordova-plugin-statusbar": "~2.2.3",
    "cordova-plugin-whitelist": "1.3.1",
    "cordova-sqlite-storage": "^2.0.4",
    "ionic-angular": "2.0.0",
    "ionic-debug-console": "^0.1.0",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionicons": "^3.0.0",
    "jssha": "^2.3.1",
    "ng2-password-strength-bar": "^1.1.2",
    "rxjs": "^5.0.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^2.1.4",
    "@types/jssha": "0.0.29",
    "typescript": "2.0.9"
  },
  "cordovaPlugins": [
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": " A project by team",
  "cordova": {
    "plugins": {
      "cordova-sqlite-storage": {},
      "cordova-plugin-add-swift-support": {},
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {}
    },
    "platforms": [
      "ios"
    ]
  }
}

After Update :

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : ios 4.3.1
Ionic Framework    : ionic-angular 2.0.0

System:

ios-deploy : 1.9.2
Node       : v6.11.3
npm        : 3.10.10
OS         : macOS High Sierra
Xcode      : Xcode 8.3.2 Build version 8E2002

Package.json


{
    "name": "team",
    "version": "1.0.0",
    "author": "Team",
    "homepage": "http://www.team.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.4.0-RC.0",
        "@angular/common": "^4.4.0-RC.0",
        "@angular/compiler": "^4.4.0-RC.0",
        "@angular/compiler-cli": "^4.4.0-RC.0",
        "@angular/core": "^4.4.0-RC.0",
        "@angular/forms": "^4.4.0-RC.0",
        "@angular/http": "^4.4.0-RC.0",
        "@angular/platform-browser": "^4.4.0-RC.0",
        "@angular/platform-browser-dynamic": "^4.4.0-RC.0",
        "@angular/platform-server": "^4.4.0-RC.0",
        "@angular/router": "^4.4.0-RC.0",
        "@ionic-native/app-availability": "^4.2.1",
        "@ionic-native/core": "^3.9.2",
        "@ionic-native/device": "^4.2.1",
        "@ionic-native/file": "^3.14.0",
        "@ionic-native/file-chooser": "^3.5.0",
        "@ionic-native/file-opener": "^4.2.1",
        "@ionic-native/file-path": "^3.5.0",
        "@ionic-native/file-transfer": "^4.2.1",
        "@ionic-native/google-maps": "^3.14.0",
        "@ionic-native/in-app-browser": "^4.2.1",
        "@ionic-native/keyboard": "^3.10.3",
        "@ionic-native/network": "^3.14.0",
        "@ionic-native/photo-library": "^4.2.1",
        "@ionic-native/screenshot": "^3.14.0",
        "@ionic-native/social-sharing": "^4.1.0",
        "@ionic-native/splash-screen": "^3.5.0",
        "@ionic-native/sqlite": "^3.10.3",
        "@ionic-native/status-bar": "^3.10.3",
        "@ionic-native/toast": "^3.5.0",
        "@ionic-native/transfer": "^3.10.3",
        "@ionic/storage": "^2.0.1",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-add-swift-support": "~1.7.0",
        "cordova-plugin-console": "1.0.5",
        "cordova-plugin-device": "~1.1.6",
        "cordova-plugin-splashscreen": "~4.0.3",
        "cordova-plugin-statusbar": "~2.2.3",
        "cordova-plugin-whitelist": "1.3.1",
        "cordova-sqlite-storage": "^2.0.4",
        "ionic-angular": "2.0.0",
        "ionic-debug-console": "^0.1.0",
        "ionic-image-loader": "^4.2.0",
        "ionic-plugin-keyboard": "~2.2.1",
        "ionicons": "^3.0.0",
        "jssha": "^2.3.1",
        "ng2-password-strength-bar": "^1.1.2",
        "rxjs": "^5.0.1",
        "sw-toolbox": "3.4.0",
        "typescript": "^2.5.2",
        "zone.js": "0.6.26"
    },
    "devDependencies": {
        "@ionic/app-scripts": "^2.1.4",
        "@types/jssha": "0.0.29",
        "typescript": "2.0.9"
    },
    "cordovaPlugins": [
        "cordova-plugin-console",
        "cordova-plugin-whitelist",
        "cordova-plugin-splashscreen",
        "cordova-plugin-statusbar",
        "cordova-plugin-device",
        "ionic-plugin-keyboard"
    ],
    "cordovaPlatforms": [],
    "description": "A project by team",
    "cordova": {
        "plugins": {
            "cordova-sqlite-storage": {},
            "cordova-plugin-add-swift-support": {},
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {}
        },
        "platforms": [
            "ios"
        ]
    }
}

How can I get “ionic info” before update

I used this link to update angular

Yeah, Ionic doesn’t support Angular 4.4 yet - especially not with Ionic Angular 2.0.0. See here for the current support:

Check out the state of before - but it’s actually not that important. What oyu posted is enough.

Yeah that is for updating Angular projects. You have an Ionic project that uses Angular. That is a difference.

A note: you are missing all the Cordova plugins for all the Ionic Native plugins you installed.

1 Like

Should I manually update my package.json file
from angular/common :"^4.4.0-RC.0" to “angular/common” : "4.1.3"
and run npm install ?

and should I install cordova native plugins again ?

Newer Angular only makes sense if you also use the newer ionic-angular version. These are connected.

If you don’t hvae too much code and pages, just create a new project and copy code and pages over and see if it still runs. Then add the Ionic Native and Cordova plugins you are actually using in your code so it works.

I am working on a big project.
there are too many pages in my project.

So what should I do now ?

Update the relevant packages of package.json to the version of the app base I linked to, that is the newest version. Get rid of all the stuff you don’t use. Fix breaking code by reading the change log of ionic-angular between your current and the most recent version.

A note: you are missing all the Cordova plugins for all the Ionic Native plugins you installed.

@Sujan12
I am not getting it that how I am missing Cordova plugins for all ionic native plugins ?

Thesea are all the Ionic native plugins you have installed:

Each of those needs a Cordova plugin to work. But these are the Cordova plugins you seem to have installed:

1 Like