How to debug Angular2 in Chrome

Question

All:

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).

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

Thanks

Answer 1

For chrome users, you can debug your code using developer tools provided by chrome. Just press F12 key to open it

click on this link to see the picture -> Debugging code of angular 2 using chrome developer tools

once you open developer tools, go to sources tab, when angular application is running, all your angular files goes inside webpack folder. you can use break point in the angular component files to debug your code.

Answer 2

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

• TypeScript or ES6 (classes, ...)
• Modules (import, export, ...)
• Decorators and metadata

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

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

Let's take samples of some classical errors.

• Importing a non-existing module

  The code:

  import {Component} from 'angular2/angular2'; // <-------
  
  @Component({
    selector: 'my-app',
    template: `
      (...)
    `
  })
  export class AppComponent {
  }
  

  The error:

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

  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.

  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 bundled JS file missing

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

  The error:

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

  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.

• Wrong configuration of SystemJS to load your modules

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

  The error:

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

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

• Wrong element in imports

  The code:

  import {Component1} from 'angular2/core'; // <-----
  
  @Component1({
    selector: 'my-shop',
    template: `
      (...)
    `
  })
  export class AppComponent {
  }
  

  The error:

  angular2-polyfills.js:1243 Error: core_1.Component1 is not a function(…)
  

  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
  

• Error when executing processing.

  The code:

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

  The error:

  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)
  

  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 used instead of TypeScript

  The code:

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

  The error:

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

  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

Answer 3

Augury from Rangle.io is now also the officially supported Chrome devtool extension for Angular 2 debugging.

Here is an article that goes into more depth on the topic, Debugging Angular 2 Applications from the Console

Answer 4

you can refer to this link it will provide you complete guideline for debugging Angular2 in chrome this is really very helpful.

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