モジュールのメタデータバージョンの不一致

Question

昨日私のプログラムはAngular 2とAngular Materialでうまく動きましたが、今日実行しようとするとこのエラーが発生しています。私は

ERROR in Error: Metadata version mismatch for module E:/Demo/crud/
node_modules/@angular/material/card/typings/index.d.ts, found version 4, expected 3, resolving symbol AppModule in E:/Demo/crud/client/app/a pp.module.ts, resolving symbol AppModule in E:/Demo/crud/client/app/ap p.module.ts [1] at Error (native) [1] at syntaxError (E:\Demo\crud\node_modules\@angular\compiler\bu
ndles\compiler.umd.js:1729:34) [1] at simplifyInContext (E:\Demo\crud\node_modules\@angular\compi
ler\bundles\compiler.umd.js:25118:23) [1] at StaticReflector.simplify (E:\Demo\crud\node_modules\@angula
r\compiler\bundles\compiler.umd.js:25130:13) [1] at StaticReflector.annotations (E:\Demo\crud\node_modules\@ang
ular\compiler\bundles\compiler.umd.js:24558:41) [1] at _getNgModuleMetadata (E:\Demo\crud\node_modules\@angular\co mpiler-cli\src\ngtools_impl.js:138:31) [1] at _extractLazyRoutesFromStaticModule (E:\Demo\crud\node_modul es\@angular\compiler-cli\src\ngtools_impl.js:109:26) [1] at Object.listLazyRoutesOfModule (E:\Demo\crud\node_modules\@a
ngular\compiler-cli\src\ngtools_impl.js:53:22) [1] at Function.NgTools_InternalApi_NG_2.listLazyRoutes (E:\Demo\c
rud\node_modules\@angular\compiler-cli\src\ngtools_api.js:91:39) [1]
at AotPlugin._getLazyRoutesFromNgtools (E:\Demo\crud\node_modu
les\@ngtools\webpack\src\plugin.js:207:44) [1] at _donePromise.Promise.resolve.then.then.then.then.then (E:\D emo\crud\node_modules\@ngtools\webpack\src\plugin.js:443:24) [1]
at process._tickCallback (internal/process/next_tick.js:109:7)

package.json

"dependencies": { 
    "@angular/animations": "^5.0.2", 
    "@angular/cdk": "^5.0.0-rc.1", 
    "@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/material": "^5.0.0-rc.1", 
    "@angular/platform-browser": "^4.2.4", 
    "@angular/platform-browser-dynamic": "^4.2.4", 
    "@angular/router": "^4.2.4", 
    "@types/underscore": "^1.8.4", 
    "angular2-jwt": "^0.2.3", 
    "bcryptjs": "^2.4.3", 
    "body-parser": "^1.17.2", 
    "bootstrap": "4.0.0-alpha.5", 
    "core-js": "^2.4.1", 
    "dotenv": "^4.0.0", 
    "express": "^4.15.3", 
    "font-awesome": "^4.7.0", 
    "jquery": "^3.2.1", 
    "jsonwebtoken": "^8.0.1", 
    "mongodb": "^2.2.31", 
    "mongoose": "^4.12.1", 
    "mongoose-gen": "^2.1.1", 
    "mongoose-tie": "^1.0.0", 
    "morgan": "^1.8.2", 
    "rxjs": "^5.5.2", 
    "tether": "1.4.0", 
    "underscore": "^1.8.3", 
    "zone.js": "^0.8.14" 
    }, 
    "devDependencies": { 
    "@angular/cli": "1.4.2", 
    "@angular/compiler-cli": "^4.2.4", 
    "@angular/language-service": "^4.2.4", 
    "@types/jasmine": "~2.5.53", 
    "@types/jasminewd2": "~2.0.2", 
    "@types/node": "~6.0.60", 
    "chai": "^4.1.0", 
    "chai-http": "^3.0.0", 
    "codelyzer": "~3.1.1", 
    "concurrently": "^3.3.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", 
    "mocha": "^3.4.2", 
    "nodemon": "1.11.0", 
    "protractor": "~5.1.2", 
    "ts-node": "~3.2.0", 
    "tslint": "~5.3.2", 
    "typescript": "~2.3.3" 
    } 
} 

助け、私は新しい午前として、私はステップの指導によってステップを期待しています。ありがとう

Answer 1

あなたの質問のコメント作成者が述べているように、角度4を@angular/cdk@5.0.0-rc0,@angular/material@5.0.0-rc0に混ぜています。これらは角度が必要です。

これをチェックアウトするissue on the Angular Material 2 github repo。

現在のものと一致するように、あなたのpackage.jsonに依存関係の更新を試すことができます。

"dependencies": { 
    "@angular/animations": "5.0.0", 
    "@angular/cdk": "^5.0.0-rc0", 
    "@angular/common": "5.0.0", 
    "@angular/compiler": "5.0.0", 
    "@angular/core": "5.0.0", 
    "@angular/forms": "5.0.0", 
    "@angular/http": "5.0.0", 
    "@angular/material": "^5.0.0-rc0", 
    "@angular/platform-browser": "5.0.0", 
    "@angular/platform-browser-dynamic": "5.0.0", 
    "@angular/platform-server": "5.0.0", 
    "@angular/router": "5.0.0", 
    "core-js": "^2.5.1", 
    "hammerjs": "^2.0.8", 
    "rxjs": "5.5.2", 
    "zone.js": "^0.8.18" 
    }, 
    "devDependencies": { 
    "@angular/cli": "^1.5.3", 
    "@angular/compiler-cli": "5.0.0", 
    "@types/jasmine": "2.6.0", 
    "@types/node": "^8.0.34", 
    "codelyzer": "^3.2.1", 
    "ts-node": "~3.3.0", 
    "tslint": "~5.7.0", 
    "typescript": "2.4.2" 
    } 

を次に、あなたのnode_modulesフォルダを削除してnpm installを実行します。