Material Angular - 编译错误 - 类“MatStepper”错误地扩展了基类“CdkStepper”

Question

我在编译我的 Angular 网站时遇到问题。我已经通过 npm 安装了所有必要的依赖项，但它不起作用。我也使用 Material Angular。这就是问题所在，没有它就可以工作。

日志：

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

你能帮帮我吗？我是否安装了错误的依赖项或者我忘记了什么？

Answer 1

它帮助了我：

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

我正在使用 Angular 5。

Answer 2

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

因此，在您的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"    
  },

进行这些更改后，打开命令提示符并给出

npm install

它将安装 package.json 中提到的所有库在它们指定的版本中。在此之后，启动您的服务器，它应该会在 Web 浏览器中成功打开您的应用程序：

ng serve

另外，请确保您在 app.module.ts 中添加了 BrowserAnimationsModule

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