CODEWITHSUNDEEP
javascripttypescriptsyntax-errortokenangular
Edito
Edito

Reputation: 3747

angular2: Uncaught SyntaxError: Unexpected token <

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

Upvotes: 7

Views: 27632

Answers (9)

KhaledMohamedP
KhaledMohamedP

Reputation: 5542

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

Upvotes: 0

imahama
imahama

Reputation: 51

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.

Upvotes: 2

Sul Aga
Sul Aga

Reputation: 6742

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

Upvotes: 0

Haringat
Haringat

Reputation: 221

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.

Upvotes: 22

Dennis Hackethal
Dennis Hackethal

Reputation: 14295

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

Upvotes: 0

snort
snort

Reputation: 2485

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>

Upvotes: 0

Michael Gikaru
Michael Gikaru

Reputation: 447

In my case the error came from forgetting to include

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

in index.html

Upvotes: 2

Abdulrahman Alsoghayer
Abdulrahman Alsoghayer

Reputation: 16540

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

Upvotes: 5

Eggy
Eggy

Reputation: 4174

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

Upvotes: 3

Related Questions