Components: unmet dependency angular/cdk

[axtho]

Bug, feature request, or proposal:

BUG

What is the expected behavior?

ng serve should work

What is the current behavior?

compilation breaks:

ERROR in /Applications/MAMP/htdocs/memberhive2/web/node_modules/@angular/material/typings/core/core.d.ts (1,61): Cannot find module '@angular/cdk'.

ERROR in ./~/@angular/material/@angular/material.es5.js
Module not found: Error: Can't resolve '@angular/cdk' in '/Applications/MAMP/htdocs/memberhive2/web/node_modules/@angular/material/@angular'
 @ ./~/@angular/material/@angular/material.es5.js 19:0-75
 @ ./src/app/app-material.module.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.

During yarn upgrade you get the following warning:
warning "@angular/[email protected]" has unmet peer dependency "@angular/[email protected]".

@DevVersion it may have something to do with 17cc4a198f336e8ebefbb2710d8e80df2595db7e?

What are the steps to reproduce?

Just open the Plunker example ... the console tells the story: https://goo.gl/DlHd6U

What is the use-case or motivation for changing an existing behavior?

continue with upgrades

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

TS 2.4.0
@angular/cli: 1.1.3
node: 8.0.0
os: darwin x64
@angular/animations: 4.2.4
@angular/common: 4.2.4
@angular/compiler: 4.2.4
@angular/core: 4.2.4
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.2.4
@angular/http: 4.2.4
@angular/material: 2.0.0-beta.7-51bf26e
@angular/platform-browser: 4.2.4
@angular/platform-browser-dynamic: 4.2.4
@angular/router: 4.2.4
@angular/cli: 1.1.3
@angular/compiler-cli: 4.2.4
@angular/platform-server: 4.2.4

Is there anything else we should know?

I am pulling from the master branch, updating almost daily. Yesterday morning the update did not break the build.

[devversion]

Good point. Maybe it would make sense to refer for material2 builds to the cdk builds on GitHub.

I will start looking into this today

[TomDevolder]

I get the same error.
for what its worth: i get the following errors after an npm install which includes @angular/[email protected]

npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.

up to date in 3.194s
PS C:\dev\material2-start> npm install @angular/[email protected]
npm ERR! code E404
npm ERR! 404 Not Found: @angular/[email protected]

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Tom Devolder\AppData\Roaming\npm-cache\_logs\2017-06-23T07_26_44_976Z-debug.log

[arkhamvm]

Is there any temporary solution?

[axtho]

@arkhamvm for now just revert back to "@angular/material": "2.0.0-beta.7". I am sure it will be fixed by tomorrow.

[arkhamvm]

@axtho thanks.

[Max-0n]

not fixed for today :(
2.0.0-beta.8

[mustafaekim]

same issue for me. I went back to 2.0.0-beta.7 to be able to go on with my code

[chrste90]

Do you have installed @angular/cdk?

[w3chtml]

npm install --save @angular/material @angular/cdk from documentation helped me too

[PeS82]

And just... do not forget to import CdkTableModule (if you are using MdTableModule).

[senthiljruby]

npm install --save @angular/cdk resolved it.

[jdell64]

I would call this a breaking change.

[jelbourn]

@jdell64 so would I

[jdell64]

Nice! I assumed you all followed the same versioning as angular, so when breaking changes happen, you'd bump the Major version number. I guess its tough to do so when the milestones for 2 aren't there yet, so that was my confusion. (certainly not complaining! love MD)

[jelbourn]

Yeah, during beta every release may still have breaking changes. Once beta is over the library will follow the same semver conventions as Angular.

[eliyow]

latest version Material : bug (Error)

ERROR in ./~/@angular/material/@angular/material.es5.js
Module build failed: Error: ENOENT: no such file or directory, open 'C:\blog\blog-src\node_modules\@angular\material\@angular\material.es5.js'
at Error (native)
@ ./src/app/app.module.ts 19:0-96
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in ./~/@angular/animations/@angular/animations/browser.es5.js
Module build failed: Error: ENOENT: no such file or directory, open 'C:\blog\blog-src\node_modules\@angular\animations\@angular\animations\browser.es5.js'
at Error (native)
@ ./~/@angular/platform-browser/@angular/platform-browser/animations.es5.js 10:0-206
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

---

Fix : Downgrade to one lower version of material :

[Parziphal]

In case you had a previous version of material or cdk, remove them first (npm remove) before reinstalling them.

[dvj1988]

npm install --save @angular/[email protected] resolved it.

[ilnreddy]

go with:
npm install --save @angular/material@latest
`-- @angular/[email protected]

npm install --save @angular/cdk@latest
`-- @angular/[email protected]

[AndreyPatseiko]

Back to "@angular/cdk": "2.0.0-beta.11", and @angular/material": "2.0.0-beta.11"

[AkbarAlam]

The problem is still there

[takahser]

didn't work for me, I tried (on plunkr):

'@angular/cdk': 'npm:@angular/[email protected]/bundles/cdk.umd.js',
'@angular/cdk': 'npm:@angular/[email protected]/bundles/cdk.umd.js',
'@angular/cdk': 'npm:@angular/[email protected]/bundles/cdk.umd.js',
'@angular/cdk': 'npm:@angular/[email protected]/bundles/cdk.umd.js'

but I'd always get a 404 for:

• https://unpkg.com/@angular/cdk@5.0.0-rc.0/bundles/cdk.umd.js/overlay
• https://unpkg.com/@angular/cdk@5.0.0-rc.0/bundles/cdk.umd.js/bidi
• https://unpkg.com/@angular/cdk@5.0.0-rc.0/bundles/cdk.umd.js/scrolling
• ...

However, the umd works: https://unpkg.com/@angular/cdk@5.0.0-rc.0/bundles/cdk.umd.js

plunkr: https://plnkr.co/edit/QsM1PEndLBakrN8vGZYg?p=preview

any ideas?

[ilnreddy]

Delete node_modules
use below in your package.jason

"dependencies": {
"@angular/animations": "^5.0.2",
"@angular/cdk": "^5.0.0-rc0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/flex-layout": "^2.0.0-beta.10-4905443",
"@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/router": "^5.0.0",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
}
update the packages using
npm install.

this should work.

[wasif-ahmed]

i am getting this error : what to do

ERROR TypeError: Cannot read property 'get' of undefined
at FormComponent.isFieldValid (form.component.ts:194)
at Object.eval [as updateDirectives] (FormComponent.html:18)

[tiwariajay]

we can use the below version:

"@angular/cdk": "^2.0.0-beta.12",
"@angular/material": "^2.0.0-beta.12"

[raduolivas]

ilnreddy solution works. this is based in Agular Version conflict with latest material version. If you use Angular 6 latest it will not work. it needs to be Angular 5. Thnaks

[vivekjoshi225]

ilnreddy solution works. this is based in Agular Version conflict with latest material version. If you use Angular 6 latest it will not work. it needs to be Angular 5. Thnaks
@raduolivas,
Can you suggest an exact version ?

Thanks.

[raduolivas]

@vivekjoshi225 , you can take a look at this commit https://github.com/raduolivas/angualr5_marvel/commit/016d7f153c804ff3912420afd44d17f2d16f9e1b#diff-b9cfc7f2cdf78a7f4b91a753d10865a2 , make sure you delete node_modules and run npm install again. This project that ai've sent to you has also the material configuration, but you need to check material integration commit. I just decide to use bootstrap and remove material in the latest commit.

[vivekjoshi225]

@vivekjoshi225 , you can take a look at this commit raduolivas/angualr5_marvel@016d7f1#diff-b9cfc7f2cdf78a7f4b91a753d10865a2 , make sure you delete node_modules and run npm install again. This project that ai've sent to you has also the material configuration, but you need to check material integration commit. I just decide to use bootstrap and remove material in the latest commit.

Thanks @raduolivas!

[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._}