Unable to run angular material with angular 10

  angular, angular-material

I am using angular the latest version of angular which is angular 10 and unable to import any material component. As soon as i import angular material component it start giving error.

Step to reproduce issue:

ng new app

with angular cli 10.1.0

ng add @angular/material

On importing MatButton in App.ts the error is given below:

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

Source: Angular Material Quesions

One Reply to “Unable to run angular material with angular 10”

  • I have some similar error with MatSanckBar and the error was that I have to import MatSanckBarModule. Try to change your import in app.module.ts, actually you have:

    import { MatButton } from ‘@angular/material/button’;

    Change it with:

    import { MatButtonModule } from ‘@angular/material/button’;

    and:

    imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule
    ]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.