Simplificación de Angular CLI para principiantes

Por lo tanto, desea escribir su primera aplicación Angular, sin embargo, configurar incluso una aplicación de Angular 'Hola Mundo' no es fácil. Requiere muchos pasos, tales como:

• Configuración de un compilador de TypeScript, si decide usar TypeScript
• Configuration of Webpack or other module loader
• Setting up local web development server
• Instalación y configuración de dependencias
• Configuring Unit Test environment
• Configuración del entorno de prueba de extremo a extremo
• Trabajar con entrega continua
• Trabajar con Integración Continua y muchos más.

Puede realizar todas estas tareas manualmente, pero esto requerirá una sólida comprensión de todos estos conceptos y hará que comenzar un nuevo proyecto lleve mucho tiempo. Para resolver este problema, Angular viene con la interfaz de línea de comandos (CLI) Angular).

Más información aquí: https://cli.angular.io/

De todas estas tareas se encarga Angular CLI, que es una herramienta de línea de comandos para crear, probar e implementar aplicaciones Angular. Se recomienda usar Angular CLI para crear aplicaciones Angular, ya que no es necesario dedicar tiempo a instalar y configurar todas las dependencias necesarias y conectar todo junto. Le proporciona muchos repetitivos y le ahorra tiempo.

Utiliza Webpack para incluir todo el empaquetado, el módulo de carga, la funcionalidad de importación, BrowserLink y más. Toda la configuración de Webpack se realiza completamente por CLI, por lo que no tiene que preocuparse por ello. También configura Jasmine y Karma para pruebas unitarias y el cumplidor de TypeScript para transpilar el archivo TypeScript a JavaScript, etc.  Veamos cómo podemos trabajar con Angular CLI.

Installation of Angular CLI 

Puede instalar Angular CLI globalmente en un equipo de desarrollo local mediante npm.

Para trabajar con npm, asegúrese de instalar NodeJS desde aquí : https://nodejs.org/en/. Una vez instalado NodeJS, puede usar npm para instalar Angular CLI. Para averiguar si NodeJS está instalado, ejecute el comando

node –v

Debería ver el número de versión de NodeJS devuelto.  Una vez que NodeJS esté instalado, debe asegurarse de si npm está instalado o no. En Windows con el instalador de nodeJS, también se instalará npm. Sin embargo, también puede usar un comando para instalarlo:

npm install -g npm 

Puede utilizar el alias –v para comprobar la versión de npm instalada:

Después de eso, haga lo siguiente para instalar Angular CLI:

 npm install @angular/cli -g

Ahora ha instalado Angular CLI globalmente.  Para comprobar si Angular CLI está instalada, ejecute este comando:

ng –version

 Debería ver las versiones de Angular CLI y otros paquetes.  Una vez que vea el número de versión como en la imagen anterior, puede estar seguro de que Angular CLI se instaló correctamente en su sistema. Otra forma de averiguar si Angular CLI está instalada globalmente en el sistema es ejecutar el comando npm list:

 npm list -g @angular/cli --depth=0

El comando anterior le devolverá la versión de Angular CLI instalada y se asegurará de que Angular CLI se haya instalado correctamente en su máquina.

Upgrade Angular CLI 

A veces, es posible que tenga que actualizar Angular CLI a la versión más reciente. Puede hacerlo mediante una combinación de estos tres comandos:

npm uninstall -g @angular/cli

npm cache clean

npm install -g @angular/cli

A veces puede que tengas que usar –force para limpiar la caché.

Getting help in Angular CLI

Puede obtener ayuda en Angular CLI mediante el comando help:

ng help 

Angular enumerará todas las opciones de ayuda disponibles como se muestra en la imagen de arriba.  Puede obtener ayuda para un comando específico ejecutando:

ng [command name] –help

Creación de la primera aplicación

Una vez que haya instalado Angular CLI, puede usar su comando para generar un nuevo proyecto Angular. Puede crear una nueva aplicación utilizando el comando ng new:

ng new helloworld --skip-install

Arriba hemos creado un nuevo proyecto llamado HelloWorld. Seleccionamos la opción de no instalar dependencias mediante el uso de –skip-install. Ejecutaremos npm install por separado para instalar dependencias.  Si ejecuta por debajo del comando, también creará dependencias de proyecto e instalación.

ng new helloworld

Cuando cree un nuevo proyecto utilizando Angular CLI, le pedirá dos opciones

1. Ya sea que desee agregar enrutamiento al proyecto
2. Qué estilo desea elegir como CSS, SCSS y LESS, etc.

Puede elegir agregar enrutamiento o no, también puede elegir diferentes formas de diseñar su aplicación.  Una vez creada la aplicación, puede abrirla en cualquier editor de código para trabajar con ella. Hoy en día, Visual Studio Code es muy popular.  Puede ejecutar la aplicación de andamio utilizando el siguiente comando:

 ng serve 

Como puede ver, la aplicación compilada con éxito y de forma predeterminada se ejecuta en poet 4200. Hay muchas opciones disponibles con el comando ng serve. Si desea explorar más a fondo, hay varias opciones disponibles con el nuevo comando ng, ejecútelo con ayuda:

ng new –help

Como ves, tiene un argumento, que es el nombre del proyecto, además de que hay muchas opciones disponibles.  Por ejemplo

ng new HelloWorld –dry-run 

El comando anterior creará archivos sin escribir nada en ellos.

ng new HelloWorld –inline-template 

El comando anterior incluye una plantilla en línea en el archivo TS del componente.  Incluso hay opciones de comandos para usar Angular nuevo renderizado de Ivy.

ng new HelloWorld  --experimental-ivy 

Hay muchas opciones disponibles con el nuevo comando, que debe tener en cuenta.

Una vez que cree un nuevo proyecto con el comando ng new, puede abrir package.json archivo para explorar varias opciones y dependencias.

Por ejemplo, puede cambiar los comandos de inicio, compilación y prueba en el archivo de package.json para este proyecto en particular.  Además, puede encontrar varias dependencias del proyecto en el archivo.  Otro archivo importante, que contiene la configuración para Angular CLI, es angular.json archivo.

 

Este archivo contiene toda la información de configuración relacionada con Angular CLI para este proyecto en particular.  Por ejemplo, consideremos la propiedad prefix.  De forma predeterminada, se establece en app. Por lo tanto, cada vez que crea un componente, servicio, etc., su nombre tiene el prefijo de la aplicación.  Como se observa en AppComponent.

Es posible que tenga que cambiar el prefijo a las necesidades de su empresa.  Digamos que desea que el prefijo se establezca en el nombre de su empresa, foo. Puede configurar Angular CLI para usar foo como prefijo en lugar de app de tres maneras

1. By manually changing angular.json file
2. Mediante el uso de la opción –prefix con el comando ng new
3. Mediante el uso de ng config para la configuración global

Cambié el valor del prefijo en angular.json y luego ejecuté el comando para generar un componente de inicio de sesión.  Como puede ver, el componente generado ahora tiene el prefijo foo utilizado.

Si no desea cambiar angular.json, en el momento de ejecutar ng new puede usar la opción de prefijo

ng new helloword1 --prefix foo --skip-tests

En el comando anterior, hemos combinado dos opciones. Angular CLI le permite combinar opciones para crear el proyecto que desee. En el comando anterior, estamos diciendo que cree un nuevo proyecto con el prefijo establecido en foo y también que no cree un archivo de prueba (*.spec). Como salida, Angular CLI creará un proyecto y verá que foo tiene el prefijo, como se muestra en la siguiente imagen:

Puede combinar cualquier número de opciones con el comando ng new para obtener la configuración deseada para el proyecto recién creado.

Generate Commands

Angular CLI le proporciona el comando ng generate para generar varios esquemas.  Por ejemplo, puede utilizar:

ng generate component login

El comando anterior generará un componente llamado LoginComponent en el proyecto. Hay muchas opciones disponibles con ng generate. Puede enumerarlos con la opción –help.

ng generate –help

Como puede ver, toma el esquema como argumento con varias opciones posibles. Los argumentos esquemáticos disponibles son los siguientes:

• appShell
• application
• class
• componente
• directive
• enumeración
• guard
• interface
• biblioteca
• module
• pipa
• service
• serviceWorker
• universal

Con el comando genere, puede generar un componente o incluso puede agregar un serviceWorker en su proyecto para convertirlo en una aplicación web progresiva.

ng generate serviceWorker

Generar componente

Puede generar un nuevo componente utilizando el comando ng genere. A continuación, estoy ejecutando el comando generate con la opción seca.

ng generate component products –dry

Ejecutamos el comando generate con la opción dry para asegurarnos de que todo esté correcto.  Debe ejecutar un comando en modo seco para verificar un comando.  Podemos generar un componente con el siguiente comando:

ng generate component products

El comando anterior agregará una carpeta llamada productos y los siguientes archivos en el proyecto:

1. component.ts
2. component.html
3. component.css

No ha sumado products.spec.ts. porque el proyecto HellowWorld1 se creó con la opción –skip-tests. Puede configurar varias opciones con el componente ng generate para decidir si la plantilla y el estilo deben estar en archivos externos o en línea en la clase de componente. Puede comprobar las opciones disponibles con el comando –help.

ng generate component –help

 Como ves, las diferentes opciones disponibles son:

• –change-detection
• –componente de entrada
• –export
• –flat
• –estilo en línea
• –plantilla-en-línea
• –lint-fix
• –module
• –prefix
• –proyecto
• –selector
• –skip-import
• –skip-tests
• –spec
• –style
• –styleext
• –view-encapsulation

También hay atajos disponibles para estas opciones. Puede leer en detalle sobre las opciones de generación de componentes en la ayuda. Ahora supongamos que desea generar un componente con encapsulación de vistas y detección de cambios preconfiguradas. Eso se puede hacer mediante el siguiente comando:

ng g c addproduct  --v ShadowDom --c OnPush

Aquí, he usado el atajo para comando y opciones. Estamos configurando el componente para usar la encapsulación de vista Shadow Dom y la detección de cambios OnPush. El componente generado tendrá el siguiente aspecto:

Puede combinar muchas opciones para generar componentes según lo requiera su proyecto.

Generar directiva

Puede generar una directiva con el siguiente comando:

ng generate directive creditcard

El comando anterior generará una directiva en el proyecto como se muestra en la imagen a continuación. Tenga en cuenta que el selector comienza con foo en lugar de app porque hemos configurado el proyecto para usar el prefijo foo al crearlo.

Al igual que los componentes, también hay muchas opciones disponibles con la directiva gener. Puede enumerarlos con –help

ng generate directive  --help

 Las diversas opciones disponibles con la generación de directivas son:

• –export
• –flat
• –lint-fix
• –module
• –proyecto
• –selector
• –skip-import
• –skip-tests
• –spec

Puede utilizar estas opciones en varias combinaciones para generar directivas según sea necesario en su proyecto.

Generate Service

La forma en que se genera el componente y la directiva, se puede generar

1. Service
2. Pipa
3. Interface
4. Class
5. Enum etc.

Para generar el comando de ejecución de servicio:

ng generate service foodata

El comando anterior creará un servicio en el proyecto.  Puedes explorar:

ng generate –help

Para encontrar otras opciones esquemáticas disponibles.

Construyendo y sirviendo

Puede crear una aplicación Angular utilizando el comando ng build:

ng build

Como puede ver, ng build produce archivos para descargar en el navegador. Son los siguientes:

• Main
• Polyfills
• Ejecución
• Estilos
• Vendor

Hay muchas opciones disponibles con ng build que puede enumerar con el comando –help.

ng build –help

 Hay muchas opciones disponibles, como

• –aot
• –base-href
• –prod
• –deploy-url
• –output-hashing
• –mapa de origen, etc.

Hay muchas opciones disponibles, las opciones mencionadas anteriormente. Puede aprender en detalle en la ayuda.

Si desea compilar y servir su aplicación haciendo un seguimiento de los cambios en los archivos, debe usar el comando ng serve.  De forma predeterminada, sirve la aplicación en el puerto 4200.

ng serve 

Si lo ha hecho correctamente, debería ver el mensaje Compilado correctamente como se muestra arriba. Además, dice que la aplicación está escuchando en el puerto 4200.  Puede enumerar varias opciones disponibles con ng serve usando el comando –help.

Resumen

En este artículo, aprendimos sobre Angular CLI y varios comandos disponibles con ella. Debe usar Angular CLI para un desarrollo más rápido de Angular aplicaciones.