Alle:
Ich bin ziemlich neu bei Angular2, ich finde es ist noch schwieriger als Angular1 in Chrome zu debuggen (das ist nur mein Gefühl, wenn ich dem Tutorial auf der offiziellen Angular2 Seite folge, wenn es einen Fehler im Code gibt, meistens Die Konsolenausgabe stammt von system.js oder angular.dev.js etcs, ich weiß nicht mehr, aus welcher js-Datei diese Fehler stammen, aber eine Sache ist die meiste Zeit, sie kann nicht hilfreich darauf hinweisen, an welcher Stelle der Fehler entstanden ist.
Ich frage mich, wo ich ein Tutorial finden kann, um den Fehler in Chrome für Angular2 zurückzuverfolgen?
Danke
Tatsächlich ist das Debuggen von Angular2-Anwendungen etwas komplizierter als von Angular1, da mehrere zusätzliche Mechanismen beteiligt sind:
Außerdem werden andere Werkzeuge wie SystemJS benötigt, um Module zu handhaben.
Das heißt, Sie können Ihre IDE und Dev Tools nutzen, um Probleme zu finden.
Nehmen wir Beispiele für einige klassische Fehler.
Importieren eines nicht vorhandenen Moduls
Der Code :
%Vor%Der Fehler :
%Vor% Erklärung : Wenn Sie sich die Registerkarte "Netzwerk" ansehen, sehen Sie, dass die http://localhost:3000/angular2/angular2 -Anforderung einen 404-Statuscode und die Antwort-Nutzlast HTML erhält. SystemJS versucht, diesen Code als JavaScript zu bewerten. Deshalb erhalten Sie einen Syntaxfehler.
Wenn ein Modul nicht gefunden wird, versucht SystemJS, es von einer URL zu laden. Wenn es keine zugehörige Konfiguration gibt (innerhalb eines package -Blocks, eines map -Blocks), wird einfach /
Angular2 gebündelte JS-Datei fehlt
Der Code :
%Vor%Der Fehler :
%Vor% Erklärung : Es ähnelt dem vorherigen Problem. Wenn Sie die Datei http.dev.js hinzufügen, wird das Modul angular/http automatisch auf SystemJS mit System.register registriert. Wenn es nicht vorhanden ist, versucht SystemJS, es mithilfe einer HTTP-Anforderung zu laden.
Falsche Konfiguration von SystemJS zum Laden Ihrer Module
Der Code :
%Vor%Der Fehler :
%Vor% Erklärung : In diesem Fall gibt die Fehlermeldung keine Hinweise. Wir müssen ein wenig testen, um herauszufinden, dass das Problem auftritt, wenn translate:TranslateService innerhalb des Komponentenkonstruktors hinzugefügt wird. Es hängt also mit dem Laden von ng2-translate zusammen, also wahrscheinlich mit seiner Konfiguration in SystemJS. Siehe diese Frage: ng2-translate: TranslateService und Error: Kann die Eigenschaft 'getOptional' von undefined (...) nicht lesen .
Falsches Element bei Importen
Der Code:
%Vor%Der Fehler :
%Vor% Erläuterung : Component wird nicht vom Modul angular2/core exportiert. Natürlich ist es hier offensichtlich, aber wir haben keine sehr nützlichen Hinweise in der Fehlermeldung. Es kann schwierig sein, auf einer großen Codebasis zu finden. Für solche Anwendungsfälle sollten Sie Ihre IDE (sogar innerhalb von Sublime mit dem TypeScript-Plugin) nutzen, da dies einen Fehler anzeigen wird. Hier ist der Fehler, den ich in diesem Fall habe:
Fehler beim Ausführen der Verarbeitung .
Der Code :
%Vor%Der Fehler :
%Vor% Erklärung : Ich denke, dass es der einfache Fehler ist, der behoben werden muss, da Sie die Zeile haben, in der der Fehler in der TypeScript-Datei auftritt. Vergessen Sie nicht, sourceMap zu aktivieren, um Zeilenzuordnungen zwischen kompilierten JS-Dateien und TypeScript-Quelldateien verwenden zu können.
ES6 anstelle von TypeScript
verwendetDer Code :
%Vor%Der Fehler :
%Vor% Erläuterung : Es scheint, dass das Problem auf der Ebene der Definition des Konstruktorparameters im Zeichen : auftritt. ES6 unterstützt Klassen, aber keine Typen auf Methodenebene ... Siehe diese Frage: Ionische 2 Syntaxfehler beim Kompilieren von TypScript
Augury von Rangle.io ist nun auch die offiziell unterstützte Chrome devtool Erweiterung für Angular 2 Debugging.
Hier finden Sie einen Artikel, der das Thema Angular 2-Anwendungen von der Konsole aus eingehend untersucht
Sie können auf diesen Link verweisen, der Ihnen vollständige Anleitung zum Debuggen von Angular2 in Chrome bietet, das ist wirklich sehr hilfreich.
Für Chrome-Benutzer können Sie Ihren Code mithilfe von Chrome-Entwicklertools debuggen. Drücken Sie einfach die F12-Taste, um es zu öffnen
Klicken Sie auf diesen Link, um das Bild zu sehen - & gt; Debugging-Code von angular 2 mit Chrome-Entwicklertools
Sobald Sie die Entwickler-Tools geöffnet haben, gehen Sie zum Quellen-Tab, Wenn die Angular-Anwendung ausgeführt wird, werden alle eckigen Dateien in den Webpack-Ordner verschoben. Sie können den Bruchpunkt in den eckigen Komponentendateien verwenden, um Ihren Code zu debuggen.
Tags und Links angular
