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'']);