ng服务期间不会编译角材步进器

如何解决ng服务期间不会编译角材步进器

我是角材料设计的新手，我使用角cli进行开发。

我已经坚持了几个小时，这是最新版本的角材料设计的错误吗？

我有：

• 删除了我的package-lock.json
• 已删除的node_modules
• 已安装npm

在执行ng服务时出现以下错误：

chunk {main} main.js,main.js.map (main) 1.82 kB [initial] [rendered]
chunk {polyfills} polyfills.js,polyfills.js.map (polyfills) 670 bytes [initial] [rendered]
chunk {runtime} runtime.js,runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js,styles.js.map (styles) 169 kB [initial] [rendered]
chunk {vendor} vendor.js,vendor.js.map (vendor) 339 kB [initial] [rendered]
Date: 2020-10-25T23:30:59.574Z - Hash: 715bbfd073a15e95d490 - Time: 10021ms

ERROR in node_modules/@angular/material/stepper/stepper.d.ts:31:22 - error NG6002: Appears in the NgModule.imports of AppModule,but Could not be resolved to an NgModule class.

This likely means that the library (@angular/material/stepper) which declares MatStepper has not been processed correctly by ngcc,or is not compatible with Angular Ivy. Check if a newer version of the library is available,and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

31 export declare class MatStepper extends CdkStepper implements AfterContentinit {
                        ~~~~~~~~~~

** Angular Live Development Server is listening on localhost:4200,open your browser on http://localhost:4200/ **

我的package.json是：

  "name": "main","version": "0.0.0","scripts": {
    "ng": "ng","start": "ng serve","build": "ng build","test": "ng test","lint": "ng lint","e2e": "ng e2e"
  },"private": true,"dependencies": {
    "@angular/animations": "~10.2.0","@angular/cdk": "^10.2.5","@angular/common": "~10.2.0","@angular/compiler": "~10.2.0","@angular/core": "~10.2.0","@angular/forms": "~10.2.0","@angular/material": "^10.2.5","@angular/platform-browser": "~10.2.0","@angular/platform-browser-dynamic": "~10.2.0","@angular/router": "~10.2.0","rxjs": "~6.6.0","tslib": "^2.0.0","zone.js": "~0.10.2"
  },"devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.0","@angular/cli": "~10.2.0","@angular/compiler-cli": "~10.2.0","@types/jasmine": "~3.5.0","@types/jasminewd2": "~2.0.3","@types/node": "^12.19.1","codelyzer": "^6.0.0","jasmine-core": "~3.6.0","jasmine-spec-reporter": "~5.0.0","karma": "~5.0.0","karma-chrome-launcher": "~3.1.0","karma-coverage-istanbul-reporter": "~3.0.2","karma-jasmine": "~4.0.0","karma-jasmine-html-reporter": "^1.5.0","protractor": "~7.0.0","ts-node": "~8.3.0","tslint": "~6.1.0","typescript": "~4.0.2"
  }
}

我的app.module.ts是：

import { NgModule } from '@angular/core';

import { ReactiveFormsModule } from '@angular/forms';
import { browserAnimationsModule } from '@angular/platform-browser/animations';

import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatStepper } from '@angular/material/stepper';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { HomeComponent } from './home/home.component';
import { SearchComponent } from './search/search.component';
import { CreateComponent } from './create/create.component';
import { FormationsComponent } from './formations/formations.component';

@NgModule({
  declarations: [
    AppComponent,HeaderComponent,HomeComponent,SearchComponent,CreateComponent,FormationsComponent
  ],imports: [
    browserModule,AppRoutingModule,browserAnimationsModule,MatButtonModule,MatIconModule,MatStepper,ReactiveFormsModule
  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

解决方法

查看文档：{​​{3}}

import {MatStepperModule} from '@angular/material/stepper';

,

您正在导入 MatStepper 但 stepper 是一个模块，因此 import MatStepperModule 在您的应用模块中：

import {MatStepperModule} from '@angular/material/stepper';

Reference。