調試Angular 2 Typescript錯誤指向生成的Javascript文件

Question

當我在Typescript中開發Angular 2應用程序時，它將編譯爲Javascript文件。在瀏覽器指向一個行號在.js文件例如爲：

TypeError: Phone.query2 is not a function phone_list.controller.js:5:27)

的錯誤但是我要的是一個指向實際的.ts文件中的行。

相應sourcemap文件是在地方和生成的.js文件指向映射文件例如爲：

//# sourceMappingURL=phone_list.controller.js.map

我試圖在Firefox，Chrome和Webstorm調試。

更新

要重現請按照下列步驟操作：

git clone https://github.com/johnpapa/angular2-tour-of-heroes

安裝NPM包 npm i

在dashboard.component.ts添加以下兩行：

var test:any = null; 
console.log(test.length); 

這應該會引發錯誤。

運行與npm start

在控制檯項目Chrome會顯示：

TypeError: Cannot read property 'length' of null 
    at DashboardComponent.ngOnInit (http://localhost:3000/app/dashboard.component.js:34:37) 

指向.js文件而不是.ts文件

Answer 1

你將不得不爲創建您的地圖代碼，然後例如chrome也會下載打字稿，你會直接在打字稿中看到錯誤和調試。所有的打字稿的編譯器可以做地圖

該文件將被命名爲xyz.map.js

PS：沒有你的代碼包含參考源地圖？

Answer 2

映射問題的原因如下。當我第一次運行我的項目時，它出現了一個錯誤（如問題所示）。由於這個bug，無法加載源地圖。

當我刪除錯誤並重新加載項目時，映射已完成。之後，當我再次引入錯誤時，映射工作。