如何将Angular 9 SPA项目与ASP.NET Core 2.2 MVC项目合并到单个Visual Studio 2017解决方案

我整理这份教程，是因为学习SPA客户端与MVC服务端应用开发的过程中踩了不少坑，希望能帮大家少走弯路。以下步骤改编自Apress出版、Adam Freeman所著《Essential Angular for ASP.NET Core MVC 3（第二版）》第三章，用于指导大家创建单个Visual Studio 2017/2019解决方案，包含名为ClientApp的Angular9前端SPA项目，以及名为ServerApp的ASP.NET Core 2.2 MVC后端API项目（负责数据库访问等服务端逻辑）。

操作前提 #

• 已安装Visual Studio 2017/2019、Node.js、Angular/CLI 9.0及以上版本、.NET Core 2.2及以上版本
• 掌握cmd.exe命令提示符基本使用方法

操作步骤 #

步骤1：创建Angular前端项目 #

使用命令提示符，在自己常用的代码存储目录下创建解决方案文件夹与Angular项目，操作命令如下：

# 以下为VS默认代码存储路径示例，可替换为自己的目录
CD \Users\(你的用户名)\source\repos

# 注意请整行输入，不要因显示换行拆分命令
ng new MyWebSolution –directory MyWebSolution/ClientApp –routing true –style css –skip-tests true –skip-git true

步骤2：启动Angular开发服务 #

cd MyWebSolution/clientapp
npm start

步骤3：验证Angular初始项目 #

看到控制台输出Compiled successfully提示后，访问http://localhost:4200，确认能正常显示Angular默认占位页。

步骤4：在VS中打开项目目录 #

打开Visual Studio，选择「文件>打开>文件夹」，选中刚才创建的MyWebSolution文件夹，即可查看Angular项目的全部文件。

步骤5：修改Angular默认页面 #

将ClientApp/src/app/app.component.html文件内容替换为如下代码：

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

步骤6：验证Angular页面修改 #

再次访问http://localhost:4200，确认Angular页面内容已更新为修改后的占位内容。

步骤7：停止Angular开发服务 #

按Ctrl+C终止当前运行的Angular开发服务。

步骤8：准备MVC项目环境 #

回到MyWebSolution根目录，执行以下命令创建MVC项目文件夹并配置SDK版本：

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

步骤9：创建ASP.NET Core MVC项目 #

dotnet new mvc --language C# --auth None
# 等待项目创建完成

步骤10：合并为同一解决方案 #

在Visual Studio中选择「文件>打开>项目/解决方案」，导航到MyWebSolution/ServerApp文件夹，选中.csproj文件以.NET模式打开项目。之后右键点击解决方案资源管理器顶部的解决方案项，选择「添加>现有网站」，导航到MyWebSolution/ClientApp文件夹后点击「打开」，此时解决方案中会同时显示Angular项目（ClientApp）和MVC项目（ServerApp）。

步骤11：配置ClientApp生成规则 #

右键点击ClientApp项，选择「属性页」，切换到「生成」板块，确认未勾选「将网站作为解决方案的一部分生成」选项，可先勾选再取消勾选确保设置生效，之后点击「应用>确定」保存。

步骤12：保存解决方案文件 #

从菜单栏选择「文件>全部保存」，将解决方案存储在MyWebSolution根文件夹，命名为MyWebSolution.sln，后续开发直接打开该文件即可加载整个解决方案。

步骤13：统一服务端口配置 #

为保证HTTP/HTTPS配置一致，修改ServerApp/Properties/LaunchSettings.json文件中的IIS开发端口：

• 找到iisExpress配置段，修改为如下内容后保存：

"applicationUrl": "http://localhost:5000",
"sslPort": "5001"

步骤14：重生成开发证书 #

避免HTTPS访问报错，执行以下命令重新生成Windows开发证书：

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

步骤15：启动MVC项目测试 #

dotnet watch run

步骤16：验证MVC初始项目 #

打开浏览器访问https://localhost:5001，确认能正常显示MVC默认占位页。

步骤17：添加MVC占位视图 #

按Ctrl+C停止MVC运行时，右键点击ServerApp/Views/Home项，选择「添加>视图」，设置视图名称为Placeholder，选择「空（无模型）」模板后点击「添加」，将以下代码写入空白页面后保存：

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

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

步骤18：修改MVC默认路由 #

编辑ServerApp/Controllers/HomeController.cs文件中的Index()方法返回值，使用刚才新建的视图：

return View("Placeholder");

保存修改后重启MVC运行时：

dotnet watch run

步骤19：安装前后端连通依赖 #

在ServerApp文件夹下安装依赖包，打通Angular与ASP.NET Core MVC的连接：

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

步骤20：配置SPA代理规则 #

在Startup.cs文件的Configure()方法末尾添加如下代码，实现ASP.NET Core代理Angular开发服务：

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

步骤21：同时启动前后端服务 #

选择「文件>全部保存」，分别打开两个命令窗口启动对应服务：

• 在MyWebSolution/ClientApp目录执行：npm start
• 在MyWebSolution/ServerApp目录执行：dotnet watch run

步骤22：验证MVC入口 #

访问https://localhost:5001，确认显示ASP.NET Core MVC的占位内容。

步骤23：验证Angular入口 #

打开新窗口访问https://localhost:5001/app，确认显示Angular的占位内容。

注意事项 #

• 可通过Visual Studio菜单栏或解决方案资源管理器执行清理、重新生成等操作，但不要使用F5或Shift+F5启动运行解决方案
• Angular实时开发服务必须在ClientApp目录下执行npm start启动
• .NET开发托管环境必须在ServerApp目录下执行dotnet watch run启动
• 可自行编写bat批处理脚本，实现自动跳转目录并启动两个开发服务
• 开发时统一访问https://localhost:5001即可使用完整应用功能

内容的提问来源于stack exchange，提问作者Cwinds