私の目標は、依存関係のソース コード (node_modules ディレクトリにある) をデバッグできるように angular2 プロジェクトをセットアップすることです。より正確には、chrome dev ツールで実際の typescript ファイル (自分の typescript ファイルではなく、依存関係のファイルを意味する) でデバッグ (ブレークポイントの設定など) できるようにしたいと考えています。これは、依存関係にソース マップが含まれている場合に可能です。
angular-cli を使用しようとしましたが、明らかにこれはまだ可能ではありません。Angular 2 typescript ソース コードへのデバッグを参照してください。
そこで、基本的なangular-seedプロジェクトから始めて、それを調整しようとしました. このプロジェクトは webpack を使用しており、webpack.config.js に以下を追加しました。
...
module: {
preLoaders: [
{
test: /\.js$/,
loader: 'source-map-loader'
}
],
...
これは実際には rxjs のような一部のパッケージでは機能しますが、@angular パッケージでは機能しません。これは、バンドルされたファイル (例: core.umd.js など) にソース マップが含まれていないためです (Angular 2 チームはこのバグのためにそれらを削除しました)。ただし、バンドルされたファイルのみがソース マップを欠いており、src フォルダー内のバンドルされていないファイルにはソース マップが含まれています。バンドルされたファイルの代わりにバンドルされていないファイルを使用するように webpack に指示するにはどうすればよいですか?
この記事では、同じ問題について説明および解決していますが、彼は SystemJS を使用しています。webpackでどのように解決できますか?