Components: Cannot find module... Problems with cdk

[bystronerik]

Bug, feature request, or proposal:

• [x] Bug

What is the expected behavior?

Application will run

What is the current behavior?

Angular Material throw error

What are the steps to reproduce?

Install all dependencies and run aplication which use angular material

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

• Angular 5.0.0
• Material 5.0.0-rc0
• Windows 10
• TypeScript 2.6.1

Log
`C:\Users\Erik\WebstormProjects\FellCMS>ng serve
* NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ *
Date: 2017-11-08T14:57:50.207Z
Hash: c7798f1f7c0d306126a4
Time: 7912ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.93 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 636 bytes [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 150 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 853 kB [initial] [rendered]

ERROR in node_modules/@angular/material/autocomplete/typings/autocomplete-trigger.d.ts(8,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/autocomplete/typings/autocomplete-trigger.d.ts(9,67): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/autocomplete/typings/autocomplete.d.ts(10,44): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts(11,30): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts(12,43): error TS2307: Cannot find module '@angular/cdk/collections'.
node_modules/@angular/material/button/typings/button.d.ts(9,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/button/typings/button.d.ts(11,30): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/checkbox/typings/checkbox.d.ts(4,30): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/chips/typings/chip-list.d.ts(8,33): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/chips/typings/chip-list.d.ts(9,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/chips/typings/chip-list.d.ts(10,32): error TS2307: Cannot find module '@angular/cdk/collections'.
node_modules/@angular/material/chips/typings/chip.d.ts(8,33): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/core/typings/ripple/ripple-renderer.d.ts(9,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/core/typings/ripple/ripple.d.ts(9,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/datepicker/typings/datepicker.d.ts(8,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/datepicker/typings/datepicker.d.ts(9,67): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/dialog/typings/dialog-config.d.ts(9,27): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/dialog/typings/dialog-container.d.ts(10,84): error TS2307: Cannot find module '@angular/cdk/portal'.
node_modules/@angular/material/dialog/typings/dialog-container.d.ts(11,34): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/dialog/typings/dialog-ref.d.ts(8,28): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/dialog/typings/dialog.d.ts(1,62): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/dialog/typings/dialog.d.ts(2,31): error TS2307: Cannot find module '@angular/cdk/portal'.
node_modules/@angular/material/expansion/typings/accordion.d.ts(1,30): error TS2307: Cannot find module '@angular/cdk/accordion'.
node_modules/@angular/material/expansion/typings/expansion-panel-header.d.ts(1,30): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/expansion/typings/expansion-panel.d.ts(2,34): error TS2307: Cannot find module '@angular/cdk/accordion'.
node_modules/@angular/material/expansion/typings/expansion-panel.d.ts(3,43): error TS2307: Cannot find module '@angular/cdk/collections'.
node_modules/@angular/material/grid-list/typings/grid-list.d.ts(10,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/input/typings/autosize.d.ts(9,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/input/typings/input.d.ts(10,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/list/typings/selection-list.d.ts(8,50): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/list/typings/selection-list.d.ts(9,32): error TS2307: Cannot find module '@angular/cdk/collections'.
node_modules/@angular/material/menu/typings/menu-directive.d.ts(9,27): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/menu/typings/menu-item.d.ts(8,33): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/menu/typings/menu-panel.d.ts(10,27): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/menu/typings/menu-trigger.d.ts(1,43): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/menu/typings/menu-trigger.d.ts(2,67): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/progress-spinner/typings/progress-spinner.d.ts(10,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/radio/typings/radio.d.ts(11,43): error TS2307: Cannot find module '@angular/cdk/collections'.
node_modules/@angular/material/radio/typings/radio.d.ts(12,30): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/select/typings/select.d.ts(8,44): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/select/typings/select.d.ts(9,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/select/typings/select.d.ts(10,32): error TS2307: Cannot find module '@angular/cdk/collections'.
node_modules/@angular/material/select/typings/select.d.ts(11,103): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/sidenav/typings/drawer.d.ts(9,61): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/sidenav/typings/drawer.d.ts(10,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/slide-toggle/typings/slide-toggle.d.ts(9,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/slide-toggle/typings/slide-toggle.d.ts(12,30): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/slider/typings/slider.d.ts(8,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/slider/typings/slider.d.ts(12,30): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/snack-bar/typings/snack-bar-config.d.ts(9,36): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/snack-bar/typings/snack-bar-config.d.ts(10,27): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/snack-bar/typings/snack-bar-container.d.ts(10,68): error TS2307: Cannot find module '@angular/cdk/portal'.
node_modules/@angular/material/snack-bar/typings/snack-bar-ref.d.ts(8,28): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/snack-bar/typings/snack-bar.d.ts(8,31): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/snack-bar/typings/snack-bar.d.ts(9,25): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/snack-bar/typings/snack-bar.d.ts(10,31): error TS2307: Cannot find module '@angular/cdk/portal'.
node_modules/@angular/material/snack-bar/typings/snack-bar.d.ts(15,36): error TS2307: Cannot find module '@angular/cdk/layout'.
node_modules/@angular/material/sort/typings/sort-header.d.ts(9,30): error TS2307: Cannot find module '@angular/cdk/table'.
node_modules/@angular/material/stepper/typings/step-header.d.ts(8,30): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/stepper/typings/step-label.d.ts(9,30): error TS2307: Cannot find module '@angular/cdk/stepper'.
node_modules/@angular/material/stepper/typings/stepper-button.d.ts(1,52): error TS2307: Cannot find module '@angular/cdk/stepper'.
node_modules/@angular/material/stepper/typings/stepper.d.ts(1,37): error TS2307: Cannot find module '@angular/cdk/stepper'.
node_modules/@angular/material/table/typings/cell.d.ts(9,84): error TS2307: Cannot find module '@angular/cdk/table'.
node_modules/@angular/material/table/typings/row.d.ts(1,66): error TS2307: Cannot find module '@angular/cdk/table'.
node_modules/@angular/material/table/typings/table-data-source.d.ts(8,28): error TS2307: Cannot find module '@angular/cdk/table'.
node_modules/@angular/material/table/typings/table.d.ts(1,26): error TS2307: Cannot find module '@angular/cdk/table'.
node_modules/@angular/material/tabs/typings/tab-body.d.ts(10,49): error TS2307: Cannot find module '@angular/cdk/portal'.
node_modules/@angular/material/tabs/typings/tab-body.d.ts(11,43): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/tabs/typings/tab-header.d.ts(8,43): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/tabs/typings/tab-header.d.ts(13,31): error TS2307: Cannot find module '@angular/cdk/scrolling'.
node_modules/@angular/material/tabs/typings/tab-label.d.ts(9,27): error TS2307: Cannot find module '@angular/cdk/portal'.
node_modules/@angular/material/tabs/typings/tab-nav-bar/tab-nav-bar.d.ts(8,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/tabs/typings/tab-nav-bar/tab-nav-bar.d.ts(9,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/tabs/typings/tab-nav-bar/tab-nav-bar.d.ts(10,31): error TS2307: Cannot find module '@angular/cdk/scrolling'.
node_modules/@angular/material/tabs/typings/tab.d.ts(8,32): error TS2307: Cannot find module '@angular/cdk/portal'.
node_modules/@angular/material/toolbar/typings/toolbar.d.ts(10,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/tooltip/typings/tooltip.d.ts(9,45): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/tooltip/typings/tooltip.d.ts(10,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/tooltip/typings/tooltip.d.ts(11,156): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/tooltip/typings/tooltip.d.ts(12,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/tooltip/typings/tooltip.d.ts(13,34): error TS2307: Cannot find module '@angular/cdk/scrolling'.

webpack: Failed to compile.
`

[willshowell]

Did you install @angular/cdk?

[bystronerik]

Yes latest version (5.0.0-rc0)

[josephperrott]

The errors you are seeing would point to @angular/cdk not being installed as @willshowell mentioned. Since you do have it installed, I would think that this is likely caused by stale packages.

I would suggest to try removing your node_modules/ directory and running npm install.

[bystronerik]

@josephperrott I tried it too, but I can try it again..

[josephperrott]

Unfortunately we are not able to reproduce this in stackblitz (or locally for what its worth).

Can you provide your package.json file as well to take a look at?

[bystronerik]

@josephperrott Which? In the project or somewhere else?

[willshowell]

@Flayovec your project's package.json would probably identify the issue

[bystronerik]

@willshowell I don't have enough time today, I will post it here tomorrow. But I don't have changed anything in the package.json, it is same as angular cli generated it. Maybe this is the problem... I'm new in using Angular and NPM, I don't want to damage something so I don't haven't change anything in that files.

[willshowell]

@Flayovec it should be as easy as copy-pasting C:\Users\Erik\WebstormProjects\FellCMS\package.json here.

It should contain a dependencies section that looks approximately like this (there may be more ^ or ~ before the version numbers),

  "dependencies": {
    "@angular/animations": "5.0.0",
    "@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/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@angular/router": "5.0.0",
    "core-js": "2.5.1",
    "rxjs": "5.5.2",
    "zone.js": "0.8.17",
    "router": "1.3.2",
    "hammerjs": "2.0.8",
    "@angular/cdk": "5.0.0-rc0",
    "@angular/material": "5.0.0-rc0",
    "web-animations-js": "2.3.1"
  },

Further, if you are using git and committing when the project is in a working state, you can edit files with confidence that you'll be able to later revert your changes. The following commands would likely fix this:

npm install --save @angular/material @angular/cdk
rm -rf node_modules
npm install

[bystronerik]

Thank you, I will try it tomorrow. But I think this will solve all problems.

[mantupani17]

i am also having same problem @willshowell

[Seanmclem]

@mantupani17 my npm install of hammerjs had messed things up. hammerjs needed my terminal launched as administrator. After that succeeded I still had to delete the node_modules directory and do npm install again to re-add everything. After that ng build succeeds again

[biostec]

I hope I can help with this, delete the folder "layout" inside of node_modules/@ angular/ . Replace with the link file.

https://drive.google.com/file/d/1o26ilKwJNTKtREikOtiJmLEel4s90mZv/view
"@angular/flex-layout": "^5.0.0-beta.14"

[YousefMegahed]

@biostec the link is not exist please can you give me this file , Thank you

[biostec]

@YousefMegahed just copy and paste the link in a new windows, the link is not broken 😁

[Mrivera543]

npm install --save-dev @angular/forms@latest #"Worked for me"

[simeyla]

Make absolutely sure the @angular/cdk package is installed.

What happened to me was

• Installed @angular/material
• Ran ng serve
• Got errors so did Ctrl+C and typed npm install @angular/cdk
• Ran ng serve again and it still didn't work
• Scrolled up and saw Terminate batch job (Y/N)? npm install @angular/cdk
• Realized you need to press Ctrl+C twice to actually get control back
• Installed cdk for real. Everything good.

The --save is no longer needed. It is the default.

[Akitha]

it fixed install
1) npm install @angular/cdk
2) npm install

[WizardPC]

Juste have the same issue from a totally new project.

Install nodeJs (10.9.0)
Install angular/cli (npm install -g @angular/cli)
Generate new app
Works great (ng serve -o)

Add material (npm install --save @angular/material @angular/cdk @angular/animations)
Have an issue (ng serve -o)

ERROR in ../../../../node_modules/@angular/cdk/a11y/typings/aria-describer/aria-describer.d.ts(1,53): error TS2307: Cannot find module '@angular/core'.
../../../../node_modules/@angular/cdk/a11y/typings/focus-monitor/focus-monitor.d.ts(9,71): error TS2307: Cannot find module '@angular/core'.
../../../../node_modules/@angular/cdk/a11y/typings/focus-monitor/focus-monitor.d.ts(10,28): error TS2307: Cannot find module 'rxjs'.
../../../../node_modules/@angular/cdk/a11y/typings/focus-trap/focus-trap.d.ts(1,74): error TS2307: Cannot find module '@angular/core'.
../../../../node_modules/@angular/cdk/a11y/typings/key-manager/list-key-manager.d.ts(8,27): error TS2307: Cannot find module '@angular/core'.
../../../../node_modules/@angular/cdk/a11y/typings/key-manager/list-key-manager.d.ts(9,25): error TS2307: Cannot find module 'rxjs'.
...
...

I don't know if it's exactly the same as described here, but the fix is the same. @josephperrott

[Akitha]

@WizardPC

Just try

1. npm install @angular/cdk
2. npm install

this works for me

[achimschrepfer]

Adding @angular/cdk, removing node_modules and doing npm install after that, worked for me - thanks guys!

[jmxxii]

Make sure your @material and @cdk match your @angular/core version. They shouldn't be higher than your @angular/core version.

[the1Spartacus]

run npm install then ng serve

[Monu-Chaudhary]

The following fixed my issue:
ng serve.
npm install --save @angular/material
Got an error.
npm install --save @angular/cdk
Got an error
Ctrl+C
restarted the project
ng serve

[hardikpansuria]

@Monu-Chaudhary it works for me!

[RANJITHAGANGADHAR]

Why i cant able run ng generate @angular/material:nav navbar2 i am getting an error i have installed every package

[the1Spartacus]

@RANJITHAGANGADHAR - run "npm cache clean --force" then run your command after

[lwairore]

Just run:
npm update @angular/cli @angular/cdk rxjs
npm install -S @angular/material @angular/cdk @angular/animations

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}