Articles

Angular 10 New, spurious typescript warnings in latest version

Apps
5
min read
Facing TS1219 error in Angular 10? It's an IDE glitch due to new file import rules. Read on to find out more.
Will Yoxall
CEO & Founder
Published
August 17, 2021

Angular 10 - "TS1219: Experimental support for decorators” warning

Explaining and resolving a spurious typepscript error which occurs in Angular 10 when creating new services and components. “TS1219: Experimental support for decorators” warning occurs using Angular 10.

Having just created my first new Angular 10 project (Angular 10 was released on 24 June 2020), I came across an odd behavior in my IDE (IntelliJ) that confused me for a little while.

The symptom is that some services and components are displayed with a TS1219 error against the class name, telling me to set the ‘experimentalDecorators’ option in the tsconfig file.

Image showing computer code

But this service is exactly the same as other services that don’t have any errors. And if you look in the tsconfig the experimentalDecorators is indeed set to true. So what gives?

After a bit of digging I found that the typescript window (see View / Tool Windows) is showing this little, innocuous informational message: “File is not included in any tsconfig.json”.

Image showing computer code errors

The answer is that, as of Angular 10, files are only included as far as the IDE is concerned that are imported somewhere via the root file, main.ts. If you create a new service then it isn’t initially imported anywhere so it isn’t deemed to “belong” to the tsconfig. It will still be validated, possibly using the typescript bundled with IntelliJ, but not in the context of the specific tsconfig.

The same effect can be caused if you duplicate a component. Normally, if you generate it with the CLI, it will be pre-added to the module.

So the solution is to just ignore the error and go on and import the new service or component where it’s going to be used.

In case you are wondering why this has been introduced in Angular 10, the headline answer is that the Angular CLI now sets up projects to make use of the Typescript Project References feature, which enables better project structures and faster build times. To do this the tsconfig explicitly includes the *.d.ts definition files (rather than the .ts files as it did previously). The normal build will build these files from the .ts files, though only if they don’t already exist. Unfortunately the IDE doesn’t seem to have gotten the memo yet.

Unleash your untapped potential

Get in touch to find out what we can do for your business.
Book a consultation