Skip to main content

I recently received an ionic app that hasn't been updated for quite some time.  What steps did I do to unpack this situation and as a minimum get the packages updated?

To start, I did a quick check on the number of packages missing or outdated can be discovered through using the command:

npm outdated

Reponse from command:

Package                            Current    Wanted  Latest  Location  Depended by
@angular/common                    MISSING    10.2.5  13.3.0  -         SAFS
@angular/core                      MISSING    10.2.5  13.3.0  -         SAFS
@angular/fire                      MISSING     6.1.5   7.3.0  -         SAFS
@angular/forms                     MISSING    10.2.5  13.3.0  -         SAFS
@angular/http                      MISSING    7.2.16  7.2.16  -         SAFS
@angular/platform-browser          MISSING    10.2.5  13.3.0  -         SAFS
@angular/platform-browser-dynamic  MISSING    10.2.5  13.3.0  -         SAFS
@angular/pwa                       MISSING  0.1002.1  13.3.0  -         SAFS
@angular/router                    MISSING    10.2.5  13.3.0  -         SAFS
@angular/service-worker            MISSING    10.2.5  13.3.0  -         SAFS
@asymmetrik/ngx-leaflet            MISSING     5.0.2  13.0.2  -         SAFS
@capacitor/android                 MISSING     1.5.3   3.4.3  -         SAFS
@capacitor/cli                     MISSING     2.5.0   3.4.3  -         SAFS
@capacitor/core                    MISSING     1.5.3   3.4.3  -         SAFS
@capacitor/ios                     MISSING     1.5.3   3.4.3  -         SAFS
@ionic-native/core                 MISSING     5.1.0  5.36.0  -         SAFS
@ionic-native/http                 MISSING    5.36.0  5.36.0  -         SAFS
@ionic-native/splash-screen        MISSING     5.1.0  5.36.0  -         SAFS
@ionic-native/status-bar           MISSING    5.36.0  5.36.0  -         SAFS
@ionic/angular                     MISSING     5.9.3  6.0.12  -         SAFS
@ionic/storage                     MISSING     2.3.1   3.0.6  -         SAFS
cordova-browser                    MISSING     5.0.4   6.0.0  -         SAFS
cordova-plugin-advanced-http       MISSING     2.0.1   3.2.2  -         SAFS
cordova-plugin-device              MISSING     2.0.2   2.0.3  -         SAFS
cordova-plugin-file                MISSING     6.0.2   6.0.2  -         SAFS
cordova-plugin-ionic-keyboard      MISSING     2.2.0   2.2.0  -         SAFS
cordova-plugin-ionic-webview       MISSING     2.5.3   5.0.0  -         SAFS
cordova-plugin-splashscreen        MISSING     5.0.2   6.0.0  -         SAFS
cordova-plugin-statusbar           MISSING     2.4.2   3.0.0  -         SAFS
cordova-plugin-whitelist           MISSING     1.3.3   1.3.5  -         SAFS
core-js                            MISSING    2.6.12  3.21.1  -         SAFS
firebase                           MISSING    8.10.1   9.6.9  -         SAFS
leaflet                            MISSING     1.7.1   1.7.1  -         SAFS
rxjs                               MISSING     6.6.3   7.5.5  -         SAFS
tslib                              MISSING    1.14.1   2.3.1  -         SAFS
zone.js                            MISSING    0.10.3  0.11.5  -         SAFS

 

Installing missing packages

Using the command

npm install -g npm-install-missing

However, post this command when I ran the npm outdated command I had the same response.  So no change!

This time, I am going to test by running the following sequence on a few of the npm packages:

rm of your node modules (at least the one that is concerned)
npm cache clean
run "npm install" several times, until all dependencies are resolved and no message are displayed

The packages I'll first test this function on will be

@angular/common
@angular/core
@angular/fire
@angular/forms

Nup, nothing would give.  So my next step was to install packages starting from the top

npm i @angular/core
npm i @angular/common
npm i @angular/fire
npm i @angular/forms
npm i @angular/platform-browser
npm i @angular/platform-browser-dynamic
npm i @angular/pwa
npm i @angular/router
npm i @angular/service-worker
npm i @asymmetrik/ngx-leaflet
npm i @capacitor/android
npm i @ionic-native/core
npm i @ionic-native/http
npm i @ionic-native/splash-screen
npm i @ionic-native/status-bar
npm i @ionic/angular
npm i @ionic/storage
npm i core-js
npm i firebase
npm i leaflet
npm i rxjs
npm i tslib
npm i zone.js
npm i cordova-browser
npm i cordova-plugin-advanced-http
npm i cordova-plugin-device
npm i cordova-plugin-file
npm i cordova-plugin-ionic-keyboard
npm i cordova-plugin-ionic-webview
npm i cordova-plugin-splashscreen
npm i cordova-plugin-statusbar
npm i cordova-plugin-whitelist

 

dev dependancies

npm i -D @angular/cli
npm i -D @angular/compiler
npm i -D @angular/compiler-cli
npm i -D @angular/language-service
npm i -D @angular-devkit/architect
npm i -D @angular-devkit/build-angular
npm i -D @angular-devkit/core
npm i -D @angular-devkit/schematics
npm i -D codelyzer
npm i -D eslint
npm i -D protractor
npm i -D ts-node
npm i -D typescript
npm i -D karma
npm i -D karma-chrome-launcher
npm i -D karma-coverage-istanbul-reporter
npm i -D karma-jasmine
npm i -D karma-jasmine-html-reporter
npm i -D cordova-sqlite-storage
npm i -D jasmine-core
npm i -D jasmine-spec-reporter
npm i -D @ionic/angular-toolkit
npm i -D @ionic/lab
npm i -D @types/jasmine
npm i -D @types/jasminewd2
npm i -D @types/leaflet
npm i -D @types/node

Some might have noticed that there are packages in the list with a different name.  Any of these were a result of the original being deprecated.  By way of example, tslint I replaced with eslint.

 

Does it work?

Post manually updating the above packages, running the command 

npm outdated

Produced a response of null.  However, that doesn't mean the code will now work.  More that of the packages uploaded, there are none that are badly out of date.  This is not surprising, as I had to delete all packages first so I could install each of the npm packages again.

 

Related articles

Andrew Fletcher29 Sep 2023
Setting up an ionic app
Recently a client handed me code that runs an app through iOS and Android.  No details about whether native or otherwise.  Once I had the opportunity to crawl through the code, definitely not native.  Typescript, Angular, Cordova... etc.Glancing at the modification dates, the last...
Andrew Fletcher08 Aug 2022
How to update package.json dependencies to the latest version?
This article works through the steps to update dependencies in package.json file to the latest version. Use npm-check-updates or npm outdated to suggest the latest versions. npm-check-updates is a utility that automatically adjusts a package.json with the latest version of all...