Upgrade to Angular 6

android

#1

I am trying to update from tns-android 3.4.2 to 4.1.3. Whenever i run tns update command i get below log

Gradle build...
Platform android successfully removed.
Successfully removed plugin tns-core-modules
Successfully removed plugin tns-core-modules-widgets
Copying template files...
Installing tns-android
Adding 'es2015.iterable' lib to tsconfig.json...
Project already targets TypeScript ~2.7.2
../../app/modules/test/test.component.ts(4,22): error TS2307: Cannot find module 'ui/page'.
../../app/modules/test/test.component.ts(5,27): error TS2307: Cannot find module 'ui/text-field'.
../../app/modules/test/test.component.ts(11,31): error TS2307: Cannot find module 'application-settings'.
../../app/modules/test/test1/test1.component.ts(3,27): error TS2307: Cannot find module 'ui/text-field'.
../../app/modules/test/test1/test1.component.ts(4,22): error TS2307: Cannot find module 'ui/page'.
../../app/modules/test/test1/test1.component.ts(9,24): error TS2307: Cannot find module 'utils/utils'.
../../app/modules/test/test1/test1.component.ts(32,4): error TS2345: Argument of type '{ textView: TextView; returnKeyTitle: string; locale: string; noReturnKey: true; noDecimals: true...' is not assignable to parameter of type 'NumericKeyboardOptions'.
  Object literal may only specify known properties, and 'textView' does not exist in type 'NumericKeyboardOptions'.
../../app/modules/shared/loading/loading.component.ts(2,35): error TS2307: Cannot find module 'ui/activity-indicator'.
../../app/modules/staff/test2/test3-questions/test3-questions.component.ts(4,23): error TS2307: Cannot find module 'ui/label'.
../../app/modules/staff/test2/test3/test3.component.ts(12,27): error TS2307: Cannot find module '../../../../../node_modules/tns-core-modules/ui/text-field/text-field'.
../../app/modules/staff/test2/test3/test3.component.ts(13,34): error TS2307: Cannot find module '../../../../../node_modules/tns-core-modules/ui/editable-text-base/editable-text-base'.
../../app/modules/staff/test2/test3/test3.component.ts(14,30): error TS2307: Cannot find module 'application'.
../../app/modules/staff/test2/test3/test3.component.ts(56,20): error TS2339: Property 'push' does not exist on type 'ValueList<String>'.
../../app/modules/staff/test2/test3/test3.component.ts(78,38): error TS2339: Property 'object' does not exist on type 'SelectedIndexChangedEventData'.
../../app/modules/staff/test2/test3/test3.component.ts(82,74): error TS2339: Property 'getItem' does not exist on type 'ValueList<string>'.
../../app/modules/staff/test2/test3/test3.component.ts(84,44): error TS2339: Property 'getItem' does not exist on type 'ValueList<string>'.
../../app/modules/staff/test2/test2.component.ts(4,27): error TS2307: Cannot find module 'data/observable'.
../../app/modules/staff/test2/test2.component.ts(6,31): error TS2307: Cannot find module 'application-settings'.
../../app/modules/staff/list/list.component.ts(13,31): error TS2307: Cannot find module 'application-settings'.
../../app/modules/staff/list/list.component.ts(22,25): error TS2307: Cannot find module 'utils/utils'.
../../app/modules/user-control/login/login.component.ts(2,27): error TS2307: Cannot find module 'data/observable'.
../../app/modules/user-control/login/login.component.ts(3,24): error TS2307: Cannot find module 'ui/button'.
../../app/modules/user-control/login/login.component.ts(8,22): error TS2307: Cannot find module 'ui/page'.
../../app/modules/user-control/login/login.component.ts(9,24): error TS2307: Cannot find module 'utils/utils'.
../../app/modules/user-control/login/login.component.ts(10,31): error TS2307: Cannot find module 'application-settings'.
../../app/modules/user-control/select-location/select-location.component.ts(7,27): error TS2307: Cannot find module 'data/observable'.
../../app/modules/user-control/select-location/select-location.component.ts(11,31): error TS2307: Cannot find module 'application-settings'.
../../app/services/internal/back/back.service.ts(2,30): error TS2307: Cannot find module 'application'.
../../app/services/internal/back/back.service.ts(4,31): error TS2307: Cannot find module 'application-settings'.
../nativescript-drop-down/drop-down.d.ts(16,33): error TS2307: Cannot find module 'data/observable-array'.
../nativescript-drop-down/drop-down.d.ts(17,62): error TS2307: Cannot find module 'ui/core/view'.
../nativescript-drop-down/drop-down.d.ts(18,30): error TS2307: Cannot find module 'ui/gestures/gestures'.
../nativescript-drop-down/drop-down.d.ts(19,29): error TS2307: Cannot find module 'ui/list-picker'.
apiclient/index.d.ts(1,29): error TS2307: Cannot find module 'file-system'.
apiclient/index.d.ts(2,23): error TS2307: Cannot find module 'http'.
apiclient/index.d.ts(3,24): error TS2307: Cannot find module 'image-source'.
batch/index.d.ts(1,28): error TS2307: Cannot find module 'data/observable'.
batch/index.d.ts(2,33): error TS2307: Cannot find module 'data/observable-array'.
bitmap-factory/index.d.ts(1,30): error TS2307: Cannot find module 'application'.
bitmap-factory/index.d.ts(2,30): error TS2307: Cannot find module 'image-source'.
enumerable/index.d.ts(1,28): error TS2307: Cannot find module 'data/observable'.
enumerable/index.d.ts(2,33): error TS2307: Cannot find module 'data/observable-array'.
enumerable/index.d.ts(3,30): error TS2307: Cannot find module 'data/virtual-array'.
index.d.ts(2,30): error TS2307: Cannot find module 'application'.
index.d.ts(7,33): error TS2307: Cannot find module 'data/observable-array'.
index.d.ts(8,30): error TS2307: Cannot find module 'data/virtual-array'.
xmlobjects/index.d.ts(1,28): error TS2307: Cannot find module 'data/observable'.
Could not update the project!

Here is my package.json

{
  "description": "cds event system",
  "license": "SEE LICENSE IN DAYMON",
  "readme": "cds event system",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.test",
    "tns-ios": {
      "version": "3.2.0"
    },
    "tns-android": {
      "version": "4.1.3"
    }
  },
  "dependencies": {
    "@angular/animations": "~6.0.0",
    "@angular/common": "~6.0.0",
    "@angular/compiler": "~6.0.0",
    "@angular/core": "~6.0.0",
    "@angular/forms": "~6.0.0",
    "@angular/http": "~6.0.0",
    "@angular/platform-browser": "~6.0.0",
    "@angular/platform-browser-dynamic": "~6.0.0",
    "@angular/router": "~6.0.0",
    "@types/lodash": "^4.14.85",
    "angular2-focus": "^1.1.1",
    "axios": "^0.17.0",
    "lodash": "^4.17.4",
    "nativescript-angular": "~6.0.0",
    "nativescript-checkbox": "^3.0.1",
    "nativescript-drop-down": "^4.0.1",
    "nativescript-filter-select": "^1.2.0",
    "nativescript-geolocation": "^4.2.0",
    "nativescript-i18n": "^0.2.4",
    "nativescript-localstorage": "^1.1.5",
    "nativescript-material-icons": "^1.0.3",
    "nativescript-ng2-fonticon": "^1.3.4",
    "nativescript-numeric-keyboard": "^3.0.3",
    "nativescript-orientation": "^2.2.0",
    "nativescript-theme-core": "~1.0.2",
    "nativescript-toolbox": "^3.0.1",
    "nativescript-unit-test-runner": "^0.3.4",
    "nativescript-webview-interface": "^1.4.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "^6.2.2",
    "rxjs-compat": "^6.2.2",
    "tns-core-modules": "^4.1.0",
    "zone.js": "~0.8.26"
  },
  "nativescript-i18n": {
    "customLangPath": "app/i18n"
  },
  "devDependencies": {
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "chai": "^4.1.2",
    "codelyzer": "^4.4.2",
    "karma": "^1.7.1",
    "karma-chai": "^0.1.0",
    "karma-mocha": "^1.3.0",
    "karma-nativescript-launcher": "^0.4.0",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "~0.7.0",
    "typescript": "~2.7.2"
  }
}

Can someone guide me on how to fix the issue? I tried installing all plugins separately. (e.g. Core modules, Angular, nativescript-angular etc.) However my tns update is not resolved. please provide some guidance.


#2

May I know what you have in tsconfig.json and tsconfig.esm.json?


#3

{
“compilerOptions”: {
“module”: “commonjs”,
“target”: “es5”,
“experimentalDecorators”: true,
“emitDecoratorMetadata”: true,
“noEmitHelpers”: true,
“noEmitOnError”: true,
“lib”: [
“es6”,
“dom”,
“es2015.iterable”
],
“baseUrl”: “.”,
“paths”: {
": [
"./node_modules/tns-core-modules/
”,
“./node_modules/"
],
"~/
”: [
“app/"
]
}
},
“exclude”: [
“node_modules”,
“platforms”,
"**/
.aot.ts”
]
}


#5

Please note that i updated package.json to get latest Angular version as mentioned on post

Here is my original package.json

{
  "description": "Test",
  "license": "SEE LICENSE ",
  "readme": "Test",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.Test",
    "tns-ios": {
      "version": "3.2.0"
    },
    "tns-android": {
      "version": "3.4.2"
    }
  },
  "dependencies": {
    "@angular/animations": "~4.4.1",
    "@angular/common": "~4.4.1",
    "@angular/compiler": "~4.4.1",
    "@angular/core": "~4.4.1",
    "@angular/forms": "~4.4.1",
    "@angular/http": "~4.4.1",
    "@angular/platform-browser": "~4.4.1",
    "@angular/router": "~4.4.1",
    "@types/lodash": "^4.14.85",
    "angular2-focus": "^1.1.1",
    "axios": "^0.17.0",
    "lodash": "^4.17.4",
    "nativescript-angular": "~4.4.0",
    "nativescript-checkbox": "^3.0.1",
    "nativescript-drop-down": "^3.2.5",
    "nativescript-filter-select": "^1.2.0",
    "nativescript-geolocation": "^4.2.0",
    "nativescript-i18n": "^0.2.4",
    "nativescript-localstorage": "^1.1.5",
    "nativescript-material-icons": "^1.0.3",
    "nativescript-ng2-fonticon": "^1.3.4",
    "nativescript-numeric-keyboard": "^3.0.3",
    "nativescript-orientation": "^2.2.0",
    "nativescript-theme-core": "~1.0.2",
    "nativescript-toolbox": "^3.0.1",
    "nativescript-unit-test-runner": "^0.3.4",
    "nativescript-webview-interface": "^1.4.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.4.2",
    "tns-core-modules": "~3.2.0",
    "zone.js": "~0.8.2"
  },
  "nativescript-i18n": {
    "customLangPath": "app/i18n"
  },
  "devDependencies": {
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "chai": "^4.1.2",
    "codelyzer": "^3.0.1",
    "karma": "^1.7.1",
    "karma-chai": "^0.1.0",
    "karma-mocha": "^1.3.0",
    "karma-nativescript-launcher": "^0.4.0",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "~0.5.0",
    "typescript": "~2.4.2"
  }
}


#6

Have you upgraded CLI & WebPack config file in the project?


#7

I did. Here are steps that i followed.

  1. Tried “tns update” command with different angular versions. Result was same. Confirmed that the issue was not because of Android Version.
  2. looked at each plugin. nativescript-toolbox seems to be the culprit. I tried removing the same and ran tns update command. It ran successfully. Verifying if it has impacted app somewhere.

However if you could help me understand on how to debug these issues in future? Method which i did was more trial and error.


#8

It’s major update, I believe there are some changes in the webpack config too so you might have to update that.

So this is what I do to keep my code in sync with latest upgrades,

  1. Create a sample project with latest CLI
  2. Compare the config files like tsconfig, webpack etc., and make necessary updates
  3. Update runtime version and plugins if any

I find this easier at least until new angular schematics becomes capable of automating this upgrade process.