Documentation Ionic project update

Issue

I have an application that was developed a long time ago and with very old versions of Ionic and Angular.

I would like to update versions of Angular, Ionic, plugins and all dependencies needed for the update. Before updating, we intend to carry out a study of what are the main paths that we should follow to update the project.

Have you already gone through this documentation process before upgrading? How would you document this upgrade process? What advice would you give me for following this documentation?

My package.json:

{
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "test": "karma start ./test-config/karma.conf.js",
    "test-ci": "karma start ./test-config/karma-ci.conf.js --coverage",
    "lint": "node ./node_modules/tslint/bin/tslint --project ./",
    "ionic:serve": "ionic-app-scripts serve",
    "test-coverage": "karma start ./test-config/karma.conf.js --coverage ",
    "test-sonar": "karma start ./test-config/karma.conf.js --coverage --single-run",
    "sonar": "npm run test-ci && sonar-scanner"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint"
    }
  },
  "config": {
    "ionic_webpack": "./config/webpack.config.js",
    "ionic_bundler": "webpack",
    "ionic_source_map": "source-map"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/barcode-scanner": "^4.18.0",
    "@ionic-native/core": "~4.15.0",
    "@ionic-native/globalization": "^4.17.0",
    "@ionic-native/keyboard": "^4.20.0",
    "@ionic-native/local-notifications": "^4.20.0",
    "@ionic-native/native-storage": "^4.19.0",
    "@ionic-native/network": "^4.20.0",
    "@ionic-native/qr-scanner": "^4.18.0",
    "@ionic-native/secure-storage": "^4.20.0",
    "@ionic-native/splash-screen": "~4.15.0",
    "@ionic-native/status-bar": "~4.15.0",
    "@ionic/storage": "2.2.0",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "@totvs/mobile-mingle": "file:totvs-mobile-mingle-3.4.2.tgz",
    "angular2-text-mask": "^9.0.0",
    "brmasker-ionic-3": "^1.6.3",
    "cordova": "^11.0.0",
    "cordova-ios": "4.5.5",
    "cordova-plugin-app-version": "^0.1.12",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-geolocation": "^4.1.0",
    "cordova-plugin-globalization": "^1.11.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^2.5.3",
    "cordova-plugin-ios-camera-permissions": "^1.2.0",
    "cordova-plugin-network-information": "^2.0.2",
    "cordova-plugin-secure-storage": "^3.0.2",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-enable-cleartext-traffic": "^2.1.0",
    "intl": "^1.2.5",
    "ionic-angular": "3.9.2",
    "ionic2-calendar": "^0.4.5",
    "ionic2-mask-directive": "^1.0.8",
    "ionicons": "3.0.0",
    "js-sha256": "^0.9.0",
    "moment": "^2.29.1",
    "ngx-mask": "^7.4.0",
    "node-sass": "^4.14.1",
    "node-sass-middleware": "^0.11.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "to": "^0.2.9",
    "update": "^0.7.4",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "1.4.8",
    "@ionic/app-scripts": "^3.2.4",
    "@totvs/thf-tslint": "^2.9.0",
    "@types/jasmine": "2.8.3",
    "@types/node": "7.0.7",
    "angular2-template-loader": "^0.6.2",
    "cordova-android": "^11.0.0",
    "cordova-browser": "^4.1.0",
    "cordova-plugin-androidx-adapter": "^1.1.3",
    "cordova-plugin-badge": "github:katzer/cordova-plugin-badge#8e870f7f",
    "cordova-plugin-local-notification": "github:VictorBassoon/cordova-plugin-local-notifications#ea09d29c",
    "html-loader": "^0.5.1",
    "husky": "^1.2.0",
    "ionic-mocks": "^1.3.0",
    "istanbul-instrumenter-loader": "^3.0.0",
    "jasmine": "^3.6.3",
    "jasmine-core": "^3.6.0",
    "jasmine-spec-reporter": "^4.1.0",
    "karma": "^1.5.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.2",
    "karma-coverage-istanbul-reporter": "^2.0.1",
    "karma-jasmine": "^2.0.0",
    "karma-jasmine-html-reporter": "^1.2.0",
    "karma-junit-reporter": "^1.2.0",
    "karma-sourcemap-loader": "^0.3.8",
    "karma-webpack": "^2.0.3",
    "null-loader": "^0.1.1",
    "phonegap-plugin-barcodescanner-totvs": "^1.0.3",
    "protractor": "^5.1.1",
    "sonar-scanner": "^3.1.0",
    "ts-loader": "^3.0.3",
    "ts-node": "^3.0.2",
    "tslint": "^5.11.0",
    "tslint-sonarts": "^1.8.0",
    "typescript": "2.8.4"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-globalization": {},
      "cordova-plugin-ios-camera-permissions": {
        "CAMERA_USAGE_DESCRIPTION": "your usage message",
        "MICROPHONE_USAGE_DESCRIPTION": "your microphone usage message here",
        "PHOTOLIBRARY_ADD_USAGE_DESCRIPTION": "your photo library usage message here",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": "your photo library usage message here"
      },
      "cordova-plugin-secure-storage": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-app-version": {},
      "cordova-plugin-enable-cleartext-traffic": {},
      "cordova-plugin-geolocation": {
        "GPS_REQUIRED": "true",
        "GEOLOCATION_USAGE_DESCRIPTION": "Meu Coletor de Dados uses geolocation to determine this device location."
      },
      "cordova-plugin-androidx-adapter": {},
      "cordova-plugin-badge": {},
      "cordova-plugin-local-notification": {
        "ANDROID_SUPPORT_V4_VERSION": "26.+"
      },
      "phonegap-plugin-barcodescanner-totvs": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      }
    },
    "platforms": [
      "ios",
      "android"
    ]
  }
}

Points I already raised for documentation:

Raise all the updates that will be needed in the app, considering:

Angular/Typescript version mingle version Ionic version (upgrade to 6) Plugins/dependencies/libs to be replaced Swap Cordova for Capacitor Update on Devops treadmills (build change from Cordova to Capacitor) Effort required to update Would it be best to create a new project with everything updated? Suggest an app update strategy to ensure stability and organization during the process.

Solution

https://update.angular.io/?v=5.0-15.0. Do it step by step. Go from angular 5 to 6. Do this until you lose support from ionic and other packages. And then update those. Good luck. Your long neglected project will easily take six months to update. Possibly more. I personally would just start over fresh, cherry picking useful bits from the old project.

Once you HAVE successfully updated, do not neglect it.

Run npx npm-check-updates at least once a month and commit to staying fresh.

Answered By - user796446