调试Angular 2 Typescript，错误指向生成的Javascript文件

Question

当我在Typescript中开发Angular 2应用程序时，它会编译为Javascript文件。浏览器中的错误指向.js文件中的行号，例如：

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

但是我想要的是指向实际.ts文件中的行的指针。

相应的源图文件就位，生成的.js文件指向mapfiles，例如：

//# 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

映射问题的原因如下。当我第一次运行我的项目时，它有一个我在其中制作的错误（如问题所示）。由于此错误，无法加载源图。

当我删除错误并再次加载项目时，映射就完成了。在此之后，当我再次介绍错误时映射有效。