Angular using tsonfig.app.json: Example with SonarQube

In our real world scenario we have an Angular application (in fullstack with a Java backend).

The application is part of an Azure (or Jenkins or AWS) pipeline and the code is analyzed by SonarCube.

The TypeScript code is not evaluated by Sonar because Sonar LTS is currently in version 8.9 and it supports TypeScript 4.

Our Angular application is using the version 15 that runs with TypeScript 4.8. During one of the upgrade of Angular the flag '--noImplicitOverride' has been automatically added.
Because of this change SonarCube could not handle anymore the TypeScript files.

Being stuck to the LTS version and without the possibility to define in Sonar a different version of TypeScript, we found a solution thanks to the flexibility of Angular.

In our project we modified the tsconfig.json to be compatible with SonarCube removing "noImplicitOverride":true and replacing "target": "ES2022" with "target": "es2020".

To maintain the new features of TypeScript 4.3+ we updated the tsconfig.app.json with: "noImplicitOverride":true and "target": "ES2022".

With this change we succeeded to reactivate the code evaluation of Sonar without downgrading the version of Angular / TypeScript used during the development or wait the release of a new LTS by SonarSource.

What is tsconfig.app.json?

When you create a new Angular project with the CLI multiple configuration files are automatically generated:

CREATE testapp/tsconfig.json (863 bytes) 
CREATE testapp/.browserslistrc (600 bytes) 
CREATE testapp/karma.conf.js (1424 bytes) 
CREATE testapp/tsconfig.app.json (287 bytes) <---- look here 
CREATE testapp/tsconfig.spec.json (333 bytes) 

To understand better what is the goal of this file we can read the excellent Angular documentation about the compiler options:

A TypeScript configuration can inherit settings from another file using the extends property.
The configuration options from the base file are loaded first, then overridden by those in the inheriting configuration file.

The first lines of tsconfig.app.json are explicit:

{ 
  "extends": "./tsconfig.json", 

Angular uses tsconfig.app.json to build the application, tsconfig.json can be used to define a basic configuration for a multi-applications code source or a monorepo.

SonarCube has been configured to read tsconfig.json and we adapted the configuration with the parameters that it wanted.

But to run our application we used the tsconfig.app.json letting us to choose the best configuration for our environment.