Angular es un marco que utiliza TypeScript y HTML para crear aplicaciones de una sola página del lado del cliente. Utiliza las bibliotecas de TypeScript para importar las funcionalidades a las aplicaciones. En este blog, discutiremos ‘¿Cómo instalar Angular CLI 12 y usarlo en Windows 10?’. Primero, entenderemos algunas características de Angular 12:
- Soporte HMR
- Ayuda para Webpack 5
- Arneses de prueba de componentes
- Incrustación automática de fuentes
- Actualizaciones angulares de ESLint
- Vista previa del servicio de idiomas actualizado
- Construcciones más rápidas
Lea también: ecualizador para Windows 10: lo mejor que puede obtener
CLI angular
Angular CLI es una herramienta de línea de comandos creada por el equipo de desarrollo de Angular. Sus usos incluyen la gestión, el mantenimiento, la prueba y la creación de aplicaciones angulares. Puede tener problemas para usarlo si prefiere una buena interfaz de usuario y algo que sea fácil de usar. Pero puede descargar e instalar una extensión de Visual Studio Code. Esto agregará una interfaz gráfica de usuario (GUI) y puede usarla en lugar del terminal.
¿Necesitamos Angular CLI para el desarrollo de Angular?
La respuesta corta a la pregunta anterior es No. No es un buen enfoque si aún no está familiarizado con él como desarrollador de Angular. Esto se debe a que Angular CLI es una creación para automatizar tareas que consumen mucho tiempo, lo que mejora la velocidad de desarrollo. Construye aplicaciones de inicio de Angular con un archivo .gitignore. Podrá crear todos los elementos de una aplicación, por ejemplo, shells de aplicaciones, componentes, módulos de esqueleto, tuberías, manejo de pruebas y otros.
Versiones angulares de la CLI
Antes de pasar a la pregunta ‘¿Cómo instalar Angular CLI 12 y usarlo en Windows 10?’, Analicemos las versiones de Angular CLI. Angular lanzó su primera versión beta de Angular CLI en 2017 y ahora tiene más de 450 versiones. Además, se lanza una nueva versión cada vez que se lanza un nuevo marco Angular en el mercado.
¿Cómo instalar Angular CLI 12 y usarlo en Windows 10?
Para instalar Angular CLI 12 y usarlo en Windows 10, primero debe configurar un entorno de desarrollo. Esto es para el desarrollo front-end con Angular. Y luego puede continuar con la instalación. Veamos los pasos ahora.
1. Requisitos previos
Por lo tanto, debe tener a mano las siguientes cosas:
- En primer lugar, NodeJS 10+ y NPM en la instalación del sistema Windows. Puede descargarlo fácilmente desde el sitio web oficial: NodeJS.
- En segundo lugar, debe tener una comprensión adecuada de TypeScript.
- Por último, también debe comprender CMD o Powershell para Windows.
Después de la instalación de Node.js, debe verificar su versión con los comandos que se detallan a continuación:
nodo -v
npm-v
2. Cómo instalar Angular CLI 12 en ventanas 10?
Podrá crear aplicaciones y código de biblioteca con la ayuda de Angular CLI. Además, le permite realizar múltiples tareas de desarrollo en curso. Por ejemplo, empaquetado, prueba e implementación. Puede usar NPM para instalarlo. Por lo tanto, abra su Powershell o Símbolo del sistema ahora. Luego, escriba el comando que se indica a continuación para instalar Angular CLI.
npm install -g @angular/cli
/usr/bin/ng -> /usr/lib/node_modules/@angular/cli/bin/ng > @angular/[email protected] postinstall /usr/lib/node_modules/@angular/cli > node ./bin/postinstall/script.js ? Would you like to share anonymous usage data with the Angular Team at Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more details and how to change this setting, see http://angular.io/analytics. Yes + @angular/[email protected] added 277 packages from 207 contributors in 19.024s
En caso de que esté de acuerdo, presione Y; de lo contrario, presione N. Sin embargo, esta respuesta no afectará la instalación de Angular.
Verifiquemos la versión de Angular ahora con el siguiente comando:
Salida de muestra
Angular CLI: 10.1.1 Node: 12.18.3 OS: linux x64 Angular: ... Ivy Workspace: Package Version ------------------------------------------------------ @angular-devkit/architect 0.1001.1 @angular-devkit/core 10.1.1 @angular-devkit/schematics 10.1.1 @schematics/angular 10.1.1 @schematics/update 0.1001.1 rxjs 6.6.2
3. Creación de una nueva aplicación Angular después de instalar Angular CLI 12 en Windows 10
Ahora que sabe la respuesta a ‘¿Cómo instalar Angular CLI 12?’, Pasemos a usarlo en Windows 10. Debe configurar un espacio de trabajo para desarrollar un nuevo proyecto Angular. Puede nombrarlo app-project.
ng new app-project
Producción:
..... ...... added 1167 packages from 1048 contributors and audited 19053 packages in 72.14s 23 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Successfully initialized git.
4. Ejecución de la aplicación angular
Después de que la creación de su proyecto de aplicación de prueba se complete con éxito, debe ejecutar su aplicación. Puede hacerlo usando el comando ng serve.
proyecto de aplicación de cd
ng servir –abierto
Esto iniciará el servidor, monitoreará sus archivos y reconstruirá la aplicación mientras esos archivos cambian. Luego, el navegador abrirá http://localhost:4200 automáticamente. Ocurrirá mientras se usa la opción –-open (o simplemente -o). Este procedimiento de instalación de Angular CLI en Windows 10 ahora está completo. Su proyecto Angular se verá de la siguiente manera en el navegador:
5. Creación de Módulos con Angular CLI
Puede usar módulos Angular para modularizar la aplicación Angular. Para reformularlo, puede separar la aplicación Angular en secciones específicas mediante el uso de módulos Angular. Para construir un módulo básico de Angular, ingrese el siguiente comando:
ng generate module MyModuleName
Existe la posibilidad de que desee algo más que un módulo Angular de acuerdo con los requisitos. En ese caso, puede usar el siguiente comando para la creación de un módulo Angular con su propio módulo de enrutamiento.
ng generate module MyModuleName --routing
6. Crear componentes con Angular CLI
En primer lugar, escriba el comando Angular CLI que se proporciona a continuación si desea crear un nuevo componente Angular.
ng generate component MyComponentName
Si desea crear su propio componente, puede hacerlo siguiendo el comando que se indica a continuación:
ng generate component MyComponentName --module MyModuleName
7. Cree tuberías personalizadas con Angular CLI
Para crear tuberías personalizadas, debe ejecutar el comando que se indica a continuación:
ng generate pipe MyPipeName
8. Crear servicios con Angular CLI
Por último, puede crear un nuevo servicio siguiendo el comando que se indica a continuación:
ng generate service MyServiceName
¿Planea instalar Angular CLI 12 y usarlo en Windows 10?
Ahora que conoce el procedimiento de ‘¿Cómo instalar Angular CLI 12 y usarlo en Windows 10?’, la pregunta es si planea usarlo. Ya sabe cómo crear diferentes elementos de Angular, como módulos, componentes y servicios para su proyecto. Esta instalación no le llevará mucho tiempo. Pero si aún enfrenta algunos problemas, le recomendamos que contrate desarrolladores angulares profesionales para que lo ayuden. Así que no lo dudes y anímate.
