"dotnet new angular"で作成されたアプリケーションでVSCodeのtypescriptをデバッグできない

Question

"dotnet new angular"を使用してプロジェクトを作成すると、Visual Studio 2017でC＃とTypescriptコードの両方をデバッグできます。 、私はC＃をデバッグすることができます。どのTypescript命令にブレークポイントを配置しようとすると、「この文書にはシンボルがロードされていません」と表示されます。 VS 2017では正常に動作するので、Typescriptの設定はOKであるはずです。

VSCodeでプロジェクトを開くと、「ビルドとデバッグに必要なアセットがプロジェクトにありません。追加しますか？」私は「はい」と答え、launch.jsonとtasks.jsonを含む ".​​vscode"フォルダを追加します。デバッガの正しい起動設定を追加していない可能性がありますか？ launch.jsonの唯一の設定は、 ".NET Core Launch（web）"と ".NET Core Attach"です。

Chrome 3.5.0拡張用デバッガがインストールされています。

これは、生成されlaunch.jsonです：

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "name": ".NET Core Launch (web)", 
      "type": "coreclr", 
      "request": "launch", 
      "preLaunchTask": "build", 
      // If you have changed target frameworks, make sure to update the program path. 
      "program": "${workspaceFolder}/bin/Debug/netcoreapp2.0/spa.dll", 
      "args": [], 
      "cwd": "${workspaceFolder}", 
      "stopAtEntry": false, 
      "internalConsoleOptions": "openOnSessionStart", 
      "launchBrowser": { 
       "enabled": true, 
       "args": "${auto-detect-url}", 
       "windows": { 
        "command": "cmd.exe", 
        "args": "/C start ${auto-detect-url}" 
       }, 
       "osx": { 
        "command": "open" 
       }, 
       "linux": { 
        "command": "xdg-open" 
       } 
      }, 
      "env": { 
       "ASPNETCORE_ENVIRONMENT": "Development" 
      }, 
      "sourceFileMap": { 
       "/Views": "${workspaceFolder}/Views" 
      } 
     }, 
     { 
      "name": ".NET Core Attach", 
      "type": "coreclr", 
      "request": "attach", 
      "processId": "${command:pickProcess}" 
     } 
    ] 
} 

Answer 1

それはVSCodeによって生成されたlaunch.jsonファイルに問題でした。 Chromeデバッガの設定を追加する必要がありました。私は同じセッションでC＃とTypescriptの両方をデバッグするために "複合"設定を追加する必要もありました。以下は追加の設定が必要です。 C＃とTypescriptの両方をデバッグするには、 "フルスタック"設定を選択します。

私は、GithubのMicrosoft/vscode-recipesリポジトリのauchenbergの助けを借りて、このソリューションを見つけました。私はこの新しいレシピを追加するプルリクエストを作成しました。 （参照：https://github.com/Microsoft/vscode-recipes/tree/master/Angular-SpaTemplates）

を必要な追加の構成は以下のとおりです。

{ 
     "name": ".NET Core Launch (full)", 
     "type": "coreclr", 
     "request": "launch", 
     "preLaunchTask": "build", 
     // If you have changed target frameworks, make sure to update the program path. 
     "program": "${workspaceFolder}/bin/Debug/netcoreapp2.0/spa.dll", 
     "args": [], 
     "cwd": "${workspaceFolder}", 
     "stopAtEntry": false, 
     "internalConsoleOptions": "openOnSessionStart", 
     "launchBrowser": { 
      "enabled": false 
     }, 
     "env": { 
      "ASPNETCORE_ENVIRONMENT": "Development" 
     }, 
     "sourceFileMap": { 
      "/Views": "${workspaceFolder}/Views" 
     } 
    }, 
    { 
     "type": "chrome", 
     "request": "launch", 
     "name": "Chrome", 
     "url": "http://localhost:5000", 
     "webRoot": "${workspaceRoot}/wwwroot" 
    } 
], 
"compounds": [ 
    { 
     "name": "Full stack", 
     "configurations": [".NET Core Launch (full)", "Chrome"] 
    } 
]