如何将 Angular 9 SPA 项目和 ASP.NET Core 2.2 MVC 项目组合成一个 Visual Studio 2017 解决方案？

Posted 2023-04-12

【中文标题】如何将 Angular 9 SPA 项目和 ASP.NET Core 2.2 MVC 项目组合成一个 Visual Studio 2017 解决方案？

【英文标题】：How can I combine an Angular 9 SPA project and an ASP.NET Core 2.2 MVC project into a single Visual Studio 2017 Solution?

【发布时间】：2021-12-29 15:33:09

【问题描述】：

我提供这个问题/答案是因为我在尝试学习 SPA 客户端和 MVC 服务器应用程序时遇到了挫折。 这些说明摘自 Adam Freeman (Apress) 的“ASP.NET Core MVC 3 的基本 Angular - 第二版”的第 3 章 描述如何创建单个 Visual Studio 2017（或 VS2019）解决方案，其中包含一个名为“ClientApp”的 Angular 9 网站项目作为 前端 SPA，以及一个名为“ServerApp”的 ASP.NET Core 2.2 MVC 项目作为用于数据库访问的后端 API 服务器项目。

假设您已经安装了 Visual Studio 2017（或 2019）、Node.js、Angular/CLI（版本 9+）和 .NET Core 2.2+ 版本并 你知道如何使用“cmd.exe”命令提示符。

第 1 步：使用命令提示符，在 ..\source\repos 目录中创建解决方案文件夹和 Angular 项目：

>  CD \Users\(username)\source\repos  (or some convenient folder)

>  ng new MyWebSolution –directory MyWebSolution/ClientApp –routing true –style css –skip-tests true –skip-git true
    (Note:    make sure to type this as one long command which may wrap on your screen)

第 2 步：使用命令提示符启动 Angular 开发工具：

> cd MyWebSolution/clientapp

> npm start

第 3 步：当您看到“编译成功”时

- browse to http://localhost:4200 to see Angular placeholder content

第 4 步：打开 Visual Studio，选择文件 > 打开 > 文件夹并选择 MyWebSolution 文件夹。您应该会看到新的“ClientApp”项目的内容。

第 5 步：将 ClientApp/src/app 文件夹中的 app.component.html 文件的内容替换为以下内容：

<h2>MyWebSolution</h2>
<span>Angular Content Will Go Here</span>

第 6 步：浏览到 http://localhost:4200 以查看 Angular 占位符内容已更改

第 7 步：按 Ctrl-C 停止 Angular 开发工具窗口

第 8 步：准备 MyWebSolution 文件夹中解决方案的 ASP.NET Core MVC 部分：

> mkdir ServerApp
> cd ServerApp
> dotnet new globaljson --sdk-version 2.2.110    

第 9 步：在 ServerApp 文件夹中，创建 ASP.NET Core MVC 项目

> dotnet new mvc --language C# --auth None

(wait for completion)

第 10 步：在 Visual Studio 中，选择 File > Open > Project/Solution 并导航到 MyWebSolution/ServerApp 文件夹并选择 MyWebSolution.csproj 文件 以 .NET 模式打开项目。然后，右键单击解决方案资源管理器顶部的解决方案项，然后选择添加 > 现有网站。 - 导航到 MyWebSolution/ClientApp 并单击打开按钮。您应该看到您的 Angular 网站 (ClientApp) 和您的 MVC 项目 (SeverApp) 在解决方案中。

第 11 步：在 VS2017 中，右键单击 ClientApp 项，选择 Property Pages，导航到 Build 部分。 确保未选中“将网站构建为解决方案的一部分”。您应该再次打开和关闭它以确保它已关闭， 然后点击 Apply 和 Ok 保存。

第 12 步：从菜单中，选择文件 > 全部保存，将 MyWebSolution 文件夹中的解决方案保存为“MyWebSolution.sln”。使用此文件打开解决方案 用于开发会议。

第 13 步：更改 ServerApp/Properties 文件夹中 LaunchSettings.json 文件中的 IIS 开发端口以实现 HTTP/S 一致性：

-  edit LaunchSettings.json and change and save the "iisExpress": section to the following:
    
    "applicationUrl": "http://localhost:5000",
    "sslPort": "5001"

第 14 步：重新生成 Windows 开发证书：

> dotnet dev-certs https --clean
> dotnet dev-certs https --trust

第 15 步：构建并运行 ASP.NET Core MVC 项目：

> dotnet watch run

第 16 步：打开浏览器，访问 https://localhost:5001，应该会看到 MVC 占位符内容

第 17 步：使用 ctrl-C 停止 MVC 运行时，然后通过右键单击 ServerApp/Views/Home 项将 MVC Razor 占位符页面添加到 ServerApp 文件夹 并选择添加 > 查看。将视图名称设置为“占位符”，选择“空（无模型）”模板并单击添加。将以下内容添加到 空白页并保存：

 @
    ViewData["Title"] = "Placeholder";
 

 <h2>MyWebSolution</h2>
 <span>ASP.NET Core MVC Content Will Go Here</span>

第 18 步：通过编辑并将 ServerApp/Controllers/HomeController.cs 中 Index() 操作结果的内容更改为：

  return View("Placeholder");

(be sure to save your changes and restart the dotnet runtime)
> dotnet watch run

第 19 步：通过将包添加到 MyWebSolution/ServerApp 文件夹，连接 Angular 和 ASP.NET Core MVC 应用程序：

> dotnet add package Microsoft.AspNetCore.SpaServices.Extensions --version 2.2  

第 20 步：通过 ASP.NET Core 管理 Angular 服务器，方法是将以下内容附加到 Startup.cs 文件的 Public Void Configure() 方法：

    app.UseSpa(spa =>
        
            spa.Options.SourcePath = "../ClientApp";
            spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
        );

步骤 21：选择 File > Save All 并使用命令窗口启动 NPM 客户端和 dotnet 开发服务器：

- in MyWebSolution/ClientApp:   npm start

- in MyWebSolution/ServerApp:   dotnet watch run

第 22 步：浏览到 https://localhost:5001 - 您应该会看到 ASP.NET Core MVC 占位符

第 23 步：打开另一个浏览器窗口并浏览到 https://localhost:5001/app - 您应该会看到 Angular 占位符

 Note: You can clean, rebuild and build the complete solution from the Visual Studio menu
  or from the solution item in the Solution Explorer,
  but you should not run or start the Solution by using F5 or Shift-F5.

  Start the Angular Live Development server ("npm start")
  in the ../clientapp folder.

  Start the DotNet Development Hosting environment in
  the ../serverapp folder ("dotnet watch run").

  You can make *.bat scripts to move to the two project folders
  and start the two development servers.

  Browsing to https://localhost:5001 starts your application.

【参考方案1】：

对我来说，上述书籍是学习如何将 SPA/MVC 应用程序组合成一个 Visual Studio 解决方案的最简单方法。作者还描述了使用 Visual Studio Code 作为代码编辑器。这也应该适用于 VS2019 和 .NET Core 3.0，因为上面描述的 Adam Freeman 书籍使用这些版本。

【讨论】：

编辑了我原来的答案。