angularjs - systemjs-builder: Angular 2 Component Relative Paths cause 404 errors -
this cross post https://github.com/systemjs/builder/issues/611
i'm trying bundle angular 2 rc 1 app systemjs-builder 0.15.16 buildstatic
method. angular component has view 1 or more stylesheets external script. referred within @component
metadata in one of 2 ways
using absolute paths:
@component({ templateurl: 'app/some.component.html', styleurls: ['app/some.component.css'] })
using recommended relative paths:
@component({ moduleid: module.id, templateurl: 'some.component.html', styleurls: ['some.component.css'] })
my app uses relative paths, , things have been working fine. today decided use systemjs-builder's buildstatic
. resulting file throws 404 errors whenever there relative path because browser fetching localhost/some.component.html
instead of localhost/app/some.component.html
. below relevant part of 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 run build-ts
gulp task , browse "regular" way, things work. if run bundle
gulp task , try browse app using bundle.js
file, 404 errors occur wherever app tries load external templates , stylesheets. i've tried explicit relative nature of paths changing templateurl: 'some.component.html'
templateurl: './some.component.html'
no effect. hard-coding absolute paths everywhere seems bad idea. missing?
after couple of days got a helpful response systemjs member on github.
what did trick: in configuration object systemjs-builder's buildstatic
method, set encodenames
false
. 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" ] }
Comments
Post a Comment