关于angular：TS1086：无法在环境上下文中声明访问器


TS1086: An accessor cannot be declared in ambient context

在初始实施后，我有成千上万个这样的错误，在终端输入 ng serve my-app of 后，我无法解决它。这是我第一次在typescript的angular遇到这样的问题
错误如下所示：

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.

1
2
3
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.

1
2
3
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.

1
2
3
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.

1
2
3
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.
[...]

有人知道原因吗？在修复之前我无法测试我的应用程序。

更新 1

好的，我让它前进。大多数错误都消失了，但我现在很少，例如第一个：

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' });

代码如下：

main.component.ts:

1
2
3
4
5
6
7
8
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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));
    }
}
相关讨论

在 tsconfig.json 中设置 "skipLibCheck": true 解决了我的问题

1
2
3
"compilerOptions": {
   "skipLibCheck": true
}
相关讨论

我遇到了同样的问题，这两个命令救了我的命。我的根本问题是我总是搞乱全局安装和本地安装。也许您也遇到了类似的问题，希望运行这些命令也能解决您的问题。

1
2
ng update --next @angular/cli --force
npm install typescript@latest
相关讨论

如果它只是一个导致这种情况的库，这将很好地避免这个问题。 Typescript 有时会让人头疼，因此请在 tsconfig.json 文件中设置此值。

1
2
3
"compilerOptions": {
   "skipLibCheck": true
}

现在使用

将 @angular/flex-layout 添加到我的 Angular 8 项目时遇到了同样的问题

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

从现在开始，该命令安装了 flex-layout 包的主要第 9 版。我没有将其他所有内容升级到最新版本，而是通过安装包的最后第 8 个主要版本来解决它。

1
 npm install @angular/[email protected] --save
相关讨论

快速解决方案：
更新 package.json

1
2
3
4
"devDependencies": {
   ...
  "typescript":"~3.7.4",
 }

在 tsconfig.json

1
2
3
4
5
6
7
{
    ...,
   "angularCompilerOptions": {
       ...,
      "disableTypeScriptVersionCheck": true
    }
}

然后删除 node_modules 文件夹并使用

重新安装

npm install

更多信息请访问这里

相关讨论

就我而言，两个库的版本不匹配。

我正在使用 Angular 7.0.0 并安装了

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

这导致了问题。将此库还原为

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

为我工作。

看起来你最近安装了 flex-layout 包。尝试从 node_modules 文件夹中删除此包文件夹并重新安装此包的先前版本。

最近(当前日期前 2 天)，angular 发布了最新的 angular-cli 版本(v9.0.1)，由于更新了许多软件包以支持这个最新的 cli 版本。在您的情况下，您可能有旧的 cli 版本，当您安装此软件包时，默认情况下会下载最新的 cli 版本。因此，请尝试降级您的软件包版本。至少为我工作。

另外，不要忘记在 package.json 文件中降级你的包版本

在我的情况下，降级 @angular/animations 是可行的，如果你能负担得起，运行命令

1
npm i @angular/[email protected]

或者在此处的"版本"选项卡中使用可能适合您的其他版本：
https://www.npmjs.com/package/@angular/animations

试试

1
ng update @angular/core @angular/cli

然后，为了同步素材，运行：

1
ng update @angular/material
相关讨论

对于那些在离子存储中遇到此类问题的人，请尝试使用：

1
npm i @ionic/[email protected]

当我在服务器开启时(运行 ng serve 命令后)删除了几个组件时，我遇到了这个错误。虽然我从路由组件和模块中删除了引用，但它并没有解决问题。然后我按照以下步骤操作：

  • 结束了服务器
  • 恢复了那些文件
  • 运行 ng serve 命令(此时它解决了错误)
  • 结束了服务器
  • 删除了以前导致错误的组件
  • 运行 ng serve 命令(此时也没有错误)。

    • 我已经更新了 typescript 和 tslint 版本并删除了我没有使用的软件包。这解决了我的问题。

    正如其他人在此处指出的那样，这似乎是不同 TypeScript 版本的问题，其中从某些库生成的类型与您的 TypeScript 版本不兼容。

    我正在做一个新项目，遇到了类似的问题。
    我刚刚跑了 ng update --all，我的问题就解决了。

    我认为您的问题是由typescript和模块版本不匹配引起的。这个问题与您的问题非常相似，答案非常令人满意。

    解决此问题的最佳方法是，只需删除 node_modules 和 package-lock.json 文件，然后使用 npm i 进一步安装 npm
    它解决了我的问题