Angular CLI + Angular Material {MatButtonModule} breaks angular build

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<MatStepHeader>’ is not assignable to type ‘QueryList<ElementRef>’. 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<T>’ incorrectly extends base class ‘CdkTable<T>’. Property ‘_differs’ is private in type ‘CdkTable<T>’ but not in type ‘MatTable<T>’. 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<T>’ incorrectly implements interface ‘CanDisable’. Property ‘disabled’ is missing in type ‘MatTreeNode<T>’. node_modules/@angular/material/tree/typings/node.d.ts(17,22): error TS2420: Class ‘MatTreeNode<T>’ incorrectly implements interface ‘HasTabIndex’. Property ‘tabIndex’ is missing in type ‘MatTreeNode<T>’. node_modules/@angular/material/tree/typings/node.d.ts(32,22): error TS2420: Class ‘MatNestedTreeNode<T>’ incorrectly implements interface ‘CanDisable’. Property ‘disabled’ is missing in type ‘MatNestedTreeNode<T>’. node_modules/@angular/material/tree/typings/node.d.ts(32,22): error TS2420: Class ‘MatNestedTreeNode<T>’ incorrectly implements interface ‘HasTabIndex’. Property ‘tabIndex’ is missing in type ‘MatNestedTreeNode<T>’. 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.

[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"    
  },

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