Patrick Patrick - 2 years ago 963
AngularJS Question

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

This is a cross post to

I'm trying to bundle my Angular 2 rc 1 app with systemjs-builder 0.15.16

method. An angular component has a view as well as one or more stylesheets external to the script. They are referred to within the
metadata in one of two ways

Using absolute paths:

templateUrl: 'app/some.component.html',
styleUrls: ['app/some.component.css']

Using the now recommended relative paths:

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
. The resulting file throws 404 errors whenever there is a relative path because the browser is fetching
instead of
. 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')
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');

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

Answer Source

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...

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


    appProd + '/main.js', 
    appProd + '/bundle.js', 
    { minify: false, sourceMaps: true, encodeNames:false}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download