Angular 7: Как развернуть Angular папку «Build» вместе с ASP.Net Web Api в Visual Studio 2017

Question

Приложение для одной страницы имеет FE в Angular 7 и BackEnd API в WebApi.В настоящее время я занимаюсь разработкой Angular-кода в VSCode и Api в Visual Studio 2017.

Используя команду «ng build», я могу создать папку для сборки.

Могу ли я использовать эту папку сборки для развертывания приложения вместе с Web Api на одном сервере, чтобы приложение могло работать как старые приложения MVC.

Answer 1

Да, конечно, вы можете.Процесс начальной загрузки angular требует наличия начального файла (например, index.html или Index.cshtml), который ссылается на файлы javascript vendor.js и main-client.js внутри папки dist.

Angular ASP.NETБазовый шаблон веб-приложения в Visual Studio 2017 создает начальный файл index.cshtml, подобный этому

@{
    ViewData["Title"] = "Home Page";
}

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

<script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts {
    <script src="~/dist/main-client.js" asp-append-version="true"></script>
}

Вы можете увидеть ссылку на файлы javascript внутри папки dist.

Наличие WebApi и angularapp в одном приложении в IIS также предотвратит вас от Cross OriginЗапрос (CORS) вопросов.

Answer 2

Вы можете использовать шаблон по умолчанию для Visual Studio 2019. Они предоставляют встроенное решение для базового web-интерфейса angular & asp.net, как это

Затем вы можете открыть файл csproj, вы увидите эти конфигурации

<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" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
      <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

Поэтому, когда вы публикуете свой проект, проект сначала запустит npm install для восстановления пакета, затем запустит npm run build -- --prod для сборки производственного кода, чтобы у вас было все, что в 1 папке для развертывания