I updated my app using Angular guide from Angular 8 to Angular 14, and I am facing some runtime issues

[mrlathiya]

Following is the configuration of the app after upgrading.

Error-

I am facing this issue after upgrading. The app’s code gets compiled with a few warnings, but after opening it in the browser, it just shows a blank white screen. Nothing moves further.

The console shows the following error.

I am new to the framework and not sure what is wrong. Here is my pacakge.json

{
  "name": "vsquaredapp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve  --port 8000",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-builders/dev-server": "^7.3.1",
    "@angular/common": "^14.3.0",
    "@angular/compiler": "^14.3.0",
    "@angular/core": "^14.3.0",
    "@angular/forms": "^14.3.0",
    "@angular/platform-browser": "^14.3.0",
    "@angular/platform-browser-dynamic": "^14.3.0",
    "@angular/router": "^14.3.0",
    "@ionic-native/app-preferences": "^5.36.0",
    "@ionic-native/background-fetch": "^5.36.0",
    "@ionic-native/camera": "^5.36.0",
    "@ionic-native/core": "^5.36.00",
    "@ionic-native/file": "^5.36.0",
    "@ionic-native/geolocation": "^5.36.0",
    "@ionic-native/http": "^5.36.0",
    "@ionic-native/keyboard": "^5.36.0",
    "@ionic-native/network": "^5.36.0",
    "@ionic-native/photo-viewer": "^5.36.0",
    "@ionic-native/splash-screen": "^5.36.0",
    "@ionic-native/status-bar": "^5.36.0",
    "@ionic/angular": "^4.0.0",
    "@ionic/cordova-builders": "^10.0.0",
    "async-lock": "^1.4.0",
    "chart.js": "^2.9.1",
    "com-sarriaroman-photoviewer": "^1.3.0",
    "cordova-browser": "7.0.0",
    "cordova-plugin-advanced-http": "^3.3.1",
    "cordova-plugin-camera": "~6.0.0",
    "cordova-plugin-device": "^2.1.0",
    "cordova-plugin-file": "^8.0.1",
    "cordova-plugin-geolocation": "^5.0.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^5.0.1",
    "cordova-plugin-network-information": "^3.0.0",
    "cordova-plugin-splashscreen": "^6.0.2",
    "cordova-plugin-statusbar": "^4.0.0",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-wkwebview-inputfocusfix": "^1.0.4",
    "cordova-sqlite-storage": "6.1.0",
    "core-js": "^3.33.3",
    "jsonwebtoken": "^8.5.1",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.43",
    "rxjs": "~6.6.7",
    "simple-pdf-viewer": "^2.0.3",
    "sql.js": "^1.9.0",
    "tslib": "^2.0.0",
    "typeorm": "^0.3.17",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^14.0.1",
    "@angular-devkit/architect": "^0.1402.13",
    "@angular-devkit/build-angular": "^14.2.13",
    "@angular-devkit/core": "^14.2.13",
    "@angular-devkit/schematics": "^14.2.13",
    "@angular/cli": "^14.2.13",
    "@angular/compiler-cli": "^14.3.0",
    "@angular/language-service": "^14.3.0",
    "@ionic/angular-toolkit": "~2.0.0",
    "@ionic/cli-plugin-proxy": "1.5.8",
    "@ionic/lab": "2.0.6",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jsonwebtoken": "^9.0.5",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "cordova-ios": "^7.0.1",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.8.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-advanced-http": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-file": {},
      "cordova-plugin-network-information": {},
      "com-sarriaroman-photoviewer": {},
      "cordova-plugin-wkwebview-inputfocusfix": {},
      "cordova-plugin-geolocation": {}
    },
    "platforms": [
      "browser"
    ]
  }
}

Thank you in Advance.

[Hills90210]

When using the guide, did you upgrade straight from 8 to 14? or did you update incremental: 8, 9, 10…etc…?

In the update guide it states to NOT jump straight to the latest but update incrementally and run your app each time to make sure it works to prevent these issues from arising.

[mrlathiya]

Thank you for your reply; I did it incrementally, step by step and tried running it all the time.

[Hills90210]

Understood, hmm so from the console error, it seems there’s an issue with the ion router, maybe thats why you see a blank screen. I would start looking around there.

[mrlathiya]

Can you please point me in any specific direction? I am not able to find anything. I am new to the framework.

[Hills90210]

Heres a link from the ionic repo: feat: support Angular 14 · Issue #25353 · ionic-team/ionic-framework · GitHub

[mrlathiya]

Hi, thank you so much. It helped, and I can solve the issue, but now there is another issue after solving this.

I am facing this issue now; everything is working, and all the APIs are getting executed, but the UI won’t render.

And since I upgraded @ionic/angular as suggested in the GitHub you shared earlier, I am facing the above issue with Events.

I had to change it to EventEmitter from @ionic/core. And if I comment on the publish line and use the second, I get this error runtime.

Thank you so much once again. Please help me out here.