Unmet peer dependency with ngx-webstorage but don't want to update to Angular 5.0.0 - node.js

I'm trying to build a project that someone else has created but got the unmet dependency issue.
The NPM install command complains taht ngx-webstorage needs angular 5.0.0 and I indeed did not install 5.0.0 since the rest of the project cannot use that yet.
I globally installed node version 6.12 and have angular CLI version 3.10
$ which npm
/usr/bin/npm
$ npm --version
3.10.10
$ which ng
/usr/bin/ng
$ ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 1.6.2
Node: 6.12.0
OS: linux x64
Angular:
...
I used the globally installed npm to install the dependencies and then see the "requires a peer of " message.
$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN ngx-webstorage#2.0.1 requires a peer of #angular/core#^5.0.0 but none was installed.
npm WARN ng2-pop-over#0.9.37 requires a peer of #angular/core#^2.4.0 but none was installed.
npm WARN ng2-pop-over#0.9.37 requires a peer of zone.js#^0.7.2 but none was installed.
npm WARN ng2-accordion#0.0.15 requires a peer of #angular/core#^2.0.0 but none was installed.
npm WARN #schematics/angular#0.0.49 requires a peer of #angular-devkit/schematics#0.0.34 but none was installed.
Here's the package.json
{
"name": "perkin-elmer",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"prestart": "npm install",
"start": "ng serve --proxy-config proxy.config.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.2.4",
"#angular/common": "^4.2.4",
"#angular/compiler": "^4.2.4",
"#angular/core": "^4.2.4",
"#angular/forms": "^4.2.4",
"#angular/http": "^4.2.4",
"#angular/platform-browser": "^4.2.4",
"#angular/platform-browser-dynamic": "^4.2.4",
"#angular/router": "^4.2.4",
"#types/underscore": "^1.8.6",
"ag-grid": "^13.3.1",
"ag-grid-angular": "^13.3.0",
"angular-2-dropdown-multiselect": "^1.6.3",
"angular2-multiselect-checkbox-dropdown": "^1.5.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"jquery": "^2.2.4",
"lodash": "^4.17.4",
"ng-dynamic-component": "^1.1.0",
"ng2-accordion": "0.0.15",
"ng2-bootstrap-modal": "^1.0.1",
"ng2-pop-over": "^0.9.37",
"ngx-treeview": "^1.2.5",
"ngx-webstorage": "^2.0.1",
"rxjs": "^5.4.2",
"underscore": "^1.8.3",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "1.4.5",
"#angular/compiler-cli": "^4.2.4",
"#angular/language-service": "^4.2.4",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/lodash": "^4.14.91",
"#types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"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.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.3.3"
}
}
Since I did not develop the package, I am not sure why the ngx-webstorage was set to require version 2.0.1, which needs angular 5.0.0 since that clearly does not correspond to the rest of the angular versions requirements since those are still 4 in all cases.
I checked the npm site for the requirements for ngx-webstorage 2.0.1 and indeed the devDependencies is 5.0.0, but how could this package.json ever have worked? I know it works, since the app is running on some other site...
Any help is appreciated.

Appearantly, ngx-webstorage is abandoned. ( See: https://github.com/PillowPillow/ng2-webstorage/pull/91)
Use Angular 6 compatible fork of ngx-webstorage: https://www.npmjs.com/package/#rars/ngx-webstorage/v/3.0.0
npm install #rars/ngx-webstorage --save

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

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.

Cannot find module '#angular/compiler-cli/ngcc'

in using below versions of angular:
there is a build script to build and I run npm run build to run this project but I am getting an error after changed my laptop and newly installed nodjs angular
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 9.0.1
Node: 12.15.0
OS: win32 x64
Angular:
...
Ivy Workspace:
Package Version
------------------------------------------------------
#angular-devkit/architect 0.900.1
#angular-devkit/core 9.0.1
#angular-devkit/schematics 9.0.1
#schematics/angular 9.0.1
#schematics/update 0.900.1
rxjs 6.5.3
may package json is
{
"name": "webprimeng",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod --output-path ../src/main/resources/static --base-href /transaction/ --deploy-url /transaction/",
"watch": "ng build --prod --output-path ../src/main/resources/static --base-href /transaction/ --deploy-url /transaction/ --watch",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~7.0.0",
"#angular/common": "~7.0.0",
"#angular/compiler": "~7.0.0",
"#angular/core": "~7.0.0",
"#angular/forms": "~7.0.0",
"#angular/http": "~7.0.0",
"#angular/platform-browser": "~7.0.0",
"#angular/platform-browser-dynamic": "~7.0.0",
"#angular/router": "~7.0.0",
"#ng-bootstrap/ng-bootstrap": "^3.3.1",
"#ngx-pwa/local-storage": "^7.4.2",
"angular-font-awesome": "^3.1.2",
"angular-web-storage": "^4.1.0",
"bootstrap": "^4.3.1",
"core-js": "^2.6.10",
"ng2-cookies": "^1.0.12",
"primeflex": "^1.0.0",
"primeicons": "^1.0.0",
"primeng": "^6.1.7",
"rxjs": "^6.5.3",
"rxjs-compat": "^6.5.3",
"zone.js": "^0.8.29"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.900.1",
"#angular/cli": "^9.0.1",
"#angular/compiler-cli": "^9.0.0",
"#angular/language-service": "~7.0.0",
"#types/jasmine": "^2.8.16",
"#types/jasminewd2": "^2.0.8",
"#types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.6",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.2",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6"
}
}
my error is :
An unhandled exception occurred: Cannot find module '#angular/compiler-cli/ngcc'
Require stack:
- D:\workspace\webprimeng\primeng\node_modules\#ngtools\webpack\src\ngcc_processor.js
- D:\workspace\webprimeng\primeng\node_modules\#ngtools\webpack\src\angular_compiler_plugin.js
- D:\workspace\webprimeng\primeng\node_modules\#ngtools\webpack\src\index.js
- D:\workspace\webprimeng\primeng\node_modules\#angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\typescript.js
- D:\workspace\webprimeng\primeng\node_modules\#angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\index.js
- D:\workspace\webprimeng\primeng\node_modules\#angular-devkit\build-angular\src\browser\index.js
- D:\workspace\webprimeng\primeng\node_modules\#angular-devkit\architect\node\node-modules-architect-host.js
- D:\workspace\webprimeng\primeng\node_modules\#angular-devkit\architect\node\index.js
- D:\workspace\webprimeng\primeng\node_modules\#angular\cli\models\architect-command.js
- D:\workspace\webprimeng\primeng\node_modules\#angular\cli\commands\build-impl.js
- D:\workspace\webprimeng\primeng\node_modules\#angular-devkit\schematics\tools\export-ref.js
- D:\workspace\webprimeng\primeng\node_modules\#angular-devkit\schematics\tools\index.js
- D:\workspace\webprimeng\primeng\node_modules\#angular\cli\utilities\json-schema.js
- D:\workspace\webprimeng\primeng\node_modules\#angular\cli\models\command-runner.js
- D:\workspace\webprimeng\primeng\node_modules\#angular\cli\lib\cli\index.js
- D:\workspace\webprimeng\primeng\node_modules\#angular\cli\lib\init.js
- D:\workspace\webprimeng\primeng\node_modules\#angular\cli\bin\ng
See "C:\Users\yyy~1\AppData\Local\Temp\ng-hLuf5T\angular-errors.log" for further details.
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file C:\Windows\system32\cmd.exe
npm ERR! errno ENOENT
npm ERR! webprimeng#0.0.0 build: `ng build --prod --output-path ../src/main/resources/static --base-href /transaction/ --deploy-url /transaction/`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the webprimeng#0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\yyyy\AppData\Roaming\npm-cache\_logs\2020-02-09T14_34_11_713Z-debug.log
There is a version mismatch between your project and the devDependency. You might have probably used npm audit fix --force or a similar auto update command, which might have updated the devDependencies in "package.json" file.

NPM install results in 404 when installing angular deps

I have the latest node.js 8.x and npm 5.6.0 installed. When trying to do a npm install, I constantly get the following error:
npm ERR! code E404
npm ERR! 404 Not Found: #angular/router#5.2.0
The module that fails is different every time I retry the installation, but most typically it's #angular/forms#5.2.0, #angular/animations#5.2.0 and #angular/platform-browser#5.2.0
I do have a working internet connection
I have run npm config set registry https://registry.npmjs.org/.
I deleted the node_modules folder
I have deleted the cache: npm cache clean --force
An npm search does find the module:
C:\windows\system32>npm search #angular/router
NAME | DESCRIPTION | AUTHOR | DATE | VERSION | KEYWORDS
#angular/router | Angular -
the… | =angular | 2018-04-16 | 5.2.10 | angular router
What else can be wrong?
Here is the package.json for completeness:
{
"name": "App",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --env=scapp",
"build-local": "ng build --env=dev",
"build-nonevis": "ng build --env=nonevis",
"test": "ng test",
"lint": "ng lint",
"lint-fix": "ng lint --fix",
"e2e": "ng e2e"
},
"dependencies": {
"#angular/animations": "5.2.0",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.2.0",
"#angular/forms": "5.2.0",
"#angular/http": "5.2.0",
"#angular/platform-browser": "5.2.0",
"#angular/platform-browser-dynamic": "5.2.0",
"#angular/router": "5.2.0",
"#ngx-translate/core": "9.1.1",
"#ngx-translate/http-loader": "2.0.1",
"#types/arcgis-js-api": "^4.4.0",
"#types/node": "9.4.0",
"angular2-esri-loader": "^1.0.0",
"cerialize": "^0.1.18",
"chart.js": "2.7.1",
"core-js": "^2.5.1",
"esri-loader": "^1.1.0",
"fullcalendar": "3.7.0",
"intl": "^1.2.5",
"jquery": "3.2.1",
"moment": "2.18.1",
"nanoscroller": "0.8.7",
"ngx-perfect-scrollbar": "5.3.4",
"primeng": "5.2.0",
"quill": "1.1.8",
"rxjs": "5.5.2",
"web-animations-js": "2.3.1",
"zone.js": "0.8.18"
},
"devDependencies": {
"#angular/cli": "^1.6.5",
"#angular/compiler-cli": "^5.2.0",
"#types/jasmine": "2.5.53",
"#types/jasminewd2": "2.0.2",
"#types/node": "6.0.60",
"codelyzer": "4.0.1",
"jasmine-core": "2.6.4",
"jasmine-spec-reporter": "4.1.1",
"karma": "1.7.1",
"karma-chrome-launcher": "2.1.1",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"karma-coverage-istanbul-reporter": "1.3.0",
"protractor": "5.1.2",
"ts-node": "3.2.0",
"tslint": "5.7.0",
"typescript": "2.4.2"
}
}
The problem was caused by a local file .npmrc which contained the line always-auth = true. Removing this line resolved the issue. I have no idea how a 404 error is related to authentication, but noticed that after I switched to a mirror registry, it suddenly reported E401 instead of E404 like the official registry.
In my case, such issue was resolved by adding #latest to the command.
npm install -g #angular/cli#latest

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