formularios - tablas angular 4

Cree Angular2 HTML y TypeScript en un solo archivo

Question

Estoy armando una aplicación (gran escala) usando Angular2 y TypeScript. .ts dividirse en numerosos proyectos y cada proyecto tendrá numerosos componentes, cada uno con una vista .html , una hoja de estilo .ts y .ts lógica / clase .ts .

Me gustaría que cada proyecto se compile en un solo archivo *.js y se copie en un sitio web host que se ejecutará en IIS. Esto sería similar a cómo se construye una aplicación WPF o Silverlight con los archivos .xaml que se compilan en el .dll .

He .ts un vistazo a la web y puedo obtener los archivos .ts para construir en un solo archivo .js usando la opción --outFile . Pero esto no me ayuda con los archivos .html o css .

Cualquier ayuda sería muy apreciada incluso si es para decir que lo que estoy pidiendo es imposible :-)

Stephen

Answer 1

Si está utilizando el tsconfig.json tsconfig.json predeterminado con el cargador SystemJS :

"module": "system",
"moduleResolution": "node",
...

Puede dejar todo el trabajo pesado en SystemJS Build Tool . Así es, por ejemplo, cómo lo hago en mis proyectos usando gulp :

1. Compile plantillas * .ts y en línea * .html

   Estoy usando gulp-angular-embed-templates inmediato para gulp-angular-embed-templates todas las templateUrl en template cadenas de template (este complemento funciona con Angular 1. * y Angular 2).

   var tsc = require(''gulp-typescript'');
   var tsProject = tsc.createProject(''tsconfig.json'');
   var embedTemplates = require(''gulp-angular-embed-templates'');
   
   gulp.task(''app.build'', function () {
       var tsResult = gulp.src(''app/src/**/*.ts'', {base: ''./app/src''})
           .pipe(embedTemplates()) // inline templates
           .pipe(tsc(tsProject));
   
       return tsResult.js
           .pipe(gulp.dest(''build/js''));
   });

   Esto generará muchos módulos anónimos System.register en el directorio build/js . Todos ellos ya tendrán su templateUrl línea.

2. Agrupe todo en un solo archivo .js

   Utilizo SystemJS Build Tool para esto porque creo que es mucho más fácil que usar, por ejemplo, webpack. Entonces, tengo otra tarea para que esto automatice el proceso:

   var SystemBuilder = require(''systemjs-builder'');
   
   gulp.task(''app.systemjs.bundle'', function () {
       var builder = new SystemBuilder(''build/js, {
           paths: {
               ''*'': ''*.js''
           },
           meta: {
               ''angular2/*'': {
                   build: false
               },
               ''rxjs/*'': {
                   build: false
               }
           }
       });
   
       return builder.bundle(''main'', ''build/js/app.bundle.js'');
   });

   El constructor toma las mismas opciones que SystemJS, así que verifique su API de configuración .

   Llamar a builder.bundle(''main'', ...) busca main.js (que es mi script inicial con la llamada de bootstrap de Angular. Es el mismo archivo que puede ver en el inicio rápido de 5 minutos ) porque agrego .js a todas las rutas buscado por el constructor. Esto se debe a que cuando importa un módulo en TS generalmente llama:

   import {ModalResultComponent} from ''./modal-result.component'';

   que se compila como dependencia de ./modal-result.component y no le importa la extensión del archivo. Es por eso que tuve que agregar *.js a todas las rutas para ayudar al constructor a encontrar todos los archivos JavaScript compilados.

   Las meta opciones solo le dicen al constructor que ignore las dependencias que no quiero agrupar. Eso es Angular2 en sí y la biblioteca rxjs porque rxjs import ''rxjs/add/operator/map'' en main.ts

   Esto genera un único archivo app.bundle.js con todos los módulos registrados como módulos con nombre utilizando System.register .

3. Usando nuestra app.bundle.js

   La última parte es pan comido. Solo importamos las cosas predeterminadas de Angular2 y luego usamos la opción de bundle para decirle a SystemJS dónde están todas nuestras dependencias.

   <script>
   System.config({
       packages: {
           ''/web'': {
               format: ''register'',
               defaultExtension: ''js''
           }
       },
       bundles: {
           ''/web/app.bundle'': [''main'']
       }
   });
   System.import(''main'').then(null, console.error.bind(console));
   </script>

   Cuando llamamos System.import(''main'') , de hecho, primero descarga /web/app.bundle.js y registra todos los módulos en el paquete y luego importa los módulos main con nuestro bootstrap Angular2.

   ¡Y eso es!

En realidad, no necesita usar gulp y hacer todo con script de node puro.

Agrupar archivos CSS es fácil con cosas como cssnano y estoy seguro de que puedes encontrar tutoriales sobre cómo usarlo en todas partes.

Estoy seguro de que hay otras formas de hacer lo mismo. Angular2 está diseñado para no restringir el uso de una sola tecnología. Sin embargo, usar SystemJS me parece la forma más fácil porque usa el mismo sistema de módulos que Angular2 de forma predeterminada.

Estoy seguro de que podría usar también, por ejemplo, el formato commonjs , pero eso requeriría que use también algunos polyfill para el cargador require() , pero aún no lo he probado. Creo que UMD también podría valer la pena intentarlo.