systemjs Bauer: Eckige 2 Komponente Relative Pfade führen 404 Fehler

Question

Dies ist ein Quer Beitrag https://github.com/systemjs/builder/issues/611

Ich versuche, meinen Eckige 2 rc 1 app mit systemjs Bauer 0.15.16 buildStatic Verfahren zu bündeln. Eine eckige Komponente hat eine Ansicht sowie ein oder mehrere Stylesheets außerhalb des Skripts. Sie werden innerhalb der @Component Metadaten bezeichnet in one of two ways

Mit absoluten Pfaden:

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

die jetzt empfohlen relative Pfade verwenden:

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

Meine app verwendet relative Pfade, und die Dinge haben gearbeitet fein. Heute habe ich mich entschieden, systemjs-builder buildStatic zu verwenden. Die resultierende Datei löst 404-Fehler aus, wenn ein relativer Pfad vorhanden ist, da der Browser localhost/some.component.html anstelle von localhost/app/some.component.html abruft. Unten ist der relevante Teil meines 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); 
     }); 
}); 

mit relativen Pfaden, wenn ich nur die build-ts schluck Aufgabe ausführen und die „normale“ Art und Weise finden, die Dinge funktionieren. Wenn ich die Schluckaufgabe bundle starte und versuche, die App mit der Datei bundle.js zu durchsuchen, treten die 404-Fehler auf, wenn die App versucht, externe Vorlagen und Stylesheets zu laden. Ich habe versucht, die relative Natur der Pfade explizit zu machen, indem ich templateUrl: 'some.component.html' zu templateUrl: './some.component.html' ohne Wirkung ändere. Absolut codierte absolute Pfade scheinen eine schlechte Idee zu sein. Was vermisse ich?

Answer 1

Nach ein paar Tagen habe ich a helpful response von einem Systemjs Mitglied auf Github.

Was war der Trick: Setzen Sie im Konfigurationsobjekt für Systemjs-Builders Methode encodeNames auf false. So ist die Linie ...

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

wurde ...

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

Zusätzliche Informationen

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" 
    ] 
}