VS Code - Angular：对装饰器的实验性支持警告答案

【问题标题】：VS Code - Angular: Experimental support for decorators WarningVS Code - Angular：对装饰器的实验性支持警告
【发布时间】：2020-11-08 08:32:16
【问题描述】：

在 Angular (v10) 项目中创建一个空白文件 (sync.service.ts) 并添加以下代码：

import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class SyncService {

}

给出这个警告：

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.

我打开了一个随机文件（tag-cloud.component.ts）并添加了一个import语句：

import { SyncService } from '../../services/sync.service';

警告消失。但是警告消息根本不应该出现，因为：

@Injectable({
    providedIn: 'root'
})

请看下面的 gif。这是一个错误吗？

Version: 1.47.1
Commit: 485c41f9460bdb830c4da12c102daff275415b53
Date: 2020-07-14T00:13:57.513Z
Electron: 7.3.2
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Linux x64 5.4.0-40-generic

【问题讨论】：

您是否在 tsconfig 文件中添加了实验性装饰器？
不，我没有接触过 tsconfig 文件。
这应该是设定值："experimentalDecorators": true
刚刚检查，它设置为'true'。该项目是最近使用“ng new”创建的。
尝试重启 TypeScript 服务器：F1 -> TypeScript: Restart TS Server

标签： angular typescript visual-studio-code

【解决方案1】：

这是我在使用 WebStorm 时也遇到过的一种奇怪行为。我只能说，过了一会儿（无法告诉你是什么触发了 IDE 正确理解），警告消失了，一切都恢复正常了。

【讨论】：

有趣的是，其他 IDE 也给出了这个警告。所以它很可能与 VS Code 无关。没错，其他服务（类似于这个，但更早创建）没有这个问题。

【解决方案2】：

“问题”的出现是因为 Typescript 3.9 和 Angular 10 附带的 tsconfig 文件（解决方案样式 tsconfig）发生了变化。

https://docs.google.com/document/d/1eB6cGCG_2ircfS5GzpDC9dBgikeYYcMxghVH5sDESHw/edit#

Angular 10 中的解决方案样式 tsconfig 影响

在 TypeScript 3.9 中，解决方案样式 tsconfig 的概念是介绍，在 Angular 中，我们看到了修复长期悬而未决的问题，例如错误的测试类型在组件文件中。在 Angular CLI 版本 10 中，我们采用了脚手架新的和迁移的现有工作区以使用解决方案风格的 Typescript 配置。

当有一个未引用的文件时，它不会是任何文件的一部分 TypeScript 程序，这是因为 Angular CLI 脚手架 tsconfig 使用文件选项而不是包含和排除。

未引用的文件不继承编译器选项

当有一个未引用的文件时，它不会是任何 TypeScript 程序的一部分并且语言服务将回退以使用推断的项目配置。

在下面找到应用程序中需要更改的示例 tsconfig 文件 (tsconfig.app.json)。对其他 tsconfig 文件的更改也将需要。

当前 tsconfig.app.json
{
 "extends": "./tsconfig.base.json",
 "compilerOptions": {
   ...
 },
 "files": [
   "src/main.ts",
   "src/polyfills.ts"
 ],
 "include": [
   "src/**/*.d.ts"
 ]
}
提议的 tsconfig.app.json
{
 "extends": "./tsconfig.base.json",
 "compilerOptions": {
   ...
 },
 "include": [
   "src/**/*.ts"
 ],
 "exclude": [
   "src/test.ts",
   "src/**/*.spec.ts",
   "src/**/*.server*",
   "src/**/*.worker.ts"
 ]
}

【讨论】：