angular - 如何调试 angular2 typescript 文件

Question

最新的 angular2 npm 包似乎无法调试 typescript 源代码。现有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"] <-------

我已经追踪到这条路径没有相关性，因为 Angular 源是使用 --inlineSources 编译的选项等等 *.map文件包含 sourcesContent里面有原始内容的 key 。所以这不再是问题了。但第二个问题仍然存在。

2) 即使我简单地复制 modules来自 github 源的文件夹，还有第二个问题，即 js npm 包中的文件被编译成 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 中启用源映射支持。它还讨论了如何在今天启用源 map 支持。为框架启用源映射将实质上允许调试 TypeScript 源。

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

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

而且我认为没有一种简单的方法可以获取 Angular 与 TypeScript 源的源映射，除非它们与框架一起构建。所以你现在最好的办法就是调试编译后的 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/ .观察它在断点处停止并转到堆栈中的一些框架调用。