Codeblox Blog
Garanta análise total do SonarQube em um repositório híbrido .NET/Angular
Caso seu projeto .NET+Angular tenha sido criado usando o template ASP.NET Core com Angular, talvez esteja funcionando tudo corretamente. Mas em repositórios onde o Server(ASP.NET) e o Client(Angular,React,etc) tenham sido criados separadamente, é possível que o SonarQube esteja ignorando sua aplicação Client. A seguir explicarei o motivo e como ajustar para termos cobertura total da análise.
Por que meu Client JS/TS está sendo ignorado?
Para a análise do SonarQube em soluções .NET utilizamos a dotnet tool dotnet-sonarscanner. Esta ferramenta precisa que os arquivos da aplicação Client estejam de alguma forma referenciadas em algum projeto .NET(csproj). Nos templates padrão SPA, o projeto é criado já com as instruções para a inclusão desses arquivos. No caso do template ASP.NET Core com Angular vemos as seguintes linhas no .csproj:
<ItemGroup>
<!-- Don't publish the SPA source files, but do show them in the project files list -->
<Content Remove="$(SpaRoot)**" />
<None Remove="$(SpaRoot)**" />
<None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
</ItemGroup>
No caso deste template com Angular, a varíavel SpaRoot fica por padrão em uma pasta ClientApp. A instrução acima força a inclusão desta pasta, com excessão da pasta node_modules, permitindo então que a tool SonarScanner for .NET entenda que os arquivos contidos devem entrar na análise.
Como resolver?
Para resolver essa questão é possível adicionar utilizar as instruções indicadas aqui anteriormente em um <ItemGroup> de algum de seus csproj’s existentes, ajustando a referência da pasta da sua aplicação Client no lugar da referência de variável $(SpaRoot).
Porém, pode ser que não seja conveniente deixar os arquivos do Client visualmente embutidos em algum dos projetos ASP.NET existentes em sua solução, sendo desejável que seu Client seja visto como um projeto avulso.
Client JS/TS como um projeto avulso na solução dotnet
No Visual Studio 2022 existe um novo tipo de projeto para aplicações JavaScript/TypeScript(.esproj), que pode ser adicionado na solução. O SonarScanner consegue identificar este tipo de projeto e realiza a análise sobre ele.
Para utilizar este tipo de projeto em uma aplicação Angular(ou React, ou Vue, etc) existente, podemos adicionar um arquivo .esproj em sua pasta raiz.
Ex: AngularClient/MyProject.Client.esproj:
<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/0.5.45-alpha">
</Project>
Você pode adicionar este projeto na solução através da opção “Adicionar Projeto Existente” do Visual Studio.
⚠️Porém este novo tipo de projeto é algo específico do Visual Studio e não do .NET, não sendo compatível com Linux, onde ocorre o seguinte erro:
/home/runner/.dotnet/sdk/6.0.402/Microsoft.Common.CurrentVersion.targets(1220,5): error MSB3644: The reference assemblies for .NETFramework,Version=v4.7.2 were not found. To resolve this, install the Developer Pack (SDK/Targeting Pack) for this framework version or retarget your application. You can download .NET Framework Developer Packs at https://aka.ms/msbuild/developerpacks
Solução cross-platform
Enquanto o esproj não torna-se um recurso do .NET e não apenas do Visual Studio, ainda podemos conseguir um efeito similar utilizando o clássico csproj.
Então, em vez de um esproj, podemos criar um csproj na raiz da aplicação Client/Front-end.
Ex: AngularClient/MyProject.Client.csproj:
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
</PropertyGroup>
<ItemGroup>
<Compile Remove="**"/>
<Content Remove="**" />
<None Remove="**" />
<None Include="**" Exclude="node_modules\**;dist\**;bin\**;obj\**;*.csproj" />
</ItemGroup>
</Project>
Traduzindo um pouco este arquivo de projeto, podemos dizer que:
- Nada deve ser compilado (isso evitar que arquivos .cs apareçam no projeto, alguns podem vir de pacotes na pasta
node_modules) - Nada deve ser considerado conteúdo
- Tudo sem ação de compilação deve ser excluído
- Tudo deve ser incluído sem ação de compilação, mas não incluiremos pastas como node_modules,dist,obj,bin e nem o arquivo de projeto.
- Nesta etapa você pode querer ocultar mais pastas e arquivos que considerar conveniente.
