web-dev-qa-db-ja.com

Angular 2CLIプロジェクトでchrome Web開発者ツールを使用）に表示されないTypescriptファイル

私はangular2CLI（ember cli）を使用してTypeScriptプロジェクトを生成しました。 Chromium WebDeveloperツールを使用してデバッグしています。開発者ツールの設定で「JavaScriptソースマップを有効にする」を選択しました。ソースビューに.jsファイルと.tsが表示されます。ただし、.ts（TypeScript）ファイルを選択すると、空として表示されます。つまり、ファイルが見つからないようです。

状況を示すスクリーン印刷：

enter image description here

.jsファイルを選択すると、canのテキストが表示されます。

.tsファイルはnotdistディレクトリにコピーされており、これは私には問題のように思えますが、私は 他の場所の例）を見てきました 典型的なangular2 cli dist構造を示しており、.tsファイルもありません。

ソースマッピングが有効になっていることを示す「tsconfig.json」の関連部分：

 1   "compileOnSave": false,                                                                            
  2   "compilerOptions": {                                                                               
  3     "declaration": false,                                                                            
  4     "emitDecoratorMetadata": true,                                                                   
  5     "experimentalDecorators": true,                                                                  
  6     "mapRoot": "",                                                                                   
  7     "module": "system",                                                                              
  8     "moduleResolution": "node",                                                                      
  9     "noEmitOnError": true,                                                                           
 10     "noImplicitAny": false,                                                                          
 11     "outDir": "../dist/",                                                                            
 12     "rootDir": ".",                                                                                  
 13     "sourceMap": true,                                                                               
 14     "sourceRoot": "/",                                                                               
 15     "target": "es5"                                                                                  
 16   },

js.mapファイルは生成され、distディレクトリの隣にあります.jsファイル。

マッピングファイルの例（一部）：

{"version":3,"file":"app.js","sourceRoot":"/","sources":["app.ts"],"names":[],"mappings":";;;;;;;;;;;;;YAGA,mB

私はもう試した：
1）.tsファイルをsrcからdistにコピーします。
2）app.js.mapファイルを手動で編集するさまざまな試み（例：sourceRootおよびsources） 。

Js.mapファイルで「/」が何を指しているのかは明確ではありません。プロジェクトのsrcディレクトリまたはdistディレクトリですか。 .js.mapファイルを編集する場合、それを取得するためにブラウザーを更新する必要がありますか？

基本的な問題は、src dirでtsファイルを探すことだと思います。これは、ブラウザーの範囲外です（ "../src"にあるため）。

Chromiumは、tsファイルのパスを「 http：// localhost：4202/app/cpp-scenes.ts "」と表示します。しかし、そこに.tsファイルを置くと、サイコロはありません。

これがjsマッピングの問題なのか、Angular 2の問題なのか、Angular2 CLIの問題なのか、TypeScriptの問題なのか）はわかりません。

コンソールに「blah.tsの52行目のエラー」と表示されるのは本当に苦痛ですが、そこにジャンプしてブレークポイントなどを設定することはできません。

Angular2 CLIプロジェクトでソースマッピングを機能させることができた人は他にいますか？

typescriptangularangular-cli
10
vt5491

私はこれを機能させることができました。 angular CLI srcフォルダーをワークスペースに追加する必要があります。そうすると、.tsファイルの1つに「ネットワークリソースへのマップ」が作成されます。

注：この例では、クライアントとサーバーが同じマシンで実行されている場合を想定しています。クライアントがWindowsマシン上にあるが、サーバーがLinuxで実行されている場合など、クライアントマシンでは、 LinuxサーバーのソースディレクトリをWindows共有としてマウントする および次に、次のようなものを指定します

\\192.168.1.134\myShare\myProject\src\client

ワークスペースフォルダとして。

私は最近これをしなければなりませんでした、そしてそれはもう少し複雑ですが、それは基本的にローカルの場合と同じように機能します

プロセス全体のスクリーンショットを撮ったので、これらを表示するだけでおそらく最も簡単です。

  1. distディレクトリ（ngが提供するディレクトリに対応する）ディレクトリの下にあるtsファイルの1つを選択しますは）から提供されており、[フォルダをワークスペースに追加]を選択します。

screen 1

  1. Src/clientフォルダを選択します： enter image description here

  2. 後続のプロンプトに「許可」と言って、開発ツールがsrcディレクトリにアクセスできるようにします。 enter image description here

  3. SrcフォルダーがDevToolsソースの下に表示されていることを確認します。これで、すべてのtsファイル（追加したファイルだけでなく）を参照できますが、設定したブレークポイントは、「マッピングを確立」するまで有効になりません。 enter image description here

  4. 次の2つのスクリーン印刷に示すように、マッピングを有効にできます。 enter image description here

適切なマッピングを選択し、それをクリックして有効にします enter image description here

これで、.tsファイルにブレークポイントを設定し、エラーメッセージを.tsソースにドリルダウンできます。

基本的なトリックは、ソースtsファイルディレクトリをChromeに手動で追加する必要があることです。これは、ファイルがサービングディレクトリの下にないためです。マッピングは、手動で削除するまで有効です。 .tsファイルを右クリックして[ネットワークマッピングの削除]を選択するか、ブラウザを閉じるまで（ただし、更新時にマッピングは保持されます）

10
vt5491

前書き：

私は2016-06-04に投稿された回答の元の投稿者およびサプライヤーです。

私は最近、これを機能させるためのより簡単な方法を発見しました。私の元の答えはまだ機能し、一部の人々はそれを好むかもしれないので、私はこれを2番目の答えとして投稿しています。ただし、これから説明する新しい方法の方が少し簡単だと思います。

ソリューションの概要：

基本的に、すべてを右クリックする代わりに、DeveloperTools-> Settings-> Workspaceメニューですべてを設定できます。私の元の回答を右クリックすることは、基本的にこのワークスペースフォームに入力するもう1つの方法です。

  1. 次のように、DeveloperTools-> Settingsダイアログに移動します。

enter image description here

  1. 次に、ワークスペースセクションに移動し、ローカルサーバーソリューションまたはリモートサーバーソリューション次に説明します。

ローカルサーバーソリューション：

サーバーとブラウザが同じマシンで実行されている場合のスクリーン印刷は次のとおりです。

  1. ワークスペースダイアログから、プロジェクトの「src/client」ディレクトリと、「/」へのマッピングを追加します。サーバー（「ngserve」）とブラウザーが同じマシン上にある場合の外観の例を次に示します。

enter image description here

リモートサーバーソリューション：

サーバーとブラウザが異なるマシンを実行している場合のスクリーン印刷は次のとおりです。

  1. サーバーがLinuxで実行されているが、ブラウザーがWindowsなどの別のマシンで実行されている場合は、LinuxでSamba共有を作成し、それをWindowsのドライブとしてマウントできます。

Windowsコマンドからプロンプト（実際にはgit bash Shell）：

>$ net view  
Server Name            Remark
-------------------------------------------------------------------------------  
\\VT-VIRTUAL      vt-virtual-machine server (Samba, Linux Min  
The command completed successfully.

>$ Net Use l: '\\vt-virtual\vtstuff'
  1. 次に、ワークスペースを次のように設定します。 enter image description here

結論：

この方法で行うと、ブラウザのサイクル全体で情報が保持されるため、1回だけ行う必要があります。おそらく、2016年7月30日に投稿した人は、「箱から出してすぐに」機能すると言っていましたが、どういうわけか、このワークスペースフォームはすでに設定されていました。

これはChromeデベロッパーツールのセットアップの問題であり、Angular2またはAngular2 CLI。ソース（.ts）ファイルはランタイム（dist）ディレクトリで直接利用できないため、angular2CLIを使用する人はこのワークスペースマッピングを行う必要があります。

4
vt5491

Angular CLIはWebpackを使用し、すべてのTypeScriptファイルはそのsrcディレクトリにあるため、デバッガーステートメントを使用せずにブレークポイントを設定できるようです。

enter image description here

3
user1854203

問題が何であるかはわかりませんが、私はそれに遭遇しませんでした。それは箱から出してすぐに機能し、複雑な5ステップのプロセスは必要ありません。

。tsファイルは、/ distフォルダーにコピーされないため、コピーしないでください。コピーされるのは、ソースフォルダーへの参照を含む。mapファイルです。 Chrome開発者ツールは、すべての。tsファイルを[ソース]タブ-オレンジ色のフォルダーの下に表示します。

「ngserve」を実行し、 http：// localhost：42 を参照して、開発者ツールを開く以外に何もしませんでした。リストされている.tsファイル（オレンジ色のフォルダーにリストされている）の1つを開いたり、ブレークポイントを設定したりできます。

1
Rick O'Shea