【问题标题】:TS1086: An accessor cannot be declared in ambient contextTS1086:无法在环境上下文中声明访问器
【发布时间】:2026-01-30 10:10:01
【问题描述】:

在初始实施后,我有成千上万个这样的错误,在终端输入 ng serve my-app 后我无法解决它。这是我第一次在打字稿的角度遇到这样的问题 错误如下所示:

错误 ../../node_modules/@angular/flex-layout/core/typings/base/base2.d.ts:24:19 - 错误 TS1086:无法在环境上下文中声明访问器。

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

- 错误 TS1086:无法在环境上下文中声明访问器。

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

- 错误 TS1086:无法在环境上下文中声明访问器。

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

- 错误 TS1086:无法在环境上下文中声明访问器。

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

- 错误 TS1086:无法在环境上下文中声明访问器。 [...]

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

更新 1

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

src/app/main/main.component.ts:143:63 中的错误 - 错误 TS2322:类型 '字符串 | undefined' 不能分配给类型 'string'。类型 'undefined' 不能分配给类型 'string'。

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

代码如下:

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

【问题讨论】:

  • @Sam 我读了这篇文章,但没有任何帮助 - 很遗憾
  • 您使用的是@angular/flex-layout 的9.0.0-beta.28 版本吗?在他们撞到 TS 版本之前,我会尝试回滚到以前的版本。
  • @Sam 我将 package.json 更改为旧版本,但在删除 node_modules、package-lock.json 并再次安装所有内容后仍然存在同样的问题。
  • @Sam 现在是 8.0.0-beta.27

标签: angular typescript


【解决方案1】:

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

"compilerOptions": {
    "skipLibCheck": true
}

【讨论】:

  • 这也适用于我,我认为这对于 POC 或示例项目来说很好,但另一个线程通常讨论了这样做的潜在缺点:*.com/questions/52311779/…
  • 这对我来说很有效,经过多次尝试,我终于开始了我的 metronic 演示项目。谢谢!
  • 你在这里我的朋友是救世主
  • 最佳答案,对我来说效果很好..节省我的一天,谢谢
  • 不要使用这个选项。这可能有效,但在许多情况下它不是正确的解决方案。如果您使用的库版本不正确,通常会出现此问题。找出导致此问题的库并使用正确的版本。
【解决方案2】:

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

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

【讨论】:

  • 这对我有用。但我必须将我的打字稿版本降级到 3.6.x。 3.8.0 以上不工作并抛出错误。
  • 运行这些命令后,我需要从我的项目根目录运行 rm -rf node_modulesnpm install 以使事情正常工作。
【解决方案3】:

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

"compilerOptions": {
    "skipLibCheck": true
}

【讨论】:

    【解决方案4】:

    现在使用

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

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

     npm install @angular/flex-layout@8.0.0-beta.27 --save
    

    【讨论】:

    • 这是 Angular 9 项目的正确解决方案。非常感谢。
    • 这对我的 Angular 8 项目很有帮助
    【解决方案5】:

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

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

    在 tsconfig.json 中

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

    然后删除 node_modules 文件夹并重新安装

    npm 安装

    更多信息请访问here

    【讨论】:

    • 我在我的 Vue 项目中遇到了这个问题。将 typescript 单独升级到您指定的版本即可使其正常工作。谢谢。
    【解决方案6】:

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

    我正在使用 angular 7.0.0 并已安装

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

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

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

    为我工作。

    【讨论】:

      【解决方案7】:

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

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

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

      【讨论】:

        【解决方案8】:

        试试

        ng update @angular/core @angular/cli
        

        然后,为了同步素材,运行:

        ng update @angular/material
        

        【讨论】:

        • 我不确定这对于旧版本的 angular 是否安全
        【解决方案9】:

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

        npm i @angular/animations@6.1.10
        

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

        【讨论】:

          【解决方案10】:

          我认为您的问题是由打字稿和模块版本不匹配引起的。This issue 与您的问题非常相似,答案非常令人满意。

          【讨论】:

            【解决方案11】:

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

            【讨论】:

              【解决方案12】:

              我更新了typescripttslint 版本并删除了我没有使用的软件包。这解决了我的问题。

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

              【讨论】:

                【解决方案13】:

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

                1. 结束服务器
                2. 已恢复这些文件
                3. 运行 ng serve 命令(此时它解决了错误)
                4. 结束服务器
                5. 删除了之前导致错误的组件
                6. 运行 ng serve 命令(此时也没有错误)。

                【讨论】:

                  【解决方案14】:

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

                  npm i @ionic/storage@2.2.0
                  

                  【讨论】:

                    【解决方案15】:

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

                    【讨论】: