tablas - formularios reactivos angular 6

¿Cómo se puede agrupar Angular 2 usando System JS Builder?

Question

Actualmente estoy usando System JS con System JS Builder para agrupar mi aplicación, sus activos y las bibliotecas a las que hace referencia. Mi problema es que puedo agrupar bibliotecas a las que se hace referencia explícitamente en index.html, por ejemplo:

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

Sin embargo, no puedo entender cómo puedo agrupar Angular 2 en sí mismo, o al menos los módulos requeridos de Angular 2, ya que en realidad no se mencionan en el HTML. ¿Cómo puede hacerse esto?

Answer 1

Puede usar un paquete como Webpack o Rollup (mi preferencia porque hace temblar los árboles).

El equipo de Angular parece estar armando herramientas geniales alrededor del Rollup a tiempo para el lanzamiento completo. La nota clave del día 2 de ng-conf este año discutió y demostró el compilador fuera de línea . Comienza a mirar esto a las 25:30.

Answer 2

Usando systemjs-builder puede agrupar Angular 2 con su código de aplicación y agrupar sus otras bibliotecas por separado.

Incluí una biblioteca a la que haría referencia directamente en HTML en vendors.min.js y cualquier biblioteca referenciada a través de mi código de aplicación system.config.js plus en una app.min.js. En este ejemplo , puede ver que todas las dependencias de Tour of Heroes se cargan en la página en <10 solicitudes de red ( código fuente ).

// Bundle dependencies into vendors file
gulp.task(''bundle:libs'', function () {
    return gulp.src([
        ''node_modules/jquery/dist/jquery.min.js'',
        ''node_modules/bootstrap/dist/js/bootstrap.min.js'',
        ''node_modules/semantic-ui/dist/semantic.min.js'',
        ''node_modules/es6-shim/es6-shim.min.js'',
        ''node_modules/es6-promise/dist/es6-promise.min.js'',
        ''node_modules/systemjs/dist/system.src.js'',
        ''system.config.js'',
      ])
        .pipe(concat(''vendors.min.js''))
        .pipe(uglify())
        .pipe(gulp.dest(''public/lib/js''));
});

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

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

// Minify JS bundle
gulp.task(''minify:js'', function() {
  return gulp
    .src(''public/dist/js/app.min.js'')
    .pipe(uglify())
    .pipe(gulp.dest(''public/dist/js''));
});

gulp.task(''scripts'', [''compile:ts'', ''bundle:js'', ''minify:js'']);