Erro TS1086: Um acessador não pode ser declarado em um contexto ambiental no Angular 9

25

Estou aprendendo material angular e estou recebendo esse erro ao importar {MatButtonModule} de "@ angular / material / button".

Pelo que li em outras respostas, parece haver problemas de compatibilidade de pacotes, mas não foi possível corrigi-lo.

Aqui está o erro completo

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.

Aqui está o meu 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"
  }
}
Pablo Aguirre de Souza
fonte

Respostas:

41

De acordo com o package.json, você está usando o Angular 8.3, mas importou o angular / cdk v9. Você pode fazer o downgrade de sua versão angular / cdk ou atualizar sua versão angular para a v9 executando:

ng update @angular/core @angular/cli

Isso atualizará sua versão angular local para 9. Em seguida, apenas para sincronizar o material, execute: ng update @angular/material

Kyler Johnson
fonte
Obrigado, eu encontrei esse problema ao instalar o angular flex, que instalou automaticamente a versão mais recente (versão 9 no meu caso), mas eu estava trabalhando com o angular 8. A correção da versão resolveu o problema
A_J
@Kyler johnson como posso fazer downgred angular / cdk
mdkamrul 24/02
11
@mdkamrul você pode fazer o downgrade executando npm i @angular/core@8 @angular/cli@8 @angular/material@8, assumindo que você estava na versão 8. Às vezes, seu package.json e package-lock.json ficam fora de sincronia e seu projeto usa o que está dentro do arquivo package-lock.json. Então agora, corra npm ipara sincronizá-los. Se você ainda tiver problemas depois disso, execute npm ciuma instalação completamente limpa de suas dependências.
Kyler Johnson 25/02
Eu tive que usar ng update @angular/cli @angular/core --force, porque os pacotes são incompatíveis e você não pode mudar de outra maneira.
teste em
0

Primeiro, verifique no module.tsarquivo que @NgModuletodas as propriedades são apenas uma vez. Se algum deles for mais de uma vez, também vem esse erro. Porque eu também tinha ocorrido esse erro, mas na propriedade do module.tsarquivo entryComponentsforam duas vezes, é por isso que eu estava recebendo esse erro. Resolvi esse erro removendo uma vez entryComponentsde @NgModule. Portanto, recomendo que você verifique corretamente.

Rohit Tagadiya
fonte