Uso SystemJS nel mio progetto Angular2. Uso il file tsconfig per TypeScript. Voglio usare gulp per concatizzare e minimizzare il mio codice per la versione di produzione. Sto riscontrando dei problemi nel concedere il codice: ogni volta che provo a concatare i file ottengo sia ‘angular’ non definito o ‘sistema’ non definito. Ho provato a modificare l’ordine in cui provo a caricare i miei file dai moduli del nodo, ma non ci sono riuscito.
Mi stavo chiedendo se qualcuno di voi ha avuto questo problema e ha trovato una risposta ad esso?
Ecco il mio file 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 () { });
Ecco come carico i miei file:
E qui ci sono gli erori che sto ottenendo:
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
Otterrai “Chiamata System.register anonima imprevista” perché i riferimenti non vengono caricati nell’ordine corretto. Io uso JSPM per build correttamente la mia app angular per la produzione. Ci sono 4 parti nel processo.
Parte 1: compila i tuoi file dattiloscritti
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")); });
Puoi usare SystemJS Builder
facile come questo
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); });
puoi guardare la configurazione completa nel mio progetto iniziale
Penso che abbiamo trovato la causa principale di questo. Onestamente, ci sono già stato prima, quindi il modo in cui rintraccio questo tipo di problema