Angular CLI + Angular Material {MatButtonModule} breaks angular build

[ereztdev]

Bug, feature request, or proposal:

bug

What is the expected behavior?

proper build

What is the current behavior?

ERROR in node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts(136,20): error TS2315: Type 'ElementRef' is not generic.
node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts(154,104): error TS2315: Type 'ElementRef' is not generic.
node_modules/@angular/material/input/typings/autosize.d.ts(8,37): error TS2307: Cannot find module '@angular/cdk/text-field'.
node_modules/@angular/material/input/typings/input.d.ts(7,33): error TS2307: Cannot find module '@angular/cdk/text-field'.
node_modules/@angular/material/slide-toggle/typings/slide-toggle.d.ts(53,15): error TS2315: Type 'ElementRef' is not generic.
node_modules/@angular/material/slide-toggle/typings/slide-toggle.d.ts(55,18): error TS2315: Type 'ElementRef' is not generic.
node_modules/@angular/material/stepper/typings/stepper.d.ts(25,22): error TS2415: Class 'MatStepper' incorrectly extends base class 'CdkStepper'.
Types of property '_stepHeader' are incompatible.
Type 'QueryList' is not assignable to type 'QueryList'.
Type 'MatStepHeader' is not assignable to type 'ElementRef'.
Property 'nativeElement' is missing in type 'MatStepHeader'.
node_modules/@angular/material/table/typings/cell.d.ts(9,45): error TS2305: Module '"E:/xampp7/htdocs/angular-express-auth/frontend/node_modules/@angular/cdk/table"' has no exported member 'CdkFooterCell'.
node_modules/@angular/material/table/typings/cell.d.ts(9,60): error TS2305: Module '"E:/xampp7/htdocs/angular-express-auth/frontend/node_modules/@angular/cdk/table"' has no exported member 'CdkFooterCellDef'.
node_modules/@angular/material/table/typings/row.d.ts(1,10): error TS2305: Module '"E:/xampp7/htdocs/angular-express-auth/frontend/node_modules/@angular/cdk/table"' has no exported member 'CdkFooterRow'.
node_modules/@angular/material/table/typings/row.d.ts(1,24): error TS2305: Module '"E:/xampp7/htdocs/angular-express-auth/frontend/node_modules/@angular/cdk/table"' has no exported member 'CdkFooterRowDef'.
node_modules/@angular/material/table/typings/table.d.ts(13,22): error TS2415: Class 'MatTable' incorrectly extends base class 'CdkTable'.
Property '_differs' is private in type 'CdkTable' but not in type 'MatTable'.
node_modules/@angular/material/tree/typings/data-source/flat-data-source.d.ts(9,46): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material/tree/typings/node.d.ts(9,73): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material/tree/typings/node.d.ts(17,22): error TS2420: Class 'MatTreeNode' incorrectly implements interface 'CanDisable'.
Property 'disabled' is missing in type 'MatTreeNode'.
node_modules/@angular/material/tree/typings/node.d.ts(17,22): error TS2420: Class 'MatTreeNode' incorrectly implements interface 'HasTabIndex'.
Property 'tabIndex' is missing in type 'MatTreeNode'.
node_modules/@angular/material/tree/typings/node.d.ts(32,22): error TS2420: Class 'MatNestedTreeNode' incorrectly implements interface 'CanDisable'.
Property 'disabled' is missing in type 'MatNestedTreeNode'.
node_modules/@angular/material/tree/typings/node.d.ts(32,22): error TS2420: Class 'MatNestedTreeNode' incorrectly implements interface 'HasTabIndex'.
Property 'tabIndex' is missing in type 'MatNestedTreeNode'.
node_modules/@angular/material/tree/typings/outlet.d.ts(8,35): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material/tree/typings/padding.d.ts(8,36): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material/tree/typings/toggle.d.ts(1,35): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material/tree/typings/tree.d.ts(1,25): error TS2307: Cannot find module '@angular/cdk/tree'.

What are the steps to reproduce?

in app.module:
import {MatButtonModule} from '@angular/material';

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

?

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

Node Version: v6.10.3
@angular/cdk: 5.2.5
@angular/cli: 1.7.4
@angular/material: 6.0.0-rc.14-29bf024
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Is there anything else we should know?

yes.

I see @angular/material/button/typings/button-module.d.ts which exports MatButtonModule empty.
yet button.d.ts has all the elements that the error doesn't find.
No idea if this helps, just dabbled around there.

[crisbeto]

The error probably comes from the fact that you have @angular/material set to 6.0.0, but all your other Angular packages are at 5.x. You should always make sure that the Material major version matches the major version of Angular.

[iamvipinpatil]

How to Solve it? @crisbeto

[judedaryl]

Open your package.json file

  "dependencies": {
    "@angular/core": "^5.2.0",
    "@angular/cdk": "^6.0.1",
    "@angular/material": "^6.0.1"    
  },

just change these to whatever the current version of the other angular components are.

  "dependencies": {
    "@angular/core": "^5.2.0",
    "@angular/cdk": "^5.2.0",
    "@angular/material": "^5.2.0"    
  },

[SundaramoorthyAnandh]

yeah! This one works!
Run npm install to re-install those dependencies.

Thanks @judedaryl

[judedaryl]

@SundaramoorthyAnandh no prob man. Another fix to this might be updating your angular-cli to 6.0.0 and updating the rest with ng update (new feature in 6.0.0). But then again, there is the unspoken rule: if it works, don't touch it

[ralexandre75]

ok pour 5.2.0 for the moment !!!

[kptcs]

but when we change it to ^5.2.0 , latest version components are not working like Tree component, how to solve?

[kptcs]

@crisbeto any idea about that

[Anujmoglix]

Hi,
I am facing same issue .
My configurations is as following
"dependencies": {
"@angular/animations": "^5.2.1",
"@angular/cdk": "github:angular/cdk-builds",
"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@ionic-native/core": "4.4.0",
"@ionic-native/splash-screen": "4.4.0",
"@ionic-native/status-bar": "4.4.0",
"@ionic/storage": "2.1.3",
"cordova-android": "6.3.0",
"@angular/material": "github:angular/material2-builds",
"cordova-ios": "4.5.4",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.0.5",
"cordova-plugin-ionic-webview": "^1.1.19",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-whitelist": "^1.3.3",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"ts-md5": "^1.2.4",
"zone.js": "0.8.18"
}

Now i did with
"dependencies": {
"@angular/core": "^5.2.0",
"@angular/cdk": "^5.2.0",
"@angular/material": "^5.2.0"
}
but getting same issue . what would be the process ?

[MarouaneSH]

"dependencies": {
"@angular/core": "^5.2.0",
"@angular/cdk": "^5.2.0",
"@angular/material": "^5.2.0"
},

[judedaryl]

As per my previous comment, you can also do it the other way around and update all the angular modules to the same version of material.

Oh great Thanks !

[gsravya25]

@judedaryl Am trying to use mat-datepicker.
Having below issue with npm install
Metadata version mismatch for module /node_modules/@angular/core/core.d.ts, found version 4, expected 3.
My package.json : "dependencies": {
"@angular/animations": "^4.0.0",
"@angular/cdk": "^5.2.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/material": "^5.2.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.1.0",
"@angular/compiler-cli": "^4.0.0",
"@angular/language-service": "^4.0.0",
"@types/jasmine": "2.5.45",
"@types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"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.0.4",
"tslint": "~5.3.2",
"typescript": "^3.4.0-dev.20190206"
}

[angular-automatic-lock-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.}