Incapaz de executar material angular com ângulo 10

Question

Estou usando a última versão do angular angular, que é angular 10 e não é possível importar nenhum componente de material. Assim que eu importo o componente de material angular, ele começa a dar erro.

Etapa para reproduzir o problema:

ng new app

com cli angular 10.1.0

ng add @angular/material

Ao importar MatButton em App.ts, o erro é fornecido abaixo:

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

A solução está na mensagem de erro (grifo meu):

ERROR in node_modules/@angular/material/button/button.d.ts: 22: 22 - erro NG6002: Aparece no NgModule.imports de AppModule, mas não pôde ser resolvido para uma classe NgModule .

Você precisa importar o módulo. Altere sua importação ( import { MatButton } from '@angular/material/button';) para o seguinte:

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