Sonarqube integration with Angular
<p>There are two methods for Sonarqube integration with Angular.<br>One way is to use <code>ng test</code> to generate the lcov.info file and then read the file directly through the SonarScanner CLI.<br>
One way is to integrate the components of sonarqube by installing them in the angular project.<br>
Two methods will be described below.</p>
<h1 id="method-1use-sonarscanner-cli">Method 1：Use SonarScanner CLI</h1>
<h2 id="start-sonarqube-service">Start SonarQube Service</h2>
<p>Download SonarQube<br>
Unzip .zip file.<br>
In the bin directory, there are files to start the SonarQube service for different systems, including Windows, Mac and Linux.<br>
For Windows system, the StartSonar.bat file needs to be executed.</p>
<h4 id="note">Note</h4>
<p>SonarQube requires the JDK environment, and here is its support information.<br>
I downloaded JDK 11.<br>
Then visit http://localhost:9000/.<br>
Login through account <code>admin</code>, password <code>admin</code>, you can enter the system.<br>
<img src="https://img2022.cnblogs.com/blog/942899/202207/942899-20220701154956129-66253105.png" alt="" loading="lazy"><br>
Then create a project manually.<br>
<img src="https://img2022.cnblogs.com/blog/942899/202207/942899-20220701155002932-430352817.png" alt="" loading="lazy"></p>
<h4 id="optionalcreate-tokens">(Optional)Create Tokens</h4>
<p>In the user drop-down box in the upper right corner, select My Account.<br>
Then select the Security Tab page.<br>
Tokens can be managed here.<br>
<img src="https://img2022.cnblogs.com/blog/942899/202207/942899-20220701155011937-634905709.png" alt="" loading="lazy"><br>
Reference-Generating and Using Tokens<br>
The SonarQube service can be accessed through an account and password, or through tokens, so you can create tokens or not, which is depending on your needs.</p>
<h2 id="angular-project">Angular Project</h2>
<p>Execute command <code>ng test</code>.</p>
<h4 id="note-1">Note</h4>
<p>Need to set <code>coverage=true</code>.<br>
It can be added to the command line:</p>
<pre><code>ng test --codeCoverage=true
</code></pre>
<p>It can also be added to the angular.json file:</p>
<pre><code>"test": {
"codeCoverage": true,
......
},
</code></pre>
<p>After the command is executed successfully, a new folder <code>coverage</code> will be created. In the folder there is a file <code>lcov.info</code>, this is what we need.</p>
<h2 id="parsing-lcovinfo-file-via-sonarscanner-cli">Parsing lcov.info file via SonarScanner CLI</h2>
<p>Download SonarScanner<br>
Unzip .zip file.<br>
Modify the configuration file <code>sonar-scanner.properties</code> in the <code>conf</code> folder.<br>
（1）sonar.projectBaseDir<br>
The default project folder for scanner is the /src directory of the current folder, which needs to be modified here, so we have to set sonar.projectBaseDir.<br>
sonar.projectBaseDir<code>supports relative and absolute paths</code>.<br>
Relative paths are calculated from the <code>bin</code> directory.<br>
Note that you cannot use the path \ under windows, but must use /.(Related information)<br>
（2）Need to set the file path of lcov.info：sonar.typescript.lcov.reportPaths.</p>
<pre><code>sonar.typescript.lcov.reportPaths=coverage/lcov.info
</code></pre>
<p>（3）Set the host, which is the address of the sonarqube service:http://localhost:9000.</p>
<pre><code>sonar.host.url=http://localhost:9000
</code></pre>
<p>（4）Set the account and password, but of course you can also use tokens directly from the command line.</p>
<pre><code>sonar.login=admin
sonar.password=YourPassword
</code></pre>
<p>（5）Set target project(Project previously created in the SonarQube service).</p>
<pre><code>sonar.projectKey=YourProjectKey
sonar.projectName=YourProjectName
</code></pre>
<p>(6)Other related settings can be found at:Analysis Parameters.<br>
You will end up with a configuration file like this:</p>
<pre><code>sonar.host.url=http://localhost:9000
sonar.login=admin
sonar.password=YourPassword
sonar.projectKey=YourProjectKey
sonar.projectName=YourProjectName
sonar.projectVersion=1.0
sonar.sourceEncoding=UTF-8
sonar.sources=src
sonar.exclusions=**/node_modules/**
sonar.tests=src
sonar.test.inclusions=**/*.spec.ts
sonar.typescript.lcov.reportPaths=coverage/lcov.info
sonar.projectBaseDir=../../src
</code></pre>
<p>Then go to the bin directory and execute the command:</p>
<pre><code>sonar-scanner
</code></pre>
<p>Or</p>
<pre><code>sonar-scanner -Dsonar.login=YourAuthenticationToken
</code></pre>
<p>It depends on whether you use the token or set the account and password in the sonar-scanner.properties file.<br>
After some time, the sonar-scanner has finished its work and an activity has been generated in http://localhost:9000.<br>
<img src="https://img2022.cnblogs.com/blog/942899/202207/942899-20220701155342521-140674912.png" alt="" loading="lazy"></p>
<h4 id="references">References</h4>
<p>SonarScanner CLI<br>
SonarScanner<br>
sonar-scanner-cli sonarscanner.md<br>
sonar-scanning-examples</p>
<h2 id="method-2installing-sonarqubes-components-in-the-angular-project">Method 2:Installing sonarqube's components in the angular project</h2>
<p>Install karma-sonarqube-reporter.</p>
<pre><code>npm install -D karma-sonarqube-reporter
</code></pre>
<p>Install sonarqube-scanner.</p>
<pre><code>npm install -D sonarqube-scanner
</code></pre>
<p>Create the sonar-project.properties file in the root directory of the Angular project. It is similar to the function of the sonar-scanner.properties file.</p>
<pre><code>sonar.host.url=http://localhost:9000
sonar.login=admin
sonar.password=admin
sonar.projectKey=test-app
sonar.projectName=test-app
sonar.projectVersion=1.0
sonar.sourceEncoding=UTF-8
sonar.sources=src
sonar.exclusions=**/node_modules/**
sonar.tests=src
sonar.test.inclusions=**/*.spec.ts
sonar.typescript.lcov.reportPaths=coverage/lcov.info
</code></pre>
<p>Edit <code>karma.conf</code> file.<br>
（1）Add plugins</p>
<pre><code>require('karma-sonarqube-reporter'),、
</code></pre>
<p>（2）Add reporters</p>
<pre><code>reporters:[‘progress’, ‘kjhtml’, ‘sonarqube’]
</code></pre>
<p>execute the command:</p>
<pre><code>npm run sonar-scanner
</code></pre>
<h4 id="references-1">References</h4>
<p>Setting up SonarQube with Angular<br>
Angular code coverage with Sonarqube</p>
</div>
<div id="MySignature" role="contentinfo">
<div class="autograph">
<p>
<span> 学习技术最好的文档就是【<strong>官方文档</strong>】，没有之一。<br>
<span> 还有学习资料【<strong>Microsoft Learn</strong>】、【<strong>CSharp Learn</strong>】、【<strong>My Note</strong>】。<br>
<span> 如果，你认为阅读这篇博客让你有些收获，不妨点击一下右下角的【<strong>推荐</strong>】按钮。<br>
</span> 如果，你希望更容易地发现我的新博客，不妨点击一下【<strong>关注</strong>】。</p>
</div><br><br>
来源：https://www.cnblogs.com/Lulus/p/16459848.html
頁:
[1]