VS Code - Angular: Experimental support for decorators Warning

Issue

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

Solution

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"
 ]
}

Answered By - Wolf359