ASP.NET Core知多少（6）：VS Code联调Angular + .NetCore

ASP.NET Core知多少系列：总体介绍及目录

1. 引言

最近在看《程序员的成长课》，讲到程序员如何构建技能树，印象深刻。作为一名后台开发的程序员，深感技能单一，就别说技能树了。作为一名合格的后台程序员，至少要掌握一门静态语言，一门动态语言和一门前端语言。静态语言C#算不上精通，动态语言Python也刚刚入门。但前端却是空白，虽说有了解过jquery、bootstrap，但因为项目无所涉及，早已忘得一干二净。

近几年，前端框架大行其道，Web开发已经是一个不容忽视的大趋势，在这个趋势下对前端框架一无所知，显然是要淘汰的。所以决定拾起前端，选择学习Angular来弥补自己的前端空白。计划使用.Net Core + Angular开发一个任务清单。

2. 环境准备

.Net Core已经支持Angular模板，我们只需要使用dotnet new angular -n YourAppName即可创建angualr项目模板。

依次安装：

1. Node.js（默认安装，即可安装NPM）
2. 执行npm install -g @angular/cli，安装angular cli。
3. 开发工具：Visual Studio Code
4. 安装最新.Net Core SDK，目前版本V2.1.101。

3. 创建并启动项目

执行dotnet new angular -n Learning.NetCore.Angular，创建项目后，使用VS Code打开文件夹。项目结构如下图所示。其中ClientApp就是Angular所写的前端部分，实现了前后端分离。

打开后我们需要安装以下几个VS Code的扩展，以便我们顺利开发调试。

稍后，右下角会弹窗提示我们是否需要调试项目，如下图所示。

点击Yes，就会在项目中为我们创建一个.vscode的文件夹。其中包含两个文件，一个是launch.json，一个是tasks.json。其中launch.json用于配置调试相关参数。tasks.json用于配置默认的构建任务。

如果没有弹出上图弹窗，我们也可以按下图步骤添加。

第一次运行时，我们先执行dotnet build来验证项目能否正确构建， 它会恢复npm依赖，可能会耗时几分钟，npm依赖安装完毕后，以后再次运行就很快了。等构建成功，执行dotnet run运行项目。

浏览器访问http://localhost:5000即可看到下图效果。

然后键盘按Ctrl+C停止运行。

4. 项目调试

因为第三步我们已经创建了默认调试配置。直接F5运行，就可以调试.Net Core代码。但是我们该如何联调Angular代码呢？这就是本节的重点了。我们需要修改下我们的launch.json了。

打开launch.json点击添加配置，然后选择Chrome:Launch，就会添加在配置文件中添加一个节点，如下所示：

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}"
},

我们需要做相应修改。因为.Net Core项目默认绑定端口为5000，所以我们要将上面url的端口号改为5000。并映射webRoot到wwwroot目录下。同时我们要启用sourceMaps。修改后如下所示：

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:5000",
    "webRoot": "${workspaceFolder}/wwwroot",
    "sourceMaps": true
},

至此我们成功添加一个任务用来启动Chrome，来调试我们的angular。需要简单三步走：

1. 终端执行dotnet run，运行项目
2. 切换到debug按钮，选择Launch Chrome配置，F5运行。
3. 断点ts文件。

步骤如下图所示：

但是这个时候我们仍然无法做到联调。我们需要要先启动项目，再选具体的某个调试配置进行调试。即同时只能调试Angualr和.NetCore中的一个。那如何二者联调？？？

5. 联调Angualr&&.NetCore

同样我们还是要修改launch.json，添加一个compounds配置节点。这个节点允许我们同时启动多个调试任务。配置如下：

"compounds": [
        {
            "name": ".Net Core + Chrome",
            "configurations": [".NET Core Launch (web)","Launch Chrome"]
        }
    ],
"configurations": [
//省略
]

最终的配置如下：

"compounds": [
    {
        "name": ".NetCore+Chrome",
        "configurations": [ ".NET Core Launch (web)", "Launch Chrome" ]
    }
],
"configurations": [
    {
        // chrome debugger
    },
    {
        // .Net Core Launch (web)
    },
]

这个配置很简单，就是把我们刚才配置的调试任务组装在一块即可。

回到调试界面，选择.NetCore+Chrome，F5运行，就可以同时在angular和.net core代码中断点并调试。如下图所示：

细心的你可能会发现，通过这种方式虽然可以完成联调，但还是有点小瑕疵。两个调试任务会分别启动一个网页窗口。那有没有办法解决呢？有的，我们再添加一个.Net Core Launch (console)的调试任务，这个调试任务就不会启动网页窗口。然后再将.Net Core Launch (console)和Launch Chrome组装在一起即可。具体配置看下图：

6. 最后

本文仅是VS Code开发调试技巧的讲解，希望对你有所帮助。