I have an Angular app, I have updated the app to the version 11. I have node v15.10.0 and npm v7.6.3. I have also storybook in my project. This is my package.json:
{
"name": "my-project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --port 4200",
"start:webapp": "ng serve --host 0.0.0.0 --disable-host-check --ssl --ssl-key ~/local/ssl/server.key --ssl-cert ~/local/ssl/server.crt --port 4200",
"build": "NODE_ENV=production ng build --prod",
"build:local": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"preinstall": "npx npm-force-resolutions",
"stylelint": "stylelint --fix \"src/**/*.scss\" --config .stylelintrc.json",
"stylelint:diff": "stylelint \"src/**/*scss\" --config .stylelintrc.json",
"format": "prettier --write \"src/app/**/*.{ts,html,scss}\"",
"format:diff": "prettier --list-different \"src/app/**/*.{ts,html,scss}\"",
"analize": "ng build --prod --stats-json && node_modules/.bin/webpack --json | webpack-bundle-analyzer ./dist/poc-architecture-angular/stats.json",
"doc": "compodoc -p tsconfig.base.json src --port 8085 -s",
"storybook": "compodoc -p tsconfig.base.json src -e json && start-storybook -s src/assets -p 9001 -c .storybook",
"cypress:open": "cypress open",
"cypress:run": "cypress run"
},
"resolutions": {
"tapable": "1.1.3"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/app/**/*.{ts,html,scss}": [
"prettier --write"
]
},
"private": true,
"dependencies": {
"@angular/animations": "^11.2.5",
"@angular/cdk": "^11.2.4",
"@angular/common": "^11.2.5",
"@angular/compiler": "^11.2.6",
"@angular/core": "^11.2.5",
"@angular/forms": "^11.2.5",
"@angular/platform-browser": "^11.2.5",
"@angular/platform-browser-dynamic": "^11.2.5",
"@angular/router": "^11.2.5",
"@fortawesome/angular-fontawesome": "^0.8.2",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fullcalendar/angular": "^5.5.0",
"@fullcalendar/core": "^5.5.1",
"@fullcalendar/daygrid": "^5.5.0",
"@fullcalendar/interaction": "^5.5.0",
"@ng-select/ng-select": "^6.1.0",
"@ngrx/effects": "^11.0.1",
"@ngrx/router-store": "^11.0.1",
"@ngrx/store": "^11.0.1",
"@ngrx/store-devtools": "^11.0.1",
"chart.js": "^2.9.3",
"hammerjs": "^2.0.8",
"lodash-es": "^4.17.20",
"moment": "^2.29.1",
"ng2-date-picker": "^11.0.0",
"ngrx-store-localstorage": "^11.0.0",
"ngx-cookie-service": "^11.0.2",
"ngx-webstorage": "^7.0.1",
"rxjs": "~6.6.6",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1102.5",
"@angular/cli": "^11.2.5",
"@angular/compiler-cli": "^11.2.5",
"@babel/core": "^7.13.10",
"@compodoc/compodoc": "^1.1.11",
"@ngrx/schematics": "^11.0.1",
"@storybook/addon-actions": "^6.1.21",
"@storybook/addon-backgrounds": "^6.1.21",
"@storybook/addon-docs": "^6.1.21",
"@storybook/addon-knobs": "^6.1.21",
"@storybook/addon-storysource": "^6.1.21",
"@storybook/addon-viewport": "^6.1.21",
"@storybook/angular": "^6.1.21",
"@storybook/theming": "^6.1.21",
"@types/faker": "^5.1.7",
"@types/fs-extra": "^5.0.2",
"@types/jasmine": "^3.5.14",
"@types/jasminewd2": "~2.0.3",
"@types/lodash": "^4.14.168",
"@types/node": "^12.12.54",
"autoprefixer": "^10.0.1",
"babel-loader": "^8.2.2",
"codelyzer": "^6.0.0",
"css-loader": "^4.3.0",
"cypress": "^4.12.1",
"faker": "^5.1.0",
"husky": "^4.3.8",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.2.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"lint-staged": "^10.5.4",
"ng-packagr": "^11.2.4",
"postcss": "^8.1.0",
"postcss-loader": "^4.0.2",
"prettier": "^2.2.1",
"protractor": "~7.0.0",
"sass-loader": "^10.0.2",
"style-loader": "^1.2.1",
"stylelint": "^13.6.1",
"stylelint-config-sass-guidelines": "^7.0.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-order": "^4.1.0",
"stylelint-scss": "^3.18.0",
"tailwindcss": "^2.0.3",
"ts-node": "~8.3.0",
"tslint": "^6.1.3",
"tslint-config-prettier": "^1.18.0",
"typescript": "~4.1.5",
"webpack-bundle-analyzer": "^3.9.0",
"webpack-cli": "^4.5.0"
}
}
When I launch npm i I have this error:
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-actions
npm ERR! dev @storybook/addon-actions@"^6.1.21" from the root project
npm ERR! peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-backgrounds
npm ERR! dev @storybook/addon-backgrounds@"^6.1.21" from the root project
npm ERR! 10 more (@storybook/addon-docs, @storybook/addon-knobs, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.4" from [email protected]
npm ERR! node_modules/@storybook/addon-actions/node_modules/react-inspector
npm ERR! react-inspector@"^5.0.1" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-actions
npm ERR! dev @storybook/addon-actions@"^6.1.21" 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/andrea/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/andrea/.npm/_logs/2021-03-25T16_41_28_107Z-debug.log
I tried to launch --legacy-peer-deps but this creates a package-lock.json with "lockfileVersion" setted to 2.
I want to create a regular situation without this issue. I want to launch only npm I without forcing it. How can I solve?
