# Npm install version conflict after migration to Angular 12 **URL:** \ **Category:** Forum\ **Tags:** cumulocity\ **Created:** [May 16, 2024, 9:58am UTC](https://community.cumulocity.com/t/npm-install-version-conflict-after-migration-to-angular-12/7798 "2024-05-16T09:58:26Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![dacsystemsw](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dacsystemsw](https://community.cumulocity.com/u/dacsystemsw)\ **Post date:** [May 16, 2024, 9:58am UTC](https://community.cumulocity.com/t/npm-install-version-conflict-after-migration-to-angular-12/7798/1 "2024-05-16T09:58:26Z")
#### _ **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](https://community.cumulocity.com/t/dashboard-design-for-a-lot-of-devices/6995/1). 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](https://cumulocity.com/docs/2024/web/upgrade/#updating) receip: 1. `c8ycli new atc cockpit -a @c8y/apps@1011.45.0` The files changed by the above commands are: ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/f/9/f9e09330dd3ccdabac3c3d8a964f240ff48db08b.png) In particular this is the new package.json: ```auto { "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: ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/3/d/3d4635644ba6d193ac12bb90f5254ba88c551f86.png) Any suggestion? #### _Error messages / **full error** message screenshot / **log** file:_ #### _Question related to a **free trial** , or to a **production (customer)** instance?_ ---
**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\ **Post date:** [May 16, 2024, 11:33am UTC](https://community.cumulocity.com/t/npm-install-version-conflict-after-migration-to-angular-12/7798/2 "2024-05-16T11:33:45Z")
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 ---
**Author:** ![Stefan\_Witschel](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/stefan_witschel/32/31955_2.png) [@Stefan\_Witschel](https://community.cumulocity.com/u/Stefan_Witschel)\ **Post date:** [May 16, 2024, 11:40am UTC](https://community.cumulocity.com/t/npm-install-version-conflict-after-migration-to-angular-12/7798/3 "2024-05-16T11:40:48Z")
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 > **[Angular](https://v17.angular.io/guide/versions)** > > The web development framework for building modern apps. ---
**Author:** ![dacsystemsw](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dacsystemsw](https://community.cumulocity.com/u/dacsystemsw)\ **Post date:** [May 17, 2024, 7:53am UTC](https://community.cumulocity.com/t/npm-install-version-conflict-after-migration-to-angular-12/7798/4 "2024-05-17T07:53:03Z")
As suggested by Tristan I upgraded directly to 1018.0.240. I’m using node 16.13.0 However after ```auto c8ycli new atc cockpit -a @c8y/apps@1018.0.240 ``` And deleting node\_modules and running: ```auto npm install ``` I run into this: ```auto 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 ---
**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\ **Post date:** [May 17, 2024, 8:19am UTC](https://community.cumulocity.com/t/npm-install-version-conflict-after-migration-to-angular-12/7798/5 "2024-05-17T08:19:10Z")
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 ---
**Author:** ![dacsystemsw](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dacsystemsw](https://community.cumulocity.com/u/dacsystemsw)\ **Post date:** [May 17, 2024, 8:58am UTC](https://community.cumulocity.com/t/npm-install-version-conflict-after-migration-to-angular-12/7798/6 "2024-05-17T08:58:51Z")
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: ```auto { "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. ---
**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\ **Post date:** [May 17, 2024, 9:58am UTC](https://community.cumulocity.com/t/npm-install-version-conflict-after-migration-to-angular-12/7798/7 "2024-05-17T09:58:36Z")
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… ---
**Author:** ![dacsystemsw](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dacsystemsw](https://community.cumulocity.com/u/dacsystemsw)\ **Post date:** [July 4, 2024, 12:12pm UTC](https://community.cumulocity.com/t/npm-install-version-conflict-after-migration-to-angular-12/7798/8 "2024-07-04T12:12:55Z")
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](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/b/a/ba70b81ad5ef4b40e90b6945bf6662bb74c489aa.png) The c8ycli is installed globally using` npm i -g @c8y/cli@1018.0.240` ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/0/e/0ea62da953d7846c1ce869610311c620607d5bf1.png) So, to upgrade i run: ```auto c8ycli new my-cockpit cockpit ``` Then when i run npm install: ```auto 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? ---
**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\ **Post date:** [July 4, 2024, 2:03pm UTC](https://community.cumulocity.com/t/npm-install-version-conflict-after-migration-to-angular-12/7798/9 "2024-07-04T14:03:04Z")
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 ---
**Author:** ![dacsystemsw](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dacsystemsw](https://community.cumulocity.com/u/dacsystemsw)\ **Post date:** [July 4, 2024, 2:27pm UTC](https://community.cumulocity.com/t/npm-install-version-conflict-after-migration-to-angular-12/7798/10 "2024-07-04T14:27:42Z")
Hi Tristan, I noticed a referece to @c8y/cli1011.0.15 in package-lock.json. This is how it looks: ```auto 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` ---
**Author:** ![Stefan\_Witschel](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/stefan_witschel/32/31955_2.png) [@Stefan\_Witschel](https://community.cumulocity.com/u/Stefan_Witschel)\ **Post date:** [July 5, 2024, 7:29am UTC](https://community.cumulocity.com/t/npm-install-version-conflict-after-migration-to-angular-12/7798/11 "2024-07-05T07:29:01Z")
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 ---
**Author:** ![dacsystemsw](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dacsystemsw](https://community.cumulocity.com/u/dacsystemsw)\ **Post date:** [July 5, 2024, 1:33pm UTC](https://community.cumulocity.com/t/npm-install-version-conflict-after-migration-to-angular-12/7798/12 "2024-07-05T13:33:37Z")
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: ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/e/a/ea366515ab210a588f6c84e7be51db33fe7361b5.jpeg) And I get this warning: ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/a/4/a498639a7cca47b24a4e791efaaea0723a365b59.png) I think they are related because I import both here: ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/9/7/973c3f53af858d657d1ef8960ea751f92c031d46.png) This is our package.json: ```auto 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 ---
**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/system/32/31990_2.png) [@system](https://community.cumulocity.com/u/system)\ **Post date:** [December 25, 2024, 12:19am UTC](https://community.cumulocity.com/t/npm-install-version-conflict-after-migration-to-angular-12/7798/13 "2024-12-25T00:19:26Z")
Automatically bumped on December 25, 2024, 12:19am UTC ---
**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/system/32/31990_2.png) [@system](https://community.cumulocity.com/u/system)\ **Post date:** [June 23, 2025, 12:19am UTC](https://community.cumulocity.com/t/npm-install-version-conflict-after-migration-to-angular-12/7798/14 "2025-06-23T00:19:45Z")
Closed on June 23, 2025, 12:19am UTC This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.