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 方法捆绑在一起.角度组件具有视图以及脚本外部的一个或多个样式表.它们在 两种方式之一

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 成员的有用回复.

诀窍是什么:在 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屋！