How to debug Angular2 in Chrome

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


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


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

Tags:

Angular

Recent Posts