¿Cómo agrupar una aplicación Angular para producción?

Introducción
Antes de implementar la aplicación web, Angular proporciona una forma de verificar el comportamiento de la aplicación web con la ayuda de algunos comandos CLI. Por lo general, el comando ng serve se usa para compilar, observar y servir la aplicación desde la memoria local. Pero para la implementación, el comportamiento de la aplicación se ve ejecutando el comando ng build.

Diferencia entre ng serve y ng build

ng servir	construir
El comando ng serve es intencionalmente para desarrollos rápidos, locales e iterativos y también para compilar, observar y servir la aplicación desde un servidor de desarrollo CLI local.	El comando ng build es intencionalmente para compilar las aplicaciones e implementar los artefactos de compilación.
El comando no genera una carpeta de salida.	La carpeta de salida es – dist/.
El servicio ng crea artefactos desde la memoria para una experiencia de desarrollo más rápida.	El comando ng build genera archivos de salida solo una vez y no los sirve.

Pasos
Antes de seguir los pasos para implementar la aplicación, asegúrese de que Angular CLI ya esté instalado en el sistema; de lo contrario, ejecute el siguiente comando.

npm install -g @angular/cli

El primer paso sería agrupar una aplicación para producción antes de su implementación.

• Navegue al directorio del proyecto.

  cd project-folder

• Ejecute el comando ng build en Angular CLI

  ng build --prod 

  

• Para obtener la vista previa de la aplicación, ejecute el siguiente comando:

  ng serve --prod

  Esto inicia un servidor HTTP local con archivos de producción. Navegue a http://localhost:4200/ para ver la aplicación.
  Con estos pasos, la aplicación está lista para su implementación.

El comando Approach
ng build compila la aplicación Angular en un directorio de salida llamado dist/ en la ruta de salida dada. Este comando debe ejecutarse desde el directorio de trabajo. El creador de aplicaciones en Angular usa la herramienta de creación de paquetes web, con opciones de configuración especificadas en el archivo de configuración del espacio de trabajo (angular.json) o con una configuración alternativa con nombre. Una configuración de «producción» se crea de manera predeterminada cuando usa la CLI para crear el proyecto, y puede usar esa configuración especificando la opción — configuration="production"o .--prod="true"

El indicador –prod activa muchos indicadores de optimización. Uno de ellos es –aot para la compilación Ahead Of Time. Las plantillas de sus componentes se compilan durante la compilación, por lo que TypeScript puede detectar más problemas en su código. Puede compilar en modo dev pero aún así activar el indicador –aot si desea ver este error antes de compilar para prod.

dist/ Carpeta
La carpeta dist es la carpeta de compilación que contiene todos los archivos y carpetas que se pueden alojar en el servidor.
La carpeta dist contiene el código compilado de su aplicación angular en formato JavaScript y también los archivos HTML y CSS necesarios.
Dentro de dist/carpeta

Archivo de carpetas	Descripción
activos	La carpeta contiene recursos copiados de la configuración de activos de la CLI de Angular.
índice.html	El archivo index.html es el punto de entrada para la aplicación.
principal.[hash].js	El archivo contiene la aplicación incluida.
polyfill.[hash].bundle.js	Contiene dependencias de polyfill
runtime-[es-version].[hash].bundle.js	Contiene cargador de paquetes web.
estilo.[hash].paquete.css	Contiene las definiciones de estilo.

Desventajas

• Rendimiento: las aplicaciones dinámicas no siempre funcionaron tan bien. Los SPA complejos pueden ser lentos e incómodos de usar debido a su tamaño.
• Curva de aprendizaje pronunciada: como AngularJS es un instrumento versátil, siempre hay más de un método para terminar cualquier tarea. Esto ha producido cierta confusión entre los ingenieros.