cannot import MatDialogModule in app.module

Question

I am a beginner in angular, I am using angular material dialog box. first I added material to my project and use it from @angular/material .

When I add ( import { MatDialogModule } from '@angular/material/dialog'; )) in app.module.ts , get below error on compiling project

 ERROR in node_modules/@angular/cdk/coercion/array.d.ts(10,60): error
 TS1005: ',' expected.
 node_modules/@angular/cdk/coercion/array.d.ts(10,61): error TS1005:
 ',' expected. node_modules/@angular/cdk/coercion/array.d.ts(10,75):
 error TS1144: '{' or ';' expected.
 node_modules/@angular/cdk/coercion/array.d.ts(10,77): error TS1011: An
 element access expression should take an argument.

why?

this is my package.json:

      {
      "name": "sales-maret",
      "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": "^7.2.16",
        "@angular/cdk": "^9.2.0",
        "@angular/common": "~7.2.0",
        "@angular/compiler": "~7.2.0",
        "@angular/core": "~7.2.0",
        "@angular/forms": "~7.2.0",
        "@angular/material": "^9.2.0",
        "@angular/platform-browser": "~7.2.0",
        "@angular/platform-browser-dynamic": "~7.2.0",
        "@angular/router": "~7.2.0",
        "core-js": "^2.5.4",
        "hammerjs": "^2.0.8",
        "material-icons": "^0.3.1",
        "rxjs": "~6.3.3",
        "tslib": "^1.9.0",
        "zone.js": "~0.8.26"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "~0.13.0",
        "@angular/cli": "~7.3.6",
        "@angular/compiler-cli": "~7.2.0",
        "@angular/language-service": "~7.2.0",
        "@types/node": "~8.9.4",
        "@types/jasmine": "~2.8.8",
        "@types/jasminewd2": "~2.0.3",
        "codelyzer": "~4.5.0",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~4.0.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~1.1.2",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.4.0",
        "ts-node": "~7.0.0",
        "tslint": "~5.11.0",
        "typescript": "~3.2.2"
      }
    }

Answer 1

The error is because of the mismatch among the version numbers of @angular/material, @angular/cdk and @angular/core packages. Packages @angular/material and @angular/cdk have the version 9.2.0 but @angular/core has the version 7.2.0 .

To function properly, the three packages should have the same version.

You should uninstall the @angular/material and @angular/cdk packages and then install older versions.

npm uninstall @angular/material
npm uninstall @angular/cdk
npm install @angular/material@7.2.0
npm install @angular/cdk@7.2.0

Answer 2

This worked for me

I got error before correction

ERROR in node_modules/@angular/cdk/coercion/array.d.ts(10,60): error TS1005: ',' expected. node_modules/@angular/cdk/coercion/array.d.ts(10,61): error TS1005: ',' expected. node_modules/@angular/cdk/coercion/array.d.ts(10,75): error TS1144: '{' or ';' expected. node_modules/@angular/cdk/coercion/array.d.ts(10,77): error TS1011: An element access expression should take an argument.

I had different verstions of material(9.x), core(7x.x) and cdk(9.x).

I ran in the project folder and verified package.json all have same version 7.x after below commands and worked well npm uninstall @angular/material npm uninstall @angular/cdk npm install @angular/material@7.2.0 npm install @angular/cdk@7.2.0

Answer 3

I believe this issue should be resolved when you re-install ng (Angular)

Reference to re-install:

Open Terminal

sudo npm uninstall -g angular-cli
sudo npm cache clean

(remember sudo means doing a global change for your entire machine - recommended for this process)

To ensure your command has run successfully, validate using:

ng -v

If it still doesn't get installed follow below step:

It will show the ng path. Go to the path and if it is linked with any file remove the same the link and actual ng file. In my case the link is in /usr/bin/ng and actual path of ng file is /lib/node_modules/@angular/cli/bin/ng .

sudo rm -rf /lib/node_modules/@angular/cli/bin/ng
sudo rm -rf /usr/bin/ng

This should remove the desired npm and ng (Angular).

To reinstall ng, run:

sudo npm install -g @angular/cli

Let me know if this works, else you got to reinstall npm and then follow above steps. Hope the first try works ;)

Answer 4

Change

"@angular/cdk": "^9.2.0",
"@angular/material": "^9.2.0",

to

"@angular/cdk": "^7.2.0",
"@angular/material": "^7.2.0",

Answer 5

For me as well it was helpful to run sudo npm install @angular/material@14.0.0 as my version of @angular/core was 14.0.0. After that I could import MatDialogModule.