Angular2 RC7 Http module error loading

Question

I have an Angular2 test application that was written in RC4 that worked fine. I'm now trying to upgrade it to RC7 and I'm getting the following error message

Error: SyntaxError: Unexpected token <
    Evaluating http://localhost:7864/traceur
    Error loading http://localhost:7864/traceur
    Error loading http://localhost:7864/libs/@angular/http/index.js as "@angular/http" from http://localhost:7864/app/recentActivity/recentActivity.module.js

My recentActivity.module looks like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';

import { RecentActivityService } from './recentActivity.service';
import { RecentActivityComponent } from './recentActivity.component';

@NgModule({
    imports: [CommonModule, HttpModule],
    declarations: [RecentActivityComponent],
    exports: [RecentActivityComponent],
    providers: [RecentActivityService]
})
export class RecentActivityModule {
}

I can't figure out what the problem is here. If I look in the network traffic I can see that is download @angular/http/index.js with a 200 status and the downloaded file is the expected results. So I don't know why it is saying that there is an error loading it. Where else do I need to look.

systemjs.config is below

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function () {
    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        '@angular': 'libs/@angular',
        'angular2-in-memory-web-api': 'libs/angular2-in-memory-web-api',
        'rxjs': 'libs/rxjs'
    };
    // 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' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
    };
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'forms',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade'
    ];

    var ngIndexPackageNames = [
   'http'
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    ngIndexPackageNames.forEach(packIndex);
    var config = {
        //meta: {
        //    '*.js': {
        //        scriptLoad:true
        //    }
        //},
        map: map,
        packages: packages
    };
    System.config(config);
})(this);

Answer 1

With the release of RC.6 angular2 team announced new breaking changes of packages configuration

• https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes-1

npm packages: code in ESM (ES6 Modules) format is now published at the default location in the npm package with package.json's main entry pointing to an UMD bundle (primarily for node, and webpack 1 users).

If you are using SystemJS to load Angular, you should adjust your SystemJS configuration to point to the UMD bundles (present in the npm package).

Please see this example SystemJS config.