online - ¿Cómo agrupar la aplicación Angular 2 Typescript con Gulp y SystemJS?

javascript to typescript online

Question

Estoy usando Typescript con SystemJS para la carga de módulos y Gulp para el corredor de tareas en mi proyecto Angular 2. La versión actual de Angular en el proyecto es RC2 pero el problema está presente también con RC1. Seguí los pasos de la respuesta de Brando here .

Después de agrupar mi aplicación y la carga inicial del sitio web, SystemJS arroja un error:

Error: http://localhost:57462/app/app.bundle.js detectado como registro pero no se ejecutó.

La aplicación funciona pero el error en la consola definitivamente no es algo bueno.

Probé mi configuración en un proyecto vacío y el problema está presente de nuevo, así que creo que el problema está en la configuración.

Aquí está:

Gulpfile

var gulp = require(''gulp'');
var sourcemaps = require(''gulp-sourcemaps'');
var concat = require(''gulp-concat'');
var typescript = require(''gulp-typescript'');
var jspm = require(''gulp-jspm-build'');

gulp.task(''compile:ts'', function () {
    return gulp.src([''./appTS/**/*.ts''])
        .pipe(sourcemaps.init())
            .pipe(typescript({
                noEmitOnError: true,
                target: ''ES5'',
                removeComments: false,
                experimentalDecorators: true,
                emitDecoratorMetadata: true,
                module: ''system'',
                moduleResolution: ''node''
            }))
        .pipe(sourcemaps.write(''./''))
        .pipe(gulp.dest(''./app/''));
});

gulp.task(''copy:vendor'', function () {
    return gulp.src([
        ''node_modules/systemjs/dist/system-polyfills.js'',
        ''node_modules/reflect-metadata/Reflect.js'',
        ''node_modules/core-js/client/shim.min.js'',
        ''node_modules/zone.js/dist/zone.min.js'',
        ''node_modules/systemjs/dist/system.js'',
        ''node_modules/rxjs/bundles/Rx.js''
    ]).pipe(gulp.dest(''./assets/vendor/''));
});

gulp.task(''bundle:app'', [''compile:ts''], function () {
    return jspm({
        bundleOptions: {
            minify: true,
            mangle: false
        },
        bundleSfx: true,
        bundles: [
            { src: ''./app/main.js'', dst: ''bundle.js'' }
        ]
    })
    .pipe(gulp.dest(''./app/''));
});

gulp.task(''bundle'', [''bundle:app'', ''copy:vendor''], function () {
    return gulp.src([
        ''./assets/vendor/Reflect.js'',
        ''./assets/vendor/shim.min.js'',
        ''./assets/vendor/zone.min.js'',
        ''./app/bundle.js''])
    .pipe(concat(''app.bundle.js''))
    .pipe(gulp.dest(''./app/''))
});

gulp.task(''default'', [''bundle'']);

var packages = {
    app: {
        format: ''register'',
        defaultExtension: ''js''
    },
    "symbol-observable": { main: ''index.js'', defaultExtension: ''js'' },
    "reflect-metadata": { main: ''Reflect.js'', defaultExtension: ''js'' }
};

var ngPackageNames = [''common'',
                      ''compiler'',
                      ''core'',
                      ''http'',
                      ''platform-browser'',
                      ''platform-browser-dynamic'',
                      ''router'',
                      ''router-deprecated'',
                      ''upgrade''];

ngPackageNames.forEach(function (element, index, array) {
    packages[''@angular/'' + element] = { main: ''bundles/'' + element + ''.umd.min.js'', defaultExtension: ''js'' };
});

System.config({
    main: ''dispel.bundle.min'',
    defaultExtension: ''js'',
    format: ''register'',
    packages: packages,
    baseURL: "/",
    defaultJSExtensions: true,
    transpiler: false,
    paths: {
        "node_modules*": "node_modules*",
        "@angular*": "node_modules/@angular/*"
    },
    map: {
        "@angular": "node_modules/@angular",
        "symbol-observable": "node_modules/symbol-observable",
        "ng2-translate": "node_modules/ng2-translate",
        "es6-shim": "node_modules/es6-shim",
        "reflect-metadata": "node_modules/reflect-metadata",
        "rxjs": "node_modules/rxjs",
        "zone.js": "node_modules/zone.js"
    }
});

Answer 1

¿Has probado usar SystemJS Builder en tu bundle:app tarea de la bundle:app lugar de jspm?

A continuación se muestra una versión simplificada de cómo agrupar Tour of Heroes con 2.0.0-rc.1 ( source , ejemplo en vivo ).

gulpfile.js

var gulp = require(''gulp'');
var sourcemaps = require(''gulp-sourcemaps'');
var concat = require(''gulp-concat'');
var typescript = require(''gulp-typescript'');
var systemjsBuilder = require(''systemjs-builder'');

// Compile TypeScript app to JS
gulp.task(''compile:ts'', function () {
  return gulp
    .src([
        "appTS/**/*.ts",
        "typings/*.d.ts"
    ])
    .pipe(sourcemaps.init())
    .pipe(typescript({
        "module": "system",
        "moduleResolution": "node",
        "outDir": "app",
        "target": "ES5"
    }))
    .pipe(sourcemaps.write(''.''))
    .pipe(gulp.dest(''app''));
});

// Generate systemjs-based bundle (app/app.js)
gulp.task(''bundle:app'', function() {
  var builder = new systemjsBuilder(''public'', ''./system.config.js'');
  return builder.buildStatic(''app'', ''app/app.js'');
});

// Copy and bundle dependencies into one file (vendor/vendors.js)
// system.config.js can also bundled for convenience
gulp.task(''bundle:vendor'', function () {
    return gulp.src([
        ''node_modules/zone.js/dist/zone.js'',
        ''node_modules/reflect-metadata/Reflect.js'',
        ''node_modules/systemjs/dist/system-polyfills.js'',
        ''node_modules/core-js/client/shim.min.js'',
        ''node_modules/systemjs/dist/system.js'',
        ''system.config.js'',
      ])
        .pipe(concat(''vendors.js''))
        .pipe(gulp.dest(''vendor''));
});

// Copy dependencies loaded through SystemJS into dir from node_modules
gulp.task(''copy:vendor'', function () {
    return gulp.src([
        ''node_modules/rxjs/bundles/Rx.js'',
        ''node_modules/@angular/**/*''
    ])
    .pipe(gulp.dest(''vendor''));
});

gulp.task(''vendor'', [''bundle:vendor'', ''copy:vendor'']);
gulp.task(''app'', [''compile:ts'', ''bundle:app'']);

// Bundle dependencies and app into one file (app.bundle.js)
gulp.task(''bundle'', [''vendor'', ''app''], function () {
    return gulp.src([
        ''app/app.js'',
        ''vendor/vendors.js''
        ])
    .pipe(concat(''app.bundle.js''))
    .pipe(uglify())
    .pipe(gulp.dest(''./app''));
});

gulp.task(''default'', [''bundle'']);

system.config.js

var map = {
  ''app'':                                ''app'',
  ''rxjs'':                               ''vendor/rxjs'',
  ''zonejs'':                             ''vendor/zone.js'',
  ''reflect-metadata'':                   ''vendor/reflect-metadata'',
  ''@angular'':                           ''vendor/@angular''
};

var packages = {
  ''app'':                                { main: ''main'', defaultExtension: ''js'' },
  ''rxjs'':                               { defaultExtension: ''js'' },
  ''zonejs'':                             { main: ''zone'', defaultExtension: ''js'' },
  ''reflect-metadata'':                   { main: ''Reflect'', defaultExtension: ''js'' }
};

var packageNames = [
  ''@angular/common'',
  ''@angular/compiler'',
  ''@angular/core'',
  ''@angular/http'',
  ''@angular/platform-browser'',
  ''@angular/platform-browser-dynamic'',
  ''@angular/router'',
  ''@angular/router-deprecated'',
  ''@angular/testing'',
  ''@angular/upgrade'',
];

packageNames.forEach(function(pkgName) {
  packages[pkgName] = { main: ''index.js'', defaultExtension: ''js'' };
});

System.config({
  map: map,
  packages: packages
});

Answer 2

Al usar Gulp podemos agrupar nuestro proyecto pero sugest ng build o npm build para agrupar keep gulp solo para corredores de tareas

Answer 3

Estaba tratando de agrupar para producción usando gulp y Angular 2.4 pero todos los ejemplos tenían problemas de bloqueo; incluso git clone los ejemplos de trabajo no funcionó. Finalmente lo hice funcionar usando angular2-webpack-starter y copiando mis archivos allí. Resulta que las dependencias eran fácilmente manejables en comparación con el uso de SystemJS donde tienes que agregar a system.config.js y esperar que las dependencias sigan los patrones que SystemJS quiere.

Answer 4

Quizás esto podría ayudar:

System.config({
  "meta": {
    "app.bundle.js": {
      "format": "register"
    }
  }
});