typescript - versiones - para que sirve angular

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

Question

Hay un tutorial de inicio rápido en angular.io que usa typecript y systemjs. Ahora que tengo esa miniapp funcionando, ¿cómo haría para crear algo desplegable? No pude encontrar ninguna información al respecto.

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

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

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

Answer 1

Aquí está mi plantilla MEA2N para Angular 2: https://github.com/simonxca/mean2-boilerplate

Es una placa repetitiva simple que usa tsc para armar 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 gruñido, la idea es:

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

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

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

Luego ejecute grunt ts , que llevará 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 uno bueno para comenzar.

Answer 2

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

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

2. asegúrese de que se esté ejecutando en su computadora local (inicio de npm). Luego, debajo de la carpeta del proyecto, copie todo lo que se encuentre debajo de la subcarpeta ''/ src'' en el bucket S3 que configuró. Puede usar la función de 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 de sitios web estáticos'', marque la opción ''Usar este depósito para alojar el sitio web'' y especifique ''index.html'' tanto en el documento de índice como en el documento de error.

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

Answer 3

La clave para entender en este nivel es que usando la siguiente configuración, no puedes concat directamente los archivos JS compilados.

En la configuración del compilador 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''
    }
  }
});

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 compilador mecanografiado genera por defecto cuando systemjs está configurado como administrador de módulos.

Por lo tanto, para tener todos sus módulos en un solo archivo JS, debe aprovechar la propiedad outFile dentro de la configuración del compilador TypeScript.

Puede usar el siguiente trago 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 cosas los archivos compilados de TypeScript
• para crear un archivo app.js
• 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 incluirse al final de la página (cuando se carga toda la página).
• actualizar index.html para tener en cuenta estos dos archivos

Las siguientes dependencias se utilizan en las tareas de Gulp:

• trago-concat
• gulp-html-replace
• mecanografiar
• tragar uglify

La siguiente es una muestra para que pueda ser adaptada.

• Crear 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 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''));
   });

  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:

  <html>
    <head>
      <!-- Some CSS -->
  
      <!-- build:vendor -->
      <script src="node_modules/es6-shim/es6-shim.min.js"></script>
      <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
      <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
      <script src="node_modules/systemjs/dist/system.src.js"></script>
      <script src="node_modules/rxjs/bundles/Rx.js"></script>
      <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
      <script src="node_modules/angular2/bundles/http.dev.js"></script>
      <!-- endbuild -->
  
      <!-- build:app -->
      <script src="config.js"></script>
      <!-- endbuild -->
    </head>
  
    <body>
      <my-app>Loading...</my-app>
  
      <!-- build:boot -->
      <!-- endbuild -->
    </body>
  </html>

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.

Answer 4

La forma más fácil que he encontrado de 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ñaló en los comentarios, systemJs actualmente tiene problemas al agrupar componentes usando moduleId: module.id

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

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

Answer 5

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

A continuación se muestra una versión simplificada de cómo construir, agrupar y minificar 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'']);

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 6

Puede usar el comando de construcción angular2-cli

ng build -prod

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

Las compilaciones creadas con el indicador -prod a través de ng build -prod o ng serve -prod todas las dependencias en un solo archivo y hacen uso de técnicas de sacudidas de árboles .

Actualizar

Esta respuesta se envió cuando angular2 estaba en rc4

Lo intenté de nuevo en angular-cli beta21 y angular2 ^ 2.1.0 y funciona como se 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 angular 6 la sintaxis es diferente.

ng build --prod --build-optimizer

Consulta la documentation

Answer 7

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