Angular in Visual Studio

October 08, 2020 angular vs

Now that the Angular Language Service is available for Visual Studio working on Angular projects from inside Visual Studio is a viable option. The linked blog post mentions a couple of ways of adding the Angular project to Visual Studio but I felt the suggestions left something to be desired here is what I came up with.

Here is the csproj file I came up with:

<Project>
  <Import Project="Sdk.props" Sdk="Microsoft.NET.Sdk.Web" />
  
  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <IsPackable>false</IsPackable>

    <!-- Don't show node_modules and dist folder -->
    <DefaultItemExcludes>$(DefaultItemExcludes);node_modules\**;dist\**</DefaultItemExcludes>
  </PropertyGroup>

  <ItemGroup>
    <!-- Properties folder really only exists to make VisualStudio happy. -->
    <Content Remove="Properties/*" />
  </ItemGroup>
  
  <Import Project="Sdk.targets" Sdk="Microsoft.NET.Sdk.Web" />

  <Target Name="Restore">
    <Exec Command="npm i" />
  </Target>
  
  <Target Name="Build">
    <Exec Command="npm run build" />
  </Target>
  
</Project>

And here is what I ended up with in my launchSettings.json file:

{
  "profiles": {
    "ng serve": {
      "commandName": "Executable",
      "workingDirectory": "$(ProjectDir)",
      "executablePath": "node_modules\\.bin\\ng.cmd",
      "commandLineArgs": "serve"
    }
  }
}