材质角度-编译错误-类'MatStepper'不正确地扩展了基类'CdkStepper' [英] Material Angular - Compile error - Class 'MatStepper' incorrectly extends base class 'CdkStepper'

问题描述

我在编译我的有角度的网站时遇到问题.我已经通过npm安装了所有必需的依赖项，但是它不起作用.我也使用Material Angular.而这就是问题，如果没有解决的话.

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.

日志:

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 ?

推荐答案

此错误的一个主要原因是您的angular material软件包的版本为6+，而所有其他库的版本均为5 +.

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

因此，在您的package.json文件中

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

将其更改为其他角度组件的当前版本，如下所示.

  "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

将以指定版本安装package.json中提到的所有库.然后，启动您的服务器，该服务器应在Web浏览器中成功打开您的应用程序:

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

此外，请确保已在app.module.ts

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 { }

这篇关于材质角度-编译错误-类'MatStepper'不正确地扩展了基类'CdkStepper'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！