Question

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

有两个问题：

1）TypeScript源不再硬编码为源映射中的数据URI，但实际上指向npm中的一些不存在的位置（它实际上是角度git hub源中的一个位置，但不是npm包内的东西）：

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

由于使用--inlineSources选项编译了角度源，因此{I}}文件包含内置原始内容的*.map密钥，因此我追踪到此路径没有任何相关性。所以这不再是问题了。但第二个问题仍然存在。

2）即使我只是从github源复制sourcesContent文件夹，还有第二个问题，即npm包中的modules个文件被编译成js模块语法，在浏览器中还不支持，像SystemJS这样的加载器需要traceur。例如，es6：

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文件创建的现有源地图。

Answer 1

UPD 我已经打开issue，要求在Angular CLI中启用源地图支持。它还讨论了如何在今天启用源映射支持。为框架启用源映射基本上允许调试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

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

Answer 2

最新的角度2使用Webpack而不是SystemJS。两个系统的工作都不同

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

在尝试调试像angular这样的lib时，你必须给Webpack一个提示。意味着您必须配置您的Web包文件。

不确定Angular CLI此支持是否开箱即用。另请参阅Webpack了解调试选项。

很抱歉，我无法继续提供帮助。

如何调试angular2 typescript文件

2 个答案: