如何调试angular2打字稿文件 [英] How to debug angular2 typescript files

问题描述

使用最新的angular2 npm软件包似乎无法调试打字稿源.现有有关stackoverflow的答案和有关该文章的文章媒体已过时.我创建了一个github问题，请支持.

It seems that with the latest angular2 npm package there is no way to debug typescript sources. Existing answer on stackoverflow and the article on medium are outdated. I've created a github issue, please support it.

有两个问题:

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

1) TypeScript sources are no longer hardcoded as data URI inside source maps, but are actually point to some non-existent location in npm (it's actually a location in angular git hub sources, but is not something inside npm package):

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

我已经找到了该路径，因为角度源是使用--inlineSources选项编译的，因此*.map文件包含sourcesContent键，其中包含原始内容.因此，这不再是问题.但是第二个问题仍然存在.

I've tracked down that this path has no relevence since angular sources are compiled using --inlineSources option and so the *.map files contain the sourcesContent key with original content inside. So this is not a problem anymore. But the second problem remains.

2)即使我只是从github上复制modules文件夹，也存在第二个问题，即npm包中的js文件被编译为es6模块语法，浏览器尚不支持而诸如SystemJS之类的加载器则需要traceur.例如，common/index.j:

2) Even if I simply copy modules folder from github sources, there is a second problem, which is that js files in npm package are compiled into es6 module syntax, which is not supported yet in browsers and a loader, like SystemJS, requires traceur. For example, 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，因为它很可能会破坏为tsc编译的js文件创建的现有源映射.

But I can't use traceur, since it most likely break existing source maps created for js files transpiled by tsc.

推荐答案

UPD 我已经打开

UPD I've opened issue asking to enable source map support in the Angular CLI. It also discusses how you can enable source map support already today. Enabling source maps for the framework will essentially allow to debug TypeScript sources.

Angular CLI从使用System.js切换到Webpack，我个人不喜欢System.js，因此在这里对System.js没有答案.

Angular CLI switched from using System.js to Webpack and I personally dislike System.js, so no answer for System.js here.

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

You can't debug against TypeScript sources of framework itself, because source maps are generated for compiled JavaScript, not TypeScript. On the other hand generated code is easily readable and it's pretty enough for debugging purposes. The good new is that your own code will be source mapped to original TypeScript sources.

我不认为有一种简单的方法可以针对TypeScript源获取Angular的源映射，除非它们是与框架一起内置的.因此，现在最好的方法是调试编译的JS.

And I don't think there is an easy way to get source maps for Angular against TypeScript sources, unless they are built in together with framework. So the best you can get now is debugging compiled JS.

现在开始练习.使用Angular CLI创建新应用:

And now to practice. Create new app with 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/.观察它在断点处停止并转到堆栈中的一些框架调用.

And open following URL in your browser: http://localhost:4200/. Observe it stopping at the breakpoint and go to some framework calls in the stack.

这篇关于如何调试angular2打字稿文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！