Working configuration for Typescript Angular projects

[nico7 (cazottes)]

Hi,
I have spent quite some time to figure out why sonarqube is not taking into account my typescripts (ts) files for my angular project. I use Sonarqube enterprise 8.9.6 and my project is based on angular 13 which needs Node 16.

The strange logs I have running sonar-scanner are the following :

15:24:51  INFO: Found 1 tsconfig.json file(s): [/workspace/.../my-project/tsconfig.json]
15:24:51  ERROR: Unknown compiler option 'noImplicitOverride'.
15:24:51  INFO: Skipping 21 files with no tsconfig.json
15:24:51  INFO: 21 source files to be analyzed
15:24:51  INFO: 21/21 source files have been analyzed
15:24:51  INFO: Sensor TypeScript analysis [javascript] (done) | time=4626ms

And If I active the sonar-scanner debug log level (-X or sonar.log.level=DEBUG), there is a message for each ts file of my sources :
/src/app/app.component.ts matched NO_CONFIG

After searching for a few days without success, I finally managed to make it work.

Here are the 2 solutions I found :
1/ Remove the config value “noImplicitOverride”: true from the tsconfig.json
I do not like it too much because it may introduce bad practice in the angular code

2/ Create a specific tsconfig.sonar.json file for sonar analysis :
The tsconfig.sonar.json is very simple and contains only this :

{
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules", 
    "**/*.spec.ts"
  ]
}

And add a parameter : sonar.typescript.tsconfigPath=tsconfig.sonar.json
either in sonar-project.properties or through -D option on cli.

I hope it will be helpful to others that fall on the same issue.

As an improvement to SonarQube, I suggest that :

• the logs could be more explicit on the root cause of the NO_MATCH
• the noImplicitOverride become supported in a future version so that there is no more need to have a dedicated tsconfig.json for sonar

Note : for information, the relevant links close to this topic, that helped me to find the solution :

TS - Skipping files with no tsconfig.json

SonarQube Enterprise Edition Version 8.3.1 (build 34397) what are you trying to achieve I am trying to get and Angular project to be succesfully analyzed by SonarQube. We have a standard structure (with tsconfig, tslint and everything else being in the root of the project directory). Even though SonarQube finds the tsconfig.json file, it keeps ignoring all of the typescript files in the project and it is only analyzing the html, css and javascript ones. what have you tried so far to ac…

Support wildcard patterns for sonar.typescript.tsconfigPath(s)

Typescript file matched NO_CONFIG

SonarLint doesn’t report any errors within my typescript files, because it doesn’t recognize that any of them match my provided tsconfig file, even though all of them do (if i run npm tsc, all of them compile properly). This is how the logs look like: Using c:\workspaces\repos\project\subproject\tsconfig.json from sonar.typescript.tsconfigPath property C:/workspaces/repos/project/subproject/source/somefile.ts matched NO_CONFIG It’s a very simple scenario, so I wondered what the issue could be…

[gab (Gabriel Vivas)]

Hi @nico7,

Thanks for bringing this up and sharing your results

We are tracking tsconfig.json issues. As you found out, we added recently the possibility to create wildcards for tsconfig.json. But we are looking to make this work out of the box.

Good news for noImplicitOverride, we already support the latest TypeScript in the latest SQ version which is 9.7.1. Since you are in the SQ LTS stream, you should benefit from this in the upcoming release.

Regarding the NO_CONFIG, could you share a bit of your project structure?
Where are your tsconfig.json files? Could you share their content?

Cheers,
Gabriel

[nico7 (cazottes)]

Hi @gab ,
The structure of my project is really basic as an Angular project with the default tsconfig.json and inherited tsconfig.app.json, tsconfig.doc.json at the root of the project, all generated by angular CLI.
The angular components and typescript are then in the src directory.
Here it is :

And the content of the tsconfig.json :

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

My point of view is that the NO_CONFIG message is just the consequence of Sonar scanner falling on the error of the noImplicitOverride. Because, I tried to add the “include”: [“src/**/*.ts”] in tsconfig.json or tsconfig.app.json and it did not resolve the problem.
The only solutions I found is to either remove the noImpliciteOverride or add a dedicated tsconfig.sonar.json and I finaly did the 2nd option.

Regards,

[malberquilla (Mario Alberquilla)]

Thank you nico7. I took your dedicated tsconfig.sonar.json solution.
I have an angular workspace, and now, it detects all imports as codesmell “Either remove this import or add it as a dependency”. I have all dependencies in the parent package.json and in each project only the specifics ones.

Have you had that problem. Am I doing it wrong?

[nico7 (cazottes)]

From what I remember, I had similar issue but I don’t remember precisely how I corrected it.
Looking at the code history, I removed some useless imports in ts files.

[malberquilla (Mario Alberquilla)]

Thanks.

As I can see, I missing declaring peerDependencies…