问题
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 ?
回答1:
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 { }
回答2:
It helped me:
npm uninstall --save @angular/material
npm install --save @angular/material@5.2.4
npm uninstall --save @angular/cdk
npm install --save @angular/cdk@5.2.4
I'm using Angular 5.
来源：https://stackoverflow.com/questions/47122024/material-angular-compile-error-class-matstepper-incorrectly-extends-base-c