如何在 angular-meteor 中调试打字稿

Question

我遵循了 Angular2 中社交应用程序的 angular-meteor 教程。它基本上可以工作（经过一些手动步骤修复包依赖性等），但是，我无法在 Chrome Dev Tools 中调试客户端代码。当我导航到我的 *.ts 文件的源代码时，我看到的都是

module.export("default",exports.default=("<div> <ul> <li *ngFor=\"let party of parties\"> {{party.name}} <p>{{party.description}}</p> <p>{{party.location}}</p> </li> </ul> </div>"));

开发工具中的其他奇怪的东西：我的 app.ts 是空白的。我看到 html 文件带有 !raw 后缀....（例如 app.html!raw）。 !raw 后缀是什么，是什么原因造成的？

如何调试我的打字稿？

Answer 1

我或许可以帮助您解决部分问题。

你没有提到你使用的是哪个版本的流星，但我假设是 1.4 或 1.4.0.1 版本。我已经看到这些版本的 Meteor 似乎在 Typescript 文件的源映射方面存在问题（可能是因为它们必须经过多个转译步骤）。我还不知道 bug 到底在哪里（Meteor 或 Typescript 编译器包）。这是一个 github 问题：https://github.com/barbatus/typescript/issues/23

更新：此问题现已修复。

目前，我的建议是尝试恢复到 Meteor 的 1.3.x.x 版本。对于 Socially 教程之类的东西，最简单的选择是在创建时指定 Meteor 版本：

$ meteor create --release 1.3.5.1 Socially

（发布列表位于：https://github.com/meteor/meteor/releases）

'app.html' 和 'app.html!raw' 文件由 meteor angular 编译器生成，作为解决使用 templateUrl 和 meteor 构建过程的问题的一种方法。我的理解是，首选方法是使用内联模板或像这样导入模板：

// This import loads the content of the html file into 'template'
import template from './app.html';

@Component({
  selector: 'app',
  // Instead of templateUrl, use:
  template,      // <--- 'template,' is syntactic sugar for: 'template: template,'
  directives ... etc.

import 语句有点不寻常，这个魔法是由 meteor angular 预编译器实现的，它将每个 html 和 css 文件转换成几个 js 文件.这就是 app.html 和 app.html!raw 的奇怪之处。

第一个应用程序文件夹中的有趣字符似乎是一个错误。 Meteor 尝试生成放入计算机的表情符号，但有时会被错误处理。我不确定这是 Chrome、ChromeDevTools 还是 Meteor 的错误。（就个人而言，我希望他们放弃表情符号）。

如何在 angular-meteor 中调试打字稿

How to debug typescript in angular-meteor

angularjs

meteor

typescript

angular2-meteor

angular