ng build --prod
El siguiente paso es configurar el servidor donde se alojará la aplicación. Puedes usar servidores web comunes como:
Si la aplicación Angular utiliza el enrutador, es importante asegurarse de que el servidor esté configurado para redirigir todas las rutas a index.html. Esto se debe a que Angular maneja las rutas del lado del -
cliente. Por ejemplo, en Nginx, podrías tener una configuración como esta:
location / {
try_files $uri $uri/ /index.html;
}
Angular permite dos modos de compilación:
JIT (Just-in-Time): Compila los archivos TypeScript en el navegador al momento de ejecutar la aplicación. Es útil durante el desarrollo porque permite ver los cambios en tiempo real, pero no es óptimo para producción debido a su mayor tamaño y tiempo de carga.
AOT (Ahead-of-Time): Compila la aplicación en tiempo de construcción, lo que significa que se generan archivos JavaScript optimizados antes de que la aplicación se ejecute. Esto resulta en un mejor rendimiento, menores tamaños de archivos y una verificación de errores más temprana.
Para activar AOT, utilizar el siguiente comando al construir la aplicación:
ng build --prod --aot
En el archivo tsconfig.app.json, puedes encontrar la sección angularCompilerOptions, que permite configurar diferentes aspectos del compilador. Algunas opciones comunes son:
enableIvy: Permite habilitar o deshabilitar Ivy, el motor de renderizado de Angular. Ivy mejora el rendimiento y el tamaño del paquete.
fullTemplateTypeCheck: Activa la verificación completa de tipos en las plantillas, ayudando a detectar errores de tipo en las plantillas de Angular.
strictTemplates: Habilita una verificación más estricta de las plantillas, lo que ayuda a detectar problemas de tipos y errores en tiempo de compilación.
Las Compile Options también pueden influir en cómo se optimiza la aplicación:
enableResourceInlining: Permite incluir recursos (como CSS y HTML) en los archivos generados, lo que reduce la cantidad de solicitudes HTTP.
preserveSymlinks: Ayuda en la resolución de dependencias, especialmente en proyectos monorepo donde se pueden tener enlaces simbólicos.
{
"angularCompilerOptions": {
"enableIvy": true,
"fullTemplateTypeCheck": true,
"strictTemplates": true,
"enableResourceInlining": true
}
}
Angular permite crear múltiples archivos de entorno en la carpeta src/environments. Por defecto, Angular incluye dos archivos:
environment.prod.ts: Configuración para el entorno de producción.
// environment.ts (Desarrollo)
export const environment = {
production: false,
apiUrl: 'http://localhost:3000/api',
featureFlag: false
};
// environment.prod.ts (Producción)
export const environment = {
production: true,
apiUrl: 'https://api.ejemplo.com',
featureFlag: true
};
import { environment } from '../environments/environment';
const apiUrl = environment.apiUrl;
Al construir la aplicación, Angular selecciona automáticamente el archivo de entorno apropiado según el comando utilizado. Por ejemplo:
Para desarrollo:
ng serve
ng build --prod
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
]
}
}
ng build --configuration=staging
Angular DevTools está disponible como una extensión para navegadores como Chrome y Firefox. Para instalarla:
a. Inspección de componentes
Angular DevTools permite inspeccionar la estructura de componentes de tu aplicación. Puedes ver:
b. Seguimiento de cambios
c. Análisis de rendimiento
d. Depuración de servicios
Inspeccionar componentes: Selecciona un componente en el árbol para ver sus propiedades, métodos y el estado actual.
Medir rendimiento: Usa las herramientas de rendimiento para grabar y analizar el ciclo de vida de los componentes, identificando cuellos de botella.
Editores en tiempo real: Realiza cambios en las propiedades de los componentes y observar los resultados en tiempo real.
Debugging: Facilita la identificación de errores y el seguimiento de problemas en el código.
Optimización: Ayuda a encontrar áreas de mejora en el rendimiento, lo que se traduce en una mejor experiencia para el usuario final.
Aprendizaje: Proporciona una forma visual para comprender cómo funcionan los componentes y servicios en Angular, lo que es especialmente útil para desarrolladores nuevos.