31
votes

I just ran the code npm install --save @angular/material @angular/animations.

Its my 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"
  }
}

When running ng-serve I got following errors.

ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/select/typings/select.d.ts (9,32): Cannot find module '@angular/cdk/bidi'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/core/typings/ripple/ripple-renderer.d.ts (9,26): Cannot find module '@angular/ cdk/platform'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/autocomplete/typings/autocomplete.d.ts (10,44): Cannot find module '@angular/c dk/a11y'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/autocomplete/typings/autocomplete-trigger.d.ts (8,32): Cannot find module '@an gular/cdk/bidi'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/autocomplete/typings/autocomplete-trigger.d.ts (9,67): Cannot find module '@an gular/cdk/overlay'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/button/typings/button.d.ts (9,26): Cannot find module '@angular/cdk/platform'.

ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/button/typings/button.d.ts (11,30): Cannot find module '@angular/cdk/a11y'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts (11,30): Cannot find module '@angular /cdk/a11y'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts (12,43): Cannot find module '@angular /cdk/collections'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/checkbox/typings/checkbox.d.ts (4,30): Cannot find module '@angular/cdk/a11y'.

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

ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/menu/typings/menu-trigger.d.ts (2,67): Cannot find module '@angular/cdk/overla y'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/progress-spinner/typings/progress-spinner.d.ts (10,26): Cannot find module '@a ngular/cdk/platform'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/radio/typings/radio.d.ts (11,43): Cannot find module '@angular/cdk/collections '. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/radio/typings/radio.d.ts (12,30): Cannot find module '@angular/cdk/a11y'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/select/typings/select.d.ts (8,44): Cannot find module '@angular/cdk/a11y'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/core/typings/ripple/ripple.d.ts (9,26): Cannot find module '@angular/cdk/platf orm'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/select/typings/select.d.ts (10,32): Cannot find module '@angular/cdk/collectio ns'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/select/typings/select.d.ts (11,109): Cannot find module '@angular/cdk/overlay' . ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/sidenav/typings/drawer.d.ts (9,34): Cannot find module '@angular/cdk/a11y'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/sidenav/typings/drawer.d.ts (10,32): Cannot find module '@angular/cdk/bidi'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/slide-toggle/typings/slide-toggle.d.ts (9,26): Cannot find module '@angular/cd k/platform'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/slide-toggle/typings/slide-toggle.d.ts (12,30): Cannot find module '@angular/c dk/a11y'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/slider/typings/slider.d.ts (8,32): Cannot find module '@angular/cdk/bidi'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/slider/typings/slider.d.ts (12,30): Cannot find module '@angular/cdk/a11y'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/snack-bar/typings/snack-bar-config.d.ts (9,36): Cannot find module '@angular/c dk/a11y'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/snack-bar/typings/snack-bar-config.d.ts (10,27): Cannot find module '@angular/ cdk/bidi'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/snack-bar/typings/snack-bar-container.d.ts (10,70): Cannot find module '@angul ar/cdk/portal'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/snack-bar/typings/snack-bar-ref.d.ts (8,28): Cannot find module '@angular/cdk/ overlay'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/snack-bar/typings/snack-bar.d.ts (8,31): Cannot find module '@angular/cdk/a11y '. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/snack-bar/typings/snack-bar.d.ts (9,25): Cannot find module '@angular/cdk/over lay'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/snack-bar/typings/snack-bar.d.ts (10,31): Cannot find module '@angular/cdk/por tal'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/sort/typings/sort-header.d.ts (9,30): Cannot find module '@angular/cdk/table'.

ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/stepper/typings/step-label.d.ts (9,30): Cannot find module '@angular/cdk/stepp er'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/stepper/typings/stepper.d.ts (1,37): Cannot find module '@angular/cdk/stepper' . ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/stepper/typings/stepper-button.d.ts (1,52): Cannot find module '@angular/cdk/s tepper'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/stepper/typings/step-header.d.ts (8,30): Cannot find module '@angular/cdk/a11y '. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/table/typings/cell.d.ts (9,84): Cannot find module '@angular/cdk/table'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/table/typings/table.d.ts (1,26): Cannot find module '@angular/cdk/table'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/table/typings/row.d.ts (1,66): Cannot find module '@angular/cdk/table'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/tabs/typings/tab-label.d.ts (9,41): Cannot find module '@angular/cdk/portal'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/tabs/typings/tab.d.ts (8,32): Cannot find module '@angular/cdk/portal'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/tabs/typings/tab-body.d.ts (10,53): Cannot find module '@angular/cdk/portal'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/tabs/typings/tab-body.d.ts (11,43): Cannot find module '@angular/cdk/bidi'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/tabs/typings/tab-header.d.ts (8,43): Cannot find module '@angular/cdk/bidi'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/tabs/typings/tab-header.d.ts (13,31): Cannot find module '@angular/cdk/scrolli ng'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/tabs/typings/tab-nav-bar/tab-nav-bar.d.ts (8,32): Cannot find module '@angular /cdk/bidi'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/tabs/typings/tab-nav-bar/tab-nav-bar.d.ts (9,26): Cannot find module '@angular /cdk/platform'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/tabs/typings/tab-nav-bar/tab-nav-bar.d.ts (10,31): Cannot find module '@angula r/cdk/scrolling'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/tooltip/typings/tooltip.d.ts (9,31): Cannot find module '@angular/cdk/a11y'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/tooltip/typings/tooltip.d.ts (10,32): Cannot find module '@angular/cdk/bidi'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/tooltip/typings/tooltip.d.ts (11,156): Cannot find module '@angular/cdk/overla y'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/tooltip/typings/tooltip.d.ts (12,26): Cannot find module '@angular/cdk/platfor m'. ERROR in E:/angular2/CERPNEW/node_modules/@angular/material/tooltip/typings/tooltip.d.ts (13,34): Cannot find module '@angular/cdk/scrolli ng'. ERROR in Error: Error encountered resolving symbol values statically. Could not resolve @angular/cdk/observers relative to E:/angular2/CER PNEW/node_modules/@angular/material/checkbox/typings/index.d.ts., resolving symbol MatCheckboxModule in E:/angular2/CERPNEW/node_modules/@ angular/material/checkbox/typings/index.d.ts, resolving symbol MatCheckboxModule in E:/angular2/CERPNEW/node_modules/@angular/material/che ckbox/typings/index.d.ts at syntaxError (E:\angular2\CERPNEW\node_modules\@angular\compiler\bundles\compiler.umd.js:1729:34) at simplifyInContext (E:\angular2\CERPNEW\node_modules\@angular\compiler\bundles\compiler.umd.js:25118:23) at StaticReflector.simplify (E:\angular2\CERPNEW\node_modules\@angular\compiler\bundles\compiler.umd.js:25130:13) at StaticReflector.annotations (E:\angular2\CERPNEW\node_modules\@angular\compiler\bundles\compiler.umd.js:24558:41) at _getNgModuleMetadata (E:\angular2\CERPNEW\node_modules\@angular\compiler-cli\src\ngtools_impl.js:138:31) at _extractLazyRoutesFromStaticModule (E:\angular2\CERPNEW\node_modules\@angular\compiler-cli\src\ngtools_impl.js:109:26) at E:\angular2\CERPNEW\node_modules\@angular\compiler-cli\src\ngtools_impl.js:129:27 at Array.reduce () at _extractLazyRoutesFromStaticModule (E:\angular2\CERPNEW\node_modules\@angular\compiler-cli\src\ngtools_impl.js:128:10) at Object.listLazyRoutesOfModule (E:\angular2\CERPNEW\node_modules\@angular\compiler-cli\src\ngtools_impl.js:53:22) at Function.NgTools_InternalApi_NG_2.listLazyRoutes (E:\angular2\CERPNEW\node_modules\@angular\compiler-cli\src\ngtools_api.js:91:39) at AotPlugin._getLazyRoutesFromNgtools (E:\angular2\CERPNEW\node_modules\@ngtools\webpack\src\plugin.js:207:44) at _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)

7
Please note angularjs tag is for Angular 1.x, for other it is angularRakesh Burbure

7 Answers

90
votes

you should install neccessary @angular/cdk library to correct use of the newest @angular/material.

You can do this by command:

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

Get into the Workspace or Angular project you are working with, open command prompt and run the below command:

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

If the error is still not gone, try clearing the cache by the given command :

npm cache clear --force

Another approach to clean the cache is by manually deleting it from the file system at

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

Try deleting everything from the above location then rerun

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

Hopefully this should solve your issue and ngServe would show the message about successful compilation of project.

3
votes

I had faced the same issue. Problem is that you used npm i @angular/material to install Angular Material. Use ng add @angular/material as shown in the documentation page. https://material.angular.io/guide/getting-started

This will automatically install the CDK and other dependencies.

2
votes

There are questions the package stops and asks you before it installs, and I did not realize that. I started the installation process and then started to work in another terminal/window. When I got those error messages, I did not realize that the package was hanging on those questions in the first terminal. Once I answered them, the package finished installing and those errors went away.

1
votes

Nowadays, for Angular 9+ (but maybe also for 8, not tested) ng add @angular/material should solve all those issues adding everything that is needed to have Material ready to be used.

0
votes

Setting "skipLibCheck": true in tsconfig.json

"compilerOptions": {
    "skipLibCheck": true
}
0
votes

you need to: npm install --save @angular/material @angular/cdk

then restart the server ng serve --port 4100 -o the -o is to auto open the app on the default browser