Angular 2 giving an error Uncaught SyntaxError: Unexpected token <

Question

I am trying to run angular 2 on my existing project and I've following codes :

<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/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
<script type="text/javascript">
    System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {app: {defaultExtension: 'ts'}} 
      });
      System.import('assets/js/angular2/app/script.js')
            .then(null, console.error.bind(console));
</script>

script.ts

import {bootstrap}    from 'angular2/platform/browser'
import {FeedComponent} from 'assets/js/angular2/app/feed.component.js'


bootstrap(FeedComponent)

feed.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'feeds',
  template: 'assets/partials/wall/Feeds.html'
})

export class FeedComponent {

}

html

<feeds>
            loading...
          </feeds>

But its giving an error :

core:1 Uncaught SyntaxError: Unexpected token <U @ system.src.js:4597o.execute @ system.src.js:4597i @ system.src.js:4597s @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ feed.component.js:8(anonymous function) @ feed.component.js:22U @ system.src.js:4597c.execute @ system.src.js:4597i @ system.src.js:4597s @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ script.js:3(anonymous function) @ script.js:6U @ system.src.js:4597c.execute @ system.src.js:4597i @ system.src.js:4597n @ system.src.js:4597execute @ system.src.js:4597y @ system.src.js:4597w @ system.src.js:4597p @ system.src.js:4597h @ system.src.js:4597(anonymous function) @ system.src.js:4597run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
system.src.js:4597 Uncaught Uncaught SyntaxError: Unexpected token <
    Evaluating http://localhost/v010-commonsocialnetwork/@angular/coreU @ system.src.js:4597o.execute @ system.src.js:4597i @ system.src.js:4597s @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ feed.component.js:8(anonymous function) @ feed.component.js:22U @ system.src.js:4597c.execute @ system.src.js:4597i @ system.src.js:4597s @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ script.js:3(anonymous function) @ script.js:6U @ system.src.js:4597c.execute @ system.src.js:4597i @ system.src.js:4597n @ system.src.js:4597execute @ system.src.js:4597y @ system.src.js:4597w @ system.src.js:4597p @ system.src.js:4597h @ system.src.js:4597(anonymous function) @ system.src.js:4597run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
system.src.js:4597 Uncaught Script error.
    Evaluating http://localhost/v010-commonsocialnetwork/assets/js/angular2/app/feed.component.jsU @ system.src.js:4597c.execute @ system.src.js:4597i @ system.src.js:4597s @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ script.js:3(anonymous function) @ script.js:6U @ system.src.js:4597c.execute @ system.src.js:4597i @ system.src.js:4597n @ system.src.js:4597execute @ system.src.js:4597y @ system.src.js:4597w @ system.src.js:4597p @ system.src.js:4597h @ system.src.js:4597(anonymous function) @ system.src.js:4597run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
angular2-polyfills.js:138 Script error.
    Evaluating http://localhost/v010-commonsocialnetwork/assets/js/angular2/app/script.js
    Error loading http://localhost/v010-commonsocialnetwork/assets/js/angular2/app/script.js

Please let me know what I'm doing wrong in it and how to solve this issue.

Thanks in advance :)

Answer 1

Which version of angular2 you are using?

It seems you are mixing with angular2 beta and angular2 rc versions.

In release candidate:

import { Component } from '@angular/core';

and in previous version

import {bootstrap}    from 'angular2/platform/browser'

In case of you proceed rc you could use:

in release candidate you should not add your angular libraries in script tags,
instead you should do in system js config as module

example of system js config

System.config({
    transpiler: 'typescript',
    typescriptOptions: { emitDecoratorMetadata: true },
    map: {
        'app': 'app',
        'rxjs': 'libraries/rxjs',
        '@angular': 'libraries/@angular',
    },
    packages: {
        'app': { main: 'main.ts', defaultExtension: 'ts'},
        'rxjs': { main: 'Rx.js' },
        '@angular/core': { main: 'index.js' },
        '@angular/common': { main: 'index.js' },
        '@angular/compiler': { main: 'index.js' },
        '@angular/router': { main: 'index.js' },
        '@angular/platform-browser': { main: 'index.js' },
        '@angular/platform-browser-dynamic': { main: 'index.js' },
        '@angular/http': { main: 'index.js' },
    }
});

Answer 2

I think you may replace the

import {FeedComponent} from 'assets/js/angular2/app/feed.component.js'

with

import {FeedComponent} from 'assets/js/angular2/app/feed.component'

For you specify the default file extension as "ts" in the system js config. Not sure if it is the root cause. Please try it first.