VS 代码 - Angular：对装饰器的实验性支持警告

Question

In an Angular (v10) project creating a blank file (sync.service.ts) and adding this code:

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

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

}

gives this warning:

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.

I opened a random file (tag-cloud.component.ts) and added an import statement:

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

The warning goes away. But the warning message shouldn't appear at all because of:

@Injectable({
    providedIn: 'root'
})

Please see the gif below. Is this a bug?

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

Answer 1

This is a bizarre behaviour I have also come across with WebStorm. All I can say is that after a while (couldn't tell you what triggers the IDE to understand properly), the warning disappears and everything goes back to normal.

Answer 2

The 'problem' arises because of the change in tsconfig files (solutions style tsconfig) that comes with Typescript 3.9 and Angular 10.

More info here:

https://github.com/microsoft/TypeScript/issues/39632

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

Solution style tsconfig impact in Angular 10

In TypeScript 3.9, the concept of solutions style tsconfig was introduced, in Angular we saw the potentiation and possibility of fixing long outstanding issues such as incorrectly having test typings in components files. In Angular CLI version 10 we adopted scaffolded new and migrated existing workspaces to use solution-style Typescript configuration.

When having an unreferenced file, this will not be part of any TypeScript program, this is because Angular CLI scaffolds tsconfig using the files option as opposed to include and exclude.

1. Unreferenced files don't inherit compiler options

   When having an unreferenced file, this will not be part of any TypeScript program and Language service will fallback to use the inferred project configuration.

   Below find an example of changes that will be required in the application tsconfig file (tsconfig.app.json). Changes to other tsconfig files will also be needed.

Current tsconfig.app.json

 { "extends": "./tsconfig.base.json", "compilerOptions": {... }, "files": [ "src/main.ts", "src/polyfills.ts" ], "include": [ "src/**/*.d.ts" ] }

Proposed tsconfig.app.json

 { "extends": "./tsconfig.base.json", "compilerOptions": {... }, "include": [ "src/**/*.ts" ], "exclude": [ "src/test.ts", "src/**/*.spec.ts", "src/**/*.server*", "src/**/*.worker.ts" ] }

Answer 3

A comment at the end of the first post in @Wolf359's answer led me to a simple workaround, in the event that your issue is cause by the tsconfig.json being split into tsconfig.base.json and tsconfig.app.json : add a tsconfig.json consisting solely of { "extends": "./tsconfig.base.json" } (I have commented likewise on his link as well).