title: systemjs-builder: Angular 2 Component Relative Paths cause 404 errors
body: <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>