Angular2 RC1 Unexpected Token <

I am trying to adapt to make the quickstart project from the angular tutorial to work with an asp.net5 site.

So far, it does look like it should work fine...I followed the tutorial and took the code from there (adjusting paths to match the ones in my asp net site). However I keep getting this "Unexpected Token <" error which is quite misleading...

I found some samples which use beta9, but I would preffer to run the latest version of angular2 (rc1), so I have been stuck with this for some hours now...

Anyways, this is how my project files look:

index.html:

<html lang="">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Trail Running Life</title>
        <base href="/">
        <link rel="stylesheet" href="/css/bootstrap.css">
        <link rel="stylesheet" href="/css/site.css">
</head>
<body>
        
    <app>
        Loading...
    </app>

       
    <script src="/lib/jquery.js"></script>
    <script src="/lib/bootstrap.js"></script>       

    <script src="/lib/es6-shim.js"></script>
    <script src="/lib/zone.js"></script>
    <script src="/lib/Reflect.js"></script>
    <script src="/lib/system.src.js"></script>
    <script src="/system.config.js"></script>
       
    <script>       
      System.import('app').catch(function(err){ console.error(err);  });
    </script>
</body>
</html>

the system.config.js:

(function (global) {

    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        'rxjs': 'lib',
        '@angular': 'lib/angular2'
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' }
    };

    var packageNames = [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      '@angular/router-deprecated',
      '@angular/testing',
      '@angular/upgrade'
    ];

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function (pkgName) {
        packages[pkgName] = { defaultExtension: 'js' };
    });

    var config = {
        map: map,
        packages: packages
    }

    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) { global.filterSystemConfig(config); }

    System.config(config);

})(this);

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

app.component.ts

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

@Component({
    selector: 'app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

And this is my folder structure (the lib folder is generated via a gulp command):

Solution

You are getting this error, because system.config.js has not enough (or has wrong) information to build correct paths to static .js files. It expects Javascript file but gets HTML response from your web server.

Look again at Developers tools (Chrome) Network's XHR responses for JS files and will find what mappings do you need to add to system.config.js.

Where are located your app files after build? is this 'app' folder? or 'app/dist'?...

Update

Try this:

(function (global) {

    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        'rxjs': 'lib',
        '@angular': 'lib/@angular'
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main'},
        'rxjs': { main: 'rx' }
    };

    var packageNames = [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      '@angular/router-deprecated',
      '@angular/testing',
      '@angular/upgrade'
    ];

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function (pkgName) {
        packages[pkgName] = { main: 'index' };
    });

    var config = {
        defaultJSExtensions: true,
        map: map,
        packages: packages
    }

    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) { global.filterSystemConfig(config); }

    System.config(config);

})(this);

Optional: You can use defaultJSExtensions: true for entire config object;
Optional: Indicate default file {main:'index'} for @angular packages;
Main reason: you are mapping to wrong folder for angular. Instead of '@angular': 'lib/angular2' should use '@angular': 'lib/@angular'. But if you have @angular.rc1 files in angular2 folder (just keeping old folder name) then please use your mapping but try with this Optional updates. They could help.