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.

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...

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: