从@ Angular / core和@ Angular / http更新到Angular 4中的2.“Unmet Peer Dependencies”

我正在尝试从Angular 2.3更新到Angular 4.0并按照此处的说明进行操作：

http://webcache.googleusercontent.com/search?q=cache:Xd-ocIKZ0BkJ:angularjs.blogspot.com/2017/03/angular-400-now-available.html+&cd=1&hl=en&ct=clnk&gl=us

在那篇文章中,它说我几乎要做的就是键入这个命令：

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

当我这样做时,我得到这些错误：

+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]

我尝试为这些中的每一个独立进行“npm install”,如下所述：How to solve npm UNMET PEER DEPENDENCY,但它没有任何好处.我一直得到同样的错误.

有什么建议？我在Windows上运行Node 4.5.0和npm 3.10.6.

这是我的package.json：

{
  "name": "Project","version": "1.0.1","scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run generate-css\" \"npm run watch-css\" ","pree2e": "npm run webdriver:update","e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first","lint": "tslint ./app/**/*.ts -t verbose","generate-css": "node-sass -r app --output ./generated-css","watch-css": "node-sass -w -r app --output ./generated-css","lite": "lite-server","test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"","test-once": "tsc && karma start karma.conf.js --single-run","tsc": "tsc","tsc:w": "tsc -w"
  },"license": "","author": "Me","dependencies": {
    "@angular/animations": "4.0.2","@angular/common": "4.0.2","@angular/compiler": "4.0.2","@angular/compiler-cli": "4.0.2","@angular/core": "4.0.2","@angular/forms": "4.0.2","@angular/http": "4.0.2","@angular/platform-browser": "4.0.2","@angular/platform-browser-dynamic": "4.0.2","@angular/platform-server": "4.0.2","@angular/router": "4.0.2","angular-in-memory-web-api": "0.2.4","angular2-ui-switch": "1.2.0","bootstrap": "3.3.7","core-js": "^2.4.1","mydatepicker":"1.2.9","ng2-translate": "5.0.0","reflect-Metadata": "0.1.9","rxjs": "5.0.1","socket.io": "1.7.2","lodash": "4.17.4","socket.io-client": "1.7.2","systemjs": "0.19.40","wijmo": "wijmo-system-min","zone.js": "0.8.5","typescript": "2.2.2"
  },"devDependencies": {
    "@types/core-js": "0.9.35","@types/jasmine": "2.5.40","@types/node": "6.0.58","@types/selenium-webdriver": "2.53.39","@types/lodash": "4.14.62","canonical-path":"0.0.2","codelyzer": "0.0.25","concurrently": "3.1.0","http-server": "0.9.0","jasmine-core": "2.5.2","karma": "1.3.0","karma-chrome-launcher": "2.0.0","karma-cli": "1.0.1","karma-htmlfile-reporter": "0.3.4","karma-jasmine": "1.1.0","karma-jasmine-html-reporter": "0.2.2","lite-server": "2.2.2","live-server": "1.1.0","node-sass": "3.13.1","nodemon": "1.11.0","protractor": "3.3.0","rimraf": "2.5.4","tslint": "3.15.1"
  }
}

解决方法

似乎package.json中提到的node_modules的vresions之间存在冲突

使用以下

"dependencies": {
    "@angular/animations": "^4.0.1","@angular/common": "^4.0.1","@angular/compiler": "^4.0.1","@angular/compiler-cli": "^4.0.1","@angular/core": "^4.0.1","@angular/forms": "^4.0.1","@angular/http": "^4.0.1","@angular/material": "^2.0.0","@angular/platform-browser": "^4.0.1","@angular/platform-browser-dynamic": "^4.0.1","@angular/platform-server": "^4.0.1","@angular/router": "^4.0.1","bootstrap": "^3.3.6","font-awesome": "^4.7.0","typescript": "^2.2.2","zone.js": "^0.8.5"
  },

更新：角度材料

"@angular/material": "^2.0.0-beta.3",