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开发调试技巧的讲解，但愿对你有所帮助。