107

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));
    }
}
xavn-mpt
  • 1,125
  • 2
  • 6
  • 11

15 Answers15

301

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

"compilerOptions": {
    "skipLibCheck": true
}
David Buck
  • 3,752
  • 35
  • 31
  • 35
VRK
  • 3,047
  • 1
  • 7
  • 4
  • 4
    This also worked for me and I think it's fine for a POC or a sample project, but another thread discusses the potential downsides of doing this in general: https://stackoverflow.com/questions/52311779/usage-of-the-typescript-compiler-argument-skiplibcheck – ewomack Apr 13 '20 at 20:22
  • 5
    Don't use this option. This might work but it's not a correct solution in many cases. This issue generally appears if you're using incorrect version of a library. Find out the library which is causing this issue and use it's proper version. – Krishna Aug 26 '21 at 09:28
30

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
Leon Grin
  • 889
  • 8
  • 10
  • 2
    this Works for me. but i have to downgrade my typescript version to 3.6.x. above 3.8.0 not working and throws error. – Hardik Patel Mar 02 '20 at 12:20
  • I needed to run `rm -rf node_modules` and `npm install` from my root project directory to get things to work correclty after running these commands. – Danny Bullis May 09 '20 at 07:41
26

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
}
Ziku
  • 431
  • 6
  • 9
  • 1
    i had been trying to figure out the incompatibilities of various versions of ionic angular, this saved by day `"@ionic/angular": "^4.11.10", "@angular/core": "~8.1.2",` – AsitK Mar 01 '22 at 16:15
20

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/flex-layout@8.0.0-beta.27 --save
Atle
  • 446
  • 6
  • 18
7

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

Daniel R.
  • 79
  • 1
  • 3
  • 1
    I had this issue in my Vue project. Upgrading typescript alone to the version you specified got it to work. Thanks. – Craig Jan 15 '21 at 13:13
4

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.

Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
3

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

2

try

ng update @angular/core @angular/cli

Then, just to sync material, run:

ng update @angular/material
Mohammed Raja
  • 207
  • 2
  • 9
2

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

npm i @angular/animations@6.1.10

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

Claudio Teles
  • 218
  • 3
  • 9
0

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.

Community
  • 1
  • 1
whitefang
  • 973
  • 8
  • 15
0

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.

Mohammad Anas
  • 320
  • 3
  • 6
0

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.

Machado
  • 8,965
  • 6
  • 43
  • 46
0

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).
Buchi
  • 368
  • 1
  • 4
  • 16
0

For those encountering such issue in ionic storage, try using:

npm i @ionic/storage@2.2.0
Ayoub EL ABOUSSI
  • 636
  • 6
  • 13
-2

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