無法運行角度為 10 的有角度的材料

Question

我正在使用 angular 最新版本的 angular ，它是 angular 10 並且無法導入任何材料組件。 一旦我導入角度材料組件，它就會開始出錯。

重現問題的步驟：

ng new app

帶角度的 cli 10.1.0

ng add @angular/material

在 App.ts 中導入 MatButton 時，錯誤如下：

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

This likely means that the library (@angular/material/button) which declares Mat
Button has not been processed correctly by ngcc, or is not compatible with Angul
ar 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 expec
ted to be compatible with Ivy.

22 export declare class MatButton extends _MatButtonMixinBase implements AfterVi
ewInit, OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption { 

包.json

{
  "name": "c-m-t",
  "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.1.0",
    "@angular/cdk": "^10.2.0",
    "@angular/common": "~10.1.0",
    "@angular/compiler": "~10.1.0",
    "@angular/core": "~10.1.0",
    "@angular/forms": "~10.1.0",
    "@angular/material": "^10.2.0",
    "@angular/platform-browser": "~10.1.0",
    "@angular/platform-browser-dynamic": "~10.1.0",
    "@angular/router": "~10.1.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1001.0",
    "@angular/cli": "~10.1.0",
    "@angular/compiler-cli": "~10.1.0",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "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"
  }
}

應用程序

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButton } from '@angular/material/button';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButton
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

解決方案在錯誤消息中（強調我的）：

node_modules/@angular/material/button/button.d.ts:22:22 中的錯誤 - 錯誤 NG6002：出現在 AppModule 的 NgModule.imports 中，但無法解析為 NgModule 類。

您需要導入模塊。 將您的導入（ import { MatButton } from '@angular/material/button'; ）更改為以下內容：

import { MatButtonModule } from '@angular/material/button';
//...
  imports: [
    //...
    MatButtonModule
  ],