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

Try to create a Plunker that demonstrates a concrete problem you run into and then some might be able to make suggestions how to use available tools to track down the cause of the problem. — Günter Zöchbauer, Mar 08 '16 at 05:21
Checkout this post on debugging Angular2 in chrome: http://stackoverflow.com/questions/34583073/angular-2-errors-and-typescript-how-to-debug?answertab=active#tab-top — Rich, Mar 12 '17 at 06:03

score 10 · Accepted Answer · edited May 23 '17 at 12:17

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

score 8 · Answer 2 · edited Jul 01 '16 at 17:32

8

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

edited Jul 01 '16 at 17:32

Sunil D.

17,983
6
53
65

answered Jun 16 '16 at 17:41

James Drinkard

15,342
16
114
137

score 5 · Answer 3 · answered Jan 28 '17 at 09:20

5

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

answered Jan 28 '17 at 09:20

Shailesh kala

1,618
18
16

score 1 · Answer 4 · answered Nov 29 '17 at 18:14

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.

score 0 · Answer 5 · answered Sep 07 '20 at 15:32

Augury compliments DevTools

Installing Augury

The best way to install Augury is from the chrome web store. Select Extensions from the side panel, type "Augury" into the search field, and then press Enter.

When you click on "Add To Chrome", a popup will open. Select "Add extension" to complete the process. Once the plugin has been successfully installed, an Augury icon will appear next to the address bar in the browser.

The Augury icon provides additional information. Click on the icon now to discover what that is.

Using Augury

To start using Augury, you must have an Angular application running in the browser for inspection. If you have never debugged a JavaScript application, you may not be aware that each modern Web browser provides a debug environment straight in the browser. DevTools, the debug environment is opened using the following shortcut:

For Windows and Linux, use Ctrl + Shift + I
For Mac OS X, use Cmd + Opt + I

When DevTools is opened, you will find the Augury tab on the far right.

Augury features

We will quickly go over the main functionality that is available in Augury. This is to become familiar with the features and how to locate them when needed.

The first view that is visible is the Component Tree which shows loaded components belonging to the application.

How to debug Angular2 in Chrome

5 Answers5

Linked