Angular 2 create single app.min.js for production

Question

i've been searching for answers for last 4 hours and couldn't get the answer so i'll ask it myself and hope i can get the answer

i'm using gulp to build my ts files in my angular app, i have lots of components and lots of sdk files for rxjs (selectors, reducers ...) i have gulp task that builds all of my ts files into js files and it works perfectly, only problem is that user has to download all the js files and it takes forever to download all of them, i want to make one single app.min.js file from all of these ts files but was not able to do that, its not necessary to explain how i uglify this app.js i can do that on my own but i can't get all of my code in one file without errors

Are you using SystemJS as your module loader? If so [SystemJS Builder](https://github.com/systemjs/builder) is good for bundling and minifying everything. — JayChase, Nov 17 '16 at 13:00

score 1 · Answer 1 · answered Nov 15 '16 at 18:24

1

So I imagine the following will work with gulp. I've not tried it with an Angular 2 setup, but I imagine some variation of this theme will get the result.

You will need the following gulp plugins:

gulp-typescript
gulp-concat
gulp-uglify
gulp-rename

Or you can just grab gulp-load-plugins and all of these are available from there. I will demonstrate that method for simplicity.

The setup you will need would be something like the following:

const tsConfig = require('./path/to/tsConfig.json').compilerOptions;
const plugins = require('gulp-load-plugins')();

const appFiles = ['{{THE FILES YOU WANT TO COMPILE}}'];
const buildDir = './path/to/desired/build/directory';

Then the following pipe should achieve the desired result:

gulp.src(appFiles)
    .pipe(plugins.typescript(tsConfig))
    .pipe(plugins.concat('app.js'))
    .pipe(plugins.uglify())
    .pipe(plugins.rename('app.min.js'))
    .pipe(gulp.dest(buildDir));

I know for my case, I needed to include a gulp-ng-annotate step before uglifying, so I'm not sure if something similar will have to be done for Angular 2. But the general idea is a combination of gulp-typescript passing in your tsconfig.json somehow and gulp-concat for creating one output file.

Hope that helps. Let me know what issues arise from that.

answered Nov 15 '16 at 18:24

theRealRobG

622
3
9

this builded everything but didn't remove require statements so there are errors what should i do? i think i have to change tsconfig but i dont know what to change – nikagar4 Nov 15 '16 at 18:35
Gulp is not a module bundler, meaning you can't just use gulp to concatenate modules into one file, and expect it to work. You'll need to use Gulp in conjunction with some kind of module bundler (if you really want to keep using gulp, because module bundlers can cover a lot of the functionality that gulp could be used for). I found this article about using WebPack with Gulp: https://webpack.github.io/docs/usage-with-gulp.html – theRealRobG Nov 16 '16 at 17:28
Or actually this article from TypeScript about using TS and gulp with a module bundler: https://www.typescriptlang.org/docs/handbook/gulp.html – theRealRobG Nov 16 '16 at 17:29
I'm assuming that this is what you are trying to do, but let me know otherwise (of course I have no idea what your actual code looks like, only answering the process of using gulp to compile TS files into a single JS file). It would really help if you let me know the actual error(s) you're seeing, because I'm just guessing it's something like my above comments. – theRealRobG Nov 16 '16 at 17:31
i get bunch of errors i've tried to do it plenty of ways but couldn't do it, one of the biggest problem is that when i concatenate files, browser still keeps looking for the components in different files instead of this big app.min.js i'm new to angular and i'm reading a lot about it but i still cant figure out how to do it – nikagar4 Nov 16 '16 at 20:01
You can't just concatenate files together if you're using modules (`import`, `export`, `require` etc.). Sorry, I didn't understand your requirements from your question. My previous two comments can help your situation. Read this article to help understand module bundling for browsers: https://www.sitepoint.com/javascript-modules-bundling-transpiling/ – theRealRobG Nov 18 '16 at 00:29
Alternatively, if you're just looking for a way to package your application for consumption in a browser, and you don't care too much about sticking to gulp, I've put together an Angular 2 boilerplate (taken from the Angular website) that just sets up a project for development with Angular 2 and Webpack (including Karma for unit tests). Url is here: https://github.com/theRealRobG/angular-webpack-boilerplate – theRealRobG Nov 18 '16 at 00:31

score 1 · Answer 2 · answered Nov 17 '16 at 12:22

Just yesterday I had the same requirement...

after a little digging I found this excellent sample: https://github.com/Anjmao/angular2-production-workflow

check it out - It basically demonstrates how exactly you can bundle everything (external libs as well as your own component template + styles) into TWO single js-files. Works absolutely great and is easy to implement.

Hope this helps...

Angular 2 create single app.min.js for production

2 Answers2