Как добавить проект Angular к существующему проекту NET Core Web API?

Question

У меня есть базовый c. NET проект веб-API Core 3.1, который я создал с несколькими конечными точками. Теперь я хочу создать клиент для использования этого API. Я видел примеры проектов, которые имели Angular в своем решении проекта веб-API.

Как я могу добавить проект Angular, чтобы работала отладка и публикация? Или я должен держать оба проекта отдельно?

Answer 1

У Microsoft есть существующий шаблон проекта, который создаст новый asp. net основной проект с angular, уже настроенным в этом проекте, если вы хотите основать свое решение на этом шаблоне: dotnet new angular.

Для этого вручную

1. Переместите исходный код angular в новую папку внутри веб-проекта (не wwwroot). Шаблоны проекта называют папку «ClientApp».
2. Добавьте в проект пакет Nuget Microsoft.AspNetCore.SpaServices.Extensions.
3. В 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");
    }
});

А в файле веб-проектов .csproj вы можете настроить шаг publi sh для создания приложения 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>

Answer 2

1. создать wwwroot в проекте API, если он не существует

2. при запуске разрешить app.UseDefaultFiles(); app.UseStaticFiles();

3. prod ваш angular ng build --prod

4. поместите вас angular dist внутрь этой wwwroot папки