błąd TS1086: Akcesorium nie można zadeklarować w kontekście otoczenia w Angular 9

25

Uczę się Angular Material i otrzymuję ten błąd podczas importowania {MatButtonModule} z „@ angular / material / button”.

Z tego, co przeczytałem w innych odpowiedziach, wygląda to na problemy ze zgodnością pakietów, ale nie mogłem tego naprawić.

Oto pełny błąd

ERROR in node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts(29,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts(30,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts(128,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts(129,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts(134,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts(135,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@angular/cdk/a11y/key-manager/list-key-manager.d.ts(96,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@angular/cdk/a11y/key-manager/list-key-manager.d.ts(98,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@angular/cdk/a11y/live-announcer/live-announcer.d.ts(69,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@angular/cdk/a11y/live-announcer/live-announcer.d.ts(70,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@angular/cdk/observers/observe-content.d.ts(62,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@angular/cdk/observers/observe-content.d.ts(63,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@angular/cdk/observers/observe-content.d.ts(66,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@angular/cdk/observers/observe-content.d.ts(67,9): error TS1086: An accessor cannot be declared in an ambient context.

Oto mój pakiet.json

"name": "football",
  "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": "~8.2.14",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/material": "8.2.3",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.21",
    "@angular/cli": "~8.3.21",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}
angular angular-material Pablo Aguirre de Souza
źródło

Odpowiedzi:

40

Zgodnie z pakietem.json używasz Angulara 8.3, ale zaimportowałeś angular / cdk v9. Możesz obniżyć wersję Angular / CDK lub zaktualizować wersję Angular do wersji 9, uruchamiając:

ng update @angular/core @angular/cli

Spowoduje to zaktualizowanie lokalnej wersji kątowej do 9. Następnie, aby zsynchronizować materiał, uruchom: ng update @angular/material

Kyler Johnson
źródło
Dzięki, napotkałem ten problem, kiedy zainstalowałem angular flex, który automatycznie zainstalował najnowszą wersję (w moim przypadku wersja 9), ale pracowałem z
angular
@Kyler Johnson jak mogę obniżyć kątowe / cdk
mdkamrul
1
@mdkamrul można obniżyć, uruchamiając npm i @angular/core@8 @angular/cli@8 @angular/material@8, zakładając, że korzystasz z wersji 8. Czasami pakiet.json i pakiet-lock.json nie zsynchronizują się, a Twój projekt wykorzysta zawartość pliku pakiet-lock.json. Teraz uruchom npm ije , aby je zsynchronizować. Jeśli po tym nadal występują problemy, uruchom npm cicałkowicie czystą instalację swoich zależności
Kyler Johnson,
Musiałem użyć ng update @angular/cli @angular/core --force, ponieważ same pakiety są niekompatybilne i nie można inaczej zmienić.
testowanie
0

Najpierw sprawdź w module.tspliku, że we @NgModulewszystkich właściwościach jest tylko jeden raz. Jeśli którykolwiek z nich jest więcej niż jeden raz, pojawia się również ten błąd. Ponieważ również wystąpił ten błąd, ale we właściwościach module.tspliku entryComponentsbyły dwa razy, dlatego otrzymywałem ten błąd. Rozwiązałem ten błąd, usuwając jeden raz entryComponentsz @NgModule. Dlatego polecam najpierw sprawdzić to poprawnie.

Rohit Tagadiya
źródło