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"
}
}
Import the material module In app. module. ts , an import statement to the material module created in the last step. Add MaterialModule to the imports array of the AppModule to import it into the app.
Open command prompt and go to project root folder. Angular CLI will ask certain question regarding theme, gesture recognition and browser animations. Select your any theme of your choice and then answer positively for gesture recognition and browser animation. Run the application and test the page.
Angular Material Version 5.2.2 This is the last version of material that we can see on the angular material official website, you can start using this one if you want to. It has come up with a very basic component.
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/[email protected]
npm install @angular/[email protected]
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/[email protected] npm install @angular/[email protected]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With