如何将角度项目添加到现有的.NET Core Web API项目中？ [英] How do I add an Angular project to an exisiting .NET Core Web API project?

问题描述

我有一个使用几个端点创建的基本.NET Core3.1Web API项目。现在我想构建一个客户端来利用此API。我见过在其Web API项目解决方案中具有角度的项目的示例。

如何添加ANGLE项目才能进行调试和发布？或者我应该将两个项目分开？

ASP.NET

微软有一个现有的项目模板，如果您希望基于该模板：dotnet new angular，该模板将设置一个新的推荐答案核心项目，该项目已使用该项目配置了角度。

手动执行此操作

1. 将角度源代码移动到web项目内的新文件夹中(不是wwwroot)。项目模板将文件夹命名为"；ClientApp"；。
2. 将Microsoft.AspNetCore.SpaServices.Extensions Nuget包添加到项目。
3. 在Startup.csConfigureServices中，调用AddSpaStaticFiles并指向将生成角度应用的位置。

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

4. 在Startup.csConfigure

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. 在Web项目.csproj文件中，您可以配置发布步骤来构建ANGLE应用程序：

<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>

这篇关于如何将角度项目添加到现有的.NET Core Web API项目中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！