How to run and minimize angular2 application?

Question

I would like to concatenate and minimize the angular2 application. What I did was first concatenate all my * .js files (boot.js, application.js, then all components) into one file and paste it into my index.html. I also deleted

<script>
        System.config({
            packages: {
                app: {
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

and replaced it with

<script src="js/allMyConcatFilesIntoOne.js"></script>

But I got an error that requires missing / unknown.

How are angular2 applications populated in a single file? Should I first collect all typescript files and then concat and then compile it with gulp?

Hello

Tenoda

Answer 1

Use gulpfile.js as follows:

/// <binding Clean='clean' />
            "use strict";

            var gulp = require("gulp"),
                rimraf = require("rimraf"),
                concat = require("gulp-concat"),
                cssmin = require("gulp-cssmin"),
                uglify = require("gulp-uglify"),
                tsc = require("gulp-typescript");

            var webroot = "./wwwroot/";

            var paths = {
                js: webroot + "js/**/*.js",
                ts: webroot + "app/**/*.ts",
                minJs: webroot + "js/**/*.min.js",
                css: webroot + "css/**/*.css",
                minCss: webroot + "css/**/*.min.css",
                concatJsDest: webroot + "js/site.min.js",
                concatCssDest: webroot + "css/site.min.css"
            };

            gulp.task("clean:js", function (cb) {
                rimraf(paths.concatJsDest, cb);
            });

            gulp.task("clean:css", function (cb) {
                rimraf(paths.concatCssDest, cb);
            });

            gulp.task("clean", ["clean:js", "clean:css"]);

            gulp.task("min:js", function () {
                return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
                    .pipe(concat(paths.concatJsDest))
                    .pipe(uglify())
                    .pipe(gulp.dest("."));
            });

            gulp.task("min:css", function () {
                return gulp.src([paths.css, "!" + paths.minCss])
                    .pipe(concat(paths.concatCssDest))
                    .pipe(cssmin())
                    .pipe(gulp.dest("."));
            });

            gulp.task("min", ["min:js", "min:css"]);