systemjs-builder: Angular 2 Component Relative Paths cause 404 errors
<p>This is a cross post to <a href="https://github.com/systemjs/builder/issues/611" rel="nofollow">https://github.com/systemjs/builder/issues/611</a></p>

<p>I'm trying to bundle my Angular 2 rc 1 app with systemjs-builder 0.15.16 <code>buildStatic</code> method.  An angular component has a view as well as  one or more stylesheets external to the script. They are referred to within the <code>@Component</code> metadata in <a href="https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html" rel="nofollow">one of two ways</a></p>

<p>Using absolute paths:</p>

<pre><code>@Component({
  templateUrl: 'app/some.component.html',
  styleUrls:  ['app/some.component.css']
})
</code></pre>

<p>Using the now recommended relative paths:</p>

<pre><code>@Component({
  moduleId: module.id,
  templateUrl: 'some.component.html',
  styleUrls:  ['some.component.css']
})
</code></pre>

<p>My app uses relative paths, and things have been working fine. Today I decided to use systemjs-builder's <code>buildStatic</code>.  The resulting file throws 404 errors whenever there is a relative path because the browser is fetching <code>localhost/some.component.html</code> instead of <code>localhost/app/some.component.html</code>.  Below is the relevant part of my <strong>gulpfile.js</strong></p>

<pre><code>var appDev = 'dev/';
var appProd = 'app/';
var typescript = require('gulp-typescript');
var tsProject = typescript.createProject('tsconfig.json');
var Builder = require('systemjs-builder');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('build-ts', function () {
    return gulp.src(appDev + '**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(typescript(tsProject))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(appProd));
});
gulp.task('bundle',['build-ts'], function() {

    var builder = new Builder('', './systemjs.config.js');

    return builder
        .buildStatic(appProd + '/main.js', appProd + '/bundle.js', { minify: false, sourceMaps: true})
        .then(function() {
            console.log('Build complete');
        })
        .catch(function(err) {
            console.log('Build error');
            console.log(err);
        });
});
</code></pre>

<p>With relative paths, if I run just the <code>build-ts</code> gulp task and browse the "regular" way, things work. If I run the <code>bundle</code> gulp task and try to browse the app using the <code>bundle.js</code> file, the 404 errors occur wherever the app tries to load external templates and stylesheets. I've tried to be explicit about the relative nature of the paths by changing <code>templateUrl: 'some.component.html'</code> to <code>templateUrl: './some.component.html'</code> to no effect. Hard-coding absolute paths everywhere seems like a bad idea. What am I missing?</p>