如何将 Angular 项目添加到现有 .NET 核心 Web ZDB974238714CA8DE634A7CE1D08 项目？

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(); app.UseDefaultFiles(); app.UseStaticFiles();

3. prod your angular ng build --prod

4. put you angular dist inside to this wwwroot folder