systemjs-builder:Angular 2组件相对路径导致404错误 [英] systemjs-builder: Angular 2 Component Relative Paths cause 404 errors

问题描述

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

我正在尝试将我的Angular 2 rc 1应用程序与systemjs-builder 0.15.16 buildStatic方法捆绑在一起.角度组件具有视图以及脚本外部的一个或多个样式表.在两种方法之一中的@Component元数据中对其进行引用

I'm trying to bundle my Angular 2 rc 1 app with systemjs-builder 0.15.16 buildStatic method. An angular component has a view as well as one or more stylesheets external to the script. They are referred to within the @Component metadata in one of two ways

使用绝对路径:

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

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

Using the now recommended relative paths:

@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

My app uses relative paths, and things have been working fine. Today I decided to use systemjs-builder's buildStatic. The resulting file throws 404 errors whenever there is a relative path because the browser is fetching localhost/some.component.html instead of localhost/app/some.component.html. 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')
        .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'无效来明确说明路径的相对性质.硬编码绝对路径似乎是一个坏主意.我想念什么?

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

推荐答案

几天后，我得到有用的回复，来自github上的systemjs成员.

After a couple of days I got a helpful response from a systemjs member on github.

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

What did the trick: in the configuration object for systemjs-builder's buildStatic method, set encodeNames to false. So the line...

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

这篇关于systemjs-builder:Angular 2组件相对路径导致404错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！