Geek Answers Handbook

Angular2: Uncaught SyntaxError: Unexpected token <

I keep getting this error Uncaught SyntaxError: Unexpected token < whenever I try to start an angular2 application. This is just a modification based on the routing of the "tutorial" of the angular2 website.

Typically, such errors speak for themselves, where I wrote the code fragment incorrectly. But the Chrome console tells me that the error is happening inside the angular2 js file.

Reading and testing responses from Chrome Uncaught Syntax Error: Unexpected Token ILLEGAL and warning C4819: How to find the character that has to be saved in unicode? did not help. Assuming the error should 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 { }
+7
source share
8 answers

You have a few questions:

you select component: 'my-app'

 <app>Loading...<app>

it should be

 <my-app>Loading...</my-app>

In addition, you are importing the wrong file:

 System.import('app/app');

it should be

 System.import('app/boot');

Also, if you are not compiling your typescript in java script .., you should change this line and import typescript.js

 {defaultExtension: 'js'}}

it should be

 {defaultExtension: 'ts'}} <script src="https://code.angularjs.org/tools/typescript.js"></script>

In addition, you are missing a few imported data:

 <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 the plunker of your code working

+4
source

Thus, the above answers seem to be correct, but here is some information about the error itself (only for those who are facing the same problem, wondering what they did wrong), because it can be displayed literally every > import and quite difficult to track.

It appears whenever a file is required, and the web server is configured to simply / instead of 404-file-not-found-page .

/ usually then translated to /index.html , and there the first character is usually equal to < (basically the beginning of <!DOCTYPE html> ), and since this is not valid javascript, the browser throws an illegal token exception.

+18
source

I suppose you installed angular 2 beta. In this case, you need to install additional modules:

 npm install [email protected] ^3.0.2 [email protected] ^0.33.3 [email protected] [email protected] ^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 introduced in alpha 49

+3
source

In my case, the error came from forgetting to enable

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

in index.html

+2
source

In my case, I had

 import {Observable} from 'rxjs/rx';

which produced an error.

I changed to

 import {Observable} from 'rxjs/rx';

and the problem disappeared. Therefore, consider case sensitivity.

+2
source

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

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

Deploy this for 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';
0
source

Be sure to add the full path when importing. Also be sure to add ./ in front of the imported files that are in the same directory.

So, if file.ts wants to import service.ts, which is in the same directory, then you can write the import as follows:

 import {service} from './service'

if you write

 import {service} from 'service'

then you get this error

0
source

More articles:


All Articles