Biblioteca Online : ¡La Suscripción ENI por 9,90 € el primer mes!, con el código PRIMER9. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. Angular
  3. Angular CLI
Extrait - Angular Desarrolle sus aplicaciones web con el framework JavaScript de Google
Extractos del libro
Angular Desarrolle sus aplicaciones web con el framework JavaScript de Google
2 opiniones
Volver a la página de compra del libro

Angular CLI

Introducción

El objetivo de este capítulo es presentar el CLI desarrollado por los equipos de Angular. Pasando por la definición de este y los diferentes comandos que Angular CLI aporta, el objetivo es poder lanzarse a un proyecto Angular y ver los beneficios que el CLI puede aportar.

¿Qué es Angular CLI?

1. La definición

Angular CLI es un Command Line Interface (interfaz en línea de comandos, en español), desarrollada por los equipos de Angular. Este CLI permite crear proyectos en los que el CLI podrá añadir archivos y más exactamente, entidades Angular. Será posible añadir módulos, componentes, servicios o directivas en una línea de comandos.

Pero esto no es todo. Un proyecto creado con Angular CLI se configura por defecto para funcionar con muchas tareas transversales que implica una aplicación web TypeScript. Aquí hablamos de bundling de las fuentes, de minificación, así como de herramientas que permiten probar su aplicación o incluso desplegarla.

El bundling es la operación que consiste en poner en común las diferentes partes de la aplicación con el objetivo de formar un único paquete final: un bundle. El objetivo de la minificación es reducir el tamaño del código fuente, renombrando las variables y funciones por nombres más cortos, sin que esto tenga un impacto sobre el funcionamiento del código.

Históricamente, Angular CLI ha migrado desde SystemJS a Webpack para la parte módulo loader, beneficiándose de todo lo que permite hacer Webpack como Task Runner, lo que quiere decir que tareas como el bundling, se hacen con Webpack.

Para los desarrolladores web principiantes o que no tengan un buen control de Webpack, es muy interesante tener una build ya lista que haga todo el trabajo, y que de esta manera permite al desarrollador concentrarse en lo esencial: su código y su aplicación. Desde otro punto de vista, esto implica que la configuración Webpack es una caja negra para el desarrollador, incluso con puntos de extensión limitados, que están en el archivo angular.json. A lo largo del capítulo hemos visto en detalle lo que contiene este archivo.

Sin embargo, para los desarrolladores un poco más preparados, que quieren o necesitan tener un dominio sobre la configuración Webpack, es importante saber que es posible dejar fuera esta configuración Webpack para, a continuación, poder hacer lo que quieran.

Si tuviera que resumir Angular CLI: es una herramienta que permite generar y controlar un proyecto Angular sin preocuparse por los problemas transversales del desarrollo...

Configurar un proyecto Angular CLI

1. Esquema del archivo de configuración de Angular CLI

El archivo angular.json es esencial, tiene muchas propiedades. Va a permitir gestionar el workspace, así como las configuraciones de los diferentes proyectos de la aplicación Angular. Es importante conocer las configuraciones principales con el objetivo de asegurarse del correcto dominio de un proyecto realizado con ayuda de Angular CLI.

Tomemos el ejemplo de un proyecto recientemente creado con la versión 8.0.3 de Angular CLI, mostrando solo los nodos principales.

Comando para crear el proyecto Angular CLI

ng new cli-sample8 

Contenido (con detalle parcial) del archivo angular.json

{  
  "$schema": "./node_modules/@angular/cli/lib/config/ 
schema.json", 
  "version": 1,  
  "newProjectRoot": "projects",  
  "projects": {  
    "cli-sample8": {  
      "projectType": "application",  
       "schematics": {  
        "@schematics/angular:component": {  
          "style": "scss"  
        }  
      },        
      "root": "",  
      "sourceRoot": "src",  
      "prefix": "app",  
      "architect": {  
        "build": {...},  
        "serve": {...},  
        "extract-i18n": {...},  
        "test": {...},  
        "lint": {...},  
        "e2e": {...}  
      }  
    }},  
  "defaultProject": "cli-sample8"  
} 

En la raíz del archivo, encontramos las siguientes propiedades:

  • $schema: el enlace al archivo schema.json, que permite...

Compilación Ahead-Of-Time (AOT)

Antes de abordar la noción de compilación Ahead-Of-Time, es importante entender que la aplicación Angular se compila, y que esta compilación puede tener lugar en el navegador o en NodeJS, porque el framework Angular se puede lanzar en cualquier plataforma con una máquina virtual JavaScript. 

Además, solo hay un compilador Angular. Lo que realmente cuenta es el timing, así como las herramientas de esta compilación. A partir de estos dos criterios existen dos tipos de compilación: la compilación Ahead-Of-Time (AOT) y la compilación Just-In-Time (JIT). Con la compilación AOT, el compilador se ejecuta una única vez durante la compilación usando un único juego de librerías. Por el contrario, en la compilación JIT la compilación tiene lugar cada vez, para cada usuario, usando un paquete de librerías diferentes.

Por defecto, la AOT no está activada y por lo tanto se hace una compilación JIT.

El flujo de desarrollo en compilación JIT es el siguiente:

  • Desarrollo de la aplicación Angular en TypeScript.

  • La aplicación se compila con el compilador TypeScript tsc, lo que da un primer código JavaScript.

  • Creación de los bundles de la aplicación.

  • Minificación de la aplicación.

  • Despliegue de la aplicación.

De esta manera la aplicación...