installation npm failed for an existing project with angular 4 - node.js

I'm begginer on angular 4. I tried to import an existing project on angular 4 to my local machine.
I used npm install to get nodes_modules using the package.json of the project, but I got this error :
This is the error log:
36096 warn #angular/material-moment-adapter#5.2.5 requires a peer of #angular/material#5.2.5 but none is installed. You must install peer dependencies yourself.
36097 warn bootstrap#4.0.0-beta.2 requires a peer of popper.js#^1.12.3 but none is installed. You must install peer dependencies yourself.
36098 warn ngx-malihu-scrollbar#1.2.2 requires a peer of #angular/core#^2.4.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
36099 warn angular2-perfect-scrollbar#2.0.6 requires a peer of #angular/common#^2.0.0 but none is installed. You must install peer dependencies yourself.
36100 warn angular2-perfect-scrollbar#2.0.6 requires a peer of #angular/core#^2.0.0 but none is installed. You must install peer dependencies yourself.
36101 warn angular2-perfect-scrollbar#2.0.6 requires a peer of #angular/platform-browser#^2.0.0 but none is installed. You must install peer dependencies yourself.
36102 warn angular2-perfect-scrollbar#2.0.6 requires a peer of zone.js#^0.7.0 but none is installed. You must install peer dependencies yourself.
36103 warn #angular/compiler-cli#5.0.2 requires a peer of typescript#>=2.4.2 <2.5 but none is installed. You must install peer dependencies yourself.
36104 warn #angular-devkit/schematics#0.0.52 requires a peer of #angular-devkit/core#0.0.29 but none is installed. You must install peer dependencies yourself.
36105 warn #schematics/angular#0.1.17 requires a peer of #angular-devkit/core#0.0.29 but none is installed. You must install peer dependencies yourself.
36106 warn tsickle#0.24.1 requires a peer of typescript#2.4.2 but none is installed. You must install peer dependencies yourself.
36110 verbose stack Error: node-sass#4.7.2 postinstall: `node scripts/build.js`
36111 verbose pkgid node-sass#4.7.2
36113 verbose Windows_NT 10.0.14393
36114 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
36115 verbose node v10.13.0
36116 verbose npm v6.4.1
36117 error code ELIFECYCLE
36118 error errno 1
36119 error node-sass#4.7.2 postinstall: `node scripts/build.js`
36119 error Exit status 1
36120 error Failed at the node-sass#4.7.2 postinstall script.
36120 error This is probably not a problem with npm. There is likely additional logging output above.
36121 verbose exit [ 1, true ]
this is my package.json:
{
"name": "front-angular",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "5.0.2",
"#angular/cdk": "5.0.0-rc0",
"#angular/common": "5.0.2",
"#angular/compiler": "5.0.2",
"#angular/core": "5.0.2",
"#angular/forms": "5.0.2",
"#angular/http": "5.0.2",
"#angular/material": "^5.2.0",
"#angular/material-moment-adapter": "^5.2.4",
"#angular/platform-browser": "5.0.2",
"#angular/platform-browser-dynamic": "5.0.2",
"#angular/router": "5.0.2",
"#ngx-translate/core": "8.0.0",
"#ngx-translate/http-loader": "2.0.0",
"#swimlane/ngx-charts": "7.0.1",
"#swimlane/ngx-datatable": "11.1.2",
"angular2-text-mask": "8.0.4",
"angular2-wizard": "0.4.0",
"bootstrap": "4.0.0-beta.2",
"compass-mixins": "0.12.10",
"devextreme": "^17.2.7",
"devextreme-angular": "^17.2.7",
"font-awesome": "4.7.0",
"jquery": "3.2.1",
"material-design-iconic-font": "2.2.0",
"mdi": "2.0.46",
"moment": "^2.22.0",
"multi-brand-colors": "1.1.3",
"ng2-password-strength-bar": "1.1.3",
"ng2-responsive": "0.8.4",
"ng2-search-filter": "0.3.1",
"ng2-validation": "4.2.0",
"ng2-webstorage": "2.0.0",
"ngbox": "0.0.15",
"ngx-bootstrap": "2.0.0-beta.8",
"ngx-ckeditor": "0.1.1",
"ngx-malihu-scrollbar": "1.2.2",
"ngx-perfect-scrollbar": "5.0.2",
"ngx-uploader": "4.2.1",
"node-sass": "4.7.2",
"sweetalert2": "^7.18.0",
"ts-helper": "0.0.1",
"web-animations-js": "2.3.1"
},
"devDependencies": {
"#angular/cli": "1.5.2",
"#angular/compiler-cli": "5.0.2",
"#angular/language-service": "5.0.2",
"#types/jasmine": "2.8.2",
"#types/jasminewd2": "2.0.2",
"#types/node": "8.0.53",
"angular2-perfect-scrollbar": "2.0.6",
"codelyzer": "4.0.1",
"copy-webpack-plugin": "4.2.3",
"jasmine-core": "2.8.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "1.7.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "1.2.1",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"protractor": "5.2.0",
"ts-node": "3.3.0",
"tslint": "5.8.0",
"typescript": "2.6.1"
}
}
I'm using :
npm : v6.4.1
node: v10.13.0
Thank you.

You use Windows. Npm says windows build tools are not up to date. You have to upgrade the windows build tools. Try this command: npm install --global --production windows-build-tools
Also, take a look here. Maybe it can help: https://github.com/nodejs/node-gyp/issues/629#issuecomment-153196245

Related

npm install not working in angular project

Runnig npm install command is giving errors.
THE ERROR:
``
PS D:\t> npm install
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: public_services#1.0.0
npm ERR! Found: typescript#4.9.4
npm ERR! node_modules/typescript
npm ERR! dev typescript#"~4.9.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer typescript#">=4.8.2 <4.9" from #angular/compiler-cli#15.0.4
npm ERR! node_modules/#angular/compiler-cli
npm ERR! dev #angular/compiler-cli#"~15.0.4" from the root project
npm ERR! peer #angular/compiler-cli#"15.0.4" from #angular/localize#15.0.4
npm ERR! node_modules/#angular/localize
npm ERR! dev #angular/localize#"^15.0.4" from the root project
npm ERR! 1 more (#ng-bootstrap/ng-bootstrap)
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 C:\Users\sayed.hussainullah\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\sayed.hussainullah\AppData\Local\npm-cache\_logs\2023-01-11T06_57_30_299Z-debug-0.log
``
Global angular version:
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 15.0.5
Node: 16.16.0
Package Manager: npm 8.17.0
OS: win32 x64
Angular:
...
Package Version
------------------------------------------------------
#angular-devkit/architect 0.1500.5 (cli-only)
#angular-devkit/core 15.0.5 (cli-only)
#angular-devkit/schematics 15.0.5 (cli-only)
#schematics/angular 15.0.5 (cli-only)
Package.json file:
{
"name": "public_services",
"version": "1.0.0",
"license": "",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~15.0.4",
"#angular/cdk": "^15.0.4",
"#angular/common": "~15.0.4",
"#angular/compiler": "~15.0.4",
"#angular/core": "~15.0.4",
"#angular/forms": "~15.0.4",
"#angular/platform-browser": "~15.0.4",
"#angular/platform-browser-dynamic": "~15.0.4",
"#angular/router": "15.0.4",
"#fortawesome/angular-fontawesome": "^0.12.1",
"#fortawesome/fontawesome-svg-core": "^6.2.1",
"#fortawesome/free-brands-svg-icons": "^6.2.1",
"#fortawesome/free-regular-svg-icons": "^6.2.1",
"#fortawesome/free-solid-svg-icons": "^6.2.1",
"#ng-bootstrap/ng-bootstrap": "14.0.1",
"#ng-select/ng-select": "^10.0.3",
"#ngx-translate/core": "^14.0.0",
"#ngx-translate/http-loader": "7.0.0",
"#swimlane/ngx-datatable": "^20.1.0",
"angular-archwizard": "7.0.0",
"angular-feather": "^6.5.0",
"bootstrap": "5.2.3",
"chart.js": "^4.1.2",
"classlist.js": "1.1.20150312",
"core-js": "3.27.1",
"date-fns": "2.29.3",
"gulp": "4.0.2",
"hopscotch": "0.3.1",
"intl": "1.2.5",
"moment": "2.29.4",
"ng-lazyload-image": "^9.1.3",
"ng2-charts": "^4.1.1",
"ng2-file-upload": "3.0.0",
"ng2-img-cropper": "0.9.0",
"ng2-jalali-date-picker": "^2.2.8",
"ngx-bootstrap": "^10.2.0",
"ngx-chips": "3.0.0",
"ngx-datatable": "^1.0.3",
"ngx-dropzone-wrapper": "^13.0.0",
"ngx-perfect-scrollbar": "^7.2.1",
"ngx-toastr": "16.0.2",
"node-sass": "^8.0.0",
"nouislider": "15.6.1",
"prismjs": "1.29.0",
"resize-observer-polyfill": "1.5.1",
"rxjs": "7.8.0",
"screenfull": "6.0.2",
"sweetalert2": "11.6.16",
"tslib": "^2.4.1",
"web-animations-js": "^2.3.2",
"xlsx": "^0.18.5",
"zone.js": "~0.12.0"
},
"devDependencies": {
"#angular-devkit/build-angular": "~15.0.5",
"#angular/cli": "~15.0.5",
"#angular/compiler-cli": "~15.0.4",
"#angular/language-service": "~15.0.4",
"#angular/localize": "^15.0.4",
"#types/core-js": "2.5.5",
"#types/jasmine": "^4.3.1",
"#types/jasminewd2": "~2.0.10",
"#types/jquery": "^3.5.16",
"#types/node": "^18.11.18",
"codelyzer": "^6.0.2",
"jasmine-core": "~4.5.0",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.4.1",
"karma-chrome-launcher": "~3.1.1",
"karma-cli": "~2.0.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.0.0",
"protractor": "~7.0.0",
"rxjs-compat": "6.6.7",
"ts-node": "~10.9.1",
"tslint": "~6.1.0",
"typescript": "~4.9.4"
}
}
I have tried:
delete node modules.
clear cache.
unistall node.js and reinstall lower version.
installed msbuild-tools.
so far non-of these methods worked
You should try running npm install --legacy-peer-deps, in order to ignore dependencies between packages. Nevertheless the root cause of your problem is that your installed angular versions expects typescript version >=4.8.2 and <4.9, but 4.9.4 will be installed. So a solution might be to downgrade your typescript version or update your angular versions.
There are limitations of npm's Install Algorithm, So npm will refuse to install any package with an identical name to the current package. It will overridden with the --force flag, but in most cases can simply be addressed by changing the local package name.
So you need to use --force flag to re-install packages again like below:
npm install --force

Can't resolve dependency, refering to root project - next#"^9.5.6-canary.13, next-routes#"^1.4.2"

I am trying for hours to resolve this issue, running from one error to the next one…
Trying everything from --legacy-peer-deps, --force npm audit fix, at this point I am not even able to install my packages without running into errors, and I don't understand what that error is saying:
npm ERR! Found: next#9.5.6-canary.18
npm ERR! node_modules/next
npm ERR! next#"^9.5.6-canary.13" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer next#">=2" from next-routes#1.4.2
npm ERR! node_modules/next-routes
npm ERR! next-routes#"^1.4.2" from the root project
My package.json:
{
"name": "project-name",
"version": "0.1.0",
"private": true,
"main": "index.js",
"scripts": {
"test": "next dev",
"dev": "node server.js",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#apollo/client": "^3.3.19",
"apollo-boost": "^0.4.9",
"babel-loader": "^8.2.2",
"babel-register": "^6.26.0",
"dotenv": "^8.2.0",
"framer-motion": "^4.0.0",
"fs": "0.0.1-security",
"graphql": "^15.5.0",
"https": "^1.0.0",
"ignore-loader": "^0.1.2",
"lazysizes": "^5.3.2",
"next": "^9.5.6-canary.13",
"next-routes": "^1.4.2",
"node-webvtt": "^1.9.3",
"path": "^0.12.7",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"sass": "^1.32.6",
"storyblok-js-client": "^4.0.5",
"url": "^0.11.0"
},
"devDependencies": {
"#babel/register": "^7.12.13",
"#types/node": "^14.14.37",
"#types/react": "^17.0.3",
"dotenv-webpack": "^6.0.0",
"typescript": "^4.2.4"
}
}
I am guessing some of the longer list of packages are not playing along with each other, but how can I investigate this further? The error is not very helpful. Also the similar combinations of packages and version seem to work fine in other projects …
The error originally complained about graphql packages I am using, after updating some versions it is now complaining about the next and next-routes packages …
Any ideas?

How to fix "publish-please can't be installed globally" error when I try `npm install firebase-tools -g`

I am facing an issue recently on my CI server. I always run npm install firebase-tools every time I would want to deploy my codes. However, recently this error prevents it from happenning.
Step to reproduce
cd to project folder
run npm install firebase-tools -g
output
npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated cross-spawn-async#2.2.5: cross-spawn no longer requires a build toolchain, use it instead
npm WARN deprecated har-validator#5.1.5: this library is no longer supported
> publish-please#5.5.2 preinstall C:\Users\ulala\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\publish-please
> node lib/pre-install.js
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!! Starting from v2.0.0 publish-please can't be installed globally. !!
!! Use local installation instead : 'npm install --save-dev publish-please', !!
!! Or use npx if you do not want to install publish-please as a dependency. !!
!! (learn more: https://github.com/inikulin/publish-please#readme). !!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#~2.1.2 (node_modules\firebase-tools\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! publish-please#5.5.2 preinstall: `node lib/pre-install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the publish-please#5.5.2 preinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Edit: here is my package.json. I don't install firebase-tools in my project.
package.json
{
"name": "app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"test": "ng test",
"e2e": "ng e2e"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint"
}
},
"private": true,
"dependencies": {
"#angular/animations": "~10.0.0",
"#angular/cdk": "^10.1.1",
"#angular/common": "~10.0.0",
"#angular/compiler": "~10.0.0",
"#angular/core": "~10.0.0",
"#angular/fire": "^6.0.2",
"#angular/flex-layout": "^10.0.0-beta.32",
"#angular/forms": "~10.0.0",
"#angular/material": "^10.0.0",
"#angular/platform-browser": "~10.0.0",
"#angular/platform-browser-dynamic": "~10.0.0",
"#angular/router": "~10.0.0",
"#ngrx/effects": "^10.0.0-beta.0",
"#ngrx/entity": "^10.0.0-beta.0",
"#ngrx/router-store": "^10.0.0-beta.0",
"#ngrx/store": "^10.0.0-beta.0",
"#ngrx/store-devtools": "^10.0.0-beta.0",
"#types/uuid": "^8.0.0",
"chart.js": "^2.9.3",
"compressorjs": "^1.0.6",
"emailjs-com": "^2.4.1",
"firebase": "^7.15.5",
"ng2-charts": "^2.4.1",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"uuid": "^8.2.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"#angular-devkit/architect": ">= 0.900 < 0.1100",
"#angular-devkit/build-angular": "^0.1000.8",
"#angular/cli": "~10.0.0",
"#angular/compiler-cli": "~10.0.0",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^6.0.0-next.1",
"firebase-tools": "^8.0.0",
"fuzzy": "^0.1.3",
"husky": "^4.2.5",
"inquirer": "^6.2.2",
"inquirer-autocomplete-prompt": "^1.0.1",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.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",
"open": "^7.0.3",
"prettier": "^2.0.5",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"tslint-config-prettier": "^1.18.0",
"tslint-plugin-prettier": "^2.3.0",
"typescript": "~3.9.5"
},
"repository": {
"type": "git",
"url": "git+ssh://git#gitlab.com/skilio/client-web-app-2.0.git"
},
"author": "Dody",
"license": "ISC",
"bugs": {
"url": "https://gitlab.com/skilio/client-web-app-2.0/issues"
},
"homepage": "https://gitlab.com/skilio/client-web-app-2.0#readme"
}
As of about an hour ago (as of this writing) a fix has been published to the cli-table dependency of firebase-tools. If you try npm install -g firebase-tools now, it should work.
In other words, you weren't doing anything wrong. This was a temporary breakage in a dependency of firebase-tools that existed for a few hours.

ionic - Confusion about the version

This is my package.json I got from my client:
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/animations": "^4.1.3",
"#angular/common": "4.1.3",
"#angular/compiler": "4.1.3",
"#angular/compiler-cli": "4.1.3",
"#angular/core": "4.1.3",
"#angular/forms": "4.1.3",
"#angular/http": "4.1.3",
"#angular/platform-browser": "4.1.3",
"#angular/platform-browser-dynamic": "4.1.3",
"#angular/platform-server": "4.1.3",
"#ionic-native/core": "3.12.1",
"#ionic-native/device": "^3.12.1",
"#ionic-native/file-opener": "^3.12.1",
"#ionic-native/geolocation": "^3.12.1",
"#ionic-native/status-bar": "^3.12.1",
"#ionic/storage": "2.0.1",
"#ng-idle/core": "^2.0.0-beta.8",
"#ng-idle/keepalive": "^2.0.0-beta.8",
"#types/ibm-mobilefirst": "0.0.28",
"#types/jquery": "^3.2.6",
"ajv": "^5.2.2",
"ionic-angular": "^3.5.0",
"ionicons": "3.0.0",
"ng2-translate": "^4.2.0",
"rxjs": "5.4.0",
"sw-toolbox": "3.6.0",
"typings": "^2.1.1",
"zone.js": "0.8.12"
},
"devDependencies": {
"#ionic/app-scripts": "^2.0.0",
"grunt": "^1.0.1",
"grunt-cli": "^1.2.0",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-contrib-copy": "^1.0.0",
"grunt-exec": "^0.4.6",
"grunt-file-exists": "^0.1.4",
"grunt-include-replace": "^4.0.1",
"grunt-string-replace": "^1.2.1",
"grunt-template": "^0.2.3",
"typescript": "2.3.4"
},
"cordovaPlugins": [
"ionic-plugin-keyboard",
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
}
],
"description": "online_registration: An Ionic project"
}
And when I tried npm install, I got this warning:
npm WARN #angular/animations#4.3.6 requires a peer of
#angular/core#4.3.6 but none was installed. npm WARN
#angular/platform-server#4.1.3 requires a peer of
#angular/animations#4.1.3 but none was installed. npm WARN
#ionic-native/splash-screen#3.1.0 requires a peer of
#ionic-native/core#3.1.0 but none was installed. npm WARN
#ionic-native/splash-screen#3.1.0 requires a peer of
#angular/core#2.4.8 but none was installed. npm WARN
#ionic-native/splash-screen#3.1.0 requires a peer of rxjs#5.0.1 but
none was installed. npm WARN grunt-template#0.2.3 requires a peer of
grunt#~0.4.0 but none was installed. npm WARN ng2-translate#4.2.0
requires a peer of #angular/core#^2.0.0 but none was installed. npm
WARN ng2-translate#4.2.0 requires a peer of #angular/http#^2.0.0 but
none was installed.
How critical is this?
Then I check the ionic info:
cli packages: (/Users/xxx/.nvm/versions/node/v6.9.1/lib/node_modules)
#ionic/cli-utils : 1.9.2
ionic (Ionic CLI) : 3.9.2
global packages:
Cordova CLI : 6.4.0
local packages:
#ionic/app-scripts : 2.1.4
Cordova Platforms : android 6.1.2 ios 4.1.1
Ionic Framework : ionic-angular 3.6.0
It seems like it did not follow package.json, which ionic-angular is ^3.5.0. Is this correct?
You just need to delete node_modules folder and after that run npm i.Hope everything will be fine then.

UNMET PEER DEPENDENCY D3.js and Angular 2

I have an existing Angular 2 project, and I'm trying to get started integrating some D3.js into my project. I'm new to Angular, and this will be my first go at using D3. I'll be following this tutorial: https://keathmilligan.net/create-reusable-chart-components-with-angular-2-and-d3-js-version-4/
I'm running the command npm install --save d3, and I get:
├── UNMET PEER DEPENDENCY #angular/compiler#2.2.3
├── UNMET PEER DEPENDENCY #angular/compiler-cli#2.2.3
├── UNMET PEER DEPENDENCY #angular/core#2.2.3
└── d3#4.4.1
...then
npm WARN #ngtools/webpack#1.2.1 requires a peer of #angular/compiler#^2.3.1 but none was installed.
npm WARN #ngtools/webpack#1.2.1 requires a peer of #angular/compiler-cli#^2.3.1 but none was installed.
npm WARN #ngtools/webpack#1.2.1 requires a peer of #angular/core#^2.3.1 but none was installed.
npm WARN #ngtools/webpack#1.2.1 requires a peer of #angular/tsc-wrapped#^0.5.0 but none was installed.
npm WARN tslint-loader#2.1.5 requires a peer of tslint#^3.0.0 but none was installed.
For one, I guess I'm still not exactly clear on what it really means when I see "UNMET PEER DEPENDENCY". Is this just a warning, or is this indicating that something is really broken? My project works currently (but I haven't started coding with D3)... Is it merely that the wrong version of something is installed? I've taken the steps of updating everything via npm update --save, and NPM did find some updates for me, but I still have the same issue.
My main question though, I'm installing D3js, shouldn't that be completely independent of Angular? Why is NPM barking about Angular stuff when I am installing something unrelated?
Here is my package.json post update:
"name": "cl-test2",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "2.2.3",
"#angular/compiler": "2.2.3",
"#angular/core": "^2.2.3",
"#angular/forms": "2.2.3",
"#angular/http": "2.2.3",
"#angular/platform-browser": "2.2.3",
"#angular/platform-browser-dynamic": "2.2.3",
"#angular/router": "3.2.3",
"#types/node": "^6.0.58",
"angular-cli": "^1.0.0-beta.22-1",
"core-js": "^2.4.1",
"d3": "^4.4.1",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"tslint": "^4.3.1",
"zone.js": "^0.6.23"
},
"devDependencies": {
"#angular/compiler-cli": "2.2.3",
"#types/jasmine": "2.5.38",
"#types/node": "^6.0.42",
"angular-cli": "^1.0.0-beta.24",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "^4.0.2",
"typescript": "~2.0.3",
"webdriver-manager": "10.2.5"
}
}
UNMET PEER DEPENDENCY logs are just warnings not errors.
They warn you that the lib that you are using, #ngtools/webpack#1.2.1, should be using #angular/compiler#^2.3.1 (more info on ^ https://stackoverflow.com/a/22345808/5706293) as I'm sure you figured out yourself.
The author of those libs may have some deprecated APIs and may not support the current code in the later versions, that's one of the reasons that you should upgrade your dependencies.
This doesn't answer all of the questions I had, but it does clear up the warnings I was getting. I just updated several packages to the latest versions.
{
"name": "cl-test2",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "^2.4.2",
"#angular/compiler": "^2.4.2",
"#angular/core": "^2.4.2",
"#angular/forms": "^2.4.2",
"#angular/http": "^2.4.2",
"#angular/platform-browser": "^2.4.2",
"#angular/platform-browser-dynamic": "^2.4.2",
"#angular/router": "^3.4.2",
"core-js": "^2.4.1",
"d3": "^4.4.1",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.2",
"types.d3": "^0.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"#angular/compiler-cli": "2.4.2",
"#types/jasmine": "2.5.38",
"#types/node": "^6.0.42",
"angular-cli": "^1.0.0-beta.24",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.0.2",
"typescript": "~2.1.4",
"webdriver-manager": "10.2.5"
}
}
I had also similar issue, I have followed the steps
First, npm install -g #angular/cli
create new project with ng new hero-app
After the go inside the project folder and run server ng serve
and open browser and run http://localhost:4200
This is work for me.. Hope same thing work for you as well

Resources