I am about to deploy my Angular2 (based on RC5) application. However, I am terribly struggling. I managed (following mostly https://stackoverflow.com/a/36315060/2332153) to deploy my own code in one uglified file, using gulp-typescript.
However, when I try to bundle vendor code and run it all in the browser, it tells me that @angular/platform-browser-dynamic
, @angular/core
and some others (http, forms, router, platform-browser) cannot be found (i.e., 404).
Now, my question is not where this error comes from (I believe I have misconfigured the bundling of the vendor files) but rather how to appropriately bundle my vendor files? Currently, I am doing the following (in gulp):
gulp.task('vendor-bundle', function() {
gulp.src([
'node_modules/core-js/client/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/rxjs/bundles/Rx.js',
'node_modules/@angular/common/bundles/common.umd.min.js',
'node_modules/@angular/compiler/bundles/compiler.umd.min.js',
'node_modules/@angular/core/bundles/core.umd.min.js',
'node_modules/@angular/forms/bundles/forms.umd.min.js',
'node_modules/@angular/http/bundles/http.umd.min.js',
'node_modules/@angular/platform-browser/bundles/platform-browser.umd.min.js',
'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js',
'node_modules/@angular/router/bundles/router.umd.min.js',
'node_modules/@angular/router-deprecated/bundles/router-deprecated.umd.min.js',
'node_modules/@angular/upgrade/bundles/upgrade.umd.min.js',
'node_modules/crypto-js/crypto-js.js',
'node_modules/dragula/dist/dragula.min.js',
'node_modules/jquery/dist/jquery.min.js',
'node_modules/bootstrap/dist/js/bootstrap.min.js',
'node_modules/papaparse/papaparse.min.js',
'node_modules/chart.js/dist/Chart.bundle.min.js',
'node_modules/showdown/dist/showdown.min.js'
])
.pipe(concat('vendors.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
For the sake of completeness, please also see my code for bundling the app files. Yet, I want to point out again, that the problem seems to be the vendor bundling.
gulp.task('app-bundle', function () {
var tsProject = ts.createProject('tsconfig.json', {
typescript: require('typescript'),
outFile: 'app.js'
});
var tsResult = gulp.src('./app/**/*.ts')
.pipe(ts(tsProject));
return tsResult.js.pipe(concat('app.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
How do I appropriately bundle my vendor files?
Thanks a lot and best regards, Mario