Angular2.0.0 & express - SystemJS traceur (404) not found

Question

I'm trying to set up a basic MEAN app (w/ angular2 2.0.0). Upon configuring gulp and systemJS, running gulp succeeds without any errors, but when I start the server, it throws a few errors: Link

I suspect the issue is the systemJS config file, but I can't find a workaround for it. (angular 2.0.0 issue?)

There are no multiline comments that could be causing this (or I'm aware of).

Any help is appreciated. Here are the relevant code pieces:

Folder structure: Here

Index.hbs: in the error above

systemjs.config.js:

var map = {
'app': 'js/app',
'rxjs': 'js/vendor/rxjs',
'@angular': 'js/vendor/@angular'
};

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/testing',
'@angular/upgrade'
];

packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index', defaultExtension: 'js' };
});

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

System.config(config);

gulpfile.js:

var gulp = require('gulp');
var gulpTypescript = require('gulp-typescript');
var gulpSourcemaps = require('gulp-sourcemaps');
var appDev = "assets/app";
var appProd = "public/js/app";
var vendor = "public/js/vendor";
var tsconfig = gulpTypescript.createProject('tsconfig.json');

gulp.task('build-ts', function() {
  return gulp.src(appDev + "/**/*.ts")
  .pipe(gulpSourcemaps.init())
  .pipe(gulpTypescript(tsconfig))
  .pipe(gulpSourcemaps.write())
  .pipe(gulp.dest(appProd));
});

gulp.task('build-copy', function() {
  return gulp.src([appDev + "/**/*.html", appDev + "/**/*.css"])
  .pipe(gulp.dest(appProd));
});

gulp.task('vendor', function() {
  gulp.src('node_modules/@angular/**')
  .pipe(gulp.dest(vendor + "/@angular/"));

gulp.src('node_modules/core-js/**')
 .pipe(gulp.dest(vendor + "/core-js/"));

gulp.src('node_modules/reflect-metadata/**')
 .pipe(gulp.dest(vendor + "/reflect-metadata/"));

gulp.src('node_modules/rxjs/**')
 .pipe(gulp.dest(vendor + "/rxjs/"));

gulp.src('node_modules/systemjs/**')
 .pipe(gulp.dest(vendor + "/systemjs/"));

return gulp.src('node_modules/zone.js/**')
 .pipe(gulp.dest(vendor + "/zone.js/"));
});

gulp.task('watch', function() {
  gulp.watch(appDev + "**/*.ts", ['build-ts']);
  gulp.watch(appDev + "**/*.{html,css}", ['build-copy']);
});

gulp.task('default', ['watch', 'build-ts', 'build-copy', 'vendor']);

main.js

/// <reference path="../../typings.d.ts" />

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Answer 1

It's this code in systemjs.config.js:

packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index', defaultExtension: 'js' };
});

It maps every angular package to its unbundled source code, which contain es6 import statements and need to be compiled on the fly, so systemjs tries to load traceur compiler and fails.

You probably don't need that, in fact, if you look at the latest version of the angular quickstart example you will not find that code anymore.

If you don't feel like starting fresh from the latest version of their example code is a good idea, you can try to replace these 3 lines with this (adapted from their older version, not tested):

packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'bundles/' + pkgName.replace('@angular/', '') + '.umd.js', defaultExtension: 'js' };
});

This should map their packages to already compiled bundles, so that traceur shouldn't be necessary.