[angular] TS1086: An accessor cannot be declared in ambient context

I have a thousands of this error after initial implementation nad typing in terminal ng serve my-app of and i can't resolve it. This is first time for me when i have problem like this inside angular with typescript Errors looks like this:

ERROR in ../../node_modules/@angular/flex-layout/core/typings/base/base2.d.ts:24:19 - error TS1086: An accessor cannot be declared in an ambient context.

24     protected get parentElement(): HTMLElement | null;
                     ~~~~~~~~~~~~~
../../node_modules/@angular/flex-layout/core/typings/base/base2.d.ts:26:19

- error TS1086: An accessor cannot be declared in an ambient context.

26     protected get nativeElement(): HTMLElement;
                     ~~~~~~~~~~~~~
../../node_modules/@angular/flex-layout/core/typings/base/base2.d.ts:28:9

- error TS1086: An accessor cannot be declared in an ambient context.

28     get activatedValue(): string;
           ~~~~~~~~~~~~~~
../../node_modules/@angular/flex-layout/core/typings/base/base2.d.ts:29:9

- error TS1086: An accessor cannot be declared in an ambient context.

29     set activatedValue(value: string);
           ~~~~~~~~~~~~~~
../../node_modules/@angular/flex-layout/core/typings/breakpoints/break-point-registry.d.ts:20:9

- error TS1086: An accessor cannot be declared in an ambient context. [...]

Does somebody know a reason? I can't test my app until I fix it.

Update 1

Okay, i make it forward. Most of errors is gone, but i have few ones now, for example first of them:

ERROR in src/app/main/main.component.ts:143:63 - error TS2322: Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.

143 this.fileService.add({ isFolder: true, name: folder.name, parent: this.currentRoot ? this.currentRoot.id : 'root' });

Code looks like this:

main.component.ts:

currentRoot: MpFileElement = new MpFileElement();
...
    addFolder(folder: { name: string }) {
        this.fileService.add({ isFolder: true, name: folder.name, parent: 
    this.currentRoot ? this.currentRoot.id : 'root' });
        this.updateFileElementQuery();
    }
...

file.service.ts:

import { Injectable } from '@angular/core';

import { v4 } from 'uuid';
import { MpFileElement } from '../models/mp-file-element.model';
import { Observable } from 'rxjs/internal/Observable';
import { BehaviorSubject } from 'rxjs';

export interface IFileService {
    add(fileElement: MpFileElement);
    delete(id: string);
    update(id: string, update: Partial<MpFileElement>);
    queryInFolder(folderId: string): Observable<MpFileElement[]>;
    get(id: string): MpFileElement;
}

@Injectable()
export class MpFileService implements IFileService {

    constructor() {}
    private map = new Map<string, MpFileElement>()

    private querySubject: BehaviorSubject<MpFileElement[]>;

    add(fileElement: MpFileElement) {
        fileElement.id = v4();
        this.map.set(fileElement.id, this.clone(fileElement));
        return fileElement;
    }

    delete(id: string) {
        this.map.delete(id);
    }

    update(id: string, update: Partial<MpFileElement>) {
        let element = this.map.get(id);
        element = Object.assign(element, update);
        this.map.set(element.id, element);
    }
    queryInFolder(folderId: string) {
        const result: MpFileElement[] = [];
        this.map.forEach(element => {
            if (element.parent === folderId) {
                result.push(this.clone(element));
            }
        })
        if (!this.querySubject) {
            this.querySubject = new BehaviorSubject(result);
        } else {
            this.querySubject.next(result);
        }
        return this.querySubject.asObservable();
    }

    get(id: string) {
        return this.map.get(id);
    }

    clone(element: MpFileElement) {
        return JSON.parse(JSON.stringify(element));
    }
}

I think that your problem was emerged from typescript and module version mismatch.This issue is very similar to your question and answers are very satisfying.

I got the same issue when adding @angular/flex-layout to my Angular 8 project now with

`npm install @angular/flex-layout --save`.

This since now that command installed the major 9th version of the flex-layout package. Instead of upgrading everything else to the last version, I solved it by installing the last 8th major version of the package instead.

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

I was working on a fresh project and got the similar type of problem. I just ran ng update --all and my problem was solved.

try

ng update @angular/core @angular/cli

Then, just to sync material, run:

ng update @angular/material

Setting "skipLibCheck": true in tsconfig.json solved my problem

"compilerOptions": {
    "skipLibCheck": true
}

Quick solution: Update package.json

"devDependencies": {
   ...
   "typescript": "~3.7.4",
 }

In tsconfig.json

{
    ...,
    "angularCompilerOptions": {
       ...,
       "disableTypeScriptVersionCheck": true
    }
}

then remove node_modules folder and reinstall with

npm install

For more visit here

I had this error when i deleted several components while the server was on(after running the ng serve command). Although i deleted the references from the routes component and module, it didnt solve the problem. Then i followed these steps:

1. Ended the server
2. Restored those files
3. Ran the ng serve command (at this point it solved the error)
4. Ended the server
5. Deleted the components which previously led to the error
6. Ran the ng serve command (At this point no error as well).

In my case downgrading @angular/animations worked, if you can afford to do that, run the command

npm i @angular/[email protected]

Or use another version that might work for you from the Versions tab here: https://www.npmjs.com/package/@angular/animations

The best way to overcome on this issue is that, just remove node_modules and package-lock.json file and further install npm with npm i it solved my problem

In my case, mismatch of version of two libraries.

I am using angular 7.0.0 and installed

"@swimlane/ngx-dnd": "^8.0.0"

and this caused the problem. Reverting this library to

"@swimlane/ngx-dnd": "6.0.0"

worked for me.

I've updated typescript and tslint versions and removed packages I wasn't using. This solved the problem for me.

As others pointed here, it seems to be an issue with different TypeScript versions where the generated typings from some library aren't compatible with your TypeScript version.

Looks like you have recently installed flex-layout package. Try removing this package folder from your node_modules folder and reinstalling previous version of this package.

Recently (2 days before current date), angular released latest angular-cli version (v9.0.1) due to which many packages are updated to support this latest cli version. In your case you might have old cli version and when you installed this package it was downloaded for latest cli version by default. So try downgrading your package version. Worked for me atleast.

Also, dont forget to downgrade the version of your package in package.json file

I had this same issue, and these 2 commands saved my life. My underlying problem is that I am always messing up with global install and local install. Maybe you are facing a similar issue, and hopefully running these commands will solve your problem too.

ng update --next @angular/cli --force
npm install typescript@latest

If it's just a library that's causing this, this will avoid the problem just fine. Typescript can be a pain on the neck sometimes so set this value on your tsconfig.json file.

"compilerOptions": {
    "skipLibCheck": true
}