我是棱角分明的新人.我刚刚在我的小项目中安装了角度材料和角度动画,并得到了一些错误

Question

我刚刚运行了代码 npm install --save @angular/material @angular/animations.

它是我的package.json

{
  "name": "cerpnew",
  "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": "^4.4.6",
    "@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": "^2.0.0-beta.12",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "@types/angular-material": "^1.1.54",
    "angular-2-dropdown-multiselect": "^1.6.0",
    "angular-2-local-storage": "^1.0.1",
    "bootstrap": "^3.3.7",
    "bootstrap-select": "^1.12.4",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "ng-checkbox": "^1.0.2",
    "ng2-bootstrap-modal": "^1.0.1",
    "ng2-daterangepicker": "^2.0.10",
    "react-datepicker": "^0.55.0",
    "rxjs": "^5.4.2",
    "select-picker": "^0.3.1",
    "sweetalert": "^2.0.5",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.4.5",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.2.13",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.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",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.3.3"
  }
}

在运行时,ng-serve我遇到了以下错误.

E中的错误:/angular2/CERPNEW/node_modules/@angular/material/select/typings/select.d.ts(9,32):找不到模块'@ angular/cdk/bidi'.错误在E:/angular2/CERPNEW/node_modules/@angular/material/core/typings/ripple/ripple-renderer.d.ts(9,26):找不到模块'@ angular/cdk/platform'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/autocomplete/typings/autocomplete.d.ts(10,44):找不到模块'@ angular/c dk/a11y'.错误在E:/angular2/CERPNEW/node_modules/@angular/material/autocomplete/typings/autocomplete-trigger.d.ts(8,32):找不到模块'@an gular/cdk/bidi'.E中的错误:/ angular2/CERPNEW/node_modules/@angular/material/autocomplete/typings/autocomplete-trigger.d.ts(9,67):找不到模块'@an gular/cdk/overlay'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/button/typings/button.d.ts(9,26):找不到模块'@ angular/cdk/platform'.

E中的错误:/angular2/CERPNEW/node_modules/@angular/material/button/typings/button.d.ts(11,30):找不到模块'@ angular/cdk/a11y'.E中的错误:/ angular2/CERPNEW/node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts(11,30):找不到模块'@angular/cdk/a11y'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts(12,43):找不到模块'@angular/cdk/collections'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/checkbox/typings/checkbox.d.ts(4,30):找不到模块'@ angular/cdk/a11y'.

E中的错误:/angular2/CERPNEW/node_modules/@angular/material/chips/typings/chip.d.ts(8,33):找不到模块'@ angular/cdk/a11y'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/chips/typings/chip-list.d.ts(8,33):找不到模块'@ angular/cdk/a11y'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/chips/typings/chip-list.d.ts(9,32):找不到模块'@ angular/cdk/bidi'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/chips/typings/chip-list.d.ts(10,32):找不到模块'@ angular/cdk/collect ions'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/dialog/typings/dialog-config.d.ts(9,27):找不到模块'@ angular/cdk/bid i'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/dialog/typings/dialog-container.d.ts(10,86):找不到模块'@ angular/cdk/portal'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/dialog/typings/dialog-container.d.ts(11,34):找不到模块'@ angular/cdk/a11y'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/dialog/typings/dialog-ref.d.ts(8,28):找不到模块'@ angular/cdk/overla y'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/dialog/typings/dialog.d.ts(164):找不到模块'@ angular/cdk/overlay'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/dialog/typings/dialog.d.ts(2,31):找不到模块'@ angular/cdk/portal'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/datepicker/typings/datepicker.d.ts(8,32):找不到模块'@ angular/cdk/bi di'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/datepicker/typings/datepicker.d.ts(9,67):找不到模块'@ angular/cdk/ov erlay'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/expansion/typings/accordion-item.d.ts(9,43):找不到模块'@ angular/cdk/collections'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/expansion/typings/expansion-panel.d.ts(2,43):找不到模块'@ angular/cd k/collections'.E中的错误:/ angular2/CERPNEW/node_modules/@angular/material/expansion/typings/expansion-panel-header.d.ts(1,30):找不到模块'@ang ular/cdk/a11y'.错误在E:/angular2/CERPNEW/node_modules/@angular/material/grid-list/typings/grid-list.d.ts(10,32):找不到模块'@ angular/cdk/bid i'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/input/typings/autosize.d.ts(9,26):找不到模块'@ angular/cdk/platform'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/input/typings/input.d.ts(10,26):找不到模块'@ angular/cdk/platform'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/list/typings/selection-list.d.ts(8,50):找不到模块'@ angular/cdk/a11y'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/list/typings/selection-list.d.ts(9,32):找不到模块'@ angular/cdk/coll ections'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/menu/typings/menu-item.d.ts(8,33):找不到模块'@ angular/cdk/a11y'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/menu/typings/menu-panel.d.ts(10,27):找不到模块'@ angular/cdk/bidi'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/menu/typings/menu-directive.d.ts(9,27):找不到模块'@ angular/cdk/bidi'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/menu/typings/menu-trigger.d.ts(1,43):找不到模块'@ angular/cdk/bidi'.

E中的错误:/angular2/CERPNEW/node_modules/@angular/material/menu/typings/menu-trigger.d.ts(267):找不到模块'@ angular/cdk/overla y'.错误在E:/angular2/CERPNEW/node_modules/@angular/material/progress-spinner/typings/progress-spinner.d.ts(10,26):找不到模块'@a ngular/cdk/platform'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/radio/typings/radio.d.ts(11,43):找不到模块'@ angular/cdk/collections'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/radio/typings/radio.d.ts(12,30):找不到模块'@ angular/cdk/a11y'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/select/typings/select.d.ts(8,44):找不到模块'@ angular/cdk/a11y'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/core/typings/ripple/ripple.d.ts(9,26):找不到模块'@ angular/cdk/platf orm'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/select/typings/select.d.ts(10,32):找不到模块'@ angular/cdk/collectio ns'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/select/typings/select.d.ts(11,109):找不到模块'@ angular/cdk/overlay'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/sidenav/typings/drawer.d.ts(9,34):找不到模块'@ angular/cdk/a11y'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/sidenav/typings/drawer.d.ts(10,32):找不到模块'@ angular/cdk/bidi'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/slide-toggle/typings/slide-toggle.d.ts(9,26):找不到模块'@ angular/cd k/platform'.E中的错误:/ angular2/CERPNEW/node_modules/@angular/material/slide-toggle/typings/slide-toggle.d.ts(12,30):找不到模块'@ angular/c dk/a11y'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/slider/typings/slider.d.ts(8,32):找不到模块'@ angular/cdk/bidi'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/slider/typings/slider.d.ts(12,30):找不到模块'@ angular/cdk/a11y'.E:/ angular2/CERPNEW/node_modules/@angular/material/snack-bar/typings/snack-bar-config.d.ts(9,36)中的错误:找不到模块'@ angular/c dk/a11y'.E:/ angular2/CERPNEW/node_modules/@angular/material/snack-bar/typings/snack-bar-config.d.ts(10,27)中的错误:找不到模块'@ angular/cdk/bidi'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/snack-bar/typings/snack-bar-container.d.ts(10,70):找不到模块'@angul ar/cdk/portal'.错误在E:/angular2/CERPNEW/node_modules/@angular/material/snack-bar/typings/snack-bar-ref.d.ts(8,28):找不到模块 '@角/ CDK /覆盖'.错误在E:/angular2/CERPNEW/node_modules/@angular/material/snack-bar/typings/snack-bar.d.ts(8.31):找不到模块 '@角/ CDK/A11Y'.错误在E:/angular2/CERPNEW/node_modules/@angular/material/snack-bar/typings/snack-bar.d.ts(9,25):找不到模块'@角/ CDK /过乐事.错误在E:/angular2/CERPNEW/node_modules/@angular/material/snack-bar/typings/snack-bar.d.ts(10,31):找不到模块 '@角/ CDK/POR TAL'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/sort/typings/sort-header.d.ts(9,30):找不到模块'@ angular/cdk/table'.

E中的错误:/angular2/CERPNEW/node_modules/@angular/material/stepper/typings/step-label.d.ts(9,30):找不到模块'@ angular/cdk/stepp er'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/stepper/typings/stepper.d.ts(1,37):找不到模块'@ angular/cdk/stepper'.错误在E:/angular2/CERPNEW/node_modules/@angular/material/stepper/typings/stepper-button.d.ts(1,52):找不到模块 '@角/ CDK/s的泰珀'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/stepper/typings/step-header.d.ts(8,30):找不到模块'@ angular/cdk/a11y'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/table/typings/cell.d.ts(9,84):找不到模块'@ angular/cdk/table'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/table/typings/table.d.ts(1,22):找不到模块'@ angular/cdk/table'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/table/typings/row.d.ts(166):找不到模块'@ angular/cdk/table'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/tabs/typings/tab-label.d.ts(9,41):找不到模块'@ angular/cdk/portal'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/tabs/typings/tab.d.ts(8,32):找不到模块'@ angular/cdk/portal'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/tabs/typings/tab-body.d.ts(10,53):找不到模块'@ angular/cdk/portal'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/tabs/typings/tab-body.d.ts(11,43):找不到模块'@ angular/cdk/bidi'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/tabs/typings/tab-header.d.ts(8,43):找不到模块'@ angular/cdk/bidi'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/tabs/typings/tab-header.d.ts(13,31):找不到模块'@ angular/cdk/scrolli ng'.E中的错误:/ angular2/CERPNEW/node_modules/@angular/material/tabs/typings/tab-nav-bar/tab-nav-bar.d.ts(8,32):找不到模块'@angular/cdk /比迪烟".E中的错误:/ angular2/CERPNEW/node_modules/@angular/material/tabs/typings/tab-nav-bar/tab-nav-bar.d.ts(9,26):找不到模块'@angular/cdk /平台'.错误在E:/angular2/CERPNEW/node_modules/@angular/material/tabs/typings/tab-nav-bar/tab-nav-bar.d.ts(10,31):找不到模块'@angula r/cdk /滚动".E中的错误:/angular2/CERPNEW/node_modules/@angular/material/tooltip/typings/tooltip.d.ts(9,31):找不到模块'@ angular/cdk/a11y'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/tooltip/typings/tooltip.d.ts(10,32):找不到模块'@ angular/cdk/bidi'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/tooltip/typings/tooltip.d.ts(11,156):找不到模块'@ angular/cdk/overla y'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/tooltip/typings/tooltip.d.ts(12,26):找不到模块'@ angular/cdk/platfor m'.E中的错误:/angular2/CERPNEW/node_modules/@angular/material/tooltip/typings/tooltip.d.ts(13,34):找不到模块'@ angular/cdk/scrolli ng'.错误中的错误:静态解析符号值时出错.无法解析@ angular/cdk/observers相对于E:/ angular2/CER PNEW/node_modules/@angular/material/checkbox/typings/index.d.ts.,解析E:/ angular2/CERPNEW/node_modules /中的符号MatCheckboxModule @ angular/material/checkbox/typings/index.d.ts,解析E:/ angular2/CERPNEW/node_modules/@ angular/material/che ckbox/typings/index.d.ts中的符号MatCheckboxModule在syntaxError(E:\ angular2)\CERPNEW \node_modules\@angular\compiler\bundles\compiler.umd.js:1729:34)在simplifyInContext中(E:\ angular2\CERPNEW \node_modules\@angular\compiler\bundles\compiler.umd.js:25118:23) )在StaticReflector.simplify(E:\ angular2\CERPNEW \node_modules\@angular\compiler\bundles\compiler.umd.js:25130:13)的StaticReflector.annotations(E:\ angular2\CERPNEW \node_modules\@angular\compiler)\bundles\compiler.umd.js:24558:41)位于_extractLazyRoutesFromStaticModule的_getNgModuleMetadata(E:\ angular2\CERPNEW \node_modules\@angular\compiler-cli\src \ngtools_impl.js:138:31)(E:\ angular2\CERPNEW \node_modules\@angular\C ompiler-cli\src \ngtools_impl.js:109:26)位于E:\ angular2\CERPNEW \node_modules\@angular\compiler-cli\src \ngtools_impl.js:129:27,位于_extractLazyRoutesFromStaticModule(E)的Array.reduce() :\ angular2\CERPNEW \node_modules\@angular\compiler-cli\src \ngtools_impl.js:128:10)在Object.listLazyRoutesOfModule(E:\ angular2\CERPNEW \node_modules\@angular\compiler-cli\src \ngtools_impl. js:53:22)在AotPlugin._getLazyRoutesFromNgtools(E:\ angular2\CERPNEW)的Function.NgTools_InternalApi_NG_2.listLazyRoutes(E:\ angular2\CERPNEW \node_modules\@angular\compiler-cli\src \ngtools_api.js:91:39) \node_modules\@ngtools\webpack\src\plugin.js:207:44)在_donePromise.Promise.resolve.then.then.then.then.then(E:\ angular2\CERPNEW \node_modules\@ngtools\webpack\src)\plugin.js:443:24)at at process._tickCallback(internal/process/next_tick.js:188:7)

Answer 1

你应该安装必要的@ angular/cdk库来正确使用最新的@ angular/material.

您可以通过命令执行此操作:

npm install --save @angular/material @angular/cdk

Answer 2

进入您正在使用的工作区或 Angular 项目，打开命令提示符并运行以下命令：

npm install --save @angular/material @angular/cdk

如果错误仍未消失，请尝试通过给定命令清除缓存：

npm 缓存清除 --force

另一种清理缓存的方法是从文件系统中手动删除它

C:\Users\%USER_PROFILE_NAME%\AppData\Roaming\npm-cache

尝试从上述位置删除所有内容，然后重新运行

npm install --save @angular/material @angular/cdk

希望这可以解决您的问题，ngServe并显示有关成功编译项目的消息。

Answer 3

我也遇到过同样的问题。问题是您曾经npm i @angular/material安装过 Angular Material。ng add @angular/material按照文档页面所示 使用。https://material.angular.io/guide/getting-started

这将自动安装 CDK 和其他依赖项。