如何调试 angular2 打字稿文件

2023-12-09

似乎使用最新的 angular2 npm 包无法调试打字稿源。现存的在 stackoverflow 上回答 and 媒体上的文章已经过时了。我已经创建了一个 github 问题,请支持。

有两个问题:

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)即使我只是复制modules从github来源的文件夹中,还有第二个问题,那就是jsnpm包中的文件被编译成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.


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

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

own code framework code

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何调试 angular2 打字稿文件 的相关文章

随机推荐