您会得到意外的匿名电话System.register，因为引用不会被加载正确的顺序。我用JSPM正确建立我的生产角度应用。有4份的过程。

第1部分：编译打字稿文件

  VAR TS =要求（一饮而尽，打字稿）;\r
VAR tsProject = ts.createProject（./应用/ tsconfig.json）;\r
gulp.task（编译：TS功能（）{\r
    VAR tsResult = tsProject.src（）\r
        .pipe（TS（tsProject））;\r
    tsResult.js.pipe（gulp.dest（./ wwwroot文件/程序））;\r
\r
}）;  

2部分：配置config.js（告诉JSPM如何捆绑您的应用程序）：

  System.config（{\r
  BASEURL：/，\r
  defaultJSExtensions：真实，\r
  transpiler：打字稿\r
  路径：{\r
    故宫：*：jspm_packages / NPM / *，\r
    github上：*：jspm_packages / github上/ *，\r
    node_modules *：node_modules / *\r
  }，\r
\r
  包：{\r
    应用程序：{\r
      defaultExtension：JS\r
    }\r
  }，\r
\r
  图：{\r
    angular2：node_modules / angular2，\r
    引导：github上：twbs/bootstrap@3.3.6\r
    jQuery的：github上：components/jquery@2.1.4\r
    rxjs：node_modules / rxjs，\r
    TS：github上：frankwallis/plugin-typescript@2.4.3\r
    打字稿：故宫：typescript@1.7.5\r
    github上：frankwallis/plugin-typescript@2.4.3：{\r
      打字稿：故宫：typescript@1.7.5\r
    }，\r
    github上：twbs/bootstrap@3.3.6：{\r
      jQuery的：github上：components/jquery@2.1.4\r
    }\r
  }\r
}）;  

3部分：使用一饮而尽，JSPM捆绑您的应用

  VAR gulp_jspm =要求（一饮而尽-JSPM）;\r
gulp.task（jspm_bundle，[编译：TS]，函数（）{\r
    返回gulp.src（./ wwwroot文件/程序/ boot.js）\r
        .pipe（gulp_jspm（{selfExecutingBundle：真}））\r
        .pipe（gulp.dest（./ wwwroot文件/程序/））;\r
\r
}）;\r
//这将创建一个名为boot.bundle.js\r
//注意我设置JSPM创建一个自动执行捆绑 

4：现在再压缩和Concat的所有资产：

  gulp.task（分：JS，[jspm_bundle]，功能（）{\r
    VAR filesArry = [\r
        ./wwwroot/lib/anguar2/angular2-polyfills.js\r
        ./wwwroot/lib/anguar2/es6-shim.js\r
        ./wwwroot/app/boot.bundle.js\r
        ！./ wwwroot文件/程序/ boot.bundle.min.js\r
    ];\r
    返回gulp.src（filesArry）\r
        .pipe（CONCAT（concatApp.js））\r
        .pipe（gulp.dest（./ wwwroot文件/ JS-TEMP））\r
        .pipe（重命名（boot.bundle.min.js））\r
        .pipe（丑化（））\r
        .pipe（gulp.dest（./ wwwroot文件/程序的构建））;\r
}）;  

最后，把一只漂亮整洁的脚本引用到你的index.html：

 ＆LT;脚本SRC =〜/应用程序的构建/ boot.bundle.min .js文件＆GT; ＆LT; / SCRIPT＆GT;  

I use SystemJS in my Angular2 project. I use tsconfig file for TypeScript. I want to use gulp to concat and minify my code for production version. I am having an issues with concating the code: each time I try to concat files I get either 'angular' not defined or 'system' not defined. I tried to modify the order that I try to load my files from node modules, however I did not succeeded.

I was wondering if any of you had this issues, and found an answer to it?

Here is my gulp file:

var gulp = require('gulp'),
            .....


var paths = {
    dist: 'dist',
    vendor: {
        js: [
            'node_modules/systemjs/dist/system.src.js',
            'node_modules/angular2/bundles/angular2.dev.js',
            'node_modules/angular2/bundles/angular2-polyfills.js',
            'node_modules/angular2/bundles/router.dev.js'
             ...
        ],
        css: []
},
    app: {
        templates: [
            'app/**/*.html',
            '!node_modules/*.html'
        ],
        scripts: [
            'app/**/*.ts',
            'app/config.ts',
            'app/app.ts'
        ]
    }
};

var tsProject = ts.createProject('tsconfig.json', {
    out: 'Whatever.js'
});

gulp.task('dev:build:templates', function () {
    return gulp.src(paths.app.templates)
        .pipe(ngHtml2Js({
            moduleName: 'Whatever',
            declareModule: false
        }))
        .pipe(concat("Whatever.tpls.min.js"))
        .pipe(gulp.dest(paths.dist));
});
gulp.task('prod:build:templates', function () {
    return gulp.src(paths.app.templates)
        .pipe(minifyHtml({
            empty: true,
            spare: true,
            quotes: true
        }))
        .pipe(ngHtml2Js({
            moduleName: 'whatever',
            declareModule: false
        }))
        .pipe(concat(paths.appName + ".tpls.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest(paths.dist));
});

gulp.task('dev:build:scripts', function () {
    var tsResult = tsProject.src()
        .pipe(sourcemaps.init())
        .pipe(ts(tsProject));

    return tsResult.js
        .pipe(sourcemaps.write({
            sourceRoot: '/app'
        }))
        .pipe(concat('whatever.js'))
        .pipe(gulp.dest(paths.dist));
});

gulp.task('dev:build:styles', function () {
    return gulp.src(paths.app.styles)
        .pipe(sass())
        .pipe(gulp.dest(paths.dist + '/css'));
});
gulp.task('dev:build:vendor', function () {
    return gulp.src(paths.vendor.js)
        .pipe(concat('vendor.min.js'))
        .pipe(gulp.dest(paths.dist))
});

gulp.task('dev:build', [
    'dev:build:vendor',
    'dev:build:templates',
    'dev:build:scripts',
    'dev:build:styles',
], function () {
});

This is how I load my files:

   <script src="vendor.min.js"></script>
   <script src="Whatever.js"></script>
   <script src="Whatever.tpls.min.js"></script>

And here are the erors that I am getting:

Uncaught TypeError: Unexpected anonymous System.register call.(anonymous function) @ vendor.min.js:2680load.metadata.format @ vendor.min.js:3220oldModule @ vendor.min.js:3749(anonymous function) @ vendor.min.js:2411SystemJSLoader.register @ vendor.min.js:2636(anonymous function) @ Whatever.js:2
Whatever.tpls.min.js:1 Uncaught ReferenceError: angular is not defined

You will get " Unexpected anonymous System.register call" because the references are not being loaded in the correct order. I use JSPM to properly build my angular app for production. There are 4 parts to the process.

Part 1: Compile your typescript files

var ts = require("gulp-typescript");
var tsProject = ts.createProject("./App/tsconfig.json");
gulp.task("compile:ts", function () {
    var tsResult = tsProject.src()
        .pipe(ts(tsProject));
    tsResult.js.pipe(gulp.dest("./wwwroot/app"));

});

Part 2: Configure config.js (to tell JSPM how to bundle your app):

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "typescript",
  paths: {
    "npm:*": "jspm_packages/npm/*",
    "github:*": "jspm_packages/github/*",
    "node_modules*": "node_modules/*"
  },

  packages: {
    "app": {
      "defaultExtension": "js"
    }
  },

  map: {
    "angular2": "node_modules/angular2",
    "bootstrap": "github:twbs/bootstrap@3.3.6",
    "jquery": "github:components/jquery@2.1.4",
    "rxjs": "node_modules/rxjs",
    "ts": "github:frankwallis/plugin-typescript@2.4.3",
    "typescript": "npm:typescript@1.7.5",
    "github:frankwallis/plugin-typescript@2.4.3": {
      "typescript": "npm:typescript@1.7.5"
    },
    "github:twbs/bootstrap@3.3.6": {
      "jquery": "github:components/jquery@2.1.4"
    }
  }
});

Part 3: Use gulp-jspm to bundle up your app

var gulp_jspm = require("gulp-jspm");
gulp.task("jspm_bundle", ["compile:ts"], function() {
    return gulp.src("./wwwroot/app/boot.js")
        .pipe(gulp_jspm({ selfExecutingBundle: true }))
        .pipe(gulp.dest("./wwwroot/app/"));

});
//this will create a file called boot.bundle.js
//note I have set jspm to create a self-executing bundle

4: Now minify and concat all your assets:

gulp.task("min:Js",["jspm_bundle"], function() {
    var filesArry = [
        "./wwwroot/lib/anguar2/angular2-polyfills.js",
        "./wwwroot/lib/anguar2/es6-shim.js",
        "./wwwroot/app/boot.bundle.js",
        "!./wwwroot/app/boot.bundle.min.js"
    ];
    return gulp.src(filesArry)
        .pipe(concat("concatApp.js"))
        .pipe(gulp.dest("./wwwroot/js-temp"))
        .pipe(rename("boot.bundle.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest("./wwwroot/app-build"));
});

Finally, put one nice tidy script reference into your index.html:

<script src="~/app-build/boot.bundle.min.js"> </script>

One of the nice features of this approach is that your bundled app will only contain the assets that are actually referenced in you import statements (jspm won't bundle it if you don't need it).