Npm install version conflict after migration to Angular 12

dacsystemsw · May 16, 2024, 9:58am

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:

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

The files changed by the above commands are:

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?

Tristan_Bastian · May 16, 2024, 11:33am

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.

Upgrade to 1013.0.437
Upgrade to 1014.0.427
Upgrade to 1015.0.536
Upgrade to 1016.0.483
Upgrade to 1017.0.522
Upgrade to 1018.0.260

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

Regards,
Tristan

Stefan_Witschel · May 16, 2024, 11:40am

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

dacsystemsw · May 17, 2024, 7:53am

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

Tristan_Bastian · May 17, 2024, 8:19am

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

dacsystemsw · May 17, 2024, 8:58am

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.

Tristan_Bastian · May 17, 2024, 9:58am

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…

dacsystemsw · July 4, 2024, 12:12pm

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:

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

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?

Tristan_Bastian · July 4, 2024, 2:03pm

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

dacsystemsw · July 4, 2024, 2:27pm

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

Stefan_Witschel · July 5, 2024, 7:29am

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

dacsystemsw · July 5, 2024, 1:33pm

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

Npm install version conflict after migration to Angular 12

Product/components used and version/fix level:

Detailed explanation of the problem:

Error messages / full error message screenshot / log file:

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

Related topics