110

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));
    }
}
6
  • 1
    I would read this - github.com/microsoft/TypeScript/issues/33939.
    – Sam
    Feb 6, 2020 at 10:39
  • 1
    Are you using version 9.0.0-beta.28 of @angular/flex-layout? I would try rolling back to previous version before they bumped the TS version.
    – Sam
    Feb 6, 2020 at 10:49
  • @Sam i changed in package.json to older version and stil have same issue after deleting node_modules, package-lock.json and installing everything again.
    – xavn-mpt
    Feb 6, 2020 at 11:38
  • @Sam at this moment it 8.0.0-beta.27
    – xavn-mpt
    Feb 6, 2020 at 11:46
  • What version of typescript do you have in your project?
    – Sam
    Feb 6, 2020 at 11:54

16 Answers 16

304

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

"compilerOptions": {
    "skipLibCheck": true
}
2
  • 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: stackoverflow.com/questions/52311779/…
    – ewomack
    Apr 13, 2020 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, 2021 at 9: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
2
  • 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. Mar 2, 2020 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. May 9, 2020 at 7:41
27

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
}
1
  • 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 1, 2022 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/[email protected] --save
2
  • this is the right solution for angular 9 projects. Thanks a lot .
    – Florin
    Nov 26, 2020 at 19:04
  • This helped me for my Angular 8 Project
    – Pranjal
    Dec 30, 2020 at 14:52
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

1
  • 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, 2021 at 13:13
5

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.

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
1
  • 1
    I'm not sure if this is a safe practice for older versions of angular Sep 12, 2020 at 7:51
2

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

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.

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.

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.

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).
0

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

npm i @ionic/[email protected]
0

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

"compilerOptions": { "skipLibCheck": true }

This issue I faced on migration from 6 to 7 transition of angular update tsconfig.json with skipLibCheck

-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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.