erreur TS1086: un accesseur ne peut pas être déclaré dans un contexte ambiant dans Angular 9

25

J'apprends le matériau angulaire et j'obtiens cette erreur lors de l'importation de {MatButtonModule} à partir de "@ angular / material / button".

D'après ce que j'ai lu dans d'autres réponses, cela ressemble à des problèmes de compatibilité de package mais je n'ai pas pu le résoudre.

Voici l'erreur complète

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.

Voici mon package.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
la source

Réponses:

41

Selon votre package.json, vous utilisez Angular 8.3, mais vous avez importé angular / cdk v9. Vous pouvez rétrograder votre version angulaire / cdk ou vous pouvez mettre à niveau votre version angulaire vers la v9 en exécutant:

ng update @angular/core @angular/cli

Cela mettra à jour votre version angulaire locale à 9. Ensuite, juste pour synchroniser le matériel, exécutez: ng update @angular/material

Kyler Johnson
la source
Merci, j'ai rencontré ce problème lorsque j'ai installé angular flex qui a automatiquement installé la dernière version (la version 9 dans mon cas) mais je travaillais avec angular 8. La correction de la version a résolu le problème
A_J
@Kyler johnson comment puis-je downgred angular / cdk
mdkamrul
1
@mdkamrul vous pouvez rétrograder en exécutant npm i @angular/core@8 @angular/cli@8 @angular/material@8, en supposant que vous étiez sur la version 8. Parfois, votre package.json et package-lock.json seront désynchronisés et votre projet utilisera ce qui se trouve à l'intérieur du fichier package-lock.json. Alors maintenant, exécutez npm ipour les synchroniser. Si vous rencontrez toujours des problèmes après cela, exécutez npm cipour effectuer une installation complètement propre de vos dépendances
Kyler Johnson
J'ai dû utiliser ng update @angular/cli @angular/core --force, car les packages sont eux-mêmes incompatibles et vous ne pouvez pas changer autrement.
test du
0

Veuillez d'abord enregistrer dans le module.tsfichier que @NgModuletoutes les propriétés ne sont qu'une seule fois. Si certains sont plus d'une fois, cette erreur se produit également. Parce que j'avais également eu cette erreur mais module.tsque la entryComponentspropriété du fichier était deux fois, c'est pourquoi j'obtenais cette erreur. J'ai résolu cette erreur en supprimant une fois entryComponentsde @NgModule. Donc, je vous recommande d'abord de le vérifier correctement.

Rohit Tagadiya
la source