No se puede ejecutar material angular con angular 10

Question

Estoy usando angular la última versión de angular que es angular 10 y no puedo importar ningún componente de material. Tan pronto como importo el componente de material angular, comienza a dar un error.

Paso para reproducir el problema:

ng new app

con angular cli 10.1.0

ng add @angular/material

Al importar MatButton en App.ts, el error se muestra a continuación:

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 { 

Package.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"
  }
}

App.ts

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

La solución está en el mensaje de error (el énfasis es mío):

ERROR en node_modules/@angular/material/button/button.d.ts: 22: 22 - error NG6002: Aparece en NgModule.imports de AppModule, pero no se pudo resolver en una clase NgModule .

Necesitas importar el módulo. Cambie su importación ( import { MatButton } from '@angular/material/button';) a lo siguiente:

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