web-dev-qa-db-ja.com

Angular 6ライブラリをどのようにデバッグしますか

Angular 6 Libraryを書いているので、TypeScriptにステップインする方法がわかりません。

ng new mylibappを使用してアプリを生成しました

次に、ng g library @abc/cool-lib -p abcを使用してライブラリを追加しました

実行するとき：ng build @abc/cool-lib

mylibapp/dist/abc/cool-libフォルダーにコードを生成します

このコードをデバッグし、mylibapp/projects/abc/cool-lib/src/libにあるtsファイルにブレークポイントを設定するにはどうすればよいですか

angulartypescriptangular-cliangular-cli-v6ng-packagr
12
JoAMoS

ライブラリのAngular CLIドキュメント を見ると、次のことが言及されています：

代わりに、いくつかの同様のセットアップでは、tsconfig内でソースコードへのパスを直接追加します。これにより、アプリの変更がより速く表示されます。

したがって、そこから、実際にはtsconfig.jsonを更新して、ビルドされたライブラリの代わりにローカルソースコードを参照できます。

ビルドされたプロジェクトの使用：

 "paths": {
  "abc": [
    "dist/abc"
  ]

実際のソースを使用するように変更します。

"paths": {
  "abc": [
    "projects/abc/src/public_api"
  ]

ドキュメントで言及されているように欠点があります：

しかし、それを行うのは危険です。これを行うと、アプリのビルドシステムもライブラリをビルドします。ただし、ライブラリはアプリとは異なるビルドシステムを使用してビルドされます。

しかし、私の場合、Chrome=で対話的にデバッグできるようにするだけでなく、再構築せずにすぐに変更を確認できます。このワークフロー以外のビルド済みプロジェクトで完全にテストしています。

10
Andy Kachelmeier

セットアップは（Angular 7、おそらく6.2を既に使用）を使用して）非常に簡単です：

  • 監視モードでライブラリをコンパイル：ng build [mylib] --watch
  • ベンダーのソースマップでアプリを起動します：ng serve --vendor-source-map

ライブラリソースが利用可能になりました（Chrome/Firefox/...開発ツール）。

Angular 7.2の更新：

ng serve ：の--vendor-source-mapは--sourceMap=true|falseに置き換えられました：

  • ng serve --source-map=true

さらなる更新：--source-map=true残念ながら、期待した効果が得られませんでした。 関連する質問 があります。

4
Markus Pscheidt

Angular CLI v。6.1 以降、デバッグ時にライブラリのTypeScriptソースにステップインできるスイッチ--vendor-source-mapを使用できます。ng build @abc/cool-lib --vendor-source-mapを試して、それが役立つかどうかを確認してくださいまた、ng serveでスイッチを使用することもできます。私の場合、ライブラリをホストしているアプリケーションでng serveを実行すると、ライブラリのソースマップが含まれます。これにより、tsconfig.jsonを編集する必要もなくなります。

4
Scott Grodberg

@ angular/cli v7では、angular.jsonファイルに次の設定を追加して、ng serveを使用して提供するときにライブラリのソースマップを有効にできます。

{
  "projects": {
    "your-app": {
      "architect": {
        "serve": {
          "options": {
            "vendorSourceMap": true
2
Ravi Mashru