我正在尝试使用我的应用创建和使用该捆绑包。(我提到https://github.com/templth/angular2-packaging)
我能够创建捆绑包它给了我2个文件一个vendor.min.js和app.min.js每个近470Kb但是在使用时我收到错误 GET:http://localhost:10039/retacc-sbb-ri-erepko-main/integrated-workshop/bundle/app.min.js(未找到404)
的index.jsp
<script>
window.rest = '<%=(String) pageContext.getAttribute("resourceUrl", PageContext.REQUEST_SCOPE)%>'
</script>
<base href="/">
<!-- inject:js -->
<!-- endinject -->
<!-- inject:css -->
<!-- endinject -->
<appp>Loading...</app>
<!--bundled source :start-->
<script src="../build/bundle/app.min.js"></script>
<script src="../build/bundle/vendors.min.js"></script>
<!--bundled source :end-->
<!-- @if isDev -->
<script src="/retacc-sbb-ri-erepko-main/integrated-workshop/systemjs.config.js"></script>
<!-- @endif -->
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
gulp任务
var gulp = require('gulp');
const ts = require('gulp-typescript');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
var addsrc = require('gulp-add-src');
gulp.task('app-bundle', function() {
var tsProject = ts.createProject('tsconfig.json', {
typescript: require('typescript')
});
var tsResult = gulp.src([
'src/**/*.ts'
])
.pipe(ts(tsProject));
return tsResult.js.pipe(addsrc.append('config-prod.js'))
.pipe(concat('app.min.js'))
.pipe(uglify())
.pipe(gulp.dest('build/bundle'));
});
gulp.task('vendor-bundle', function() {
return gulp.src([
'node_modules/es6-shim/es6-shim.min.js',
'node_modules/zone.js/dist/zone.js',
'node_modules/reflect-metadata/Reflect.js',
'node_modules/systemjs/dist/system.src.js',
'node_modules/primeui/primeui-ng-all.min.js',
'node_modules/moment/moment.js'
])
.pipe(concat('vendors.min.js'))
.pipe(uglify())
.pipe(gulp.dest('build/bundle'));
});
systemjs.config.js
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
baseURL: '/retacc-sbb-ri-erepko-main/integrated-workshop',
paths: {
// paths serve as alias
'npm:': 'libs/node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'bundle',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'primeng': 'npm:primeng',
'ng2-translate': 'npm:ng2-translate',
'@ngrx': 'npm:@ngrx',
'ngrx-store-logger': 'npm:ngrx-store-logger/dist',
'moment': 'npm:moment'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
'app': {main: 'app.min.js', defaultExtension: 'js'},
'rxjs': {main: 'Rx.js', defaultExtension: 'js'},
'angular2-in-memory-web-api': {main: 'index.js', defaultExtension: 'js'},
'primeng': {defaultExtension: 'js'},
'ng2-translate': {main: 'ng2-translate.js', defaultExtension: 'js'},
'@ngrx/core': {main: 'bundles/core.umd.js', defaultExtension: 'js'},
'@ngrx/store': {main: 'bundles/store.umd.js', defaultExtension: 'js'},
'ngrx-store-logger': { main: 'index.js', format: 'cjs'},
'moment': { main: 'moment', defaultExtension: 'js'}
}
});
})(this);