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開發調試技巧的講解，但願對你有所幫助。