How to setup SonarQube in Angular Application

Hello Everyone, In this article I will guide you on how can you setup SonarQube or Sonar scanner in your angular application, SonarQube will help us to test the application code quality and check test coverages.

Here I have mentioned some following steps

Run Angular Test cases

First, you need to check {type: ‘lcov’} is present in your karma.conf.js file, if not please add

{
    "coverageReporter": {
        "reporters": [
            { "type": "lcov" }
        ]
    }
}

JSON

Now it’s time to generate angular test coverage, run the below command in your terminal.

ng test --code-coverage

Bash

It will generate a coverage directive at the root level in your application, you can see all coverage-related information if run the run ./coverage/index.html in your browser.

Install SonarQube in your system

There are different steps for Mac and Windows OS to Download and install sonarQube.

SonarQube Install on your Mac Guide

Here we used the brew package manager to install sonarQube and sonar-scanner on your mac.

brew install sonar

Bash

brew install sonar-scanner

Bash

Install Sonar Scanner NPM package on your Angular Application

npm install sonar-scanner — save-dev

Bash

Now you need to create a sonar config properties file in your application at root level.

Here this is an example file you can use to setup in your application.

sonar.host.url=http://localhost:9000
sonar.login=admin
sonar.password=admin
sonar.projectKey=your-angular-app
sonar.projectName=your-angular-app
sonar.projectVersion=1.0.0
sonar.sourceEncoding=UTF-8
sonar.sources=src
sonar.exclusions=**/node_modules/**,src/assets/**,src/favicon.ico,src/environments/**,src/mocks/**
sonar.tests=src
sonar.test.inclusions=**/*.spec.ts
sonar.typescript.exclusions=**/node_modules/**,**/bower_components/**
sonar.typescript.tslint.reportPaths=lint-out-final.json
sonar.typescript.lcov.reportPaths=coverage/lcov.info

sonar-project.properties

Setup Angular Test code coverage with SonarQube

Now you need to add a sonar runner script to your package.json file

{
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "watch": "ng build --watch --configuration development",
        "test": "ng test",
        "sonar": "sonar-scanner"  // Add this sonar srcipt
      }
}

package.json

Now it’s time to run sonar script in your angular application

npm run sonar

Bash

this command will create a project with the name your-angular-app in your project list and share the angular test coverage information to SonarQube