W rzeczywistości debugowania aplikacji Angular2 jest nieco trudniejsze niż te Angular1 ponieważ istnieje kilka dodatkowych mechanizmów zaangażowanych:
Ponadto wymagane są inne narzędzia, takie jak SystemJS do obsługi modułów.
To powiedziawszy, możesz wykorzystać swoje narzędzia IDE i Dev, aby pomóc w znalezieniu problemów.
Weźmy przykłady klasycznych błędów.
Importowanie non-istniejący moduł
Kod:
import {Component} from 'angular2/angular2'; // <-------
@Component({
selector: 'my-app',
template: `
(...)
`
})
export class AppComponent {
}
Błąd:
angular2-polyfills.js:1243 Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/angular2
Error loading http://localhost:3000/app/boot.js
Wyjaśnienie: Jeśli spojrzysz na zakładkę Sieć, zobaczysz, że żądanie http://localhost:3000/angular2/angular2 otrzymuje kod statusu 404, a ładunek odpowiedzi to HTML. SystemJS próbuje ocenić ten kod jako JavaScript. Dlatego pojawia się błąd składni.
Gdy moduł nie zostanie znaleziony, SystemJS próbuje załadować go z adresu URL.Jeśli nie ma powiązanego konfigurację (w obrębie package kloc, map blok), po prostu używa/
Angular2 dołączony plik JS brakujący
Kod:
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) {
}
}
błąd:
angular2-polyfills.js:1243 Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/http
Error loading http://localhost:3000/app/boot.js
Wyjaśnienie: to jest coś podobnego do poprzedniego problemu. Po dodaniu http.dev.js pliku, moduł angular/http jest automatycznie zarejestrować się na SystemJS użyciu System.register. Jeśli nie jest obecny, SystemJS próbuje załadować go za pomocą żądania HTTP.
Błędna konfiguracja SystemJS aby załadować moduły
Kodeksu:
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) {
}
}
Błąd:
TypeError: Cannot read property 'getOptional' of undefined at runAppInitializers (localhost:8000/angular2.dev.js:12628:25) at PlatformRef.initApp
Wyjaśnienie: W takim przypadku komunikat o błędzie nie podaje wskazówek. Musimy przetestować nieco, aby dowiedzieć się, że problem występuje, gdy translate:TranslateService jest dodawany w konstruktorze komponentów. Jest to związane z ładowaniem ng2-translate, więc prawdopodobnie do jego konfiguracji w SystemJS. Zobacz to pytanie: ng2-translate: TranslateService and Error: Cannot read property 'getOptional' of undefined(…).
Niewłaściwy elementem importu
Kod:
import {Component1} from 'angular2/core'; // <-----
@Component1({
selector: 'my-shop',
template: `
(...)
`
})
export class AppComponent {
}
Błąd:
angular2-polyfills.js:1243 Error: core_1.Component1 is not a function(…)
Wyjaśnienie: Component nie jest czymś, eksportowane przez angular2/core moduł. Oczywiście, jest to oczywiste, ale nie mamy bardzo przydatnych wskazówek w komunikacie o błędzie. Może być trudno dowiedzieć się o dużym kodzie źródłowym. W takich przypadkach należy wykorzystać IDE (nawet w Sublime z wtyczką TypeScript), ponieważ spowoduje to błąd. Tutaj jest błąd mam w tym przypadku:
Module '".../node_modules/angular2/core"' has no exported member 'Component1'. Line 16, Column 16
Błąd podczas wykonywania przetwarzania.
Kod:
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: `
<div>Test</div>
`
})
export class AppComponent {
constructor() {
this.test.test();
}
}
Błąd:
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)
Wyjaśnienie: Myślę, że jest to proste błąd naprawić skoro masz linię gdzie występuje błąd w pliku TypeScript. Nie zapomnij włączyć sourceMap, aby móc używać odwzorowania liniowego między skompilowanymi plikami JS i plikami źródłowymi TypeScript.
ES6 stosowany zamiast maszynopis
Kod:
@Page({
templateUrl: 'build/pages/list/list.html'
})
export class ListPage {
constructor(nav: NavController){
this.nav = nav;
}
}
Błąd:
/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 = [
Wyjaśnienie: wydaje się, że problem występuje na poziomie definicji parametru konstruktora na znaku :. ES6 obsługuje klas, ale nie na poziomie metody typy ... Zobacz to pytanie: Ionic 2 Syntax Error While Compiling TypeScript
Spróbuj stworzyć Plunkera, który demonstruje konkretny problem, który napotkasz, a następnie może być w stanie przedstawić sugestie, jak korzystać z dostępnych narzędzi, aby znaleźć przyczynę problemu. –
Zamów ten wpis podczas debugowania Angular2 w chrome: http://stackoverflow.com/questions/34583073/angular-2-errors-and-typescript-how-to-debug?answertab=active#tab-top – Rich