如何调试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