Search code examples
angularvisual-studiovisual-studio-2017csproj

Understanding how Visual Studio handles Angular projects

I've been working on a project created using Visual Studio 2017 and the "Asp.NET Core + Angular" default template.

The project works correctly, but after a while working on it I got curious and wanted to know exactly how VS handles such projects.

So I opened the .csproj file and I must say that I don't understand the logic or reason behind all the various <ItemGroup> elements. I've summed up my doubts in the following image:

enter image description here

Can anyone shed some light on my questions?

Solution

  • So, after some research I concluded that almost all the items in the screenshot I posted are useless.

    It seems they're created by Visual Studio when you delete/move items from inside the IDE, and then they just sit there, accumulating. It's like VS explicitly "blacklists" items if you move/delete them using the Solution Explorer, while this doesn't happen if you simply move/delete the files manually from disk.

    After some testing, I've come to this conclusion: the only important entries in the screenshot above are the ones that mention SpaRoot (the folder where the Angular app source code is located).

    If I understand correctly, the first entry:

    <Content Remove="$(SpaRoot)**" />

    Is removing the entire SpaRoot folder from the publish process, so it will not be included in the final distributed files. This makes sense, and is because that folder will be compiled via npm during the Publish process into a different directory (end of the project file, not included in my screenshot). So we don't want to include its contents into the main compilation step, as they would be useless.

    The second entry:

    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />

    is saying that the SpaRoot folder is "part of the project" (should be shown in the VS Solution Explorer) but does not play a part in compilation (that's what the None element means apparently). However, the item excludes the node_modules subfolder, so it is not shown in the Solution Explorer, which makes sense.