I have a error Angular material, run project

1
votes

I am starting with angular material, I have a test project but I have not been able to run it.

Due to the following error:

When issuing the ng s command the following error appears

ERROR in node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts(181,21): error TS2304: Cannot find name 'FocusOptions'. node_modules/@angular/material/button/typings/button.d.ts(32,44): error TS2304: Cannot find name 'FocusOptions'. node_modules/@angular/material/checkbox/typings/checkbox.d.ts(142,43): error TS2304: Cannot find name 'FocusOptions'. node_modules/@angular/material/chips/typings/chip-input.d.ts(66,21): error TS2304: Cannot find name 'FocusOptions'. node_modules/@angular/material/chips/typings/chip-list.d.ts(203,21): error TS2304: Cannot find name 'FocusOptions'. node_modules/@angular/material/chips/typings/chip-list.d.ts(205,27): error TS2304: Cannot find name 'FocusOptions'. node_modules/@angular/material/chips/typings/chip-text-control.d.ts(19,21): error TS2304: Cannot find name 'FocusOptions'. node_modules/@angular/material/expansion/typings/expansion-panel-header.d.ts(55,43): error TS2304: Cannot find name 'FocusOptions'. node_modules/@angular/material/input/typings/input.d.ts(108,21): error TS2304: Cannot find name 'FocusOptions'. node_modules/@angular/material/list/typings/selection-list.d.ts(138,21): error TS2304: Cannot find name 'FocusOptions'. node_modules/@angular/material/menu/typings/menu-item.d.ts(36,43): error TS2304: Cannot find name 'FocusOptions'. node_modules/@angular/material/menu/typings/menu-trigger.d.ts(103,43): error TS2304: Cannot find name 'FocusOptions'. node_modules/@angular/material/radio/typings/radio.d.ts(198,21): error TS2304: Cannot find name 'FocusOptions'. node_modules/@angular/material/select/typings/select.d.ts(334,21): error TS2304: Cannot find name 'FocusOptions'. node_modules/@angular/material/slide-toggle/typings/slide-toggle.d.ts(109,21): error TS2304: Cannot find name 'FocusOptions'. node_modules/@angular/material/slider/typings/slider.d.ts(87,21): error TS2304: Cannot find name 'FocusOptions'.

I have removed my node_modules, I have installed angular cli angular cdk I have removed and reinstalled it and nothing works, I have updated the dependencies and nothing.

Commands I have used

ng update @angular/cli @angular/core
npm install -g @angular/cli
npm uninstall -g @angular/cli
npm install -g @angular/cli @latest
npm install --save @angular/material @angular/cdk

None of this seems to work.

My versions according to the Package.json

{
  "name": "angular-material-lab",
  "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": "^6.1.0",
    "@angular/cdk": "^8.2.1",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^8.2.1",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "rxjs": "^6.5.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "~6.1.4",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

I need help I want to test a component of angular material

3
angular-material

3 Answers

2
votes

Had the same issue, solved it by updating package.json with the following angular material versions and running npm install.

"@angular/core": "^7.2.15",
"@angular/animations": "^7.2.15",
"@angular/material": "^7.3.3",
"@angular/cdk": "^7.3.7",

I got this solution from here. let me know if this works for you.

1
votes

The real issue what i had faced was the mismatch of the angular core version and angular material version once i changed it to same it worked like charm. The error probably comes from the fact that you have @angular/material set to 6.0.0, but all your other Angular packages are at 5.x. You should always make sure that the Material major version matches the major version of Angular.

i had to Open my package.json file

 "dependencies": {
    "@angular/core": "^6.1.0",
    "@angular/cdk": "^8.2.1",
    "@angular/material": "^8.2.1"    
  },

just change these to whatever the current version of the other angular components are.

 "dependencies": {
    "@angular/core": "^6.1.0",
    "@angular/cdk": "^6.1.0",
    "@angular/material": "^6.1.0"    
  },
0
votes

Try using the commands below:

npm install @angular/[email protected]
npm install @angular/[email protected]
npm install @angular/[email protected]

solve my issue for angular 6