如何将 Angular 项目添加到现有的 .NET Core Web API 项目？答案

【问题标题】：How do I add an Angular project to an exisiting .NET Core Web API project?如何将 Angular 项目添加到现有的 .NET Core Web API 项目？
【发布时间】：2020-11-04 05:12:25
【问题描述】：

我有一个使用多个端点创建的基本 .NET Core 3.1 Web API 项目。我现在想构建一个客户端来使用这个 API。我已经看到在他们的 Web API 项目解决方案中使用 Angular 的项目示例。

如何添加 Angular 项目以便调试和发布工作？还是我应该将两个项目分开？

【问题讨论】：

标签： c# angular visual-studio asp.net-core-webapi

【解决方案1】：

Microsoft 有一个现有的项目模板，如果您想将解决方案基于该模板：dotnet new angular。

手动操作

将 Angular 源代码移动到 Web 项目内的新文件夹中（不是 wwwroot）。项目模板将文件夹命名为“ClientApp”。
将 Microsoft.AspNetCore.SpaServices.Extensions nuget 包添加到项目中。
在 Startup.cs ConfigureServices 中，调用 AddSpaStaticFiles 并指向将构建 Angular 应用的位置。

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

在 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");
    }
});

并且在 Web Projects .csproj 文件中，您可以配置发布步骤来构建 Angular 应用程序：

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

【讨论】：

所以这不需要 wwwroot 文件夹？
不，Angular 构建的 dist 文件夹包含在项目输出中，启动时的配置可确保从该输出中提供 Angular 应用程序。
如果您的开发阶段足够早，我强烈建议您从 microsoft 项目模板开始。

【解决方案2】：

如果不存在，则在 api 项目中创建 wwwroot
在启动时允许app.UseDefaultFiles(); app.UseStaticFiles();
刺激你的角度ng build --prod
把你的角度距离放到这个wwwroot文件夹中

【讨论】：