Gewusst wie: Debuggen von Angular2 in Chrom

In der Tat debugging Angular2 Anwendungen ist ein bisschen schwieriger, als Angular1 bleiben, da gibt es mehrere zusätzliche Mechanismen:

• Typoskript oder ES6 (Klassen, ...)
• Module (import, export, ...)
• Dekorateure und Metadaten

Außerdem sind andere Werkzeuge erforderlich sind, wie SystemJS zu handhaben Module.

Das heißt, Sie können nutzen Sie Ihre IDE und Dev-Tools zu Hilfe, um herauszufinden, Probleme.

Nehmen wir als Beispiele einige klassische Fehler.

• Import von einem nicht vorhandenen Modul

  Den code:

  import {Component} from 'angular2/angular2'; //<-------
  
  @Component({
    selector: 'my-app',
    template: `
      (...)
    `
  })
  export class AppComponent {
  }
  

  Die Fehler:

  angular2-polyfills.js:1243 Uncaught SyntaxError: Unexpected token <
      Evaluating http://localhost:3000/angular2/angular2
      Error loading http://localhost:3000/app/boot.js
  

  Erklärung: Wenn Sie einen Blick auf die Netzwerk-Registerkarte, werden Sie sehen, dass die http://localhost:3000/angular2/angular2 Anfrage erhält eine 404-Statuscode und die Antwort-payload ist HTML. SystemJS versucht, dies zu bewerten-code wie JavaScript. Das ist, warum Sie bekommen Sie einen syntax Fehler.

  Wenn ein Modul nicht gefunden wird, SystemJS versucht, es zu laden von einer URL. Wenn es keine entsprechenden Konfiguration (innerhalb einer package - block, ein map block), die Sie verwendet einfach /

• Angular2 gebündelt JS Datei fehlt

  Den code:

  import {Component} from 'angular2/core';
  import {Http} from 'angular2/http'; //<-----
  
  @Component({
    selector: 'my-app',
    template: `
      <div>Test</div>
    `
  })
  export class AppComponent {
    constructor(private http:Http) {
    }
  }
  

  Die Fehler:

  angular2-polyfills.js:1243 Uncaught SyntaxError: Unexpected token <
    Evaluating http://localhost:3000/angular2/http
    Error loading http://localhost:3000/app/boot.js
  

  Erklärung: es ist etwas ähnlich zu dem vorherigen problem. Wenn Sie hinzufügen http.dev.js Datei, die angular/http - Modul automatisch registrieren auf SystemJS mit System.register. Wenn es nicht vorhanden ist, SystemJS versucht zu laden es mithilfe einer HTTP-Anforderung.

• Falsche Konfiguration der SystemJS, um Ihre Module zu laden

  Den code:

  import {Component,Inject} from 'angular2/core';
  import {TranslateService,TranslateStaticLoader,TranslateLoader} from 'ng2-translate/ng2-translate';
  
  @Component({
    selector: 'first-app',
    template: `
      (...)
    `
  })
  export class AppComponent {
    constructor(translate:TranslateService) {
    }
  }
  

  Die Fehler:

  TypeError: Cannot read property 'getOptional' of undefined at runAppInitializers (localhost:8000/angular2.dev.js:12628:25) at PlatformRef.initApp
  

  Erklärung: In diesem Fall wird die Fehlermeldung nicht Hinweise geben. Müssen wir testen, ein bisschen, um herauszufinden, dass das problem tritt auf, wenn translate:TranslateService Hinzugefügt wird innerhalb der Komponente Konstruktor. So ist es im Zusammenhang mit der Beladung des ng2-translate so wahrscheinlich, um seine Konfiguration in SystemJS. Siehe diese Frage: ng2-übersetzen: TranslateService und Error: Cannot read property 'getOptional' undefined(...).

• Falsch element importiert

  Code:

  import {Component1} from 'angular2/core'; //<-----
  
  @Component1({
    selector: 'my-shop',
    template: `
      (...)
    `
  })
  export class AppComponent {
  }
  

  Die Fehler:

  angular2-polyfills.js:1243 Error: core_1.Component1 is not a function(…)
  

  Erklärung: Component ist nicht etwas, das exportiert, von der angular2/core Modul. Natürlich, es ist hier offensichtlich, aber wir haben keine sehr nützliche Hinweise in der Fehlermeldung. Es kann schwierig sein, herauszufinden, auf große Codebasis. Für solche Fälle sollten Sie nutzen Sie Ihre IDE (auch innerhalb der Erhabene mit dem Typoskript-plugin), da zeigt es einen Fehler. Hier ist der Fehler habe ich in diesem Fall:

  Module '".../node_modules/angular2/core"' has no exported member 'Component1'. Line 16, Column 16
  

• Fehler bei der Ausführung der Verarbeitung.

  Den code:

  import {Component} from 'angular2/core';
  
  @Component({
    selector: 'my-app',
    template: `
      <div>Test</div>
    `
  })
  export class AppComponent {
    constructor() {
      this.test.test();  
    }
  }
  

  Die Fehler:

  angular2.dev.js:23083 TypeError: Cannot read property 'test' of undefined
    at new AppComponent (app-component.ts:33)
    at angular2.dev.js:1412
    at Injector._instantiate (angular2.dev.js:11453)
  

  Erklärung: ich denke, es ist sehr einfach Fehler zu beheben, da haben Sie die Zeile, wo der Fehler tritt in der TypeScript-Datei. Vergessen Sie nicht, aktivieren sourceMap zu können, verwenden Sie die line-mapping zwischen zusammengestellt JS-Dateien und Typoskript-source-Dateien.

• ES6 statt Typoskript

  Den code:

  @Page({
    templateUrl: 'build/pages/list/list.html'
  })
  export class ListPage {
    constructor(nav: NavController){
      this.nav = nav;
    }
  }
  

  Die Fehler:

  /app/pages/list/list.js Module build failed: SyntaxError: /focus/projects/ionic-todo/app/pages/list/list.js:
    Unexpected token (10:17) 8 | 9 | export class ListPage {
  
  10 | constructor(nav: NavController){ | ^ 11 | this.nav = nav; 12 | 13 | this.items = [
  

  Erklärung: es scheint, dass das problem auf der Ebene der definition der Konstruktor-parameter auf die : Charakter. ES6 unterstützt die Klassen sind aber nicht die Typen in der Methode level... Siehe diese Frage: Ionischen 2 Syntax-Fehler Beim Kompilieren Typoskript

können Sie unter diesem link wird es Ihnen komplette Leitfaden für die Fehlersuche Angular2 in Chrom dies ist wirklich sehr hilfreich.

https://augury.angular.io/pages/guides/augury.html