I have a project that was originally built with Ionic 5 around 2020, and it has been functioning well up until 2023. This project is primarily a maintenance-type project, meaning it doesn't receive frequent updates. Recently, the client requested the addition of some new features, so I started working on it about five days ago.
To accommodate modern development practices and tools, I decided to update the Ionic CLI to version 7. However, after upgrading the CLI, I started encountering numerous issues when trying to build the project. These issues include errors related to deprecated plugins and compatibility problems with the updated CLI.
I also attempted to revert to the older Ionic CLI version (5.4.16) that was originally used for the project, but I’m unable to install it due to deprecation of the version
At this point, I’m stuck and unsure how to proceed. I’m looking for advice on the best way to address these issues, whether it involves downgrading tools, updating dependencies, or restructuring the project to work with the newer Ionic CLI version. Any guidance would be greatly appreciated.
below is the package.json
{ "name": "ionicEcommerce", "version": "0.0.1", "author": "Ionic Framework", "homepage": "https://ionicframework.com/", "scripts": { "ng": "ng", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "start": "NODE_OPTIONS=--openssl-legacy-provider ng serve", "build": "NODE_OPTIONS=--openssl-legacy-provider ng build" }, "private": true, "dependencies": { "@angular-devkit/build-angular": "^0.901.9", "@angular/common": "~9.0.0", "@angular/compiler": "~9.0.0", "@angular/core": "~9.0.0", "@angular/forms": "~9.0.0", "@angular/platform-browser": "~9.0.0", "@angular/platform-browser-dynamic": "~9.0.0", "@angular/router": "~9.0.0", "@ionic-native/admob-free": "^5.12.0", "@ionic-native/all-in-one-sdk": "^5.36.0", "@ionic-native/app-version": "^5.12.0", "@ionic-native/core": "^5.0.0", "@ionic-native/deeplinks": "^5.12.0", "@ionic-native/device": "^5.15.0", "@ionic-native/email-composer": "^5.13.0", "@ionic-native/facebook": "^5.13.0", "@ionic-native/fcm": "^5.15.0", "@ionic-native/geolocation": "^5.12.0", "@ionic-native/google-maps": "^5.5.0", "@ionic-native/google-plus": "^5.15.0", "@ionic-native/http": "^5.12.0", "@ionic-native/in-app-browser": "^5.12.0", "@ionic-native/local-notifications": "^5.15.0", "@ionic-native/native-geocoder": "^5.12.0", "@ionic-native/network": "^5.26.0", "@ionic-native/network-interface": "^5.26.0", "@ionic-native/onesignal": "^5.12.0", "@ionic-native/photo-viewer": "^5.15.0", "@ionic-native/social-sharing": "^5.12.0", "@ionic-native/spinner-dialog": "^5.12.0", "@ionic-native/splash-screen": "^5.0.0", "@ionic-native/status-bar": "^5.0.0", "@ionic-native/stripe": "^5.15.1", "@ionic-native/unique-device-id": "^5.26.0", "@ionic/angular": "^5.0.4", "@ionic/cordova-builders": "^12.1.2", "@ionic/storage": "^2.2.0", "@types/google-maps": "^3.2.3", "axios": "^1.1.3", "com-sarriaroman-photoviewer": "^1.2.4", "com.razorpay.cordova": "^1.4.12", "cordova-plugin-add-swift-support": "^2.0.2", "cordova-plugin-app-version": "^0.1.9", "cordova-plugin-cocoapod-support": "^1.6.2", "cordova-plugin-device": "^2.0.3", "cordova-plugin-email-composer": "^0.9.2", "cordova-plugin-geolocation": "^4.0.2", "cordova-plugin-googlemaps": "^2.7.1", "cordova-plugin-inappbrowser": "^3.2.0", "cordova-plugin-ionic-keyboard": "^2.2.0", "cordova-plugin-ionic-webview": "^4.2.1", "cordova-plugin-nativegeocoder": "^3.2.2", "cordova-plugin-network-information": "^2.0.2", "cordova-plugin-networkinterface": "^2.0.0", "cordova-plugin-splashscreen": "^5.0.3", "cordova-plugin-statusbar": "^2.4.3", "cordova-plugin-stripe": "^1.5.3", "cordova-plugin-uniquedeviceid": "^1.3.2", "cordova-plugin-x-socialsharing": "^6.0.3", "cordova-plugin-x-socialsharing-android12": "^6.0.5", "core-js": "^2.5.4", "es6-promise-plugin": "^4.2.2", "firebase": "^7.14.3", "human-signals": "^2.1.0", "jquery": "^3.5.1", "moment": "^2.29.4", "ng-otp-input": "^1.7.1", "ngx-mask-ionic": "^1.1.2", "properties-parser": "^0.3.1", "rxjs": "~6.5.1", "strip-final-newline": "^2.0.0", "ts-md5": "^1.2.6", "tslib": "^1.9.0", "zone.js": "~0.9.1" }, "devDependencies": { "@angular-devkit/architect": "^0.901.11", "@angular-devkit/core": "~9.0.0", "@angular-devkit/schematics": "~9.0.0", "@angular/cli": "^9.0.7", "@angular/compiler": "~9.0.0", "@angular/compiler-cli": "~9.0.0", "@angular/language-service": "~9.0.0", "@ionic/angular-toolkit": "^12.1.1", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "^5.0.0", "cordova-android": "^11.0.0", "cordova-ios": "^6.2.0", "cordova-plugin-advanced-http": "^3.3.1", "cordova-plugin-androidx": "^3.0.0", "cordova-plugin-androidx-adapter": "^1.1.3", "cordova-plugin-file": "^7.0.0", "cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "onesignal-cordova-plugin": "^3.2.0", "paywitheasebuzz-cordova-plugin": "file:../../paywitheasebuzz-cordova-lib/easebuzz-cordova-kit", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.15.0", "typescript": "^3.7.5" }, "description": "An Ionic project", "cordova": { "plugins": { "cordova-plugin-app-version": {}, "cordova-plugin-statusbar": {}, "cordova-plugin-device": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-ionic-keyboard": {}, "cordova-plugin-geolocation": { "GEOLOCATION_USAGE_DESCRIPTION": "To locate you" }, "cordova-plugin-nativegeocoder": { "LOCATION_WHEN_IN_USE_DESCRIPTION": "Use geocoder service" }, "cordova-plugin-network-information": {}, "cordova-plugin-email-composer": { "ANDROID_SUPPORT_V4_VERSION": "27.+" }, "com-sarriaroman-photoviewer": {}, "cordova-plugin-stripe": {}, "cordova-plugin-inappbrowser": {}, "cordova-plugin-x-socialsharing": { "ANDROID_SUPPORT_V4_VERSION": "24.1.1+" }, "cordova-plugin-ionic-webview": {}, "cordova-plugin-uniquedeviceid": {}, "cordova-plugin-networkinterface": {}, "com.razorpay.cordova": {}, "cordova-plugin-androidx": {}, "cordova-plugin-androidx-adapter": {}, "onesignal-cordova-plugin": {}, "cordova-plugin-advanced-http": { "ANDROIDBLACKLISTSECURESOCKETPROTOCOLS": "SSLv3,TLSv1" }, "paywitheasebuzz-cordova-plugin": {} }, "platforms": [ "android" ] }, "browser": { "fs": false, "path": false, "os": false } } now getting below errors:
Error: src/app/app.component.html:1:1 - error NG8001: 'ion-app' is not a known element: 1. If 'ion-app' is an Angular component, then verify that it is part of this module. 2. If 'ion-app' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 1 <ion-app [class.green-theme]="config.appTheme=='green'" [class.plum-theme]="config.appTheme=='plum'" [class.magnesium-theme]="config.appTheme=='magnesium'" [class.salmon-theme]="config.appTheme=='salmon'" [class.blue-theme]="config.appTheme=='blue'" [class.pink-theme]="config.appTheme=='pink'" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 2 [class.orange-theme]="config.appTheme=='orange'" [class.maroon-theme]="config.appTheme=='maroon'" [class.cayanne-theme]="config.appTheme=='cayanne'" [class.red-theme]="config.appTheme=='red'" [class.sea-theme]="config.appTheme=='sea'" [class.sky-theme]="config.appTheme=='sky'" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ... 4 [class.theme16]="config.appTheme=='theme16'" [class.theme17]="config.appTheme=='theme17'" [class.theme18]="config.appTheme=='theme18'" [class.light-mode-plus-white-theme]="config.appTheme=='white' && config.darkMode==false" [class.dark-mode-plus-white-theme]="config.appTheme=='white' && config.darkMode==true" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 5 [class.light-mode-plus-black-theme]="config.appTheme=='default' && config.darkMode==false" [class.dark-mode-plus-black-theme]="config.appTheme=='default' && config.darkMode==true" class="copyPrimaryToSecondary"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/app/app.component.ts:29:16 29 templateUrl: 'app.component.html', ~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component AppComponent. Error: src/app/app.component.html:7:5 - error NG8001: 'ion-split-pane' is not a known element: 1. If 'ion-split-pane' is an Angular component, then verify that it is part of this module. 2. If 'ion-split-pane' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 7 <ion-split-pane contentId="main-content" content="main-content"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/app/app.component.ts:29:16 29 templateUrl: 'app.component.html', ~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component AppComponent. Error: src/app/app.component.html:96:9 - error NG8001: 'ion-router-outlet' is not a known element: 1. If 'ion-router-outlet' is an Angular component, then verify that it is part of this module. 2. If 'ion-router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 96 <ion-router-outlet id="main-content"></ion-router-outlet> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/app/app.component.ts:29:16 29 templateUrl: 'app.component.html', ~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component AppComponent. [ERROR] An error occurred while running subprocess ng. ng run app:ionic-cordova-build --platform=android exited with exit code 1. Re-running this command with the --verbose flag may provide more information. 