Material Angular - Compile error - Class 'MatStepper' incorrectly extends base class 'CdkStepper'

Question

I have problems with compiling my angular website. I have installed all necessary dependencies via npm, but it is not working. I use Material Angular too. And this is the problem, without it works.

Log:

webpack: Compiling...
Date: 2017-11-05T13:02:47.880Z
Hash: a4f6320620f5d2e9766f
Time: 665ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry]
chunk {main} main.bundle.js (main) 1.85 MB [initial]
chunk {polyfills} polyfills.bundle.js (polyfills) 551 kB [initial]
chunk {styles} styles.bundle.js (styles) 150 kB [initial]
chunk {vendor} vendor.bundle.js (vendor) 12.8 MB [initial]


ERROR in C:/Users/Erik/node_modules/@angular/core/@angular/core.es5.js
Module build failed: Error: ENOENT: no such file or directory, open 'C:\Users\Erik\node_modules\@angular\core\@angular\core.es5.js'
 @ C:/Users/Erik/node_modules/@angular/cdk/esm5/a11y.es5.js 17:0-168
 @ ./node_modules/@angular/material/esm5/autocomplete.es5.js
 @ ./node_modules/@angular/material/esm5/material.es5.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

webpack: Failed to compile.
ERROR in node_modules/@angular/material/stepper/typings/stepper.d.ts(17,22): error TS2415: Class 'MatStepper' incorrectly extends base class 'CdkStepper'.
  Types of property '_steps' are incompatible.
    Type 'QueryList<MatStep>' is not assignable to type 'QueryList<CdkStep>'.
      Property '_dirty' is missing in type 'QueryList<MatStep>'.
../../node_modules/@angular/cdk/a11y/typings/focus-monitor.d.ts(10,28): error TS2307: Cannot find module 'rxjs/Observable'.
../../node_modules/@angular/cdk/a11y/typings/list-key-manager.d.ts(9,25): error TS2307: Cannot find module 'rxjs/Subject'.
../../node_modules/@angular/cdk/collections/typings/collection-viewer.d.ts(8,28): error TS2307: Cannot find module 'rxjs/Observable'.
../../node_modules/@angular/cdk/collections/typings/data-source.d.ts(8,28): error TS2307: Cannot find module 'rxjs/Observable'.
../../node_modules/@angular/cdk/collections/typings/selection.d.ts(8,25): error TS2307: Cannot find module 'rxjs/Subject'.
../../node_modules/@angular/cdk/layout/typings/breakpoints-observer.d.ts(10,28): error TS2307: Cannot find module 'rxjs/Observable'.
../../node_modules/@angular/cdk/overlay/typings/overlay-ref.d.ts(12,28): error TS2307: Cannot find module 'rxjs/Observable'.
../../node_modules/@angular/cdk/overlay/typings/overlay-ref.d.ts(13,25): error TS2307: Cannot find module 'rxjs/Subject'.
../../node_modules/@angular/cdk/overlay/typings/position/connected-position-strategy.d.ts(12,25): error TS2307: Cannot find module 'rxjs/Subject'.
../../node_modules/@angular/cdk/overlay/typings/position/connected-position-strategy.d.ts(13,28): error TS2307: Cannot find module 'rxjs/Observable'.
../../node_modules/@angular/cdk/scrolling/typings/scroll-dispatcher.d.ts(10,30): error TS2307: Cannot find module 'rxjs/Subscription'.
../../node_modules/@angular/cdk/scrolling/typings/scroll-dispatcher.d.ts(11,28): error TS2307: Cannot find module 'rxjs/Observable'.
../../node_modules/@angular/cdk/scrolling/typings/scrollable.d.ts(9,28): error TS2307: Cannot find module 'rxjs/Observable'.
../../node_modules/@angular/cdk/scrolling/typings/viewport-ruler.d.ts(10,28): error TS2307: Cannot find module 'rxjs/Observable'.
../../node_modules/@angular/cdk/stepper/typings/stepper.d.ts(10,33): error TS2307: Cannot find module '@angular/forms'.
../../node_modules/@angular/cdk/table/typings/table.d.ts(11,33): error TS2307: Cannot find module 'rxjs/BehaviorSubject'.
../../node_modules/@angular/core/src/application_ref.d.ts(8,28): error TS2307: Cannot find module 'rxjs/Observable'.
../../node_modules/@angular/core/src/event_emitter.d.ts(8,25): error TS2307: Cannot find module 'rxjs/Subject'.
../../node_modules/@angular/core/src/linker/query_list.d.ts(8,28): error TS2307: Cannot find module 'rxjs/Observable'.
../../node_modules/@angular/core/src/util/lang.d.ts(8,28): error TS2307: Cannot find module 'rxjs/Observable'.

Can you help me ? Have I installed bad dependencies or I forget something ?

Answer 1

It helped me:

npm uninstall --save @angular/material
npm install --save @angular/[email protected]
npm uninstall --save @angular/cdk
npm install --save @angular/[email protected]

I'm using Angular 5.

Answer 2

One main reason for this error is your angular material package is at version 6+ whereas all other libraries are at 5+ version.

Therefore, in your package.json file,

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

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

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

After making these changes, open your command prompt and give

npm install

which will install all the libraries mentioned in your package.json in their specified versions. Following this, start your server which should successfully open your application in the web browser:

ng serve

Also, make sure you have added BrowserAnimationsModule in your app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import {MatSnackBarModule} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MatSnackBarModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }