如何在角度流星中调试打字稿

Question

我遵循Angular2中的社交应用的角度流星教程。它基本上有效（在几个手动步骤之后修复包依赖关系等），但是，我无法在Chrome开发工具中调试客户端代码。当我导航到我的* .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是空白的。我看到带有！raw后缀的html文件....（例如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

更新：此问题现已修复。

目前，我的建议是尝试恢复到流星的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'文件由流星角编译器生成，作为解决使用templateUrl和流星构建过程的问题的一种方法。我的理解是，首选方法是使用内联模板或导入模板，如下所示：

// 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语句有点不寻常，这种魔力是由流星角度预编译器实现的，它将每个html和css文件转换为几个js文件。这就是奇怪的 app.html 和 app.html！raw 。

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