Как отладить машинопись в angular-метеоре

Question

Я следовал учебнику по angular-метеору для приложения Socially в Angular2. В основном это работает (после нескольких ручных шагов по исправлению зависимостей пакетов и т. Д.), Однако я не могу отладить код на стороне клиента в 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 (вероятно, из-за того, что им приходится проходить несколько этапов переноса). Я еще не знаю, где именно ошибка лежит (Meteor или пакет компилятора Typescript). Вот одна проблема github для этого: https://github.com/barbatus/typescript/issues/23

ОБНОВЛЕНИЕ: Эта проблема была теперь исправлена.

На данный момент я предлагаю попробовать вернуться к версии Meteor 1.3.xx. Для чего-то вроде учебника Socially самый простой вариант - указать релиз Meteor во время создания:

$ meteor create --release 1.3.5.1 Socially

(список релизов находится по адресу: https://github.com/meteor/meteor/releases)

Файлы app.html и app.html! Raw генерируются угловыми компиляторами meteor как способ решения проблем с использованием 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.

Оператор импорта немного необычен, и эта магия достигается с помощью прекомпилятора угловых метеоров, который преобразует каждый файл HTML и CSS в пару файлов JS. Вот что такое странные app.html и app.html! Raw.

Забавные персонажи в первой папке приложения кажутся ошибкой. Метеор пытается генерировать вставленные в компьютер эмодзи, но иногда это обрабатывается неправильно. Я не уверен, что это ошибка Chrome, ChromeDevTools или Meteor. (Лично я хотел бы, чтобы они бросили смайлики).