In fact debugging Angular2 applications is a bit trickier than Angular1 ones since there are several additional mechanisms involved:
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
