How can I upgrade Node JS to v14.x with Ionic 3? - node.js

Question

According to errors I faced with this TS/Node project (for a simple TypeScript only REST API) the suggested fix (mentioned here (https://github.com/heineiuo/rippledb/issues/148)) is that I needed something like Node v14.x
I initially jumped all the way v18.x and that tutorial project built and worked. https://www.mongodb.com/compatibility/using-typescript-with-mongodb-tutorial
However, Node 18.x and even downgrading to Node v14.15.5 breaks the build apk and browser processes in one ionic 3 project with the following ionic configuration.
$ ionic info
Ionic:
Ionic CLI : 6.13.1 (C:\Users\AXM\AppData\Roaming\npm\node_modules\#ionic\cli)
Ionic Framework : ionic-angular 3.9.2
#ionic/app-scripts : 3.2.4
Cordova:
Cordova CLI : 11.0.0
Cordova Platforms : android 10.1.2, browser 5.0.3
Cordova Plugins : cordova-plugin-ionic-webview 4.1.3, (and 15 other plugins)
Utility:
cordova-res : 0.15.3
native-run : not installed
System:
Android SDK Tools : 26.1.1 (C:/Users/AXM/AppData/Local/Android/Sdk)
NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10 ...really 11 :)
The initial complaints I did not log I believe where about sass failing.
Googling I run into this post though not specifically about "ionic 3" saying downgrade.
Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (88)
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve",
"watch": "ionic-app-scripts watch && beep ",
"serve:before": "watch",
"emulate:before": "build",
"deploy:before": "build",
"build:before": "build",
"run:before": "build",
"run:after": "beep",
"serve:after": "beep",
"beep": "bash.exe beep.sh",
"beep0": "bash.exe -c \"echo -en '\\a' \" ",
"releasePWA": "ionic cordova build browser --prod --release"
},
"dependencies": {
"#angular/common": "5.0.3",
"#angular/compiler": "5.0.3",
"#angular/compiler-cli": "5.0.3",
"#angular/core": "5.0.3",
"#angular/forms": "5.0.3",
"#angular/platform-browser": "^5.0.3",
"#angular/platform-browser-dynamic": "5.0.3",
"#ionic-native/android-full-screen": "^4.20.0",
"#ionic-native/app-version": "^4.20.0",
"#ionic-native/clipboard": "^4.20.0",
"#ionic-native/core": "4.5.2",
"#ionic-native/document-viewer": "^4.7.0",
"#ionic-native/file": "^4.7.0",
"#ionic-native/file-transfer": "^4.7.0",
"#ionic-native/in-app-browser": "4.5.2",
"#ionic-native/ionic-webview": "^5.36.0",
"#ionic-native/social-sharing": "4.5.2",
"#ionic-native/splash-screen": "^4.7.0",
"#ionic-native/status-bar": "4.5.2",
"#ionic-native/toast": "4.6.0",
"#ionic/pro": "1.0.16",
"#ionic/storage": "2.1.3",
"#types/youtube": "0.0.46",
"archiver": "^5.3.1",
"child_process": "^1.0.2",
"clipboard-js": "0.3.3",
"com.verso.cordova.clipboard": "https://github.com/VersoSolutions/CordovaClipboard.git",
"cordova-browser": "5.0.3",
"cordova-clipboard": "~1.0.0",
"cordova-plugin-device": "1.1.4",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-fullscreen": "^1.2.0",
"cordova-plugin-inappbrowser": "~1.7.1-dev",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-plugin-x-socialsharing": "~5.1.6",
"cordova-plugin-x-toast": "~2.6.0",
"cordova-sqlite-storage": "~2.0.3",
"danielsogl-cordova-plugin-clipboard": "1.0.2",
"ionic-angular": "3.9.2",
"ionic-plugin-keyboard": "~2.2.1",
"ionicons": "3.0.0",
"node-apk": "^1.1.1",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"url-exist": "^3.0.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"#ionic/app-scripts": "^3.2.4",
"#types/node": "^9.6.61",
"cordova-android": "^10.1.2",
"cordova-plugin-apkupdater": "^4.0.0",
"cordova-plugin-app-version": "^0.1.14",
"cordova-plugin-ionic-webview": "^4.1.3",
"tslint": "^5.10.0",
"tslint-ionic-rules": "0.0.16",
"typescript": "^2.8.3",
"viewport-units-buggyfill": "0.6.2"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard",
"cordova-plugin-x-socialsharing"
],
"cordovaPlatforms": [
{
"platform": "android",
"version": "",
"locator": "android"
},
{
"platform": "browser",
"version": "",
"locator": "browser"
}
],
"description": "UPS.ion: project",
"config": {
"ionic_source_map": "source-map",
"ionic_copy": "./copy.config.js"
},
"cordova": {
"plugins": {
"cordova-sqlite-storage": {},
"cordova-plugin-x-toast": {},
"cordova-clipboard": {},
"cordova-plugin-file-transfer": {},
"cordova-plugin-file": {},
"cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {},
"cordova-plugin-device": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"com.verso.cordova.clipboard": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-x-socialsharing": {},
"cordova-plugin-fullscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-apkupdater": {},
"cordova-plugin-app-version": {}
},
"platforms": [
"browser"
]
}
}
Anyway I am poor at resolving issues like these here is my package.json I am not back to Node v10.16.0, not fully recovered with some weird new issues when I build
ionic cordova build browser --prod --release
I get
> ionic-app-scripts.cmd build --prod --target cordova --platform browser
[07:44:15] ionic-app-scripts 3.2.4
[07:44:15] build prod started ...
[07:44:15] clean started ...
[07:44:15] clean finished in 2 ms
[07:44:15] copy started ...
[07:44:15] deeplinks started ...
[07:44:15] deeplinks finished in 293 ms
[07:44:15] ngc started ...
[07:44:20] typescript error
Invalid provider for the NgModule 'AppModule in S:/_W/ARP/UPS.ion/SRC/UPS.ion.3/src/app/app.module.ts' -
only instances of Provider and Type are allowed, got: [[object Object], Clipboard in
S:/_W/ARP/UPS.ion/SRC/UPS.ion.3/node_modules/#ionic-native/clipboard/index.d.ts, Toast in
S:/_W/ARP/UPS.ion/SRC/UPS.ion.3/node_modules/#ionic-native/toast/index.d.ts, SocialSharing in
S:/_W/ARP/UPS.ion/SRC/UPS.ion.3/node_modules/#ionic-native/social-sharing/index.d.ts, AndroidFullScreen in
S:/_W/ARP/UPS.ion/SRC/UPS.ion.3/node_modules/#ionic-native/android-full-screen/index.d.ts, ?null?]
[07:44:20] ionic-app-script task: "build"
[07:44:20] Error: The Angular AoT build failed. See the issues above
Error: The Angular AoT build failed. See the issues above
at S:\_W\ARP\UPS.ion\SRC\UPS.ion.3\node_modules\#ionic\app-scripts\dist\aot\aot-compiler.js:237:55
at step (S:\_W\ARP\UPS.ion\SRC\UPS.ion.3\node_modules\#ionic\app-scripts\dist\aot\aot-compiler.js:32:23)
at Object.next (S:\_W\ARP\UPS.ion\SRC\UPS.ion.3\node_modules\#ionic\app-scripts\dist\aot\aot-compiler.js:13:53)
at fulfilled (S:\_W\ARP\UPS.ion\SRC\UPS.ion.3\node_modules\#ionic\app-scripts\dist\aot\aot-compiler.js:4:58)
[ERROR] An error occurred while running subprocess ionic-app-scripts.
ionic-app-scripts.cmd build --prod --target cordova --platform browser exited with exit code 1.
Re-running this command with the --verbose flag may provide more information.
I have googled among many other things
Invalid provider for the NgModule 'AppModule
Error: The Angular AoT build failed
and made many guess work attempts (npm uninstall this... npm install that...).
I also cleaned all lint errors, but it did not help either.
Funny but deleting the 5 providers list shown below lines 120..124 in app.modules.ts makes the build happy but the browser build won't run and the same with the APK build.
[![enter image description here][1]][1]
Perhaps there is something else that needs to be upgraded to make it possible to have a newer version of node that works for both projects (I can't afford to loose my ionic3 project).
Sorry it's complicated...

Answer 1

Using different versions of Node to run each app might help. The tool NVM is great for this, go ahead and install it if you haven't already.
In one shell, install your newer Node version, e.g. nvm install lts/gallium and nvm use lts/gallium. Wipe out node_modules and reinstall dependencies (rm -rf ./node_modules && npm i) and run your server stuff there.
In another shell, install the older Node version, e.g. nvm install lts/erbium and nvm use lts/erbium. Again, wipe out node_modules and reinstall dependencies (rm -rf ./node_modules && npm i) and run your Ionic 3 project there.
If that doesn't help, putting a gutted version of your app on Github with instructions to replicate the bug would best enable further debugging.