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

Compare it with github.com/alexzuza/angular2-typescript-systemjs/blob/master/… See also angular.io/docs/ts/latest/quickstart.html and this github.com/angular/angular/blob/master/… — yurzui
– yurzui, Commented Sep 14, 2016 at 13:21
I figured it out. Feel free to submit as an answer yurzui, since you pointed it out to me. I had put this in because of some issue I had previously var ngIndexPackageNames = [ 'http' ]; Which I just removed and all is working now — Paul Cavacas
– Paul Cavacas, Commented Sep 14, 2016 at 13:27

yurzui · Accepted Answer · 2016-09-14 13:31:39Z

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.

answered Sep 14, 2016 at 13:31

yurzui

215k32 gold badges449 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 RC7 Http module error loading

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related