ウェブサイト検索

Visual Studio 2017でのAngular 5デバッグ:ブレークポイントが機能しない


私はTypeScriptのデバッグで問題に直面しており、ブレークポイントを作動させることに文字通り迷っています。

問題:

私は Visual Studio 2017 で、統合された angular-cli アプリ(現在は互換性があり、もはや webpack 設定ファイルを必要としない)で作業していますが、TypeScript ファイルにブレークポイントを置いても、ブレークポイントがヒットしません。

私は tsconfig.json で "sourceMap: true" ブール値を有効にしました。理論上は、これが唯一編集すべきファイルのはずです。
現在の tsconfig.json の内容は以下の通りです:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "strict": false,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

必要であれば、さらに情報や私のコードを共有できることをうれしく思いますが、実際には以下のCMD/PowerShellコマンドで作成されたAngularアプリをVisual Studio 2017でデバッグしようとするだけで、簡単に問題を再現できます:

dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0
dotnet new angular -o my-new-app
cd my-new-app
cd ClientApp
npm update

質問:
Visual Studio 2017でAngular TypeScriptのデバッグを有効にするために、正確に何を設定すべきか教えてもらえますか?

よろしくお願いします!

重要な編集

Visual Studioのtsデバッグの代替
新しいAngular 6+アプリでは、webpack.configファイルがなくてもChromeの開発者ツールを使ってデバッグが可能なようです。
tsconfigでsourceMap:trueを有効にすると、.tsファイルもデバッグできます。
ここで読んだところによると、"webpack"のコードセクションでそれらを見つけることができます。

Visual Studioはどうですか?
新しいVisual Studioのアップデートの1つでスクリプトデバッグが可能になりましたが、最新のAngular CLIやAngularバージョンではまだ動作していません。

...そしてVS Codeはどうですか?
コメントでLiebster Kameradに感謝すると、VS Codeでブレークポイントを有効にする方法をここで見つけることができます

質問はそのままにしておきます。次のアップデートで何とか解決することを期待しています。

関連記事