在 Angular 4 应用程序中使用 Angular material 最新版本

Question

我目前正在开发使用 angular 4 编写的 angular 应用程序。现在我想将 angular material latest 集成到其中。我只是想，如果这是可能的。在我集成最新版本和运行 npm run build:aot:prod 后不久，它给我错误：

ERROR in Metadata version mismatch for module C:/gitRepo/gmdias/gmdais-frontend/node_modules/@angular/animations/browser/browser.d.ts, found version 4, expected 3, resolving symbol ɵf in C:/gitRepo/gmdias/gmdais-frontend/node_modules/@angular/platform-browser/animations/index.d.ts, resolving symbol BrowserAnimationsModule in C:/gitRepo/gmdias/gmdais-frontend/node_modules/@angular/platform-browser/animations/index.d.ts, resolving symbol BrowserAnimationsModule in C:/gitRepo/gmdias/gmdais-frontend/node_modules/@angular/platform-browser/animations/index.d.ts`

同时升级 angular 版本对我来说不是现阶段的选择。

在这种情况下，我想知道 Angular material 最新版本是否可以与 Angular 4 应用程序集成？

有关更多信息，我将 post 我的 package.json 文件 :

"dependencies": {
    "@angular/animations": "^4.4.7",
    "@angular/common": "~4.4.4",
    "@angular/compiler": "~4.4.4",
    "@angular/core": "~4.4.4",
    "@angular/forms": "~4.4.4",
    "@angular/http": "~4.4.4",
    "@angular/platform-browser": "~4.4.4",
    "@angular/platform-browser-dynamic": "~4.4.4",
    "@angular/platform-server": "~4.4.4",
    "@angular/router": "~4.4.4",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "^3.0.4",
    "@matrix24x7-devkit/core": "https://nexus.zone24x7.lk/repository/releases/com/zone/matrix/mx24x7-devkit/mx24x7-devkit-core-1.1.2/mx24x7-devkit-mx24x7-devkit-core-1.1.2..tar.gz",
    "@ngrx/core": "^1.2.0",
    "@ngrx/store": "^2.2.1",
    "@ngx-config/core": "^0.2.0-rc.5",
    "@ngx-config/http-loader": "^0.2.0-rc.1",
    "@ngx-config/merge-loader": "^0.2.0-rc.1",
    "@ngx-universal/config-loader": "^0.4.0-rc.1",
    "@types/lodash": "4.14.55",
    "angular-tag-cloud-module": "^1.3.1",
    "angular2-chartjs": "^0.1.6",
    "angular2-notifications": "^0.4.53",
    "bootstrap": "^3.3.7",
    "compass-mixins": "^0.12.10",
    "core-js": "^2.4.1",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "lodash": "4.17.4",
    "md2": "0.0.29",
    "ng-click-outside": "^2.0.2",
    "ng2-auto-complete": "^0.10.9",
    "ng2-completer": "^1.5.2",
    "ng2-cookies": "^1.0.12",
    "ng2-date-time-picker": "^2.0.7",
    "ng2-select": "^1.2.0",
    "ng2-validation": "^3.8.0",
    "ngx-modal": "0.0.29",
    "node-gyp": "^3.7.0",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.4.3",
    "sha256": "^0.2.0",
    "ts-helpers": "^1.1.1",
    "windows-build-tools": "^3.1.0",
    "zone.js": "~0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "^1.7.3",
    "@angular/compiler-cli": "~4.4.4",
    "@compodoc/compodoc": "^1.0.0-beta.15",
    "@types/hammerjs": "^2.0.34",
    "@types/jasmine": "2.5.45",
    "@types/node": "^7.0.39",
    "@types/source-map": "^0.5.0",
    "@types/uglify-js": "^2.6.28",
    "@types/webpack": "^2.2.16",
    "add-asset-html-webpack-plugin": "^1.0.2",
    "angular2-template-loader": "^0.6.2",
    "assets-webpack-plugin": "^3.5.1",
    "awesome-typescript-loader": "~3.1.2",
    "codelyzer": "~2.1.1",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^5.0.0",
    "css-loader": "^0.28.0",
    "exports-loader": "^0.6.4",
    "expose-loader": "^0.7.3",
    "extract-text-webpack-plugin": "~3.0.0",
    "file-loader": "^0.11.1",
    "find-root": "^1.0.0",
    "gh-pages": "^1.0.0",
    "html-webpack-plugin": "^2.28.0",
    "imports-loader": "^0.7.1",
    "inline-manifest-webpack-plugin": "^3.0.1",
    "istanbul-instrumenter-loader": "2.0.0",
    "jasmine-core": "^2.5.2",
    "karma": "^1.6.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.1.0",
    "karma-mocha-reporter": "^2.2.3",
    "karma-remap-coverage": "^0.1.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.4",
    "ng-router-loader": "^2.1.0",
    "ngc-webpack": "^3.2.0",
    "node-sass": "^4.5.2",
    "npm-run-all": "^4.0.2",
    "optimize-js-plugin": "0.0.4",
    "parse5": "^3.0.2",
    "preload-webpack-plugin": "^1.2.2",
    "protractor": "^5.1.1",
    "raw-loader": "0.5.1",
    "rimraf": "~2.6.1",
    "sass-loader": "^6.0.3",
    "script-ext-html-webpack-plugin": "^1.8.5",
    "source-map-loader": "^0.2.1",
    "string-replace-loader": "~1.3.0",
    "style-loader": "^0.18.1",
    "to-string-loader": "^1.1.5",
    "tslint": "~4.5.1",
    "ts-node": "^3.3.0",
    "tslib": "^1.7.1",
    "tslint-loader": "^3.5.2",
    "typedoc": "^0.7.1",
    "typescript": "~2.4.2",
    "uglifyjs-webpack-plugin": "^0.4.6",
    "url-loader": "^0.5.8",
    "webpack": "^3.5.5",
    "webpack-dev-middleware": "^1.10.1",
    "webpack-dev-server": "~2.7.1",
    "webpack-dll-bundles-plugin": "^1.0.0-beta.5",
    "webpack-merge": "~4.1.0"
  },

Answer 1

根据错误，它期望“@angular/animations”：“3.X.X”不是 4，

@angular/animations/browser/browser.d.ts, found version 4, expected 3,

在 Angular 4 应用程序中使用 Angular material 最新版本

Use Angular material latest version in Angular 4 Application

angular

angular-material2

angular-material-6