2

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

Community
  • 1
  • 1
Mario
  • 63
  • 6

0 Answers0