调试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，无法加载源地图。

当我删除错误并重新加载项目时，映射已完成。之后，当我再次引入错误时，映射工作。