ionic - Confusion about the version - node.js

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.

Related

Error: Failed to transpile TypeScript Error: Failed to transpile TypeScript

I have an application that uses ionic and angular. For deploying the same application as a mobile app, I tried ionic cordova build android, which gave me an error. bash: ionic: command not found
So, without realizing what disaster it could cause I installed it using the command.
npm install -g #ionic/cli.
Then I again run the command ionic cordova build android.
But due to the version of node being 8.12.0 installed in my machine, it gave me an error and I couldn't run that command.
and I reinstall the node, and tried again.
And now coming back to the application, I tried to build that to production, since then it is always giving me an error saying
Cannot find type definition file for '#types'.
I removed the ionic CLI, uninstall node js, and uninstall npm. Uninstall everything related to node. But the problem has not been gone yet.
I also deleted node_modules and package-lock json and npm cache clean --force, npm install.
But it did not work.
As the error says Cannot find type definition file for '#types', I also added the types in tsconfig.json,
"types": [],
into
"compilerOptions"
Though the error goes away while npm run build --prod --verbose, but the application doesn't run further, it gave a lot of error in the console and the application just stopped.
package.json
{
"name": "ClientApp",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "node --max-old-space-size=8192 ./node_modules/#ionic/app-scripts/bin/ionic-app-scripts.js build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/animations": "5.2.9",
"#angular/common": "5.2.9",
"#angular/compiler": "5.2.9",
"#angular/compiler-cli": "5.2.9",
"#angular/core": "5.2.9",
"#angular/forms": "5.2.9",
"#angular/http": "5.2.9",
"#angular/platform-browser": "5.2.9",
"#angular/platform-browser-dynamic": "5.2.9",
"#ionic-native/core": "4.6.0",
"#ionic-native/splash-screen": "4.6.0",
"#ionic-native/status-bar": "4.6.0",
"#ionic/pro": "1.0.20",
"#ionic/storage": "2.1.3",
"alertify.js": "^1.0.12",
"angular-tree-component": "^7.1.0",
"angular2-cookie": "^1.2.6",
"angular2-indexeddb": "^1.2.2",
"blueimp-canvas-to-blob": "^3.20.0",
"bootstrap": "^4.1.0",
"chart.js": "^2.9.3",
"cordova-android": "7.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.0.5",
"cordova-plugin-ionic-webview": "^1.2.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-whitelist": "^1.3.3",
"dragula": "^3.7.2",
"idlejs": "^2.1.0",
"ionic-angular": "3.9.2",
"ionic3-star-rating": "^2.1.2",
"ionicons": "3.0.0",
"jquery": "^3.3.1",
"microsoft-applicationinsights-angular5": "^0.1.6",
"ng2-ckeditor": "^1.2.0",
"ng2-dragula": "^2.1.1",
"ng2-google-charts": "^6.0.0",
"ng2-img-max": "^2.2.4",
"ng2-order-pipe": "^0.1.5",
"ng2-pagination": "^2.0.2",
"ng4-validators": "^6.0.0",
"ngx-autosize": "^1.8.0",
"ngx-color-picker": "^7.0.2",
"ngx-order-pipe": "^2.0.4",
"ngx-pinch-zoom": "^2.4.4",
"ngx-skeleton-loader": "^1.2.7",
"node-sass": "^4.14.1",
"popper.js": "^1.14.3",
"rxjs": "5.5.8",
"sw-toolbox": "3.6.0",
"xlsx": "^0.17.0",
"zone.js": "0.8.20"
},
"devDependencies": {
"#ionic/app-scripts": "^3.2.4",
"typescript": "~2.6.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {}
},
"platforms": [
"android"
]
},
"config": {
"ionic_www_dir": "../",
"ionic_build_dir": "../build"
}
}
what should I do to build this application, which was built before but now had stopped?

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.

installation npm failed for an existing project with angular 4

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

NPM requires a peer of but all peers are in package.json and node_modules

Im facing the problem that npm on install says
npm WARN eslint-config-react-app#2.0.1 requires a peer of babel-eslint#^7.2.3 but none was installed.
npm WARN eslint-config-react-app#2.0.1 requires a peer of eslint-plugin-jsx-a11y#^5.1.1 but none was installed.
npm WARN semantic-ui-react#0.74.2 requires a peer of react#>=0.14.0 <= 15 but none was installed.
npm WARN semantic-ui-react#0.74.2 requires a peer of react-dom#>=0.14.0 <= 15 but none was installed.
What I think is pretty weird is that I have in fact those dependencies in my package.json and also see them inside the node_modules folder.
My package.json:
{
"name": "react-box",
"version": "0.1.0",
"private": true,
"devDependencies": {
"autoprefixer": "7.1.4",
"babel-core": "6.26.0",
"babel-eslint": "^8.0.1",
"babel-jest": "21.2.0",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.0.3",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "2.1.0",
"connect-history-api-fallback": "1.3.0",
"cross-spawn": "5.1.0",
"css-loader": "0.28.7",
"detect-port": "1.2.1",
"dotenv": "4.0.0",
"eslint": "4.8.0",
"eslint-config-react-app": "^2.0.1",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.38.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.1",
"file-loader": "1.1.5",
"filesize": "3.5.10",
"fs-extra": "4.0.2",
"gzip-size": "4.0.0",
"html-webpack-plugin": "2.30.1",
"http-proxy-middleware": "0.17.4",
"jest": "21.2.1",
"json-loader": "0.5.7",
"object-assign": "4.1.1",
"path-exists": "3.0.0",
"postcss-loader": "2.0.6",
"promise": "8.0.1",
"react-dev-utils": "^4.1.0",
"recursive-readdir": "2.2.1",
"strip-ansi": "4.0.0",
"style-loader": "0.19.0",
"truffle-contract": "^3.0.0",
"truffle-solidity-loader": "0.0.8",
"url-loader": "0.6.2",
"webpack": "3.6.0",
"webpack-dev-server": "2.9.1",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3"
},
"dependencies": {
"axios": "^0.16.2",
"babel-eslint": "^8.0.1",
"dotenv": "^2.0.0",
"react": "^16.0.0",
"react-countup": "^2.2.0",
"react-dom": "^16.0.0",
"semantic-ui-react": "^0.74.2"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.js?(x)",
"<rootDir>/src/**/?(*.)(spec|test).js?(x)"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx"
]
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
When trying to install those peers manually like this:
npm install babel-eslint --save-dev
I still get the error:
├── UNMET PEER DEPENDENCY babel-eslint#8.0.1
├── UNMET PEER DEPENDENCY eslint-plugin-jsx-a11y#6.0.2
├── UNMET PEER DEPENDENCY react#16.0.0
└── UNMET PEER DEPENDENCY react-dom#16.0.0
Maybe I dont understand how NPM works but to my understanding doing the installs manually at least should solve it, right?
If anyone needs more info just comment and I will provide the additional info. Thanks!
NPM warnings about peerDeps versions mismatch are correct here. These packages are installed, but installed versions is not supported by some other packages you have.
In your case - they're too new, meaning that maintainers of warning packages are not updated yet to these versions. And restricted required peerDeps version in API-compatible range (no breaking/major version leap).
eslint-config-react-app#2.0.1 requires a peer deps: babel-eslint#^7.2.3 (i.e. 7.x.x) and eslint-plugin-jsx-a11y#^5.1.1 (i.e. 5.x.x).
Your versions is "babel-eslint": "^8.0.1" and "eslint-plugin-jsx-a11y": "^6.0.2". The first digit - major - is not matched. This is what ^ (caret) mark is about.
Same with semantic-ui-react - they does not support react#16 yet (🤗 I can't wait too!).
Until then you can install packages with exact major version:
> npm view babel-eslint#7.* version // list released versions in required range 7.x.x
babel-eslint#7.0.0 '7.0.0'
babel-eslint#7.1.0 '7.1.0'
babel-eslint#7.1.1 '7.1.1'
babel-eslint#7.2.0 '7.2.0'
babel-eslint#7.2.1 '7.2.1'
babel-eslint#7.2.2 '7.2.2'
babel-eslint#7.2.3 '7.2.3'
> npm install --save-dev babel-eslint#7.2.3 // install latest version in required range
Same with other packages.
PS: also, in package.json you have to delete duplicated records: babel-eslint and dotenv in dependencies, since they are declared in devDependencies already.

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