angularjs – systemjs-builder:Angular 2 Component Relative Paths导致404错误

前端之家收集整理的这篇文章主要介绍了angularjs – systemjs-builder:Angular 2 Component Relative Paths导致404错误前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是 https://github.com/systemjs/builder/issues/611的交叉帖子

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

使用绝对路径

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

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

@H_301_5@@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的相关部分

@H_301_5@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’无效来明确路径的相对性质.硬编码绝对路径似乎是一个坏主意.我错过了什么?

几天后,我从github上的systemjs成员获得了 a helpful response.

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

@H_301_5@.buildStatic( appProd + '/main.js',sourceMaps: true} )

成为…

@H_301_5@.buildStatic( appProd + '/main.js',sourceMaps: true,encodeNames:false} )

附加信息

tsconfig.json

@H_301_5@{ "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" ] }
原文链接:https://www.f2er.com/angularjs/142431.html

猜你在找的Angularjs相关文章