angular2: Uncaught SyntaxError: Unexpected token <
Solution 1
You have several issues:
you component selector is : 'my-app'
<app>Loading...<app>
should be
<my-app>Loading...</my-app>
Also, you are importing a wrong file:
System.import('app/app');
should be
System.import('app/boot');
Also, unless you are compiling your typescript to java script.. you should change this line and import typescript.js
{defaultExtension: 'js'}}
should be
{defaultExtension: 'ts'}}
<script src="https://code.angularjs.org/tools/typescript.js"></script>
Also, you are missing few imports:
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
Here is a plunker of your code working
Solution 2
So the above answers seem to be correct but here is some information about the error itself (just for others who run into the same problem wondering what they did wrong) because it can appear with literally each single import and is quite difficult to track down.
It appears whenever a file is required and the webserver is configured to just serve /
instead of a 404-file-not-found-page
.
/
usually then translates to /index.html
and there the first character usually is <
(mostly the start of <!DOCTYPE html>
) and since that is no valid javascript the browser throws an illegal token exception.
Solution 3
I suppose, you have installed angular 2 beta release. In this case you have to install additional modules:
npm install es6-promise@^3.0.2 es6-shim@^0.33.3 [email protected] rxjs@^5.0.0-beta.0 [email protected] --save
And import these scripts:
<!-- ES6-related imports -->
<script src="../node_modules/angular2/bundles/angular2-polyfills.min.js"></script>
<script src="../node_modules/es6-shim/es6-shim.min.js"></script>
<script src="../node_modules/systemjs/dist/system.js"></script>
<script>
//configure system loader
System.config({defaultJSExtensions: true});
</script>
<script src="../node_modules/rxjs/bundles/Rx.js"></script>
<script src="../node_modules/angular2/bundles/angular2.min.js"></script>
<script src="../node_modules/angular2/bundles/http.min.js"></script>
<script src="../node_modules/angular2/bundles/router.min.js"></script>
<script>
//bootstrap the Angular2 application
System.import('app/app').catch(console.log.bind(console));
</script>
EDIT:
In fact, these changes where introduced in alpha 49
Solution 4
In my case I had
import {Observable} from 'rxjs/rx';
which was giving error.
I changed to
import {Observable} from 'rxjs/Rx';
and problem went away. So mind the case-sensitivity.
Solution 5
In my case the error came from forgetting to include
<script src="node_modules/angular2/bundles/router.min.js"></script>
in index.html
Related videos on Youtube
eduvv
Updated on May 09, 2020Comments
-
eduvv almost 4 years
I keep getting this error
Uncaught SyntaxError: Unexpected token <
whenever I try to run my angular2 application. This is just a modification based on the routing 'tutorial' of the angular2 website.Normally these kind of errors speak for themselves where I miswrote a piece of code. But the Chrome console tells me the error occurs inside of an angular2 js file.
Reading and trying the answers from both
Chrome Uncaught Syntax Error: Unexpected Token ILLEGAL
andwarning C4819: How to find the character that has to be saved in unicode?
didn't work. Guessing that the error has to be somewhere in my boot.ts or app.component.ts.boot.ts
import {bootstrap} from 'angular2/platform/browser'; import {ROUTER_PROVIDERS} from 'angular2/router'; import {AppComponent} from './app.component'; import {HallService} from './hall/hall.service'; bootstrap(AppComponent,[ ROUTER_PROVIDERS, HallService ]);
app.component.ts
import {Component} from 'angular2/core'; import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; import {HallCenterComponent} from './hall/hall-center.component'; @Component({ selector: 'my-app', template: ` <h1 class="title">Component Router</h1> <a [routerLink]="['HallCenter']">Hallen</a> <a>Heroes</a> <router-outlet></router-outlet> `, directives: [ROUTER_DIRECTIVES] }) @RouteConfig([ { path: '/hall/...', name: 'HallCenter', component: HallCenterComponent, useAsDefault: true } ]) export class AppComponent { }
index.html
<html> <head> <base href="/"> <title>Factory project</title> <link rel="stylesheet" href="styles.css"> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script src="node_modules/angular2/bundles/router.dev.js"></script> <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/boot') .then(null, console.error.bind(console)); </script> </head> <body> <my-app>loading...</my-app> </body> </html>
hall-center.component.ts
import {Component} from 'angular2/core'; import {RouteConfig, RouterOutlet} from 'angular2/router'; import {HallListComponent} from './hall-list.component'; import {HallDetailComponent} from './hall-detail.component'; import {HallService} from './hall.service'; @Component({ template: ` <h2>HALL CENTER</h2> <router-outlet></router-outlet> `, directives: [RouterOutlet], providers: [HallService] }) @RouteConfig([ {path:'/', name: 'HallCenter', component: HallListComponent, useAsDefault: true}, {path:'/:id', name: 'HallDetail', component: HallDetailComponent}, {path:'/list/:id', name: 'HallList', component: HallListComponent} ]) export class HallCenterComponent { }
-
toskv over 8 yearswhat do you use as a server? I usually get that kind of errors when I map the routes badly on the server and it returns index.html instead of javascript
-
Günter Zöchbauer over 8 yearsThere are already several questions with similar errors. Did you check them stackoverflow.com/…
-
eduvv over 8 years@Günter Zöchbauer I have tried 5 solutions so far, either I already had them in my code or it didn't help :s
-
-
eduvv over 8 yearsI just used 'npm install', so normally it has everything installed right? The node_modules folders is about 90mb in size.
-
Eggy over 8 years@Edward If you are using angular 2.0.0-beta.0 those packages have to be installed separately.
-
eduvv over 8 yearsok I will try this, quick question do I only need to import this into my index.html or in every 'class' I'm using angular2 stuff?
-
Eggy over 8 years@Edward Only into
index.html
-
eduvv over 8 yearsWell it fixed the illegal token problem, but instead I get this error "Uncaught RangeError: Maximum call stack size exceeded". I assume this hasn't anything to do with the changes I just made but with my app in general?
-
Eggy over 8 years@Edward Most likely you have somewhere infinite recursive function.
-
eduvv over 8 yearsYes sorry, the whole app/my-app was wrong I edited my question, I had 2 projects mixed up, thanks you.
-
eduvv over 8 yearsYour plunker seems to work fine, however when I make these changes into my project it gives the "Uncaught RangeError: Maximum call stack size exceeded" like said here goo.gl/O3EVGP. Even after disabling all my functions, I think I'm going to start from scratch this angular2 stuff is giving me nightmares..
-
Abdulrahman Alsoghayer over 8 yearsThe problem could be on one of these files 'hall-list.component', './hall-detail.component' , './hall.service'.. could you post them?
-
Abdulrahman Alsoghayer over 8 yearsI couldn't regenerate your "Maximum call stack" issue. But here is your plunker working .. I just fixed some imports and removed your 2 comments /* implements OnInit */ << they were causing problems!!
-
Jim Gilmartin about 8 yearsThis answer is what helped me. It pointed me to the fact that I had a misspelling in my import. I had from 'angular2/Router' instead of from 'angular2/router'
-
eduvv almost 8 yearsI also had some issues sometimes with referencing the directory, for example sometimes
from './rxjs/Rx';
and sometimes it had to befrom 'rxjs/Rx';
can't remember which one where -
Francisco over 7 yearsI wish I could put another like in this answer
-
Jaime Still over 7 yearsTypo for 'rxjs' as 'rxsj' and was getting this error. Caused me to re-evaluate my imports and fix my issues. Thanks!
-
yeelan over 7 yearsThanks! This acutally hit the core of my problem since I am not that familiar with AppEngine yet!
-
Snorre over 7 yearsThis answer helped me as well. Using Fiddler I saw that all missing packages came up as blue lines and same Body size.
-
Gene Parcellano over 7 yearsHow do we actually change the settings so it serves up a 404 instead of index.html?