angular2: Uncaught SyntaxError: Unexpected token <

Question

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 and warning 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 { }

what 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 — toskv
– toskv, Commented Dec 30, 2015 at 18:41
There are already several questions with similar errors. Did you check them stackoverflow.com/… — Günter Zöchbauer
– Günter Zöchbauer, Commented Dec 30, 2015 at 18:42
@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 — Edito
– Edito, Commented Dec 30, 2015 at 19:36

Lior Elrom · Accepted Answer · 2016-03-05 23:45:48Z

22

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.

edited Mar 5, 2016 at 23:45

Lior Elrom

21.1k16 gold badges83 silver badges94 bronze badges

answered Mar 5, 2016 at 22:50

Haringat

2212 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jim Gilmartin Over a year ago

This 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'

Francisco Over a year ago

I wish I could put another like in this answer

Jaime Still Over a year ago

Typo for 'rxjs' as 'rxsj' and was getting this error. Caused me to re-evaluate my imports and fix my issues. Thanks!

yeelan Over a year ago

Thanks! This acutally hit the core of my problem since I am not that familiar with AppEngine yet!

Snorre Over a year ago

This answer helped me as well. Using Fiddler I saw that all missing packages came up as blue lines and same Body size.

|

Abdulrahman Alsoghayer · Accepted Answer · 2015-12-30 20:35:28Z

5

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

answered Dec 30, 2015 at 20:35

Abdulrahman Alsoghayer

16.6k7 gold badges53 silver badges57 bronze badges

4 Comments

Edito Over a year ago

Yes sorry, the whole app/my-app was wrong I edited my question, I had 2 projects mixed up, thanks you.

Edito Over a year ago

Your 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 stackoverflow.com/questions/34534920/…. 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 a year ago

The problem could be on one of these files 'hall-list.component', './hall-detail.component' , './hall.service'.. could you post them?

Abdulrahman Alsoghayer Over a year ago

I 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!!

Eggy · Accepted Answer · 2015-12-30 19:45:22Z

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

edited Dec 30, 2015 at 19:45

answered Dec 30, 2015 at 19:25

Eggy

4,1747 gold badges26 silver badges40 bronze badges

6 Comments

Edito Over a year ago

I just used 'npm install', so normally it has everything installed right? The node_modules folders is about 90mb in size.

Eggy Over a year ago

@Edward If you are using angular 2.0.0-beta.0 those packages have to be installed separately.

Edito Over a year ago

ok 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 a year ago

@Edward Only into index.html

Edito Over a year ago

Well 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?

|

Michael Gikaru · Accepted Answer · 2016-01-22 22:28:49Z

2

In my case the error came from forgetting to include

<script src="node_modules/angular2/bundles/router.min.js"></script>

in index.html

answered Jan 22, 2016 at 22:28

Michael Gikaru

4471 gold badge6 silver badges10 bronze badges

Comments

imahama · Accepted Answer · 2016-05-01 11:41:53Z

2

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.

answered May 1, 2016 at 11:41

imahama

511 bronze badge

1 Comment

Edito Over a year ago

I also had some issues sometimes with referencing the directory, for example sometimes from './rxjs/Rx'; and sometimes it had to be from 'rxjs/Rx'; can't remember which one where

snort · Accepted Answer · 2016-02-05 21:31:52Z

0

Ran into this in beta 3 using the rxjs v5.0.0-beta.0 package recommended in the Angular 2 quick start. I switched from the npm package to the one on the Angular beta CDN and it worked fine.

<script src="https://code.angularjs.org/2.0.0-beta.3/Rx.js"></script>

answered Feb 5, 2016 at 21:31

snort

2,5053 gold badges21 silver badges24 bronze badges

Comments

Dennis Hackethal · Accepted Answer · 2016-02-10 05:23:40Z

0

Ran into this today using Angular 2.0.0-beta.0 and rxjs. Had to change

import * as Rx from 'rxjs';

to

import * as Rx from 'rxjs/Rx';

answered Feb 10, 2016 at 5:23

Dennis Hackethal

14.4k12 gold badges75 silver badges129 bronze badges

Comments

Sul Aga · Accepted Answer · 2016-04-16 18:46:43Z

0

make sure to add full path when you import. Also make sure to add ./ in front of files you import which are in the same directory.

So if file.ts wants to import service.ts which resides in the same directory then you shoule write the import like this:

import {service} from './service'

if you write

import {service} from 'service'

then you will get this error

answered Apr 16, 2016 at 18:46

Sul Aga

6,9707 gold badges28 silver badges39 bronze badges

Comments

KhaledMohamedP · Accepted Answer · 2018-05-08 14:01:08Z

0

This is due to SystemJS trying to fetch rxjs methods from a relative path instead of the library itself

I had to insert this line of code inside the Systemjs configuration System.config({})

paths: {
 'rxjs*': 'node_modules/rxjs/bundles/Rx.min.js'
}

Took me several hours to find this solution

source

answered May 8, 2018 at 14:01

KhaledMohamedP

5,5823 gold badges34 silver badges30 bronze badges

Collectives™ on Stack Overflow

angular2: Uncaught SyntaxError: Unexpected token <

9 Answers 9

6 Comments

4 Comments

6 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

6 Comments

4 Comments

6 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related