Angular 7 : How to deploy Angular “Build” folder along with ASP.Net Web Api in Visual Studio 2017

Question

The Single Page app is having FE in Angular 7 and BackEnd api in WebApi. Currently I am developing Angular code in VSCode and Api in Visual Studio 2017.

Using "ng build" command i can create the build folder.

Can i use this build folder to deploy the app along with Web Api in same server, so that the app can run like old MVC applications.

Answer 1

Yes ofcourse you can. The bootstrapping process of angular requires a starting file (an index.html or Index.cshtml for example) that refer to vendor.js and main-client.js javascript files inside dist folder.

The Angular ASP.NET Core Web-Application template in Visual Studio 2017 creates a starter index.cshtml file like this

 @{ ViewData["Title"] = "Home Page"; } <app asp-prerender-module="ClientApp/dist/main-server">Loading...</app> <script src="~/dist/vendor.js" asp-append-version="true"></script> @section scripts { <script src="~/dist/main-client.js" asp-append-version="true"></script> } 

You can see the reference to javascript files inside the dist folder.

Having WebApi and angularapp under same Application in IIS shall also prevent you from Cross Origin Request (CORS) issues.

Answer 2

You can use default template of visual studio 2019. They provide build in solution for angular & asp.net core web api like this

Then you can open csproj file you will see these config

<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" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
      <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

So when you publish your project the project will first run npm install to restore package then run npm run build -- --prod to build production code so you will have every thing inside 1 folder to deploy