¿Cómo implemento una aplicación Angular 2 + Typescript + systemjs?

Hay un tutorial de inicio rápido en angular.io que usa typescript y systemjs. Ahora que tengo esa miniaplicación en ejecución, ¿cómo podría crear algo desplegable? No pude encontrar ninguna información al respecto en absoluto.

¿Necesito alguna herramienta adicional, alguna configuración adicional en System.config?

(Sé que podría usar el paquete web y crear un solo paquete.js, pero me gustaría usar systemjs como se usa en el tutorial)

¿Podría alguien compartir su proceso de comstackción con esta configuración (Angular 2, TypeScript, systemjs)

La clave para entender en este nivel es que al utilizar la siguiente configuración, no puede concat comstackr directamente los archivos JS.

En la configuración del comstackdor de TypeScript:

{ "compilerOptions": { "emitDecoratorMetadata": true, "experimentalDecorators": true, "declaration": false, "stripInternal": true, "module": "system", "moduleResolution": "node", "noEmitOnError": false, "rootDir": ".", "inlineSourceMap": true, "inlineSources": true, "target": "es5" }, "exclude": [ "node_modules" ] } 

En el HTML

 System.config({ packages: { app: { defaultExtension: 'js', format: 'register' } } }); 

Como cuestión de hecho, estos archivos JS contendrán módulos anónimos. Un módulo anónimo es un archivo JS que usa System.register pero sin el nombre del módulo como primer parámetro. Esto es lo que el comstackdor typescript genera de forma predeterminada cuando systemjs está configurado como administrador de módulos.

Entonces, para tener todos sus módulos en un solo archivo JS, necesita aprovechar la propiedad outFile dentro de la configuración del comstackdor de TypeScript.

Puedes usar el siguiente gulp interno para hacer eso:

 const gulp = require('gulp'); const ts = require('gulp-typescript'); var tsProject = ts.createProject('tsconfig.json', { typescript: require('typescript'), outFile: 'app.js' }); gulp.task('tscompile', function () { var tsResult = gulp.src('./app/**/*.ts') .pipe(ts(tsProject)); return tsResult.js.pipe(gulp.dest('./dist')); }); 

Esto podría combinarse con algún otro procesamiento:

  • para uglificar las cosas los archivos comstackdos de TypeScript
  • para crear un archivo app.js
  • para crear un archivo vendor.js para bibliotecas de terceros
  • para crear un archivo boot.js para importar el módulo que inicia la aplicación. Este archivo debe estar incluido al final de la página (cuando se carga toda la página).
  • actualizar el index.html para tener en cuenta estos dos archivos

Las siguientes dependencias se usan en las tareas de gulp:

  • gulp-concat
  • gulp-html-replace
  • gulp-typescript
  • Gulp-uglify

La siguiente es una muestra para que pueda ser adaptada.

  • Crear el archivo app.min.js

     gulp.task('app-bundle', function () { var tsProject = ts.createProject('tsconfig.json', { typescript: require('typescript'), outFile: 'app.js' }); var tsResult = gulp.src('app/**/*.ts') .pipe(ts(tsProject)); return tsResult.js.pipe(concat('app.min.js')) .pipe(uglify()) .pipe(gulp.dest('./dist')); }); 
  • Crear el archivo vendors.min.js

     gulp.task('vendor-bundle', function() { gulp.src([ 'node_modules/es6-shim/es6-shim.min.js', 'node_modules/systemjs/dist/system-polyfills.js', 'node_modules/angular2/bundles/angular2-polyfills.js', 'node_modules/systemjs/dist/system.src.js', 'node_modules/rxjs/bundles/Rx.js', 'node_modules/angular2/bundles/angular2.dev.js', 'node_modules/angular2/bundles/http.dev.js' ]) .pipe(concat('vendors.min.js')) .pipe(uglify()) .pipe(gulp.dest('./dist')); }); 
  • Crear archivo boot.min.js

     gulp.task('boot-bundle', function() { gulp.src('config.prod.js') .pipe(concat('boot.min.js')) .pipe(uglify()) .pipe(gulp.dest('./dist')); }); 

    El config.prod.js simplemente contiene lo siguiente:

      System.import('boot') .then(null, console.error.bind(console)); 
  • Actualice el archivo index.html

     gulp.task('html', function() { gulp.src('index.html') .pipe(htmlreplace({ 'vendor': 'vendors.min.js', 'app': 'app.min.js', 'boot': 'boot.min.js' })) .pipe(gulp.dest('dist')); }); 

    El index.html tiene el siguiente aspecto:

                      Loading...     

Tenga en cuenta que System.import('boot'); debe hacerse al final del cuerpo para esperar a que todos los componentes de su aplicación se registren desde el archivo app.min.js

No describo aquí la forma de manejar la minificación de CSS y HTML.

Puede usar el comando de construcción angular2-cli

 ng build -prod 

https://github.com/angular/angular-cli/wiki/build#bundling

Las comstackciones creadas con el indicador -prod a través de ng build -prod o ng serve -prod todas las dependencias en un único archivo y utilizan técnicas de agitación de árboles .

Actualizar

Esta respuesta fue enviada cuando angular2 estaba en rc4

Lo intenté de nuevo en angular-cli beta21 y angular2 ^ 2.1.0 y está funcionando como esperaba

Esta respuesta requiere inicializar la aplicación con angular-cli que puede usar

 ng new myApp 

O en uno existente

 ng init 

Actualización 08/06/2018

Para el angular 6, la syntax es diferente.

 ng build --prod --build-optimizer 

Verifica la documentación

Puede construir un proyecto Angular 2 (2.0.0-rc.1) en Typescript usando SystemJS con Gulp y SystemJS-Builder .

A continuación se muestra una versión simplificada de cómo comstackr, agrupar y ministrar Tour of Heroes con 2.0.0-rc.1 ( fuente completa , 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([ "src/**/*.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/jquery/dist/jquery.min.js', 'node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/es6-shim/es6-shim.min.js', 'node_modules/es6-promise/dist/es6-promise.min.js', 'node_modules/zone.js/dist/zone.js', 'node_modules/reflect-metadata/Reflect.js', 'node_modules/systemjs/dist/system-polyfills.js', 'node_modules/systemjs/dist/system.src.js', ]) .pipe(concat('vendors.js')) .pipe(gulp.dest('vendor')); }); // Copy dependencies loaded through SystemJS into dir from node_modules gulp.task('copy:vendor', function () { gulp.src(['node_modules/rxjs/**/*']) .pipe(gulp.dest('public/lib/js/rxjs')); gulp.src(['node_modules/angular2-in-memory-web-api/**/*']) .pipe(gulp.dest('public/lib/js/angular2-in-memory-web-api')); return gulp.src(['node_modules/@angular/**/*']) .pipe(gulp.dest('public/lib/js/@angular')); }); 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']); 

Aquí está mi repetición de MEA2N para Angular 2: https://github.com/simonxca/mean2-boilerplate

Es una simple repetición que usa tsc para unir las cosas. (En realidad usa grunt-ts , que en su núcleo es solo el comando tsc ). No es necesario Wekpack, etc.

Ya sea que uses o no el gruñido, la idea es:

  • escribe tu aplicación en una carpeta llamada ts/ (ejemplo: public/ts/ )
  • use tsc para duplicar la estructura del directorio de su carpeta ts/ en una carpeta js/ y solo haga referencia a los archivos en la carpeta js/ en su index.html .

Para hacer que grunt-ts funcione (debe haber un comando equivalente para tsc, Gulp, etc.), tiene una propiedad en su tsconfig.json llamada "outDir": "../js" , y haga referencia a ella en su gruntfile.js con:

 grunt.initConfig({ ts: { source: {tsconfig: 'app/ts/tsconfig.json'} }, ... }); 

Luego ejecute grunt ts , que tomará su aplicación en public/ts/ y la reflejará en public/js/ .

Ahí. Súper fácil de entender. No es el mejor enfoque, pero es bueno para comenzar.

La forma más fácil que he encontrado para agrupar angular rc1 para systemJs es usar gulp y systemjs-builder :

 gulp.task('bundle', function () { var path = require('path'); var Builder = require('systemjs-builder'); var builder = new Builder('/node_modules'); return builder.bundle([ '@angular/**/*.js' ], 'wwwroot/bundle.js', { minify: false, sourceMaps: false }) .then(function () { console.log('Build complete'); }) .catch(function (err) { console.log('Build error'); console.log(err); }); }); 

Como se señala en los comentarios, systemJs actualmente tiene problemas cuando se moduleId: module.id componentes usando moduleId: module.id

https://github.com/angular/angular/issues/6131

La recomendación actual (angular 2 rc1) parece ser el uso de rutas explícitas, es decir, moduleId: '/app/path/'

Usé expressjs en el back-end para servir mi proyecto ng2. Puedes consultarlo desde mi página de github: https://github.com/echonax/ng2-beta-and-test-framework

En el sitio web de Angular.io, en la sección Avanzado / Implementación, se recomienda que la forma más sencilla de implementar sea “copiar el entorno de desarrollo al servidor”.

  1. ir a través de la sección en: Implementación más simple posible. Los archivos finales del proyecto se muestran dentro de la sección de códigos. Tenga en cuenta que ya configura el código para cargar archivos de paquete npm de la web (en lugar de la carpeta local npm_modules).

  2. asegúrese de que esté ejecutándose en su computadora local (npm start). Luego, debajo de la carpeta del proyecto, copie todo en la subcarpeta ‘/ src’ al cubo S3 que ha configurado. Puede usar “arrastrar y soltar” para copiar, durante ese proceso, tiene la opción de seleccionar la configuración de permisos para los archivos, asegúrese de hacerlos ‘legibles’ para ‘todos’.

  3. en la pestaña “Propiedades” del depósito, busque el panel “Alojamiento web estático”, active la opción “Usar este depósito para alojar el sitio web” y especifique “index.html” en el documento Índice y en el documento Error.

  4. haga clic en el sitio web estático Endpoint, ¡su proyecto estará en marcha!