Question

所有

我对Angular2很新，我发现在Chrome中调试比Angular1更难（这只是我的感觉，当我按照Angular2官方网站上的教程，当代码出错时，大部分时间，控制台输出来自system.js或angular.dev.js等，我不记得是什么js文件命名那些错误，但有一件事是大部分时间，它无法指出错误产生的真实位置）。

我想知道在哪里可以找到关于如何在Chrome for Angular2中追溯错误的教程？

由于

Answer 1

事实上，调试Angular2应用程序比Angular1应用程序有点棘手，因为它涉及几个额外的机制：

TypeScript或ES6（类，...）
模块（导入，导出，......）
装饰器和元数据

此外，还需要其他工具，如SystemJS来处理模块。

也就是说，您可以利用IDE和Dev Tools来帮助找出问题。

让我们来看一些经典错误。

导入不存在的模块

代码：
```
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不是angular2/core模块导出的内容。当然，这里显而易见，但我们在错误消息中没有非常有用的提示。很难找到大型代码库。对于此类用例，您应该利用IDE（即使在Sublime中使用TypeScript插件），因为它会显示错误。这是我在这种情况下的错误：
```
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代替TypeScript

代码：

@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