升级到 Angular 10 后 VS 代码编辑器中的装饰器错误

Question

Error: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.

在具有相同项目的 Angular 9 中没有这样的错误。

Angular10 现在添加了 tsconfig.base.json 文件。

tsconfig.json 文件更新为：

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ]
}

tsconfig.app.json：

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

tsconfig.base.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
  }
}

我注意到tsconfig.jsonAngular 9中的内容已移至tsconfig.base.jsonAngular 10 中。

Answer 1

我在刚刚安装了 Angular 10 的 VSCode 中遇到了同样的问题，我检查了并且已经添加了实验性装饰器，但是，我还是收到了那个烦人的警告和波浪线，所以我所做的，我只是看到 vscode 正在使用旧版本的打字稿所以，我点击了 vscode 的右下角，它显示了 3.8.3 版，然后我将其更改为安装了 angular 的最新版本，我的问题得到了解决。

让我知道它是否有帮助并解决了您的问题。

谢谢你

Answer 2

TLDR

将您的装饰类导入到其他一些文件中，该文件已包含在从src/main.ts文件开始的 TypeScript 编译上下文中。

解释

Angular 10 使用 TypeScript 3.9，它对文件使用“解决方案样式” tsconfig.json。这个 tsconfig.json 文件被编辑器和 TypeScript 的语言服务器使用。现在这个文件可以包含对其他 tsconfig 文件的多个引用，例如tsconfig.app.json和tsconfig.spec.json.

里面我们有那些CONFIGSfiles和include选项，如定义：

"files": [
  "src/main.ts",
  "src/polyfills.ts"
],
"include": [
  "src/**/*.d.ts"
]

这两个选项定义了 TypeScript 编译上下文。现在 TypeScript 将编译这些文件以及任何引用的文件，这些文件已经包含在编译文件中。你的编辑器也遵循这个规则。

如果您创建了一些文件并使用装饰器定义了一些类，但没有在编译文件中包含的任何文件中导入它，那么您将收到错误。

对装饰器的实验性支持是一项在未来版本中可能会更改的功能。在您的 'tsconfig' 或 'jsconfig' 中设置 'experimentalDecorators' 选项以删除此警告。

原因是对于该特定文件，TypeScript 没有看到experimentalDecorators选项。

这里的解决方案是：您应该在包含在编译上下文中的其他类中导入您的类。

在 Angular 10 之前，我们有以下内容tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    ...
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
  }
}

我们在这里没有看到任何files或include部分，这意味着

如果 tsconfig.json 中不存在 'files' 或 'include' 属性，则编译器默认包含包含目录和子目录中的所有文件，但由 'exclude' 指定的文件除外。

这就是您在 Angular 9 中没有看到该错误的原因。新创建的文件立即包含在编译上下文中。

Answer 3

如果您从错误的目录打开 vs 代码，通常会发生这种情况。（例如，从应用程序文件夹而不是根目录打开 VScode）。

如果不是目录问题，请重新启动 Vs 代码。

如果您仍然看到相同的问题，请执行以下操作：

• 转到文件 => 首选项 => 设置（或 Control+逗号），它将打开用户设置文件。搜索“javascript.implicitProjectConfig.experimentalDecorators”，然后选中experimentalDecorators的复选框

或者，

• 在 VScode settings.json 中添加以下内容

"javascript.implicitProjectConfig.experimentalDecorators": true