How to Configure Visual Studio to Build Angular project as well as part of Build

Question

Every time we need to goto ClientApp folder and type npm install manually. But in different projects - Visual Studio template project it this build happens out of box.

What configuration are required?

What I tried: I did install following nuget package: But id didn't help either.

 <PackageReference Include="Microsoft.TypeScript.MSBuild" Version="4.5.3">

Answer 1

Create a new project in Visual Studio using the ASP.NET Core app with Angular template ( docs.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-angular?view=vs-2022 ), then search for the "npm" string in its.csproj files. You'll find something like this:

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />

<!-- Include the newly-built files in the publish output -->
<ItemGroup>
  <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
  <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
    <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
    <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
  </ResolvedFileToPublish>
</ItemGroup>