How do I add an Angular project to an exisiting .NET Core Web API project?

Question

I have a basic .NET Core 3.1 Web API project that I've created with several endpoints. I now want to build a client to utilize this API. I've seen examples of projects that had Angular within their Web API project solution.

How can I add an Angular project so that debugging and publishing works? Or should I keep both projects separate?

Answer 1

Microsoft has an existing project template which will set up a new asp.net core project with angular already configured withing that project if you want to base your solution off that template: dotnet new angular.

To do this manually

1. Move the angular source code into a new folder inside the web project (not wwwroot). The project templates name the folder "ClientApp".
2. Add the Microsoft.AspNetCore.SpaServices.Extensions nuget package to the project.
3. In Startup.cs ConfigureServices, call AddSpaStaticFiles and point to a location where the angular app will build.

services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "ClientApp/dist";
    });

4. In Startup.cs Configure

app.UseStaticFiles();
if (!env.IsDevelopment())
{
    app.UseSpaStaticFiles();
}

app.UseSpa(spa =>
{
    // To learn more about options for serving an Angular SPA from ASP.NET Core,
    // see https://go.microsoft.com/fwlink/?linkid=864501

    spa.Options.SourcePath = "ClientApp";

    if (env.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
        // spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
    }
});

5. And in the Web Projects .csproj file, you can configure the publish step to build the angular app:

<PropertyGroup>
    <SpaRoot>ClientApp\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
</PropertyGroup>
<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>

<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\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
</Target>

Answer 2

1. create wwwroot in api project if not exists

2. in startup allow app.UseDefaultFiles(); app.UseStaticFiles();

3. prod your angular ng build --prod

4. put you angular dist inside to this wwwroot folder