Wie Typoskript in Winkel-Meteo zu debuggen

Question

Ich folgte dem Angular-Meteor Tutorial für die Social App in Angular2. Es funktioniert grundsätzlich (nach ein paar manuellen Schritten, um Paketabhängigkeiten zu beheben usw.), jedoch kann ich den clientseitigen Code in Chrome Dev Tools nicht debuggen. Als ich zu den Quellen für meine * .ts Dateien navigieren, alles was ich sehe sind Dinge wie

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>")); 

Andere seltsame Dinge in dev Werkzeuge: mein app.ts leer ist. Ich sehe HTML-Dateien mit! Raw-Suffixe .... (z. B. app.html! Roh). Was ist das! Row-Suffix und was verursacht das?

Wie kann ich mein Typoskript debuggen?

Answer 1

Ich kann vielleicht mit einigen Teilen Ihrer Frage helfen.

Sie erwähnen nicht, welche Version von Meteor Sie verwenden, aber ich nehme Version 1.4 oder 1.4.0.1 an. Ich habe gesehen, dass diese Versionen von Meteor Probleme mit Quellkarten für Typescript-Dateien haben (wahrscheinlich, da sie mehrere Schritte durchlaufen müssen). Ich weiß noch nicht, wo genau der Fehler liegt (Meteor oder das Typescript-Compiler-Paket). Hier ist ein github Problem für diese: https://github.com/barbatus/typescript/issues/23

UPDATE: Dieses Problem wurde jetzt behoben.

Für jetzt wäre mein Vorschlag zu versuchen, zu einer 1.3.x.x Version von Meteor zurückzukehren. Für so etwas wie das Tutorial in Gesellschaft, ist die einfachste Möglichkeit, die Meteor-Release zum Zeitpunkt der Erstellung angeben:

$ meteor create --release 1.3.5.1 Socially 

(Liste der Veröffentlichungen unter: https://github.com/meteor/meteor/releases)

Der 'app.html' und ‚App. html! rohe 'Dateien werden von den Meteor Angular Compilern erzeugt, um Probleme mit templatUrl und dem Meteor Build Prozess zu umgehen. Mein Verständnis ist, dass der bevorzugte Ansatz ist Inline-Vorlagen oder die Vorlagen wie folgt importieren:

// 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. 

Die Import-Anweisung ist etwas ungewöhnlich, und diese Magie durch den Meteor Winkel Pre-Compiler erreicht wird, dass jeder konvertiert html und CSS-Datei in ein paar JS-Dateien. Das ist was komisches app.html und app.html! Roh sind.

Die lustigen Zeichen im ersten App-Ordner scheinen ein Fehler zu sein. Meteor versucht, Put in einem Computer Emoji zu generieren, aber manchmal wird dies falsch behandelt. Ich bin mir nicht sicher, ob dies ein Bug Chrome, ChromeDevTools oder Meteor ist. (Ich persönlich wünschte, sie würden den Emoji ablegen).