Fix all SonarQube errors listed on the Sonar server for the Angular application - Selvi29051983/angular-SonarI-Issue-poc GitHub Wiki

# SONARQUBE WARNING - ANGULAR

Severity: High

I) Unexpected empty constructor and empty method ngOnInit

Below files below are fixed related to the same issue:

src/.../dashboard/dashboard-new/dashboard-new.component.ts src/.../modules/dashboard/dashboard/dashboard.component.ts src/.../modules/products/product-list/product-list.component.ts src/app/services/core/core.service.ts src/app/services/core/icons.service.ts src/app/services/core/interceptor.service.ts src/app/modules/reports/reports/reports.component.ts

Solution:

Use any of the following solutions

1.Add a Comment: If the function is intentionally left empty, you can add a comment explaining why. export class DashboardNewComponent implements OnInit { constructor() { // Constructor intentionally left empty } ngOnInit(): void { // Initialization logic will be added later } }


2)Throw an Exception: If the function should not be used, you can throw an UnsupportedOperationException.

export class DashboardNewComponent implements OnInit {
  constructor() { 
    throw new Error('UnsupportedOperationException');
  }
  ngOnInit(): void {
    throw new Error('UnsupportedOperationException');
  }
}

3.Implement Basic Functionality: Add some basic functionality or logging to the method.

export class DashboardNewComponent implements OnInit { constructor() { console.log('DashboardNewComponent initialized'); } ngOnInit(): void { console.log('ngOnInit called'); } }

4)Exclude from Analysis: If the empty methods are necessary and cannot be modified, you can configure SonarQube to exclude these methods from analysis.


## Severity: Medium

II) Unexpected var, use let or const instead.

src/app/services/shared/api.service.ts
Solution: Variables should be declared with let or const.

let x = this.http.get<any>(url, {
 withCredentials: true,
});


III) Unexpected empty source

src/.../dashboard/dashboard-new/dashboard-new.component.scss
src/app/modules/dashboard/dashboard/dashboard.component.scss
src/app/modules/design-components/icons/icons.component.css
src/app/modules/design-components/tabs/tabs.component.css
src/app/modules/reports/reports/reports.component.scss
Solution:

Remove Empty CSS Files: If the CSS files are genuinely not needed, consider deleting them. This will eliminate the issue entirely.
Inline Styles: When generating new components, use the --inline-style option to avoid creating empty CSS files by default.
Marking Issues: You can mark the issue as "Won't Fix" or "False Positive" directly from the IDE. In VS Code, select the issue in the PROBLEMS panel, click the lightbulb icon, and choose the appropriate action.
Quick Fixes: Look for quick fixes in VS Code. When you open a file with issues, a lightbulb icon will appear on the line with the issue. Clicking this icon will show possible quick fixes.
Exclusions: Configure SonarQube to ignore empty CSS files by adding them to the exclusions list in your project settings.
Verbose Logging: Enable verbose logging in SonarLint to get more detailed information about the issue. Navigate to Extensions > SonarQube for Visual Studio > Options… > General and set your logging level to verbose.
Fix: Added inline style


/* Placeholder styles for reports component */
:host {
 display: block;
}

## Severity: Low

**IV) Remove this commented out code.**

src/app/modules/products/product-list/product-list.component.spec.ts
src/app/modules/products/product-list/product-list.component.ts
src/assets/theme/css/core.css
src/assets/theme/css/technip-kendo.css
src/styles.scss
Fix:
// let productService: ProductService;

**V) Remove this useless assignment to variable service.**

src/app/services/auth/auth.service.spec.ts
src/app/services/core/interceptor.service.spec.ts
Fix: Removed the service from the file.

service = TestBed.inject(AuthService);
coreService = TestBed.inject(CoreService);

service = TestBed.inject(AuthService);
coreService = TestBed.inject(CoreService);

VI) If statement should not be the only statement in else block

src/app/services/shared/api.service.ts
Fix: Removed else inside if to else if.
else if (error.error) {
 console.error(
   `Backend returned code ${error.status}, ` +
   `body was: ${JSON.stringify(error.error)}`
 );
} else {
 console.error(
   `Backend returned code ${error.status}, ` + `body was: ${error}`
 );
}

VII) RouterTestingModule is deprecated

src/app/app.component.spec.ts
Fix: Removed RouterTestingModule.
imports: [RouterTestingModule],


VIII) Remove this unused import of Input

src/app/modules/products/product-list/product-list.component.ts
Fix: Remove Input.
import { Component, Input, OnInit } from '@angular/core';

IX) (next?: ((value: any) => void) | null | undefined, error?: ((error: any) => void) | null | undefined, complete?: (() => void) | null | undefined): Subscription is deprecated.

Fix: Added the code.
.subscribe({ next: () => { /* your code here */ } });




⚠️ **GitHub.com Fallback** ⚠️