Angular 7：如何在 Visual Studio 2017 中部署 Angular“Build”文件夹以及 ASP.Net Web Api答案

【问题标题】：Angular 7 : How to deploy Angular "Build" folder along with ASP.Net Web Api in Visual Studio 2017Angular 7：如何在 Visual Studio 2017 中部署 Angular“Build”文件夹以及 ASP.Net Web Api
【发布时间】：2019-11-03 16:14:53
【问题描述】：

单页应用在 Angular 7 中具有 FE，在 WebApi 中具有后端 api。目前我正在 Visual Studio 2017 的 VSCode 和 Api 中开发 Angular 代码。

使用“ng build”命令我可以创建构建文件夹。

我可以使用这个构建文件夹将应用程序与 Web Api 一起部署在同一台服务器上，以便应用程序可以像旧的 MVC 应用程序一样运行。

【问题讨论】：

标签： angular visual-studio asp.net-web-api visual-studio-code

【解决方案1】：

是的，当然可以。 Angular 的引导过程需要一个起始文件（例如 index.html 或 Index.cshtml），该文件引用 dist 文件夹中的 vendor.js 和 main-client.js javascript 文件。

Visual Studio 2017 中的 Angular ASP.NET Core Web 应用程序模板会创建一个类似这样的 starter 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>
}

您可以在 dist 文件夹中看到对 javascript 文件的引用。

在 IIS 中的同一应用程序下拥有 WebApi 和 angularapp 也可以防止您出现跨源请求 (CORS) 问题。

【讨论】：

你能解释一下你的答案吗？
所以你的意思是我需要添加一个 index.html 并从其中的 dist 文件夹加载 vendor.js 文件？
总而言之，要部署 Angular 应用程序，您只需复制运行 ng-build 命令后创建的 dist 文件夹。但关键是您将如何告诉您的 Web 应用程序加载 Angular 应用程序。因为最终您在 Angular 构建中拥有的只是 javascript 文件以及相关的 css/图像/图标等。为此，您必须有一个启动 Angular 应用程序的起始页面。它可能是 index.html 或 index.cshtml 或任何您的服务器允许并指向 dist 文件夹中的 javascript 文件，如上所述。
好的，谢谢 Obaid。我会尝试做一个。感谢您明确的方向。

【解决方案2】：

您可以使用 Visual Studio 2019 的默认模板。它们为像这样的 Angular 和 asp.net 核心 Web api 提供内置解决方案

然后你可以打开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 个文件夹中部署所有东西

【讨论】：

您可以使用 dotnet new 命令。试试这个link。如果我的回答对您有用，请投票并标记为已接受。谢谢