如何调试Angular2在Chrome [英] How to debug Angular2 in Chrome

问题描述

所有

我是pretty新Angular2，我发现它比Angular1更难在Chrome调试（这只是我的感觉，当我遵循Angular2官方网站的教程中，当出现错误在code，大多数时候，控制台输出为system.js或angular.dev.js ETCS，我不记得是什么JS文件名从这些错误，但有一点是最花时间，所以不能帮忙，指出真正的地方在那里产生错误）。

I am pretty new to Angular2, I find it is even harder than Angular1 to debug in Chrome( this is just my feeling, when I follow the tutorial on Angular2 official site, when there is error in the code, most time, the console output is from system.js or angular.dev.js etcs, I do not remember what js file names those error from, but one thing is most time, it can not helpfully point out the real place where the error originated).

我不知道我在哪里可以找到一个关于如何追溯错误的Chrome浏览器Angular2教程？

I wonder where can I find a tutorial about how to trace back the error in Chrome for Angular2?

感谢

推荐答案

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

In fact debugging Angular2 applications is a bit trickier than Angular1 ones since there are several additional mechanisms involved:

• 打字稿或ES6（类，...）


• 模块（进口，出口，...）


• 装饰和元数据

在另外其他工具都需要像SystemJS处理模块。

In addition other tools are required like SystemJS to handle modules.

这是说，你可以利用你的IDE和开发工具，以帮助找出问题。

That said, you can leverage your IDE and Dev Tools to help to find out problems.

让我们以一些经典错误的样本。

Let's take samples of some classical errors.

• 导入一个不存在的模块

的的code 的：

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：//本地主机：3000 / angular2 / angular2 要求接收了404状态code和响应负载为HTML。 SystemJS试图评估该code，如JavaScript。这就是为什么你会得到一个语法错误。

Explanation: If you have a look at the Network tab, you will see that the http://localhost:3000/angular2/angular2 request receives a 404 status code and the response payload is HTML. SystemJS tries to evaluate this code as JavaScript. That's why you get a syntax error.

在没有找到一个模块，SystemJS尝试从一个URL加载它。如果没有相关的配置（A 包块，地图块中），它只是使用/

When a module isn't found, SystemJS tries to load it from an URL. If there is no related configuration (within a package block, a map block), it simply uses /

Angular2捆绑JS文件丢失

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

的错误的：

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

说明的：它是类似previous问题的东西。当您添加http.dev.js文件中的角/ HTTP 模块会自动为使用SystemJS注册 System.register 。如果不是present，SystemJS尝试使用HTTP请求来加载它。

Explanation: it's something similar to the previous problem. When you add http.dev.js file, the angular/http module is automatically register on SystemJS using System.register. If it's not present, SystemJS tries to load it using an HTTP request.

SystemJS的错误的配置来加载模块

Wrong configuration of SystemJS to load your modules

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

的错误的：

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

<青霉>解释的：在这种情况下，该错误消息不给提示。我们需要测试了一下，发现，发生在问题翻译：TranslateService 是组件构造函数中添加。因此，它是关系到 NG2-翻译所以加载可能是其SystemJS配置。看到这个问题：<一href=\"http://stackoverflow.com/questions/35711569/ng2-translate-translateservice-and-error-cannot-read-property-getoptional-of/35717703#35717703\">ng2-translate: TranslateService和错误：无法读取未定义（...）的特性getOptional

Explanation: In this case, the error message doesn't give hints. We need to test a bit to find out that the problem occurs when translate:TranslateService is added within the component constructor. So it's related to the loading of the ng2-translate so probably to its configuration in SystemJS. See this question: ng2-translate: TranslateService and Error: Cannot read property 'getOptional' of undefined(…).

在进口的错误元素

在code：

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(…)

说明的组件是不是由 angular2 /芯模块导出。当然，很明显这里，但我们并没有在错误信息是非常有用的提示。它可以是很难找到大codeBase的。对于这样的使用情况下，你应该利用（即使在崇高的打字稿插件）你的IDE，因为它会显示一个错误。这里是我在此情况下，错误：

Explanation: Component isn't something exported by the angular2/core module. Of course, it's obvious here but we don't have very useful hints in the error message. It can be difficult to find out on large codebase. For such use cases, you should leverage your IDE (even within Sublime with the TypeScript plugin) since it will show an error. Here is the error I have in this case:

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

错误时，执行处理

的的code 的：

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)

说明的：我认为这是比较容易的错误需要修正，因为你有其中的打字稿文件中出现错误的行。不要忘记启用 sourceMap ，以便能够使用编译的JS文件和打字稿源文件的在线地图。

Explanation: I think that it's the easy error to fix since you have the line where the error occurs in the TypeScript file. Don't forget to enable sourceMap to be able to use line mapping between compiled JS files and TypeScript source files.

ES6使用打字稿代替

的的code 的：

@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支持类，但不是在类型方法级...查看这个问题：<一href=\"http://stackoverflow.com/questions/35850632/ionic-2-syntax-error-while-compiling-typescript/35851907?noredirect=1#comment59373640_35851907\">Ionic 2语法错误在编译打字稿

Explanation: it seems that the problem occurs at the level of the definition of the constructor parameter on the : character. ES6 supports classes but not types at method level... See this question: Ionic 2 Syntax Error While Compiling TypeScript

这篇关于如何调试Angular2在Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！