Visual Studio CodeでAngular2 Typescriptをデバッグ＆実行する？

質問

Visual Studio CodeでAngular2 Typescriptをデバッグ＆実行できますか？

私はVSコードでAngular2 Typescriptアプリケーションをデバッグしようとしています。 https://angular.io/guide/quickstart

どなたか、VS コードからデバッグ & 実行する手順を教えていただけませんか。

どのように解決するのですか？

いろいろと調べた結果、次のような方法がありました。

始める前に、VSコードの最新バージョンを確認してください。最新版の確認は、「ヘルプ > アップデートの確認」または「バージョン情報」で行うことができます。

1. Debugger for Chrome」という拡張機能をインストールします。インストールが完了したら、VSコードを再起動します。

2. デバッグウィンドウに移動し、Chromeでlaunch.jsonを開いてください。

3. Launch.jsonの設定欄には、以下の設定を使用します。

   {
       "name": "Launch localhost with sourcemaps",
       "type": "chrome",
       "request": "launch",
       "url": "http://localhost:3000/Welcome",
       "sourceMaps": true,
       "webRoot": "${workspaceRoot}"
   }
   
   

4. tsconfig.jsonで、"sourceMap": trueがあることを確認します。

これで、デバッグ環境の設定は完了です。 さて、デバッグを開始する前に、既存の Chrome.exe インスタンスがすべて終了していることを確認します。タスクマネージャーから確認するか、DOS コマンド 'killall chrome' を使用します。

1. npm startコマンドを使用し、Chromeをデフォルトブラウザとして、プロジェクトを実行します。

2. アプリケーションが正常に実行されると、ポート番号が表示されます。chromeブラウザからURLをコピーし、上記のurlセクションに貼り付けます。 (注意: アプリケーションでルーティングを使用している場合、URLは上記のようになります。そうでない場合は、index.htmlなどが終了します)

3. さて、typescriptファイル内の好きな場所にブレークポイントを配置します。

4. もう一度、VSコードのデバッグウィンドウに移動して、実行を押してください。 デバッガに接続されたタブ/インスタンスは、以下のようになります。