CODEWITHSUNDEEP
angulartypescriptvisual-studio-code
Wolf359
Wolf359

Reputation: 2725

VS Code - Angular: Experimental support for decorators Warning

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?

enter image description here

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

Upvotes: 2

Views: 1999

Answers (3)

Trevortni
Trevortni

Reputation: 738

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).

Upvotes: 0

Wolf359
Wolf359

Reputation: 2725

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

Upvotes: 2

Will Alexander
Will Alexander

Reputation: 3571

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.

Upvotes: 1

Related Questions