适用范围: yes Visual Studio no Visual Studio for Mac no Visual Studio Code

在本文中,你将了解如何生成 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.5 版开始推出简化的更新模板。 与上一个模板相比,此模板可在初始解决方案中创建两个项目,并消除了多个配置步骤。 本文介绍使用新模板创建项目的过程。

    确保安装以下内容:

  • 安装了 ASP.NET 和 Web 开发工作负载的 Visual Studio 2022 版本 17.5 或更高版本。 请转到 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 核心(预览版)”。

  • 为项目和解决方案命名,然后选择“创建”。

    创建项目后,解决方案资源管理器应如下所示:

    独立 Angular 模板 相比,可以看到一些用于与 ASP.NET Core 集成的新增和修改文件:

  • aspnetcore-https.js
  • proxy.conf.js
  • package.json(modified)
  • angular.json(modified)
  • app.components.ts
  • app.module.ts
  • 设置项目属性

  • 在解决方案资源管理器中,右键单击 ASP.NET Core 项目,然后选择“属性”。

  • 在“属性”页中,打开“调试”选项卡,然后选择“打开调试启动配置文件 UI”选项。 取消选中“启动浏览器”选项。

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

    在 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 项目。

  • 在解决方案资源管理器中,右键单击 ASP.NET Core 项目,然后选择“添加”>“项目引用”。

  • 选择 Angular 项目并选择“确定”。

  • 在解决方案资源管理器中,右键单击 ASP.NET Core 项目,然后选择“卸载项目”。

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

  • 在 .csproj 文件中,更新项目引用,然后添加 <ReferenceOutputAssembly> 并将值设置为 false

    更新引用后,它应如下所示(替换你自己的项目文件夹和项目名称)。

    <ProjectReference Include="..\angularprojectfolder\angularprojectname.esproj">
        <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
    </ProjectReference>
    
  • 右键单击 ASP.NET Core 项目并选择“重新加载项目”。

  • 在 Program.cs 中,更新 Environment.IsDevelopment 的检查,使其类似以下内容。

    // Configure the HTTP request pipeline.
    if (app.Environment.IsDevelopment())
       app.UseSwagger();
       app.UseSwaggerUI();
       app.UseDefaultFiles();
       app.UseStaticFiles();
    
  • 若要发布,请右键单击 ASP.NET Core 项目,选择“发布”,然后选择与所需的发布场景相匹配的选项,例如 Azure、发布到文件夹等。

    与在 ASP.NET Core 项目中发布相比,该发布过程需要更多时间,因为发布时会调用 npm run build 命令。

    可以使用 Angular 项目属性中的生产环境生成命令修改 npm run build 命令。 若要进行修改,请在解决方案资源管理器中右键单击 Angular 项目并选择“属性”。

    你可能会看到以下错误:

    [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 文件夹中。

  •