angular2タイプスクリプトファイルをデバッグする方法

Question

最新のangular2 npmパッケージでは、タイプスクリプトソースをデバッグする方法がないようです。既存のanswer on stackoverflowとthe article on mediumは古くなっています。私はa github issueを作成しました。それをサポートしてください。

二つの問題があります。

1、それは実際の角度Gitのハブソース内の場所です）活字体源はもはやソースマップ内のデータURIとしてハードコードされているが、実際に（NPMにいくつか存在しない場所を指しているが、 、しかし）NPMパッケージ内部のものではありません。

{ 
    "version":3, 
    "file":"application_ref.js", 
    "sourceRoot":"", 
    "sources":["../../../../modules/@angular/core/src/application_ref.ts"] <------- 

私はこのパスが角度ソースが--inlineSourcesオプションを使用してコンパイルされているので、何のrelevenceを持っていないので、*.mapファイルは内部のオリジナルコンテンツとsourcesContentキーが含まれていることを突き止めました。これはもう問題ではありません。しかし、第2の問題が残っています。

私は単純にgithubのソースから modulesフォルダをコピーする場合でも

2）は、NPMパッケージのjsファイルがes6モジュールのブラウザではまだサポートされていない構文、およびローダーなどにコンパイルされていることである第二の問題があり、 SystemJSは、トレースを必要とします。たとえば、common/index.j：

export { NgLocalization, CommonModule, NgClass, NgFor, NgIf, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe, VERSION, Version, PlatformLocation, LocationStrategy, APP_BASE_HREF, HashLocationStrategy, PathLocationStrategy, Location } from './src/common'; 

しかし、それは最も可能性の高いtscによってtranspiled jsファイル用に作成された既存のソースマップを壊すので、私は、traceurを使用することはできません。

Answer 1

最近の角度2では、SystemJSの代わりにWebpackを使用しています。 どちらのシステムも動作が異なります。

SystemJS必要に応じてソースをロードします。また、ブラウザ内でtypescriptをJSに変換します。 Webpackまずソースからアプリをビルドします。それより速い。あなたのブラウザですべての作業をしてはいけません。

ここで角度のようなlibsをデバッグしようとすると、Webpackにヒントを与える必要があります。ウェブパックファイルを設定する必要があるということです。

Angular CLIがこのサポートを受けているかどうかわかりません。デバッグオプションについてはWebpackもご覧ください。

ご迷惑をおかけいたします。

Answer 2

UPD Angular CLIでソースマップのサポートを有効にするように尋ねて、issueを開いています。また、すでにソースマップのサポートを現在有効にする方法についても説明します。フレームワークのソースマップを有効にすると、基本的にTypeScriptソースをデバッグできます。

Angular CLIはSystem.jsからWebpackに切り替わりました。私は個人的にSystem.jsを嫌いです。ここではSystem.jsの答えはありません。

ソースマップはTypeScriptではなくコンパイル済みのJavaScript用に生成されるため、TypeScriptソースのフレームワーク自体に対してデバッグすることはできません。一方、生成されたコードは簡単に読み込みが可能で、デバッグの目的で十分です。良い新機能は、独自のコードが元のTypeScriptソースにマッピングされることです。

フレームワークと一緒に組み込まれていない限り、TypeScriptソースに対するAngularのソースマップを取得する簡単な方法はないと思います。コンパイルされたJSをデバッグすることが今のところ最高です。

そして今は練習する。角度CLIで新しいアプリを作成します。

$ ng new my-app 

はどこかにブレークポイントを追加します。

// src/app/app.component.ts 
export class AppComponent { 
    title = 'app works!'; 

    constructor() { 
    debugger; 
    } 
} 

スタート開発サーバ：ブラウザで

$ ng serve 

また、オープン、以下のURL：http://localhost:4200/を。ブレークポイントで停止し、スタック内のいくつかのフレームワーク呼び出しに移動します。 JSのデバッグ言っ

は