El compilador de Angular toma tus plantillas declarativas de Angular y las convierte en código JavaScript imperativo .

La programación declarativa es cuando defines lo que quieres que ocurra, pero no cómo hacerlo paso a paso.

La programación imperativa es cuando se describe explícitamente cómo el ordenador debe realizar cada paso.

Existen dos métodos principales para compilar código Angular a JavaScript.

1. Compilación justo a tiempo (JIT ) - el código se compila en el navegador en tiempo de ejecución.

2. 2.Compilación Ahead-of-time (AOT) - el código se compila durante el proceso de construcción.

Sólo hay un compilador Angular, pero la diferencia entre AOT y JIT radica en cuándo se utiliza. AOT compila en tiempo de compilación, mientras que JIT compila en tiempo de ejecución para cada usuario.

Cómo funciona el compilador de Angular

He aquí una explicación simplificada de las fases de compilación de Angular

1. Creación del programa

Establece el programa recopilando todos los archivos y configuraciones necesarios.

2. Análisis

Extrae y analiza metadatos para componentes, módulos, servicios y plantillas.

El compilador de TypeScript también genera archivos .d.ts (archivos de definición de tipos) para proporcionar información de tipos. No incluyen el código real, sólo la información de tipos.

Ejemplo

// add.ts
export function add(a: number, b: number): number {
  return a + b;
}

// add.d.ts
export declare function add(a: number, b: number): number;

El compilador genera un árbol de sintaxis abstracta (AST) para representar la estructura de los decoradores y los metadatos.

Aquí se detectará cualquier error en los metadatos

3. Resuelve

Asegura que todas las dependencias entre entidades Angular (componentes, servicios) estén correctamente vinculadas.

4. Comprobación de tipos

Realiza la comprobación de tipos tanto en TypeScript como en la plantilla de Angular. Esto ayuda a detectar errores relacionados con propiedades no definidas o tipos no coincidentes.

Si has activado la comprobación de tipos estricta (strict o strictTemplates en tsconfig.json), el compilador se asegurará de que los errores de tipo se marquen durante la compilación.

Comprobación de tipos estricta (strict): Ayuda a detectar errores de tipo de forma temprana en todo tu código TypeScript.

Comprobación estricta de plantillas (strictTemplates): Garantiza la corrección en las plantillas de Angular mediante la validación de la seguridad de tipos dentro de las expresiones de plantilla.

5. Emitir

Aquí es donde se produce el tree shaking (proceso en el que el código no utilizado se elimina del bundle final), asegurando que sólo el código necesario se incluye en la salida final, reduciendo el tamaño del bundle y mejorando el rendimiento.

A continuación, el compilador emite código JavaScript optimizado que el navegador puede ejecutar directamente.

Después de que Angular compila la aplicación, la agrupación combina todos los archivos JavaScript emitidos y las dependencias en un número menor de archivos (como main.js, polyfills.js, vendor.js, etc.).

Ahead-of-Time (AOT)

Compila tu aplicación y librerías en tiempo de compilación antes de que el navegador descargue y ejecute el código.

Por defecto, AOT está habilitado en las nuevas aplicaciones Angular CLI.

Puedes ejecutar tu aplicación en AOT con este comando:

ng build OR ng build --configuration=production --aot=true

¿Por qué utilizar AOT?

• Renderizado más rápido: Como el código está precompilado, el navegador puede cargarlo inmediatamente sin necesidad de compilarlo de nuevo.
• Menor Tamaño: El compilador de Angular en sí no es necesario en la compilación final, haciendo que la aplicación sea más pequeña y más rápida de descargar.
• Menos peticiones: AOT alinea plantillas y estilos en el código JavaScript, reduciendo la necesidad de peticiones separadas para cargar estos archivos.
• Detección temprana de errores: AOT detecta los errores de plantilla durante la compilación, para que pueda solucionarlos antes de que los usuarios los encuentren.
• Mayor seguridad: Con AOT, las plantillas se compilan antes de llegar al cliente, lo que reduce el riesgo de ataques de inyección.

Desventaja

• Mayor tiempo de compilación: Dado que las plantillas se compilan con antelación, el proceso de compilación tarda más tiempo.
  

Justo a tiempo (JIT)

Compila su aplicación en el navegador del cliente en tiempo de ejecución.

JIT se utiliza normalmente en entornos de desarrollo por su rápida respuesta a los cambios de código.

Utiliza JIT mientras desarrollas y pruebas tu sitio web. Le permite trabajar con mayor rapidez y probar nuevas ideas sin retrasos, ya que no tiene que volver a construir el proyecto después de cambiar el código. JIT muestra los cambios al instante mientras trabajas en tu código Angular.

Puedes ejecutar tu aplicación en JIT con este comando:

ng serve OR ng build --configuration=production --aot=false

Desventajas:

• Arranque más lento: El navegador necesita compilar el código en tiempo de ejecución, lo que provoca tiempos de carga iniciales más lentos.
• Mayor tamaño del paquete: El paquete incluye código adicional para compilar plantillas, lo que resulta en un tamaño de paquete mayor.
• Mayor carga del navegador: La compilación se realiza en el navegador, lo que aumenta la carga en el dispositivo del usuario y puede ralentizar el rendimiento.
• Detección de errores en tiempo de ejecución: Los errores sólo se detectan durante el tiempo de ejecución, lo que puede provocar que lleguen a producción.
• Menos seguro: La compilación en tiempo de ejecución aumenta el riesgo de ataques de inyección, por lo que JIT es menos seguro para entornos de producción.

AOT frente a JIT

AOT ( - aot=true): Compila las plantillas en tiempo de compilación, lo que resulta en aplicaciones más rápidas y pequeñas con detección temprana de errores.

JIT ( - aot=false): Compila las plantillas durante el tiempo de ejecución; aunque el proceso de compilación sigue empaquetando la aplicación, la compilación real de las plantillas se pospone hasta que la aplicación se ejecuta en el navegador. Esto resulta en tiempos de carga más lentos y paquetes de mayor tamaño, con detección de errores en una etapa posterior.

El proceso de compilación de Angular transforma las plantillas en JavaScript ejecutable a través de varias fases. Los desarrolladores pueden elegir entre JIT, que ofrece información rápida durante el desarrollo, y AOT, que mejora el rendimiento y la seguridad de las aplicaciones de producción.

Fuente