如何調試Angular2在Chrome

所有：如何調試Angular2在Chrome

我非常新的Angular2，我覺得它比Angular1更難在Chrome調試（這只是我的感覺，當我按照上Angular2官方網站上的教程，當代碼出現錯誤時，大多數時候，控制檯輸出來自system.js或angular.dev.js等等，我不記得那些js文件是從那些錯誤中得到的，但有一件事是最多的，它不能有助於指出發生錯誤的真實場所）。

我想知道我在哪裏可以找到關於如何在Chrome for Angular2中追溯錯誤的教程？

感謝

來源

2016-03-08 Kuan

嘗試創建一個展示您遇到的具體問題的Plunker，然後一些人可能會提出建議如何使用可用的工具來追蹤問題的原因。 –

簽出這個帖子關於在Chrome中調試Angular2：http://stackoverflow.com/questions/34583073/angular-2-errors-and-typescript-how-to-debug?answertab=active#tab-top – Rich

事實上調試Angular2應用比Angular1那些麻煩一點，因爲有涉及到幾個額外的機制：

打字稿或ES6（類，...）
模塊（進口，出口，...）
裝飾和元數據

另外還需要其他工具，如SystemJS來處理模塊。

也就是說，您可以利用IDE和開發工具來幫助找出問題。

讓我們來看一些經典錯誤的樣本。

導入一個不存在的模塊

代碼：
```
import {Component} from 'angular2/angular2'; // <------- 

@Component({ 
    selector: 'my-app', 
    template: ` 
    (...) 
    ` 
}) 
export class AppComponent { 
} 
```
錯誤：
```
angular2-polyfills.js:1243 Uncaught SyntaxError: Unexpected token < 
    Evaluating http://localhost:3000/angular2/angular2 
    Error loading http://localhost:3000/app/boot.js 
```
說明：如果您查看網絡選項卡，您將看到http://localhost:3000/angular2/angular2請求收到404狀態碼，並且響應負載爲HTML。 SystemJS嘗試將這些代碼評估爲JavaScript。這就是爲什麼你得到一個語法錯誤。

當找不到模塊時，SystemJS會嘗試從URL加載它。如果沒有相關的配置（一個package塊內，一個map塊），它只是使用/

Angular2捆綁JS文件丟失

代碼：

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) { 
    } 
}

錯誤：

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

說明：它與以前的問題類似。當您添加http.dev.js文件時，angular/http模塊將自動使用System.register在SystemJS上註冊。如果它不存在，SystemJS會嘗試使用HTTP請求加載它。

SystemJS的錯誤的配置以加載模塊

代碼：

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) { 
    } 
}

錯誤：

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

說明：在這種情況下，錯誤消息不提示提示。我們需要測試一下，以發現在組件構造函數中添加translate:TranslateService時發生問題。所以它與加載ng2-translate很有可能與SystemJS中的配置有關。看到這個問題：ng2-translate: TranslateService and Error: Cannot read property 'getOptional' of undefined(…)。進口

錯誤的元素

代碼：
```
import {Component1} from 'angular2/core'; // <----- 

@Component1({ 
    selector: 'my-shop', 
    template: ` 
    (...) 
    ` 
}) 
export class AppComponent { 
} 
```
錯誤：
```
angular2-polyfills.js:1243 Error: core_1.Component1 is not a function(…) 
```
說明：Component是不是由出口模塊。當然，這裏很明顯，但我們在錯誤消息中沒有非常有用的提示。在大型代碼庫上找到它可能很困難。對於這樣的用例，你應該利用你的IDE（即使在帶有TypeScript插件的Sublime中），因爲它會顯示錯誤。下面是我在這種情況下，錯誤：執行處理時
```
Module '".../node_modules/angular2/core"' has no exported member 'Component1'. Line 16, Column 16 
```

錯誤。

代碼：

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

錯誤：

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)

說明：我認爲這是比較容易的錯誤需要修正，其中發生錯誤，因爲你也行在TypeScript文件中。不要忘記啓用sourceMap以便能夠在編譯的JS文件和TypeScript源文件之間使用行映射。

ES6用來代替打字稿

代碼：

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

錯誤：

/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 = [

說明：似乎問題發生在:字符上構造函數參數的定義級別。 ES6支持類，但不是在類型方法級...查看這個問題：Ionic 2 Syntax Error While Compiling TypeScript