教程：在 Visual Studio 中使用 Angular 创建 ASP.NET Core 应用

项目
12/08/2023

在本文中，你将了解如何生成 ASP.NET Core 项目来充当 API 后端，并生成 Angular 项目来充当 UI。

Visual Studio 包含支持 Angular 和 React 的 ASP.NET Core 单页应用程序 (SPA) 模板。这些模板在 ASP.NET Core 项目中提供内置的客户端应用文件夹，其中包含每个框架的基本文件和文件夹。

可以使用本文中所述的方法创建具有以下功能的 ASP.NET Core 单页应用程序：

将客户端应用放在 ASP.NET Core 项目之外的独立项目中
基于计算机上安装的框架 CLI 创建客户端项目

注意

本文介绍使用 Visual Studio 2022 版本 17.8 中的已更新模板创建项目的过程。

先决条件

确保安装以下内容：

安装了“ASP.NET 和 Web 部署”工作负载的 Visual Studio 2022 版本 17.8 或更高版本。请转到 Visual Studio 下载页，进行免费安装。如果需要安装工作负载，但已安装 Visual Studio，请转到“工具”>“获取工具和功能...”，这会打开 Visual Studio 安装程序。选择“ASP.NET 和 web 开发”工作负载，然后选择“修改” 。
npm (https://www.npmjs.com/)，随 Node.js 提供
AngularCLI (https://angular.io/cli) 这可以是你选择的版本

创建前端应用

在“开始”窗口中（选择“文件”>“开始窗口”并打开），选择“新建项目”。
在顶部的搜索栏中搜索“Angular”，然后选择“Angular 和 ASP.NET 核心(预览版)”。
将项目命名为“AngularWithASP”，然后选择“创建”。

解决方案资源管理器显示以下内容：

与独立 Angular 模板相比，可以看到一些用于与 ASP.NET Core 集成的新增和修改文件：
- aspnetcore-https.js
- proxy.conf.js
- package.json(modified)
- angular.json(modified)
- app.components.ts
- app.module.ts

设置项目属性

在解决方案资源管理器中，右键单击“AngularWithASP.Server”，然后选择“属性”。
在“属性”页中，打开“调试”选项卡，然后选择“打开调试启动配置文件 UI”选项。对以 ASP.NET Core 项目（或存在的 https）命名的配置文件取消勾选“启动浏览器”选项。

这会阻止打开包含源天气数据的网页。

注意

在 Visual Studio 中，launch.json 存储与“调试”工具栏中的“开始”按钮关联的启动设置。 launch.json 必须位于 .vscode 文件夹下。

启动项目

按 F5 或选择窗口顶部的“开始”按钮启动项目。将显示两个命令提示符：

正在运行的 ASP.NET Core API 项目
运行 ng start 的 Angular CLI

注意

检查控制台输出中是否有消息。例如，可能有一条更新 Node.js 的消息。

Angular 应用随即显示，该应用通过 API 填充。如果未显示该应用，请参阅疑难解答。

发布项目

从 Visual Studio 2022 版本 17.3 开始，可以使用 Visual Studio 发布工具发布集成解决方案。

注意

要使用发布，请使用 Visual Studio 2022 版本 17.3 或更高版本创建 JavaScript 项目。

在解决方案资源管理器中，右键点击“AngularWithASP.Server”项目，然后选择“添加”>“项目引用”。

确保 angularwithasp.client 项目处于选定状态。
选择 “确定” 。
再次右键点击 ASP.NET Core 项目，然后选择“编辑项目文件”。

这将打开项目的 .csproj 文件。

在 .csproj 文件中，确保项目引用包含 <ReferenceOutputAssembly> 元素并将值设置为 false。

此引用应如下所示。

 <ProjectReference Include="..\angularwithasp.client\angularwithasp.client.esproj">
   <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
 </ProjectReference>

右键单击 ASP.NET Core 项目并选择“重新加载项目”（如果该选项可用）。

在 Program.cs 中，请确保存在以下代码。

app.UseDefaultFiles();
app.UseStaticFiles();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
   app.UseSwagger();
   app.UseSwaggerUI();
}

若要发布，请右键单击 ASP.NET Core 项目，选择“发布”，然后选择与所需的发布场景相匹配的选项，例如 Azure、发布到文件夹等。

与在 ASP.NET Core 项目中发布相比，该发布过程需要更多时间，因为发布时会调用 npm run build 命令。 BuildCommand 默认情况下运行 npm run build。

疑难解答

代理错误

你可能会看到以下错误：

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5001 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

如果看到此问题，很可能前端在后端之前启动。看到后端命令提示符启动并运行后，只需在浏览器中刷新 Angular 应用即可。

验证端口

如果天气数据未正确加载，可能还需要验证端口是否正确。

转到 ASP.NET Core 项目中的 launchSettings.json 文件（在 Properties 文件夹中）。从 applicationUrl 属性获取端口号。

如果有多个 applicationUrl 属性，请使用 https 终结点查找一个。它看起来应该类似于 https://localhost:7049。
然后，转到 Angular 项目的 proxy.conf.js 文件（查看 src 文件夹）。更新目标属性，以匹配 launchSettings.json 中的 applicationUrl 属性。在进行更新时，该值应如下所示：
```
target: 'https://localhost:7049',
```

后续步骤

有关 ASP.NET Core 中的 SPA 应用程序的详细信息，请参阅开发单页应用下的 Angular 部分。链接的文章为项目文件（如 aspnetcore-https.js 和 proxy.conf.js）提供了更多上下文，尽管实现的详细信息因项目模板差异而有所不同。例如，Angular 文件包含在一个单独的项目中，而不是在 ClientApp 文件夹中。

有关特定于客户端项目的 MSBuild 信息，请参阅 JSPS 的 MSBuild 属性。