Components: Cannot find @angular/cdk when running 'ng serve'

[theCrius]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Being able to start an app with Angular Material

What is the current behavior?

After an ng serve I get a huge wall of text of errors.

What are the steps to reproduce?

I cannot show you the source code as it's proprietary.
The code was written with an old version of Angular and Angular Material. Hopefully showing the package.json and the error will be enough.

The full process has been:

1. Cloning the project. Runnin npm install. Getting errors for deprecated packages and dependencies.
2. Applying a more recent package.json for angular/cli and running again npm install. Everything install.
3. Updating angular-cli.json to the new environments format. Run ng serve -o. Get the error shown in the following gist.

https://gist.github.com/theCrius/bbee299f3e5aeec9e911279b7fb684b3

Both the package.json are also present in this gist. The original project was writte in June 2016 so I suppose the issue is related to changes in @angular/material2 as the issue comes from not finding @angular/cdk missing package.

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

Not applicable.

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

I can't make to the browser. The error is being showed in the console.

Is there anything else we should know?

Don't know if it can be useful, the current ng --version result is as follows:

Angular CLI: 1.6.6
Node: 8.9.4
OS: win32 x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.6
@angular/material: 5.2.5
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.6
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0

[donroyco]

Did you install CDK as well?

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

See the getting started guide.

[theCrius]

Feeling quite stupid right now. Too much time spent trying to figure it out I suppose.

After installing the CDK explicitly the error is reduced to:

ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/assets/css/styles.scss
Module build failed:
@import '~@angular/material/core/theming/all-theme';
^
      File to import not found or unreadable: ~@angular/material/core/theming/all-theme.
      in [omitted]\src\assets\css\styles.scss (line 3, column 1)
Error:
@import '~@angular/material/core/theming/all-theme';
^
      File to import not found or unreadable: ~@angular/material/core/theming/all-theme.
      in [omitted]\src\assets\css\styles.scss (line 3, column 1)
    at options.error ([omitted]\node_modules\node-sass\lib\index.js:291:26)
 @ ./src/assets/css/styles.scss 4:14-209
 @ multi ./src/assets/css/styles.scss
ERROR in src/app/modules/app.module.ts(5,10): error TS2305: Module '"[omitted]/node_modules/@angular/material/material"' has no exported member 'MaterialModule'.

I also sees that the html files are still using the md prefixes. That will be a problem I suppose.

[donroyco]

@theCrius Did you include a theme as well (see step 4)?

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

[theCrius]

Yes, after installing the CDK I went forward and installed a default theme.

The following errors were about the MaterialModule so I went ahead and:

• Changed to load the individual component module
• Run a regexp replace of md- into mat-

I'm now dealing with more nasty changes like the datepickers not being md-input but dedicated mat-datepicker now.

Luckily the guy that thought that using beta stuff to release productions level application had left. So after I lose all my hairs fixing his projects, this won't happens this often.

Thanks for the support donroyco :)

[rafaelss95]

As mentioned in CHANGELOG#2.0.0-beta11, you can automatically update your projects with the angular-material-prefix-updater tool.

[theCrius]

Yes, but to do that I would have to first install angular 2.beta.11 which for some reason fails on the package json that I found in the project. I didn't had time to investigate that when I could simply run a regexp search&replace and load up the component in the module.ts.

It's more of a hassle switch to beta.11 and then to 5.x today then just do what I did.

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