如何在Chrome中调试Angular2

Question

所有:

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

我想知道在哪里可以找到关于如何在Chrome中为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模块将自动在SystemJS上注册System.register.如果它不存在,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和错误:无法读取undefined(...)的属性'getOptional'.

• 进口中的错误元素

  代码:

  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在方法级别支持类但不支持类型...请参阅此问题:编译TypeScript时Ionic 2语法错误

Answer 2

占卜从Rangle.io现在也正式支持Chrome的devtool扩展角2调试.

这篇文章更深入地讨论了从控制台调试Angular 2应用程序的主题

Answer 3

你可以参考这个链接,它将为你提供在chrome中调试Angular2的完整指南,这真的非常有帮助.

https://augury.angular.io/pages/guides/augury.html