How to debug Angular2 in Chrome

Question

Everything:

I am new to Angular2, it seems to me that it is even more difficult than debugging in Angular1 in Chrome (this is just my feeling when I follow the tutorial on the official Angular2 website, when there is an error in the code, in most cases the console output comes from system.js or angular .dev.js etc., I don’t remember which js file calls this error, but one thing is the time, it cannot indicate the real place where the error occurred).

I wonder where I can find a tutorial on how to track a bug in Chrome for Angular2?

thanks

Answer 1

In fact, debugging Angular2 applications is a bit more complicated than Angular1, as there are several additional mechanisms:

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

In addition, other tools, such as SystemJS, are required to work with modules.

However, you can use the IDE and Dev tools to find problems.

Let them take some classic mistakes.

• Import a nonexistent module

  The code:

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

  Mistake:

   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 look at the Network tab, you will see that the request http://localhost:3000/angular2/angular2 receives a 404 status code, and the response payload is HTML. SystemJS is trying to evaluate this code as JavaScript. This is why you get a syntax error.

  When the module is not found, SystemJS tries to load it from the URL. If there is no corresponding configuration (in the package block, map block), it simply uses /

• Angular2 missing js file

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

  Mistake:

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

  Explanation: this is similar to the previous problem. When you add the http.dev.js file, the angular/http module is automatically registered with SystemJS using System.register . If it is missing, SystemJS attempts to load it using an HTTP request.

• Incorrect SystemJS configuration 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) { } } 

  Mistake:

   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 does not give hints. We need to check a bit to find out what the problem is when translate:TranslateService added in the component constructor. So this is due to the loading of ng2-translate , possibly due to its configuration in SystemJS. See This Question: ng2-translate: TranslateService and Error: Unable to read getOptional property from undefined (...) .

• Invalid import item

  The code:

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

  Mistake:

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

  Explanation: Component not exported by angular2/core . Of course, this is obvious here, but we do not have very useful hints in the error message. This can be difficult to detect on a large code base. For such use cases, you should use your IDE (even inside Sublime with the TypeScript plugin), as 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 

• An error occurred while processing .

  The code:

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

  Mistake:

   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 this is a simple error to fix, since you have a line where the error occurs in the TypeScript file. Remember to enable sourceMap to use string matching between compiled JS and TypeScript source files.

• ES6 is used instead of TypeScript

  The code:

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

  Mistake:

   /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 constructor parameter definition on the symbol : ES6 supports classes, but not types at the method level ... See This Question: Ionic 2 Syntax Error When Compiling TypeScript

Answer 2

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

Here's an article that discusses in more detail the topic Debugging Angular 2 applications from the console

Answer 3

you can link to this link, this will provide you with a complete guide for debugging Angular2 in chrome, it is really very useful.

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

Answer 4

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

click on this link to see the image -> Angular 2 debugging code using Chrome creation tools

after opening the developer tools, go to the sources tab, when the angular application is running, all your angular files are in the webpack folder. you can use a breakpoint in angular files to debug code.