this is dependencies from my package.json file:
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"#angular/upgrade": "2.0.0",
"angular2-in-memory-web-api": "0.0.20",
"angular2-jwt": "^0.1.22",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"es6-promise": "^3.1.2",
"es6-shim": "^0.35.1",
"es7-reflect-metadata": "^1.6.0",
"jwt-decode": "^2.0.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23"
},
I get warning of angular2-jwt dependency, but I need this pack.
And this is a warning message:
UNMET PEER DEPENDENCY rxjs#5.0.0-beta.12
npm WARN angular2-jwt#0.1.22 requires a peer of rxjs#5.0.0-beta.11
Any ideas?, Thanks.
Such a warning can be ignored. angular2-jwt just needs it peer dependencies updated to match the release version of angular2. Everything will work and is installed as expected
you need to tell at the sytemjs where is the angular2-jwt path so you need to include in the map object.
'angular2-jwt': 'npm:angular2-jwt/angular2-jwt.js'
Be sure, you have in package.json strings:
"devDependencies": {
....
},
"dependencies": {
....
"#types/systemjs": "^0.19.32",
"angular": "^1.5.0",
"angular-animate": "^1.5.0",
"angular-mocks": "^1.5.0",
"base64-js": "^1.2.0",
"bower": "^1.3.12",
....
}
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ng2-dropdown-treeview
or
+-- ng2-dropdown-treeview#0.1.4
+-- UNMET PEER DEPENDENCY rxjs#5.0.0-beta.12
`-- UNMET PEER DEPENDENCY zone.js#0.6.26
I have added the dependency in system.config.js file for ng2-dropdown-treeview, then it works for me.
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'lodash': 'npm:lodash/lodash.min.js',
'ng2-dropdown-treeview': 'npm:ng2-dropdown-treeview/bundles/ng2-dropdown-treeview.umd.js',
Related
When I try to upgrade angular using its documentation to version 9, I get following peer dependency error:
Package "#angular/compiler-cli" has a missing peer dependency of "tslib" # "^1.10.0".
Package "#angular/animations" has a missing peer dependency of "tslib" # "^1.10.0".
Package "#angular/common" has a missing peer dependency of "tslib" # "^1.10.0".
Package "#angular/compiler" has a missing peer dependency of "tslib" # "^1.10.0".
Package "codelyzer" has an incompatible peer dependency to "#angular/compiler" (requires ">=2.3.1 <8.0.0 || >7.0.0-beta <8.0.0" (extended), would install "9.1.13").
Package "#angular/core" has a missing peer dependency of "tslib" # "^1.10.0".
Package "codelyzer" has an incompatible peer dependency to "#angular/core" (requires ">=2.3.1 <8.0.0 || >7.0.0-beta <8.0.0" (extended), would install "9.1.13").
Package "#angular/forms" has a missing peer dependency of "tslib" # "^1.10.0".
Package "#angular/platform-browser" has a missing peer dependency of "tslib" # "^1.10.0".
Package "#angular/http" has an incompatible peer dependency to "#angular/platform-browser" (requires "7.2.16" (extended), would install "9.1.13").
Package "#angular/platform-browser-dynamic" has a missing peer dependency of "tslib" # "^1.10.0".
Package "#angular/router" has a missing peer dependency of "tslib" # "^1.10.0".
Here are the dependencies:
"dependencies": {
"#angular/animations": "^8.2.14",
"#angular/cdk": "^7.3.7",
"#angular/common": "^8.2.14",
"#angular/compiler": "^8.2.14",
"#angular/core": "^8.2.14",
"#angular/forms": "^8.2.14",
"#angular/http": "^7.2.16",
"#angular/material": "^7.3.7",
"#angular/platform-browser": "^8.2.14",
"#angular/platform-browser-dynamic": "^8.2.14",
"#angular/router": "^8.2.14",
"#types/underscore": "^1.8.8",
"ang-jsoneditor": "^1.6.2",
"core-js": "^2.4.1",
"cors": "^2.8.4",
"hammerjs": "^2.0.8",
"jsoneditor": "^5.24.7",
"jsoneditor2": "^1.0.0",
"lodash": "^4.17.20",
"moment": "^2.24.0",
"ng-multiselect-dropdown": "0.2.4",
"ngx-ace-wrapper": "^7.3.0",
"ngx-ui-loader": "^7.2.2",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.6.3",
"underscore": "^1.9.1",
"zone.js": "^0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.803.29",
"#angular/cli": "^8.3.29",
"#angular/compiler-cli": "^8.2.14",
"#angular/language-service": "^8.2.14",
"#compodoc/compodoc": "^1.1.11",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "^4.5.0",
"express": "^4.16.3",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"mini-css-extract-plugin": "^0.8.0",
"protractor": "^5.3.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "^3.5.3"
}
Any suggestion?
The --force flag is the only thing that worked for me:
ng update --force #angular/core#9 #angular/cli#9
For me nothing worked. So I manually changed the version of tslib to the one it's complaining about... and it worked!
I encountered a problem when building a project with angular.
To build, I use:
npm install
To run, I use:
npm install
I'm getting an error:
ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0 Module build failed: Validation Error
URL Loader Invalid Options
options['name'] should NOT have additional properties options.limit should be number
# ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/font-awesome/css/font-awesome.min.css 6:412-465 # ./node_modules/font-awesome/css/font-awesome.min.css # multi (webpack)-dev-server/client?http://localhost:4200 ./node_modules/bootstrap/dist/css/bootstrap.min.css ./node_modules/font-awesome/css/font-awesome.min.css ./node_modules/quill/dist/quill.snow.css ./src/styles.scss
ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0 Module build failed: Validation Error
URL Loader Invalid Options
options['name'] should NOT have additional properties options.limit should be number
# ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/font-awesome/css/font-awesome.min.css 6:495-547 # ./node_modules/font-awesome/css/font-awesome.min.css # multi (webpack)-dev-server/client?http://localhost:4200 ./node_modules/bootstrap/dist/css/bootstrap.min.css ./node_modules/font-awesome/css/font-awesome.min.css ./node_modules/quill/dist/quill.snow.css ./src/styles.scss
ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0 Module build failed: Validation Error
URL Loader Invalid Options
options['name'] should NOT have additional properties options.limit should be number
# ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/font-awesome/css/font-awesome.min.css 6:576-627 # ./node_modules/font-awesome/css/font-awesome.min.css # multi (webpack)-dev-server/client?http://localhost:4200 ./node_modules/bootstrap/dist/css/bootstrap.min.css ./node_modules/font-awesome/css/font-awesome.min.css ./node_modules/quill/dist/quill.snow.css ./src/styles.scss
I tried buid this on Windows 10, and on Ubuntu 18.04.
npm -v
6.4.1
node -v
v10.14.2
dependencies stored in package.json:
"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/uuid": "3.4.4",
"blueimp-load-image": "2.18.0",
"bootstrap": "4.0.0-beta.3",
"core-js": "2.4.1",
"exif-js": "2.3.0",
"file-saver": "1.3.3",
"font-awesome": "4.7.0",
"jquery": "3.2.1",
"mydatepicker": "2.6.1",
"ngx-quill": "1.6.0",
"popper.js": "1.12.5",
"rxjs": "5.4.2",
"tether": "1.4.0",
"zone.js": "0.8.14"
},
"devDependencies": {
"#angular/cli": "1.4.5",
"#angular/compiler-cli": "4.2.4",
"#angular/language-service": "4.2.4",
"#types/node": "^6.14.2",
"autoprefixer": "6.5.3",
"circular-dependency-plugin": "3.0.0",
"codelyzer": "~3.2.0",
"copy-webpack-plugin": "4.0.1",
"css-loader": "0.28.1",
"cssnano": "3.10.0",
"exports-loader": "0.6.3",
"file-loader": "0.10.0",
"html-webpack-plugin": "2.29.0",
"istanbul-instrumenter-loader": "2.0.0",
"less-loader": "4.0.5",
"license-webpack-plugin": "1.1.1",
"postcss-loader": "1.3.3",
"postcss-url": "5.1.2",
"protractor": "~5.1.2",
"raw-loader": "0.5.1",
"sass-loader": "6.0.3",
"source-map-loader": "0.2.0",
"style-loader": "0.13.1",
"stylus-loader": "3.0.1",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.3.3",
"url-loader": "0.6.0",
"webpack": "~3.6.0",
"webpack-concat-plugin": "1.4.0",
"webpack-dev-server": "~2.7.1"
}
Probably some of these libraries are not used, but I do not want to delete them. Should I update some of them?
An error occurred during building and I did not see it. The error was connected with old version with font-awesome.
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.
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
Could anybody tell me why npm is getting me this message when I perform npm install:
+-- #angular/common#2.2.4
+-- #angular/core#2.2.4
+-- #angular/http#2.2.4
+-- #angular/platform-browser#2.2.4
+-- #types/core-js#0.9.35
+-- UNMET PEER DEPENDENCY rxjs#5.0.0-rc.4
| `-- symbol-observable#1.0.4
`-- zone.js#0.6.26
What's UNMET PEER DEPENDENCY?
The content of packages.json is:
{
...
"dependencies": {
"#angular/common": "^2.2.4",
"#angular/core": "^2.2.4",
"#angular/http": "^2.2.4",
"#angular/platform-browser": "^2.2.4",
"rxjs": "^5.0.0-beta.12",
"zone.js": "^0.6.21"
}
}
Why npm is trying to resolve rxjs#5.0.0-rc.4 instead of rxjs#5.0.0-beta.12?
Here is a working package.json:
{
...
"dependencies": {
"#angular/common": "^2.2.4",
"#angular/core": "^2.2.4",
"#angular/http": "^2.2.4",
"#angular/platform-browser": "^2.2.4",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.21"
}
}
Just remove that ^