Comment préparer une version avec SystemJS et Gulp?

J’utilise SystemJS dans mon projet Angular2. J’utilise le fichier tsconfig pour TypeScript. Je veux utiliser gulp pour concaténer et minimiser mon code pour la version de production. J’ai un problème avec la concaténation du code: chaque fois que j’essaie de concaténer des fichiers, je trouve soit «angular» non défini, soit «système» non défini. J’ai essayé de modifier l’ordre dans lequel j’essaie de charger mes fichiers à partir des modules de nœud, mais je n’ai pas réussi.

Je me demandais si l’un d’entre vous avait ce problème et a trouvé une réponse?

Voici mon fichier Gulp:

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 () { }); 

Voici comment je charge mes fichiers:

• Que sont les typographies typographiques?
• Erreur lors de la tentative de diff ”
• ngSubmit actualise la page en forme angular 2
• Angular2 Gestion des exceptions globales
• Sujet vs BehaviorSubject vs ReplaySubject dans Angular

Et voici les choses que je reçois:

 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 

• Comment configurer l’application Angular2 à l’aide de typecript avec Maven?
• Qu’est-ce que le navigateur angular?
• 2 formes réactives angulars: tableau de valeurs de cases à cocher
• Limite à 2 décimales avec un simple tuyau
• Comment générer des composants dans un dossier spécifique avec des angles angulars?

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

 var path = require("path"); var Builder = require('systemjs-builder'); // optional constructor options // sets the baseURL and loads the configuration file var builder = new Builder('path/to/baseURL', 'path/to/system/config-file.js'); builder .bundle('local/module.js', 'outfile.js') .then(function() { console.log('Build complete'); }) .catch(function(err) { console.log('Build error'); console.log(err); });