angularjs - systemjs-builder: Angular 2 Component Relative Paths cause 404 errors

Question

This is a cross post to https://github.com/systemjs/builder/issues/611

I'm trying to bundle my Angular 2 rc 1 app with systemjs-builder 0.15.16 buildStatic method. An angular component has a view as well as one or more stylesheets external to the script. They are referred to within the @Component metadata in one of two ways

Using absolute paths:

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

Using the now recommended relative paths:

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

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

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

With relative paths, if I run just the build-ts gulp task and browse the "regular" way, things work. If I run the bundle gulp task and try to browse the app using the bundle.js 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 templateUrl: 'some.component.html' to templateUrl: './some.component.html' to no effect. Hard-coding absolute paths everywhere seems like a bad idea. What am I missing?

Answer 1

After a couple of days I got a helpful response from a systemjs member on github.

What did the trick: in the configuration object for systemjs-builder's buildStatic method, set encodeNames to false. So the line...

.buildStatic(
    appProd + '/main.js', 
    appProd + '/bundle.js', 
    { minify: false, sourceMaps: true}
)

became...

.buildStatic(
    appProd + '/main.js', 
    appProd + '/bundle.js', 
    { minify: false, sourceMaps: true, encodeNames:false}
)

Additional Info

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "./app"
  },
  "filesGlob": [
    "./dev/**/*.ts",
    "!./node_modules/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "typings"
  ]
}