I recently posted this on https://github.com/systemjs/builder/issues/611
My goal is to bundle my Angular 2 rc 1 application using systemjs-builder 0.15.16's buildStatic method. In my Angular component, there is a view and one or more external stylesheets referenced within the @Component metadata in two different ways
The first method involves absolute paths:
@Component({
templateUrl: 'app/some.component.html',
styleUrls: ['app/some.component.css']
})
The second method is using recommended relative paths:
@Component({
moduleId: module.id,
templateUrl: 'some.component.html',
styleUrls: ['some.component.css']
})
Previously, everything worked fine with relative paths. However, when I tried to use systemjs-builder's buildStatic today, the resulting file started throwing 404 errors for any templates or stylesheets with relative paths because the browser was looking for localhost/some.component.html instead of
localhost/app/some.component.htmlvar 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);
});
});
When using relative paths, running only the build-ts gulp task works when browsing normally. However, if I run the bundle gulp task and attempt to browse the app using the bundle.js file, 404 errors occur wherever the app tries to load external templates and stylesheets. Even explicitly stating the relative nature of the paths by changing
templateUrl: 'some.component.html'templateUrl: './some.component.html'