Need Help with Typescript Error

Hi Guys,

I inherited a project that I should deploy on iOS.

I tried to test it first with ionic serve but I get Typescript errors related to @angular/router ( complete log here )
that I am not able to figure out how to solve.

The previous developer (That I am not able to reach-out) was able to deploy the app on Android.

I didn’t edit or modify any of the previous code.

Could you guys give me some help on this matter?

Thank you in advance.

If you want to clone the whole project: https://github.com/SteveVercellin/cutaway-app-ionic.gi.

Details:

ionic.config.json

 {
  "name": "cutaway",
  "integrations": {
    "cordova": {}
  },
  "type": "ionic-angular",
  "id": "f8621043",
  "proxies": [
    {
      "path": "/wp-json",
      "proxyUrl": "http://itcutaway.cutawayapp.it/wp-json"
    }
  ]
}

package.json

{
  "name": "cutaway",
  "version": "1.1.1",
  "author": "hrslab",
  "homepage": "http://wwww.hrslab.com/",
  "private": true,
  "scripts": {
    "start": "ionic serve",
    "clean": "ionic clean",
    "build": "ionic cbuild",
    "lint": "ionic lint",
    "run_browser": "ionic serve -l",
    "cordova_run_browser": "ionic cordova run browser -l",
    "cordova_run_android": "ionic cordova run android",
    "cordova_build_android": "ionic cordova build android",
    "cordova_build_android_prod": "ionic cordova build android --prod --release",
    "cordova_prepare_ios": "ionic cordova prepare ios",
    "cordova_run_ios": "ionic cordova run ios -l --external"
  },
  "dependencies": {
    "@angular/animations": "11.2.4",
    "@angular/common": "11.2.4",
    "@angular/compiler": "11.2.4",
    "@angular/compiler-cli": "^11.2.4",
    "@angular/core": "^7.2.16",
    "@angular/forms": "11.2.4",
    "@angular/http": "7.2.16",
    "@angular/platform-browser": "11.2.4",
    "@angular/platform-browser-dynamic": "11.2.4",
    "@ionic-native/core": "5.31.1",
    "@ionic-native/facebook": "5.31.1",
    "@ionic-native/geolocation": "5.31.1",
    "@ionic-native/google-plus": "^5.31.1",
    "@ionic-native/http": "5.31.1",
    "@ionic-native/native-geocoder": "5.31.1",
    "@ionic-native/native-page-transitions": "5.31.1",
    "@ionic-native/native-storage": "5.31.1",
    "@ionic-native/paypal": "5.31.1",
    "@ionic-native/screen-orientation": "5.31.1",
    "@ionic-native/splash-screen": "5.31.1",
    "@ionic-native/status-bar": "5.31.1",
    "@ionic-native/stripe": "5.31.1",
    "@ionic/angular": "^5.6.0",
    "@ionic/angular-toolkit": "3.1.0",
    "@ionic/pro": "2.0.4",
    "@ionic/storage": "2.2.0",
    "@ngx-translate/core": "13.0.0",
    "@ngx-translate/http-loader": "6.0.0",
    "cordova-android": "9.0.0",
    "cordova-ios": "6.2.0",
    "cordova-plugin-facebook4": "6.4.0",
    "cordova-plugin-ionic": "5.4.7",
    "cordova-plugin-screen-orientation": "3.0.2",
    "dependency-check": "4.1.0",
    "es6-promise-plugin": "4.2.2",
    "font-awesome": "4.7.0",
    "ionic-cache": "5.2.0",
    "ionic-selectable": "4.7.1",
    "ionicons": "5.5.0",
    "rxjs": "6.6.6",
    "sw-toolbox": "3.6.0",
    "tslib": "^1.14.1",
    "zone.js": "0.11.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.2.4",
    "@ionic/lab": "3.2.10",
    "card.io.cordova.mobilesdk": "2.1.0",
    "com.paypal.cordova.mobilesdk": "3.5.0",
    "com.telerik.plugins.nativepagetransitions": "0.7.0",
    "cordova-plugin-add-swift-support": "2.0.2",
    "cordova-plugin-advanced-http": "3.1.0",
    "cordova-plugin-device": "2.0.3",
    "cordova-plugin-file": "6.0.2",
    "cordova-plugin-geolocation": "4.1.0",
    "cordova-plugin-googleplus": "8.5.2",
    "cordova-plugin-ionic-keyboard": "2.2.0",
    "cordova-plugin-ionic-webview": "5.0.0",
    "cordova-plugin-nativegeocoder": "3.4.1",
    "cordova-plugin-nativestorage": "2.3.2",
    "cordova-plugin-splashscreen": "6.0.0",
    "cordova-plugin-statusbar": "2.4.3",
    "cordova-plugin-stripe": "1.5.3",
    "cordova-plugin-whitelist": "1.3.4",
    "cordova-sqlite-storage": "5.1.0",
    "typescript": "^4.2.3"
  },
  "description": "An Ionic project",
  "config": {
    "ionic_copy": "./scripts/copy.config.js"
  },
  "cordova": {
    "plugins": {
      "cordova-sqlite-storage": {},
      "cordova-plugin-facebook4": {
        "APP_ID": "364472907552247",
        "APP_NAME": "Cutaway App Login",
        "FACEBOOK_ANDROID_SDK_VERSION": "4.37.0"
      },
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-googleplus": {
        "REVERSED_CLIENT_ID": "666454472312-qk1c6djcc8pivt8bjjgsakqmqokg85oi.apps.googleusercontent.com",
        "WEB_APPLICATION_CLIENT_ID": "666454472312-qk1c6djcc8pivt8bjjgsakqmqokg85oi.apps.googleusercontent.com",
        "PLAY_SERVICES_VERSION": "11.8.0"
      },
      "cordova-plugin-screen-orientation": {},
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": "To locate you",
        "GPS_REQUIRED": "true"
      },
      "cordova-plugin-stripe": {},
      "com.paypal.cordova.mobilesdk": {},
      "com.telerik.plugins.nativepagetransitions": {},
      "cordova-plugin-nativegeocoder": {
        "LOCATION_WHEN_IN_USE_DESCRIPTION": "Use geocoder service"
      },
      "cordova-plugin-advanced-http": {
        "OKHTTP_VERSION": "3.10.0"
      }
    },
    "platforms": [
      "android",
      "ios"
    ]
  }
}

You appear to have a frankenproject, which is usually caused by haphazard upgrading processes.

Angular publishes an upgrade guide tool, and you can try using it. At a very minimum, you need to align all the versions of your Angular bits (currently you are mixing 7.x and 11.x), and you haven’t even installed @angular/router at all, which is probably why you are seeing errors involving dependent code pining for its friend.

1 Like