It's my first application with Angular 2.
We run aot and rollup in order to generate a bundle. But we must always add polyfills (shim, reflect-metadata and zone.js) to the index.html with script HTML element.
Is it possible to add this polyfills to the bundle?
Another question: How add external JS libraries to the bundle. Actually, like polyfills we must add them to the index.html
You can create a separate bundle for globals and polyfills with something like gulp or webpack and include it your index.html. e.g. with gulp you could do
let globalJs = gulp.series(
function cleanGlobalJs() {
return del('dist/global*.js')
},
function BuildGlobalJs() {
return gulp.src([
'node_modules/core-js/client/shim.min.js',
'node_modules/zone.js/dist/zone.min.js'
])
.pipe(concat('global.js'))
.pipe(rev())
.pipe(gulp.dest('dist'));
}
);
This is taken from an angular build I setup with rollup here https://github.com/robianmcd/hello-angular-rollup/blob/master/gulpfile.js#L125-L139
If you really wanted one bundle you could just concatenate this bundle with the one from rollup.
I use gulp this way:
gulp.task('bundle:vendor', function() {
return gulp
.src([
"node_modules/core-js/client/shim.min.js",
"node_modules/zone.js/dist/zone.js"
])
.pipe(concat("vendor.bundle.js"))
.pipe(gulp.dest('dist'));
});
Add the rollup-plugin-node-resolve plugin, and you'll be able to bundle any dependencies that live in your node_modules folder including polyfills. You may also need to include rollup-plugin-commonjs.
