Configurando el entorno local y el workspace

Esta guía explica cómo configurar tu entorno para el desarrollo en Angular usando el Angular CLI. Incluye información sobre cómo instalar el CLI, crear un workspace inicial y una aplicación de inicio, y ejecutar esa aplicación localmente para verificar tu configuración.

Antes de comenzar

Para usar Angular CLI, debes estar familiarizado con lo siguiente:

También debes estar familiarizado con el uso de herramientas de interfaz de línea de comandos (CLI) y tener una comprensión general de los shells de comandos. El conocimiento de TypeScript es útil, pero no es requerido.

Dependencias

Para instalar Angular CLI en tu sistema local, necesitas instalar Node.js. Angular CLI usa Node y su gestor de paquetes asociado, npm, para instalar y ejecutar herramientas JavaScript fuera del navegador.

Descarga e instala Node.js, que incluirá el CLI npm también. Angular requiere una versión LTS activa o LTS de mantenimiento de Node.js. Consulta la guía de compatibilidad de versiones de Angular para más información.

Instalar el Angular CLI

Para instalar el Angular CLI, abre una ventana de terminal y ejecuta el siguiente comando:

npm install -g @angular/cli

pnpm install -g @angular/cli

yarn global add @angular/cli

bun install -g @angular/cli

Política de ejecución de Powershell

En computadoras cliente con Windows, la ejecución de scripts de PowerShell está deshabilitada por defecto, por lo que el comando anterior puede fallar con un error. Para permitir la ejecución de scripts de PowerShell, que es necesario para los binarios globales de npm, debes establecer la siguiente política de ejecución:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Lee cuidadosamente el mensaje mostrado después de ejecutar el comando y sigue las instrucciones. Asegúrate de entender las implicaciones de establecer una política de ejecución.

Permisos de Unix

En algunas configuraciones tipo Unix, los scripts globales pueden ser propiedad del usuario root, por lo que el comando anterior puede fallar con un error de permisos. Ejecuta con sudo para ejecutar el comando como usuario root e ingresa tu contraseña cuando se te solicite:

sudo npm install -g @angular/cli

sudo pnpm install -g @angular/cli

sudo yarn global add @angular/cli

sudo bun install -g @angular/cli

Asegúrate de entender las implicaciones de ejecutar comandos como root.

Crear un workspace y una aplicación inicial

Desarrollas aplicaciones en el contexto de un workspace de Angular.

Para crear un nuevo workspace y una aplicación de inicio inicial, ejecuta el comando CLI ng new y proporciona el nombre my-app, como se muestra aquí, luego responde las preguntas sobre las características a incluir:

ng new my-app

El Angular CLI instala los paquetes npm de Angular necesarios y otras dependencias. Esto puede tomar unos minutos.

El CLI crea un nuevo workspace y una pequeña aplicación de bienvenida en un nuevo directorio con el mismo nombre que el workspace, lista para ejecutarse. Navega al nuevo directorio para que los comandos subsiguientes usen este workspace.

cd my-app

Ejecutar la aplicación

El Angular CLI incluye un servidor de desarrollo, para que puedas construir y servir tu aplicación localmente. Ejecuta el siguiente comando:

ng serve --open

El comando ng serve lanza el servidor, observa tus archivos, así como reconstruye la aplicación y recarga el navegador a medida que haces cambios en esos archivos.

La opción --open (o simplemente -o) abre automáticamente tu navegador en http://localhost:4200/ para ver la aplicación generada.

Workspaces y archivos de proyecto

El comando ng new crea una carpeta de workspace de Angular y genera una nueva aplicación dentro de ella. Un workspace puede contener múltiples aplicaciones y librerías. La aplicación inicial creada por el comando ng new está en el directorio raíz del workspace. Cuando generas una aplicación o librería adicional en un workspace existente, va a una subcarpeta projects/ por defecto.

Una aplicación recién generada contiene los archivos fuente para un componente raíz y una plantilla. Cada aplicación tiene una carpeta src que contiene sus componentes, datos y recursos.

Puedes editar los archivos generados directamente, o agregar y modificarlos usando comandos CLI. Usa el comando ng generate para agregar nuevos archivos para componentes adicionales, directivas, pipes, servicios y más. Los comandos como ng add y ng generate, que crean u operan en aplicaciones y librerías, deben ejecutarse desde dentro de un workspace. Por el contrario, los comandos como ng new deben ejecutarse fuera de un workspace porque crearán uno nuevo.

Siguientes pasos

• Aprende más sobre la estructura de archivos y configuración del workspace generado.

• Prueba tu nueva aplicación con ng test.

• Genera código repetitivo como componentes, directivas y pipes con ng generate.

• Despliega tu nueva aplicación y hazla disponible para usuarios reales con ng deploy.

• Configura y ejecuta pruebas end-to-end de tu aplicación con ng e2e.