web-dev-qa-db-ja.com

angle-cli webpackを使用してangularアプリをデバッグするには？

以前に[email protected]を使用していましたが、angular-cli @ webpack beta11に更新しました。多くのカスタム変更の後、動作するようになりました。

唯一のことは、今ではwebstormとangularデバッガを使用してng serveを使用してtsファイルを取得できないため、デバッガをchrome appでデバッグできないことです。 [email protected] Jetbrains Pluginを使用してアプリをデバッグするのは非常に簡単でした。

Webstormでangularアプリをデバッグし、ng serveを使用してChromeデバッガーをデバッグするにはどうすればよいですか？

intellij-ideaangulartypescriptgoogle-chrome-devtoolsangular-cli
46
geronimo678

角度/ CLIでデバッグする方法

新しいangle/cliバージョンはwebpackを使用しており、tsのファイルを以前のdistのようなローカルディレクトリにコンパイルしません（ベータ1.0.0-beta.10まで）。現在では、メモリのようなアプローチを使用しています。

ただし、tsファイルは[ソース]タブのChrome Developer Toolsにあります。

（新規）angular/[email protected]以降のソリューション

注意：このソリューションは、バージョン1.0.0-beta.26および1.2.1でテストされました。

注意：この例では、4200の代わりにポート5321を使用しました。ポートを使用してください。

Chrome開発者ツールを使用したデバッグ

Ng serve（npm startでも使用）の実行中、ソースはChrome Developer Toolsセクション： "webpack：//"で見つけることができます：

src destination in Chrome Developer Tools "Sources" section

デバッグAngular 2 JetBrains IDEを使用した角度/ CLIのアプリ

Webstorm/PHPStormの実行/デバッグ構成を次のように編集するだけです。

  1. プロジェクトディレクトリのリモートURLパスをwebpack://.に設定します
  2. SrcディレクトリのリモートURLパスをwebpack://./srcに設定します

IDE Configuration

（旧）[email protected]のソリューション

Chrome開発者ツールを使用したデバッグ

Ng serve（npm startでも使用）の実行中、ソースはChrome Developer Toolsセクション： "webpack：//"で見つけることができます：

The destination of the ts files in the developer tools

デバッグAngular 2 JetBrains IDEを使用したangle-cli @ webpackを使用したアプリ

Webstorm/PHPStormの実行/デバッグ構成を次のように編集するだけです：プロジェクトディレクトリのリモートURLパスを

webpack：////Users/...FULL_PATH .. // Mac OSXで

または

webpack：/// C：/...FULL_PATH .. // Windowsの例

注意：Windowsでは3つのスラッシュのみが必要で、Macでは「webpack：」の後に4つのスラッシュが必要です。

http：// localhost：4200/main.map に移動してパスを確認し、「。ts」ファイルを検索することもできます。このファイルのパスを簡単にコピーして、IDE構成ダイアログに貼り付けることができます。

enter image description here

[〜＃〜] edit [〜＃〜]：おそらく、srcフォルダにも「/ src」を追加してパスをマッピングする必要があるでしょう。ありがとう@ born2net

楽しんで。

53
geronimo678

うまくいきました。rootとsrcの両方をマップする必要があります。こちらをご覧ください：

うまくいけば、それが誰かを助ける、

enter image description here

デバッガーがブレークポイントを逃すことがあるため、ブレークポイントの直前にalert（ 'foo'）または; debuggerコードを追加してください。

tx

新しいcliにjspmプロジェクトを追加して変換しますAngular 2 Kitchen sink： http://ng2.javascriptninja.io and source @ https：/ /github.com/born2net/ng2Boilerplate よろしく、

ショーン

13
born2net

2017年の回答：angular-cli: 1.0.0-beta.26 node: 6.9.2 os: darwin x64

これに問題がある場合は、デバッガーのScriptsタブに移動し、表示内容に従ってURLマッピングを調整してください。

Angular-cliの私のバージョンは物事を異なる方法でマップしたため、他の答えは私を助けませんでした。 enter image description here

4
the bug

angularアプリケーションをデバッグするために、Webブラウザー用の開発ツール拡張機能であるAuguryを使用できます。

インストールできるリンクは次のとおりです。

https://augury.angular.io/

このツールは、アプリケーションのルーティングの階層、モジュールとコンポーネントの階層、および各コンポーネントの依存性注入の概要を表示するのに非常に役立ちます。

上記の説明を示す、私のプロジェクトの注入グラフを次に示します。

enter image description here

1
Adnan Abdul Khaliq

上記のソリューションでは、IntelliJを使用する場合、angularコンポーネントのHTMLファイルにブレークポイントを設定できません。これはChromeでのみ可能です。これが不可能な理由がわかりません。 IntelliJで。

0
Axel

最終的に私を助けたのは、/の後に追加のwebpack:///（スラッシュ）を追加して、3ではなく4にすることでした。デフォルトでは、3つのスラッシュがありました

Forward slash

remote URLは、webpack:////スキーマを除き、左側と同じ親ディレクトリを指します。

また、頻繁に提案されるようにTSコンパイラを有効にする必要はありません。

  • マックOS
  • Angular-CLI 2.4.1
  • WebStorm 2016.3
0
Vadimo