Npm install version conflict after migration to Angular 12

Product/components used and version/fix level:

Backend: 1020.296.0
UI: 1011.0.4

Detailed explanation of the problem:

Hi it’s Luca,
this is a followup from this post.

We would like to upgrade our custom app Cockpit based UI version to latest. The idea is to proceed step by step so first is to go from web sdk version 11 to 12.

I followed this receip:

  1. c8ycli new atc cockpit -a @c8y/apps@1011.45.0

The files changed by the above commands are:

image

In particular this is the new package.json:

{
  "name": "dashboard",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "@angular/animations": "12.2.4",
    "@angular/cdk": "12.2.4",
    "@angular/common": "12.2.4",
    "@angular/compiler": "12.2.4",
    "@angular/core": "12.2.4",
    "@angular/forms": "12.2.4",
    "@angular/platform-browser": "12.2.4",
    "@angular/platform-browser-dynamic": "12.2.4",
    "@angular/router": "12.2.4",
    "@angular/upgrade": "12.2.4",
    "@c8y/ngx-components": "1011.45.0",
    "@ngx-translate/core": "13.0.0",
    "rxjs": "~6.6.3",
    "zone.js": "~0.11.4",
    "@c8y/ng1-modules": "1011.45.0",
    "angular": "1.6.9",
    "@c8y/style": "1011.45.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "12.2.4",
    "@angular/compiler-cli": "12.2.4",
    "@angular/language-service": "12.2.4",
    "@angular/localize": "12.2.4",
    "@types/webpack": "^5.28.0",
    "file-loader": "^6.2.0",
    "typescript": "4.2.4",
    "@c8y/cli": "1011.45.0"
  },
  "scripts": {
    "start": "c8ycli server",
    "build": "c8ycli build",
    "deploy": "c8ycli deploy",
    "postinstall": "ngcc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "c8y": {
    "application": {
      "name": "atc",
      "contextPath": "atc",
      "key": "atc-application-key",
      "tabsHorizontal": true,
      "upgrade": true,
      "rightDrawer": true,
      "breadcrumbs": false,
      "sensorAppOneLink": "http://onelink.to/pca6qe",
      "sensorPhone": true,
      "contentSecurityPolicy": "base-uri 'none'; default-src 'self' 'unsafe-inline' http: https: ws: wss:; connect-src 'self' http: https: ws: wss:;  script-src 'self' open.mapquestapi.com *.twitter.com *.twimg.com *.aptrinsic.com 'unsafe-inline' 'unsafe-eval' data:; style-src * 'unsafe-inline' blob:; img-src * data:; font-src * data:; frame-src *; worker-src 'self' blob:;",
      "dynamicOptionsUrl": "/apps/public/public-options/options.json"
    },
    "cli": {}
  }
}

When i run npm install I get:

Any suggestion?

Error messages / full error message screenshot / log file:

Question related to a free trial, or to a production (customer) instance?

Hi Luca,

just because angular 12 is supported starting from version 1011.45.0 of the Web SDK, this might not be the best option to upgrade to. If you want to do this step by step, I would recommend to upgrade from major version to the next major version.
The versions with minor version 0 (x.0.y) are the ones that actually went into production and received further fixes, so these are probably the best options to upgrade to.
So e.g.

  1. Upgrade to 1013.0.437
  2. Upgrade to 1014.0.427
  3. Upgrade to 1015.0.536
  4. Upgrade to 1016.0.483
  5. Upgrade to 1017.0.522
  6. Upgrade to 1018.0.260

In general it should not be a lot harder to directly upgrade to 1018.

Regards,
Tristan

1 Like

Also don’t forget to use the correct node version when migrating.
1018.0.260 should be Angular 15 → node ^14.20.0 || ^16.13.0 || ^18.10.0

1 Like

As suggested by Tristan I upgraded directly to 1018.0.240. I’m using node 16.13.0

However after

c8ycli new atc cockpit -a @c8y/apps@1018.0.240

And deleting node_modules and running:

npm install

I run into this:

code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: atc@1.0.0
npm ERR! Found: @angular-devkit/build-angular@0.1101.4
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"14.0.6" from the root project
npm ERR!   peer @angular-devkit/build-angular@"<0.1200.0 >=0.1100.0" from @c8y/cli@1011.0.15
npm ERR!   node_modules/@c8y/cli
npm ERR!     dev @c8y/cli@"1018.0.240" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"14.0.6" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/compiler-cli@14.0.6
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^14.0.0" from @angular-devkit/build-angular@14.0.6
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"14.0.6" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/luca/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/luca/.npm/_logs/2024-05-17T07_49_57_971Z-debug.log

I need some help pls

Hi Luca,

have you removed your node_modules folder before running npm install? Also ensure that you are not having a dependency on @angular-devkit/build-angular in version 0.1101.4 in your package.json.

In case this does not resolve the issue, please provide your current package.json file.

Regards,
Tristan

Hi tristan,

have you removed your node_modules folder before running npm install ?

Yes I did

Also ensure that you are not having a dependency on @angular-devkit/build-angular in version 0.1101.4 in your package.json .

mmm nope, however I provide the package.json:

{
  "name": "atc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "@angular/animations": "14.0.6",
    "@angular/cdk": "14.1.2",
    "@angular/common": "14.0.6",
    "@angular/compiler": "14.0.6",
    "@angular/core": "14.0.6",
    "@angular/forms": "14.0.6",
    "@angular/platform-browser": "14.0.6",
    "@angular/platform-browser-dynamic": "14.0.6",
    "@angular/router": "14.0.6",
    "@angular/upgrade": "14.0.6",
    "@c8y/client": "1018.0.240",
    "@c8y/ngx-components": "1018.0.240",
    "@ngx-translate/core": "14.0.0",
    "ngx-bootstrap": "9.0.0",
    "rxjs": "~6.6.3",
    "zone.js": "~0.11.7",
    "@c8y/ng1-modules": "1018.0.240",
    "angular": "1.6.9",
    "@c8y/style": "1018.0.240"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "14.0.6",
    "@angular/compiler-cli": "14.0.6",
    "@angular/language-service": "14.0.6",
    "@angular/service-worker": "14.0.6",
    "@angular/localize": "14.0.6",
    "@types/jest": "^28.1.6",
    "jest": "^28.1.3",
    "jest-preset-angular": "^12.2.5",
    "typescript": "4.7.4",
    "@c8y/cli": "1018.0.240"
  },
  "scripts": {
    "start": "c8ycli server",
    "build": "c8ycli build",
    "deploy": "c8ycli deploy",
    "locale-extract": "c8ycli locale-extract",
    "postinstall": "ngcc",
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "c8y": {
    "application": {
      "name": "atc",
      "contextPath": "atc",
      "key": "atc-application-key",
      "tabsHorizontal": true,
      "upgrade": true,
      "rightDrawer": true,
      "breadcrumbs": false,
      "sensorAppOneLink": "http://onelink.to/pca6qe",
      "sensorPhone": true,
      "contentSecurityPolicy": "base-uri 'none'; default-src 'self' 'unsafe-inline' http: https: ws: wss:; connect-src 'self' http: https: ws: wss: data:;  script-src 'self' *.bugherd.com *.twitter.com *.twimg.com *.aptrinsic.com 'unsafe-inline' 'unsafe-eval' data:; style-src * 'unsafe-inline' blob:; img-src * data: blob:; font-src * data:; frame-src *; worker-src 'self' blob:;",
      "dynamicOptionsUrl": "/apps/public/public-options/options.json",
      "contextHelp": true
    },
    "cli": {}
  }
}

What I dont understand is this:

npm ERR! Found: @angular-devkit/build-angular@0.1101.4

where that version comes from. I cleaned the npm cache as well btw.

A bit of backgound. This project is a clone of another project running the old version 10.11. I copy pasted the whole project directory, included package-lock.json and package.json. Then I upgraded the SDK web version to 10.18.

From the logs it sounds like you are still having @c8y/cli@1011.0.15 installed…
Did you install @c8y/cli in version 1018.0.240 globally before trying to scaffold the application?
Maybe try running npm i -g @c8y/cli@1018.0.240 and the try to scaffold the new application once again…

1 Like

Hi @Tristan_Bastian
Im facing again this problem…

Starting point: custom application based on cockpit that needs to be updated from 1011.0.4 to 1018.0.240

nvm list output:

image

The c8ycli is installed globally using npm i -g @c8y/cli@1018.0.240

image

So, to upgrade i run:

c8ycli new my-cockpit cockpit

Then when i run npm install:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: dashboard@1.0.0
npm ERR! Found: @angular-devkit/build-angular@0.1101.4
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"14.0.6" from the root project
npm ERR!   peer @angular-devkit/build-angular@"<0.1200.0 >=0.1100.0" from @c8y/cli@1011.0.15
npm ERR!   node_modules/@c8y/cli
npm ERR!     dev @c8y/cli@"1018.0.240" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"14.0.6" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: typescript@4.7.4
npm ERR! node_modules/typescript
npm ERR!   peer typescript@">=4.6.2 <4.8" from @angular-devkit/build-angular@14.0.6
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"14.0.6" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/luca/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/luca/.npm/_logs/2024-07-04T11_49_30_236Z-debug-0.log

im clueless. Any idea?

Hi Luca,

like the logs say, you still seem to have @c8y/cli@1011.0.15 installed somewhere.
I can’t really help you with finding the location you’ve installed it to. It sound like you have the @c8y/cli in version 1011.0.15 still somewhere in your package.json?

Regards,
Tristan

1 Like

Hi Tristan,
I noticed a referece to @c8y/cli1011.0.15 in package-lock.json. This is how it looks:

name": "dashboard",
  "version": "1.0.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "dashboard",
      "version": "1.0.0",
      "license": "ISC",
      "dependencies": {
        "@angular-slider/ngx-slider": "^2.0.4",
        "@angular/animations": "11.1.2",
        "@angular/cdk": "^11.2.13",
        "@angular/common": "11.1.2",
        "@angular/compiler": "11.1.2",
        "@angular/core": "11.1.2",
        "@angular/forms": "11.1.2",
        "@angular/material": "^11.1.2",
        "@angular/platform-browser": "11.1.2",
        "@angular/platform-browser-dynamic": "11.1.2",
        "@angular/router": "11.1.2",
        "@angular/upgrade": "11.1.2",
        "@c8y/client": "1011.0.4",
        "@c8y/ng1-modules": "1011.0.4",
        "@c8y/ngx-components": "1011.0.4",
        "@c8y/style": "1011.0.4",
        "@ng-select/ng-select": "^6.1.0",
        "@ngx-translate/core": "13.0.0",
        "@types/node": "^14.11.11",
        "angular": "1.6.9",
        "chart.js": "^2.9.4",
        "chartjs-plugin-annotation": "^0.5.7",
        "chartjs-plugin-colorschemes": "^0.4.0",
        "chartjs-plugin-zoom": "^0.7.7",
        "core-js": "^3.4.0",
        "font-awesome": "^4.7.0",
        "fontawesome": "4.7.2",
        "group-array": "^1.0.0",
        "hammerjs": "^2.0.8",
        "leaflet-draw": "^1.0.4",
        "leaflet-extra-markers": "^1.2.1",
        "leaflet.markercluster": "^1.4.1",
        "leaflet2": "npm:leaflet@^1.9.0",
        "lodash": "4.17.20",
        "moment": "^2.26.0",
        "ng2-charts": "^2.4.2",
        "ngx-bootstrap": "6.2.0",
        "rxjs": "~6.6.3",
        "url-search-params-polyfill": "6.0.0",
        "wait-on": "^7.2.0",
        "zone.js": "~0.11.4"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "0.1101.4",
        "@angular/compiler-cli": "11.1.2",
        "@angular/language-service": "11.1.2",
        "@angular/localize": "11.1.2",
        "@c8y/cli": "1011.0.15",
        "cypress": "^13.6.1",
        "cypress-real-events": "^1.11.0",
        "tapable": "^1.1.3",
        "typescript": "4.0.7"
      }
    },
    "node_modules/@aashutoshrathi/word-wrap": {
      "version": "1.2.6",
      "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
      "dev": true,
      "peer": true,
      "engines": {
        "node": ">=0.10.0"
...

This package-lock.json was generated before my upgrade to 1018.0.240. Could this be the cause? In the meantime i look for @c8y/cli in version 1011.0.15

Just delete the package-lock.json and do another npm install (It will create a new package-lock.json) with the correct version for 1018.x

ok seems to work thanks!

Now I’m facing something different.

When I run the application with npm start, I cannot load my css. As a result I get an empty map, with invisible marker icons:

And I get this warning:

I think they are related because I import both here:

This is our package.json:

name": "dashboard",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "@angular-slider/ngx-slider": "^2.0.4",
    "@angular/animations": "14.0.6",
    "@angular/cdk": "14.1.2",
    "@angular/common": "14.0.6",
    "@angular/compiler": "14.0.6",
    "@angular/core": "14.0.6",
    "@angular/forms": "14.0.6",
    "@angular/material": "14.1.2",
    "@angular/platform-browser": "14.0.6",
    "@angular/platform-browser-dynamic": "14.0.6",
    "@angular/router": "14.0.6",
    "@angular/upgrade": "14.0.6",
    "@c8y/client": "1018.0.240",
    "@c8y/ng1-modules": "1018.0.240",
    "@c8y/ngx-components": "1018.0.240",
    "@c8y/style": "1018.0.240",
    "@ng-select/ng-select": "^9.1.0",
    "@ngx-translate/core": "14.0.0",
    "angular": "1.6.9",
    "chartjs-plugin-annotation": "^0.5.7",
    "chartjs-plugin-zoom": "^0.7.7",
    "leaflet-draw": "^1.0.4",
    "leaflet-extra-markers": "^1.2.1",
    "leaflet.markercluster": "^1.4.1",
    "leaflet2": "npm:leaflet@^1.9.0",
    "ng2-charts": "^2.4.2",
    "ngx-bootstrap": "9.0.0",
    "rxjs": "~6.6.3",
    "util": "^0.12.5",
    "zone.js": "~0.11.7",
    "html-loader": "4.1.0",
    "style-loader": "3.3.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "14.0.6",
    "@angular/compiler-cli": "14.0.6",
    "@angular/language-service": "14.0.6",
    "@angular/localize": "14.0.6",
    "@angular/service-worker": "14.0.6",
    "@c8y/cli": "1018.0.240",
    "@types/jest": "^28.1.6",
    "cypress": "^13.6.1",
    "cypress-real-events": "^1.11.0",
    "jest": "^28.1.3",
    "jest-preset-angular": "^12.2.5",
    "typescript": "4.7.4"

Something has changed about branding probably but I cannot find any docs about it