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

Question

这是发往 https://github.com/systemjs/builder/issues/611 的交叉帖子

我正在尝试将我的 Angular 2 rc 1 应用程序与 systemjs-builder 0.15.16 buildStatic 方法捆绑在一起。 Angular 组件有一个 View 以及一个或多个脚本外部的样式表。它们在 one of two ways 的 @Component 元数据中被引用。

使用绝对路径:

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

使用现在推荐的相对路径:

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

我的应用程序使用相对路径，一切正常。今天我决定使用 systemjs-builder 的 buildStatic。只要存在相对路径，生成的文件就会抛出 404 错误，因为浏览器正在获取 localhost/some.component.html 而不是 localhost/app/some.component.html。下面是我的 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);
        });
});

使用相对路径，如果我只运行 build-ts gulp 任务并以“常规”方式浏览，一切正常。如果我运行 bundle gulp 任务并尝试使用 bundle.js 文件浏览应用程序，则在应用程序尝试加载外部模板和样式表的任何地方都会出现 404 错误。我试图通过将 templateUrl: 'some.component.html' 更改为 templateUrl: './some.component.html' 来明确路径的相对性质> 无效。到处硬编码绝对路径似乎是个坏主意。我错过了什么？

Answer 1

几天后我得到了a helpful response来自 github 上的 systemjs 成员。

诀窍是什么:在 systemjs-builder 的 buildStatic 方法的配置对象中，将 encodeNames 设置为 false。所以线...

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

成为...

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

附加信息

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