error TS1086: An accessor cannot be declared in an ambient context in Angular 9

Question

I'm learning Angular Material and I'm getting this error when importing { MatButtonModule } from "@angular/material/button".

From what I read in other answers, it looks like package compatibility issues but I couldn't fix it.

Here's the full error

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.

Here's my 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"
  }
}

score 74 · Answer 1 · answered Jul 06 '20 at 16:47

74

Adding skipLibCheck: true in compilerOptions inside tsconfig.json file fixed my issue.

"compilerOptions": {
   "skipLibCheck": true,
},

answered Jul 06 '20 at 16:47

R15

13,982
14
97
173

4

But, will skipping lib check not cause other problems in future? – Pinka Sep 17 '20 at 00:43
1

thanks @R15 it worked for me and I am using angular 8 – TAHA SULTAN TEMURI Oct 13 '20 at 11:52
1

You absolute legend. This works a treat. I was worried about using the other fix of updating typescript, in case, my version of Angular is incompatible... – Charles Robertson Apr 06 '21 at 11:53
1

It works like hell... Thanks a lot for saving my time – Aravindh Sivalingam May 18 '21 at 13:03

score 69 · Accepted Answer · answered Feb 08 '20 at 22:34

69

According to your package.json, you're using Angular 8.3, but you've imported angular/cdk v9. You can downgrade your angular/cdk version or you can upgrade your Angular version to v9 by running:

ng update @angular/core @angular/cli

That will update your local angular version to 9. Then, just to sync material, run: ng update @angular/material

answered Feb 08 '20 at 22:34

Kyler Johnson

1,939
16
14

2

Thanks, I encountered this issue when I installed angular flex which automatically installed the latest version (version 9 in my case) but I was working with angular 8. Correcting the version solved the issue – A_J Feb 10 '20 at 06:43
@Kyler johnson how can i downgred angular/cdk – mdkamrul Feb 24 '20 at 06:13
2

@mdkamrul you can downgrade by running `npm i @angular/core@8 @angular/cli@8 @angular/material@8`, assuming you were on version 8. Sometimes your package.json and package-lock.json will get out of sync and your project will use what's inside of the package-lock.json file. So now, run `npm i` to sync them up. If you still run into problems after that, run `npm ci` to do a completely clean install of your dependencies – Kyler Johnson Feb 25 '20 at 10:51
I had to use `ng update @angular/cli @angular/core --force`, because the packages are itself incompatible und you can't switch otherwise. – testing Mar 09 '20 at 15:35

score 3 · Answer 3 · answered Jul 30 '20 at 06:01

These issue arise generally due to mismatch between @ngx-translate/core version and Angular .Before installing check compatible version of corresponding ngx_trnalsate/Core, @ngx-translate/http-loader and Angular at https://www.npmjs.com/package/@ngx-translate/core

Eg: For Angular 6.X versions,

npm install @ngx-translate/core@10 @ngx-translate/http-loader@3 rxjs --save

Like as above, follow below command and rest of code part is common for all versions(Note: Version can obtain from( https://www.npmjs.com/package/@ngx-translate/core)

npm install @ngx-translate/core@version @ngx-translate/http-loader@version rxjs --save

score 1 · Answer 4 · answered Feb 04 '22 at 04:12

1

npm i @ionic/storage@2.2.0

this is install to degrade your storage package

answered Feb 04 '22 at 04:12

sumith deepan

45
3

After days of updating all items to newest parts, system stay incompatible for firestore and this was the solution to stay on old version on all dependent modules and downdate storage to 2.2. – Nasenbaer Apr 10 '22 at 18:58
Yes , that is correct @Nasenbaer – sumith deepan Apr 12 '22 at 06:22

score 1 · Answer 5 · answered Feb 14 '23 at 08:29

1

Faced a similar issue, had to downgrade my package version with respect to the version of my angular project version

answered Feb 14 '23 at 08:29

Abhith Anto

99
1
4

score 0 · Answer 6 · answered Mar 14 '20 at 17:44

First please check in module.ts file that in @NgModule all properties are only one time. If any of are more than one time then also this error come. Because I had also occur this error but in module.ts file entryComponents property were two time that's why I was getting this error. I resolved this error by removing one time entryComponents from @NgModule. So, I recommend that first you check it properly.

score 0 · Answer 7 · answered Aug 04 '20 at 07:39

0

I had this problem but didn't have a version conflict in my package.json.

My package-lock.json was somehow out of sync with package json though. Deleting and regenerating it worked for me.

answered Aug 04 '20 at 07:39

Duathdaert

31
1

score 0 · Answer 8 · answered Dec 22 '20 at 10:43

I solved the same issue by following steps:

Check the angular version: Using command: ng version My angular version is: Angular CLI: 7.3.10

After that I have support version of ngx bootstrap from the link: https://www.npmjs.com/package/ngx-bootstrap

In package.json file update the version: "bootstrap": "^4.5.3", "@ng-bootstrap/ng-bootstrap": "^4.2.2",

Now after updating package.json, use the command npm update

After this use command ng serve and my error got resolved

error TS1086: An accessor cannot be declared in an ambient context in Angular 9

8 Answers8

Linked