Common errors you can encounter when using Angular2 applications
Debugging Angular2 applications can be 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.
We will describe here some samples of classical errors (and their corresponding messages) that can occur when implementing Angular2 applications.
Importing a non-existing module
The code
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 <CURRENT-HOST>/<MODULE-NAME>
Angular2 bundled JS file missing
The code
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
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: http://stackoverflow.com/questions/35711569/ng2-translate-translateservice-and-error-cannot-read-property-getoptional-of/35717703#35717703.
Wrong element in imports
The code:
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
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
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: http://stackoverflow.com/questions/35850632/ionic-2-syntax-error-while-compiling-typescript/35851907?noredirect=1#comment59373640_35851907.
Sources
http://stackoverflow.com/questions/35856926/how-to-debug-angular2-in-chrome/35863878#35863878
