Angular 9 upgrade peer dependency issue - package.json

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!

Related

npm start stop with exit status 3 : Failed to exec start script [Angular]

I'm new on Angular and I have to work on a project in this technology.I set up the project but when I run the npm start command, the process npm start stop suddenly : the ng serve fails. I tried to investigate but I found nothing that can fix my problem.
You can see the errors here : errors
npm version : 6.14.11
node version : v14.15.5
Dependencies in the package.json file :
"dependencies": {
"#angular/animations": "^11.0.3",
"#angular/cdk": "^11.0.1",
"#angular/common": "~11.0.3",
"#angular/compiler": "~11.0.3",
"#angular/core": "~11.0.3",
"#angular/flex-layout": "^11.0.0-beta.33",
"#angular/forms": "~11.0.3",
"#angular/material": "^11.0.1",
"#angular/platform-browser": "~11.0.3",
"#angular/platform-browser-dynamic": "~11.0.3",
"#angular/platform-server": "~11.0.3",
"#angular/router": "~11.0.3",
"#angular/service-worker": "^11.0.3",
"#ngx-prism/core": "^2.0.1",
"#syncfusion/ej2-angular-richtexteditor": "^18.3.52",
"#types/prismjs": "^1.16.2",
"#types/socket.io-client": "^1.4.34",
"angular-http-server": "^1.9.0",
"app-root-path": "^3.0.0",
"chart.js": "^2.9.4",
"compodoc": "0.0.41",
"core-js": "^3.8.0",
"dotenv": "^8.2.0",
"http-server": "^0.12.3",
"http-status": "^1.5.0",
"jquery": "^3.5.1",
"ngx-captcha": "^8.0.1",
"ngx-countdown": "^11.0.0",
"ngx-countdown-timer": "^0.2.0",
"ngx-drag-drop": "^2.0.0",
"ngx-json-viewer": "^2.4.0",
"ngx-mat-select-search": "^3.1.4",
"ngx-pipes": "^2.7.5",
"ngx-socket-io": "^3.2.0",
"prismjs": "^1.22.0",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.6.3",
"socket.io-client": "^3.0.3",
"xls": "^0.5.1",
"xlsx": "^0.16.9",
"zone.js": "^0.11.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.1100.3",
"#angular/compiler-cli": "^11.0.3",
"#compodoc/compodoc": "^1.1.11",
"#types/chart.js": "^2.9.28",
"#types/jasmine": "3.6.2",
"#types/node": "^14.14.10",
"#types/source-map": "^0.5.7",
"#types/webpack": "^4.41.25",
"typescript": "~4.0.0"
}
Do you have an idea ?
I tried to run :
npm cache clean --force
npm install
npm start
But that don't help me.

Angular 10 Warning: Entry point 'devextreme-angular..' contains deep import into module

I'm trying to build my angular app but I'm receiving this kind of warnings:
Warning: Entry point 'devextreme-angular/ui/data-grid' contains deep imports into '{path to node modules}/node_modules/devextreme/ui/data_grid', '{path to node modules}/node_modules/devextreme/bundles/dx.all', '{path to node modules}/node_modules/devextreme/ui/filter_builder', '{path to node modules}/node_modules/devextreme/ui/form', '{path to node modules}/node_modules/devextreme/ui/popup'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Then I have this error:
Generating ES5 bundles for differential loading...
An unhandled exception occurred: Call retries were exceeded
These are my node and angular versions:
Angular CLI: 10.2.1
Node: 12.18.3
OS: win32 x64
Angular: 10.2.4
In the produced log file I have:
[error] Error: Call retries were exceeded
at ChildProcessWorker.initialize ({path to node modules}\node_modules\jest-worker\build\workers\ChildProcessWorker.js:193:21)
at ChildProcessWorker._onExit ({path to node modules}\node_modules\jest-worker\build\workers\ChildProcessWorker.js:274:12)
at ChildProcess.emit (events.js:315:20)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
This is the package.json file:
"dependencies": {
"#angular/animations": "^10.2.3",
"#angular/cdk": "^10.2.7",
"#angular/common": "^10.2.3",
"#angular/compiler": "^10.2.3",
"#angular/core": "^10.2.3",
"#angular/forms": "^10.2.3",
"#angular/material": "^10.2.7",
"#angular/material-moment-adapter": "^10.2.7",
"#angular/platform-browser": "^10.2.3",
"#angular/platform-browser-dynamic": "^10.2.3",
"#angular/platform-server": "^10.2.3",
"#angular/pwa": "^0.7.1",
"#angular/router": "^10.2.3",
"#angular/service-worker": "^10.2.3",
"#ngx-translate/core": "^11.0.1",
"#ngx-translate/http-loader": "^4.0.0",
"#syncfusion/ej2-angular-richtexteditor": "^18.3.52",
"#tinymce/tinymce-angular": "^4.1.0",
"ajv": "^6.9.1",
"angular-oauth2-oidc": "^10.0.0",
"cdk-table-exporter": "^9.0.2",
"chalk": "^3.0.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.4",
"devexpress-diagram": "^1.0.17",
"devexpress-gantt": "^1.0.10",
"devextreme": "^20.2.3",
"devextreme-angular": "20.2.3",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"mat-table-exporter": "^9.0.2",
"moment": "^2.24.0",
"node": "^12.18.3",
"node-sass": "^4.9.2",
"popper.js": "^1.14.7",
"rxjs": "^6.5.5",
"rxjs-compat": "^6.0.0",
"tslib": "^1.10.0",
"web-animations-js": "^2.3.1",
"zone.js": "^0.10.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.1002.0",
"#angular-devkit/core": "^10.2.0",
"#angular-devkit/schematics": "^10.2.0",
"#angular/cli": "^10.2.0",
"#angular/compiler-cli": "^10.2.3",
"#angular/language-service": "^10.2.3",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~6.0.1",
"devextreme-cli": "1.2.4",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"json-server": "^0.12.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "^3.9.6"
}
The build works fine on another machine with the same file. I can only think of something wrong in my node and angular/cli versions. I've already deleted node_modules folder and npm cache clean -f

Cannot run npm install only on this project

I have run npm install many times on this project in the past and I know that it should work just fine. That being said I cannot run npm uninstall either but only on this project. I know this isn't a lot to go on, has anything changed with the format or is something incorrectly formatted?
When I run npm install it takes maybe 10 seconds and then I get this message.
npm ERR! code UNKNOWN npm ERR! UNKNOWN: unknown error, open 'D:\TFS
Source\xxx\xxx\node_modules.bin\ngc'
npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\Bailey
Miller\AppData\Roaming\npm-cache_logs\2017-12-27T14_41_52_431Z-debug.log
Side note: the ngc file is empty, and none of my text editors can open it. The debug log file is so long and has no clear way of finding errors.
package.json: Snippet
"dependencies": {
"#angular/common": "^4.2.6",
"#angular/compiler": "^4.2.6",
"#angular/core": "^4.2.6",
"#angular/forms": "^4.2.6",
"#angular/http": "^4.2.6",
"#angular/platform-browser": "^4.2.6",
"#angular/platform-browser-dynamic": "^4.2.6",
"#angular/router": "^4.2.6",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.28",
"#ngrx/core": "^1.2.0",
"#ngrx/db": "^2.0.2",
"#ngrx/effects": "^2.0.4",
"#ngrx/router-store": "^1.2.6",
"#ngrx/store": "^2.2.3",
"#ngrx/store-devtools": "^3.2.4",
"bootstrap": "^4.0.0-alpha.6",
"core-js": "^2.4.1",
"moment": "^2.18.1",
"reselect": "^3.0.1",
"rxjs": "^5.4.2",
"web-animations-js": "^2.2.5",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "1.6.2",
"#angular/compiler-cli": "4.2.6",
"#types/jasmine": "2.5.38",
"#types/node": "8.0.10",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-ie-launcher": "^1.0.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"ngrx-store-freeze": "^0.1.9",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}

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

angular2 2.0.0 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

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',

Resources