如何调试 angular2 typescript 文件

Question

似乎使用最新的 angular2 npm 包无法调试打字稿源。现有的 answer on stackoverflow 和 the article on medium 已过时。我创建了a github issue，请支持。

有两个问题：

1) TypeScript 源不再被硬编码为源映射中的数据 URI，而是实际上指向 npm 中一些不存在的位置（它实际上是 angular git hub 源中的一个位置，但不是 npm 包中的某个位置）：

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

我发现这条路径没有相关性，因为角度源是使用--inlineSources 选项编译的，因此*.map 文件包含sourcesContent 键，其中包含原始内容。所以这不再是问题了。但第二个问题仍然存在。

2) 即使我只是从 github 源中复制 modules 文件夹，还有第二个问题，即 npm 包中的 js 文件被编译成 es6 模块语法，浏览器尚不支持像 SystemJS 这样的加载器需要 traceur。例如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';

但我不能使用traceur，因为它很可能会破坏为js 文件创建的现有源映射，这些文件由tsc 转译。

Answer 1

UPD 我打开了issue，要求在 Angular CLI 中启用源映射支持。它还讨论了如何在今天启用源映射支持。为框架启用源映射基本上将允许调试 TypeScript 源。

Angular CLI 从使用 System.js 切换到 Webpack，我个人不喜欢 System.js，所以这里没有对 System.js 的回答。

您不能针对框架本身的 TypeScript 源进行调试，因为源映射是为编译后的 JavaScript 而不是 TypeScript 生成的。另一方面，生成的代码易于阅读，并且足以用于调试目的。好消息是您自己的代码将源映射到原始 TypeScript 源。

而且我认为没有一种简单的方法可以针对 TypeScript 源获取 Angular 的源映射，除非它们与框架一起构建。所以你现在能得到的最好的就是调试编译好的 JS。

现在开始练习。使用 Angular CLI 创建新应用：

$ ng new my-app

在某处添加断点：

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

  constructor() {
    debugger;
  }
}

启动开发服务器：

$ ng serve

然后在浏览器中打开以下 URL：http://localhost:4200/。观察它在断点处停止并转到堆栈中的一些框架调用。

Answer 2

最新的 Angular 2 使用 Webpack 代替 SystemJS。 两个系统的工作方式不同。

SystemJS 在需要时加载源。还将打字稿转换为浏览器内的 JS。 Webpack 首先从源代码构建应用程序。那更快。所有的工作都不能由您的浏览器完成。

当在这里尝试调试像 angular 这样的库时，你必须给 Webpack 一个提示。意味着你必须配置你的 webpack 文件。

不确定Angular CLI 是否支持开箱即用。另请查看Webpack 以获取调试选项。

对不起，我帮不上忙。