Cómo empaquetar una aplicación angular para producción

Hola, hemos encontrado la respuesta a lo que buscas, has scroll y la encontrarás un poco más abajo.

Solución:

2, 4, 5, 6, 7, 8, 9, 10, 11 (TypeScript) con CLI angular

Configuración de una sola vez

• npm install -g @angular/cli
• ng new projectFolder crea una nueva aplicación

Paso de agrupación

• ng build --prod (ejecutar en la línea de comando cuando el directorio está projectFolder)

  bandera prod paquete para producción (consulte la documentación de Angular para obtener la lista de opciones incluidas con la marca de producción).

• Comprima usando la compresión Brotli los recursos usando el siguiente comando

  for i in dist/*; do brotli $i; done

los paquetes se generan de forma predeterminada para projectFolder/dist(/$projectFolder para v6 +)**

Producción

Tamaños con Angular 11.0.5 con CLI 11.0.5y opción CSS sin enrutamiento angular

• dist/main-[es-version].[hash].js Tu aplicación incluida [ ES5 size: 136 KB for new Angular CLI application empty, 38 KB compressed].
• dist/polyfill-[es-version].[hash].bundle.js las dependencias de polyfill (@angular, RxJS …) incluidas [ ES5 size: 36 KB for new Angular CLI application empty, 11 KB compressed].
• dist/index.html punto de entrada de su aplicación.
• dist/runtime-[es-version].[hash].bundle.js cargador de paquete web
• dist/style.[hash].bundle.css las definiciones de estilo
• dist/assets recursos copiados de la configuración de activos de Angular CLI

Despliegue

Puede obtener una vista previa de su aplicación utilizando el ng serve --prod comando que inicia un servidor HTTP local de modo que se pueda acceder a la aplicación con archivos de producción mediante http: // localhost: 4200.

Para un uso de producción, debe implementar todos los archivos del dist carpeta en el servidor HTTP de su elección.

2.0.1 Final usando Gulp (TypeScript – Target: ES5)

---

Configuración de una sola vez

• npm install (ejecutar en cmd cuando el directorio es projectFolder)

Pasos de agrupación

• npm run bundle (ejecutar en cmd cuando el directorio es projectFolder)

  los paquetes se generan para projectFolder / bundles /

Producción

• bundles/dependencies.bundle.js [ size: ~ 1 MB (as small as possible) ]
  • contiene rxjs y dependencias angulares, no todos los marcos
• bundles/app.bundle.js [ size: depends on your project, mine is ~ 0.5 MB ]
  • contiene tu proyecto

Estructura de archivo

• projectFolder / app / (todos los componentes, directivas, plantillas, etc.)
• projectFolder / gulpfile.js

var gulp = require('gulp'),
  tsc = require('gulp-typescript'),
  Builder = require('systemjs-builder'),
  inlineNg2Template = require('gulp-inline-ng2-template');

gulp.task('bundle', ['bundle-app', 'bundle-dependencies'], function());

gulp.task('inline-templates', function () 
  return gulp.src('app/**/*.ts')
    .pipe(inlineNg2Template( useRelativePaths: true, indent: 0, removeLineBreaks: true))
    .pipe(tsc(
      "target": "ES5",
      "module": "system",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": true,
      "noImplicitAny": false
    ))
    .pipe(gulp.dest('dist/app'));
);

gulp.task('bundle-app', ['inline-templates'], function() 
  // optional constructor options
  // sets the baseURL and loads the configuration file
  var builder = new Builder('', 'dist-systemjs.config.js');

  return builder
    .bundle('dist/app/**/* - [@angular/**/*.js] - [rxjs/**/*.js]', 'bundles/app.bundle.js',  minify: true)
    .then(function() 
      console.log('Build complete');
    )
    .catch(function(err) 
      console.log('Build error');
      console.log(err);
    );
);

gulp.task('bundle-dependencies', ['inline-templates'], function() 
  // optional constructor options
  // sets the baseURL and loads the configuration file
  var builder = new Builder('', 'dist-systemjs.config.js');

  return builder
    .bundle('dist/app/**/*.js - [dist/app/**/*.js]', 'bundles/dependencies.bundle.js',  minify: true)
    .then(function() 
      console.log('Build complete');
    )
    .catch(function(err) 
      console.log('Build error');
      console.log(err);
    );
);

• projectFolder / package.json (igual que la guía de inicio rápido, solo se muestran devDependencies y npm-scripts necesarios para agrupar)

  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": 
    ***
     "gulp": "gulp",
     "rimraf": "rimraf",
     "bundle": "gulp bundle",
     "postbundle": "rimraf dist"
  ,
  "license": "ISC",
  "dependencies": 
    ***
  ,
  "devDependencies": 
    "rimraf": "^2.5.2",
    "gulp": "^3.9.1",
    "gulp-typescript": "2.13.6",
    "gulp-inline-ng2-template": "2.0.1",
    "systemjs-builder": "^0.15.16"
  

• projectFolder / systemjs.config.js (igual que la guía de inicio rápido, ya no está disponible allí)

(function(global) 

  // map tells the System loader where to look for things
  var map = 
    'app':                        'app',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular'
  ;

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = 
    'app':                         main: 'app/boot.js',  defaultExtension: 'js' ,
    'rxjs':                        defaultExtension: 'js' ,
    'angular2-in-memory-web-api':  defaultExtension: 'js' 
  ;

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
  ];

  // add package entries for angular packages in the form '@angular/common':  main: 'index.js', defaultExtension: 'js' 
  packageNames.forEach(function(pkgName) 
    packages[pkgName] =  main: 'index.js', defaultExtension: 'js' ;
  );

  var config = 
    map: map,
    packages: packages
  ;

  // filterSystemConfig - index.asp's chance to modify config before we register it.
  if (global.filterSystemConfig)  global.filterSystemConfig(config); 

  System.config(config);

)(this);

• projetcFolder / dist-systemjs.config.js (acabo de mostrar la diferencia con systemjs.config.json)

var map = 
    'app':                        'dist/app',
  ;

• projectFolder / index.html (producción) – El orden de las etiquetas de la secuencia de comandos es fundamental. Colocando el dist-systemjs.config.js después de que las etiquetas del paquete aún permitirían que el programa se ejecutara, pero el paquete de dependencias se ignoraría y las dependencias se cargarían desde el node_modules carpeta.

  
  
  
  
  




  loading...

• projectFolder / app / boot.ts es donde está el bootstrap.

---

Lo mejor que pude hacer hasta ahora 🙂

Angular 2 con Webpack (sin configuración CLI)

1- El tutorial del equipo de Angular2

El equipo de Angular2 publicó un tutorial para usar Webpack

Creé y coloqué los archivos del tutorial en un pequeño proyecto semilla de GitHub. Para que pueda probar rápidamente el flujo de trabajo.

Instrucciones:

• npm install

• inicio npm. Para desarrollo. Esto creará una carpeta virtual “dist” que se recargará en vivo en su dirección de host local.

• npm ejecutar compilación. Para producción. “Esto creará una versión física de la carpeta” dist “que se puede enviar a un servidor web. La carpeta dist tiene 7,8 MB, pero solo se requieren 234 KB para cargar la página en un navegador web.

2 – Un kit de inicio de Webkit

Este Webpack Starter Kit ofrece algunas funciones de prueba más que el tutorial anterior y parece bastante popular.

Sección de Reseñas y Valoraciones

Si estás contento con lo expuesto, puedes dejar un tutorial acerca de qué le añadirías a esta crónica.

---

---

Utiliza Nuestro Buscador