Empaquete una aplicación angular para producción

1. Use Angular CLI para agrupar una aplicación Angular para producción
2. Use Webpack para agrupar una aplicación angular para producción
3. Use Gulp para agrupar una aplicación angular para producción
4. Conclusión

Este artículo demostrará diferentes métodos para crear una aplicación Angular para su implementación después de crear la aplicación con éxito.

Antes de continuar y construir la aplicación, es ideal para ejecutar la aplicación usando ng serve --prod; luego procedemos a esta URL: http://localhost:4200/ para ver cómo se ejecuta la aplicación, y desde aquí, podemos observar el comportamiento de la aplicación en acción.

Ahora veamos diferentes métodos para agrupar una aplicación Angular.

Use Angular CLI para agrupar una aplicación Angular para producción

Este método es el método más aceptado para agrupar una aplicación Angular, ya que funciona en todas las versiones de Angular. CLI le da al desarrollador menos dolores de cabeza durante el proceso de construcción.

El método CLI es su mejor apuesta para un desarrollador que quiere adaptar el proyecto para usar la compilación anticipada.

Primero, CLI debe instalarse en nuestra aplicación Angular; abrimos nuestra terminal, escribimos npm install -g @angular/cli, y presionamos enter.

Después de que se haya instalado por completo, procedemos a una nueva carpeta y creamos una nueva aplicación escribiendo ng new newApp. Entonces procedemos a esta carpeta para comenzar a construir nuestra aplicación.

Una vez que desarrollamos nuestra aplicación, empaquetamos la aplicación escribiendo ng build.

Por lo general, es ideal para comprimir aplicaciones empaquetadas, ya que esto hace que la aplicación se cargue más rápido y, en general, funciona de manera eficiente.

Podemos comprimir usando la compresión Brotli. Abrimos la terminal y tecleamos: for i in dist/*/*; do brotli $i.

Luego, terminamos de agrupar nuestro Angular con Angular CLI.

Use Webpack para agrupar una aplicación angular para producción

El método webpack a menudo se considera un potente paquete de módulos. Supervisa los códigos fuente de las aplicaciones creadas y busca las declaraciones de importación.

Desarrolla dos gráficos de dependencia y luego lanza dos archivos de paquete para la aplicación. Uno es el app.js, que contiene solo el código de la aplicación, y el otro se llama el archivo vendor.js, que contiene todas las dependencias del proveedor.

Para instalar el paquete web, primero creamos una nueva carpeta de proyecto, llamada angular-webpack, hacemos cd en este archivo, creamos un archivo llamado package.json y copiamos los siguientes códigos dentro de él.

Fragmento de código (paquete.json):

{
  "name": "angular2-webpack",
  "version": "1.0.0",
  "description": "A webpack starter for Angular",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~4.2.0",
    "@angular/compiler": "~4.2.0",
    "@angular/core": "~4.2.0",
    "@angular/forms": "~4.2.0",
    "@angular/http": "~4.2.0",
    "@angular/platform-browser": "~4.2.0",
    "@angular/platform-browser-dynamic": "~4.2.0",
    "@angular/router": "~4.2.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/node": "^6.0.45",
    "@types/jasmine": "2.5.36",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.4",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.16.1",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.1",
    "null-loader": "^0.1.1",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "~2.3.1",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.4.1",
    "webpack-merge": "^3.0.0"
  }
}

A continuación, abrimos una terminal e instalamos estos paquetes usando npm install. Ejecutamos el comando ng build cuando el proyecto está terminado.

Use Gulp para agrupar una aplicación angular para producción

Gulp es otra herramienta poderosa para agrupar aplicaciones Angular en el marco Angular 2, ya que es más eficiente para construir proyectos complejos y más grandes. Y también, hay partes del proceso de creación de tragos que se pueden automatizar, lo que hace que el flujo de trabajo sea menos engorroso.

Primero, crearemos un nuevo proyecto; vamos dentro de la carpeta e instalamos gulp desde la terminal, usando $npm install gulp.

Creamos un archivo gulpfile.js en la carpeta del proyecto y copiamos todos los archivos HTML de la carpeta app/views a la carpeta dist. Luego ejecutamos $gulp copy-html-files desde la terminal.

Los desarrolladores no necesitan ejecutar todas las tareas involucradas en la compilación de Gulp; uno necesita instalar $npm install gulp-run-sequence. Permite ejecutar varias tareas en el gulpfile.js desde la terminal.

Ejecutamos el $gulp build cuando nuestro proyecto está completamente listo.

En los casos en los que queremos eliminar algunos contenidos de la carpeta dist, quizás antes de la versión, o el desarrollador quiere borrar archivos anteriores e inyectar nuevos archivos, todo lo que se necesita hacer es escribir: npm install gulp-clean en la terminal

Teniendo en cuenta que los pasos necesarios para crear una aplicación Angular con gulp son bastante extensos, podemos automatizar este proceso. Instalamos npm install gulp-watch; esto volverá a ejecutar cualquier comando definido en la secuencia de ejecución cada vez que cambiemos nuestros archivos.

Conclusión

Hay varias formas de crear una aplicación en Angular de manera óptima; el método adoptado depende principalmente del tipo de proyecto que estamos tratando de construir, el tiempo y la experiencia.