Crear un proyecto
Antes de empezar a crear un proyecto Angular, es recomendable tener las extensiones necesarias instaladas en nuestro editor para trabajar más cómodamente con este framework. En el caso de Visual Studio Code, existe una extensión llamada Angular Essentials, que incluye todo lo necesario.
Angular CLI
Angular CLI (Command-Line Interface) es una herramienta de consola que permite crear y gestionar proyectos Angular. Puedes consultar la documentación oficial para más detalles. Puedes instalarla o actualizarla con el siguiente comando de NPM: npm i -g @angular/cli (con sudo delante en Linux/Mac)
Importante: En este curso vamos a utilizar características de la versión 17 de Angular. Si todavía no ha salido la versión final y está en RC (Release Candidate), ejecutaremos npm i -g @angular/cli@next.
Creación de un proyecto
En este curso vamos a ver como crear una aplicación de Angular sin módulos, lo que quita una capa de complejidad al desarrollo, y facilita la creación de aplicaciones, sobre todo las que no son muy complejas. Habrá una sección más adelante, que hablará sobre los módulos en Angular, y como se trabajaría con ellos. En lugar de componentes ligados a módulos, usaremos Standalone Components.
Crearemos un proyecto con el comando: ng new nombre-proyecto --standalone. Se pueden consultar otras opciones con el comando ng new --help. Por ejemplo, si no vamos a desarrollar una aplicación para producción, y no queremos que nos cree clases de test unitarios, se puede usar la opción --skip-tests o -S.
Vamos a crear un proyecto llamado angular-products
Por ahora no habilitaremos la opción de Server-Side Rendering o SSR. Lo haremos más adelante.
Una vez creado el proyecto e instaladas las dependencias, abre la carpeta del mismo y ejecuta ng serve para comprobar que funciona. Se ejecutará en http://localhost:4200.
Estructura del proyecto
Vamos a analizar un poco la estructura del proyecto que ha sido creado:
- En el directorio principal tenemos archivos de configuración como angular.json, para la configuración específica de Angular, o tsconfig.json y tsconfig-app.json, para la configuración de TypeScript. Además, tenemos archivos como package.json, .gitignore o .editorconfig (que también sirve para formatear con Prettier).
- En el directorio src tenemos los archivos de nuestra aplicación Angular, incluyendo el HTML principal (index.html), el icono de aplicación, el archivo CSS global, o el archivo main.ts que sirve para lanzar la aplicación (punto de entrada).
- El directorio assets contiene archivos estáticos como imágenes que se utilizarán en la aplicación.
- El directorio app contiene el componente principal de la aplicación, AppComponent, así como el resto de componentes que vayamos creando. También contiene el archivo de configuración global de la aplicación app.config.ts, y el archivo de rutas principal (app.routes.ts).
ng generate
La herramienta Angular CLI que hemos utilizado para crear el proyecto, también sirve para generar archivos con estructuras de código propias de Angular. Durante el curso, veremos las diferentes estructuras que podemos crear y para qué sirve cada una. El comando para generarlas es ng generate (o ng g).
| Component | ng g component my-new-component |
| Directive | ng g directive my-new-directive |
| Pipe | ng g pipe my-new-pipe |
| Service | ng g service my-new-service |
| Interceptor | ng g interceptor my-new-interceptor |
| Guard | ng g guard my-new-guard |
| Class | ng g class my-new-class |
| Interface | ng g interface my-new-interface |
| Enum | ng g enum my-new-enum |
| Module | ng g module my-new-module |
ng update
Este comando permite actualizar el proyecto a una nueva versión de Angular. Si ejecutamos ng update, nos informará de los módulos del proyecto que podemos actualizar:
Pudemos actualizar los paquetes que aparecen (por ejemplo @angular/cli) con el comando ng update @angular/cli. Cuando queremos saltar más de 1 versión, por ejemplo, de la 15 a la 17, se recomienda actualizar de una en una. La página update.angular.io nos indicará los pasos a seguir con más detalle.
Es importante tener en cuenta que puede que tengamos que actualizar otros paquetes del proyecto de forma más manual con npm install nueva_versión o npm update.
ng build
Desde la versión 17, Angular utiliza Vite como servidor de desarrollo. Antes utilizaba Webpack. El servidor de desarrollo (ng serve), se usa para probar la aplicación mientrás se desarrolla. Una vez probada, si queremos generar la aplicación para producción, es decir, código traducido a JavaScript y empaquetado en unos pocos archivos y minificado, ejecutaremos ng build.
Este comando nos generará una carpeta dist/ con los archivos necesarios para subir y ejecutar en un servidor web de producción.
ng add
El comando ng add nos permite instalar librerías integradas con Angular. Es decir, además de instalar el paquete con npm install, nos hará las modificaciones necesarias en el proyecto (importación de módulos, configuración, ...) para que sea más sencilla de comenzar a usar.
Esta integración se realiza mediante Angular Schematics. Por ejemplo, si queremos instalar Angular Material, lo haríamos con el comando ng add @angular/material. También se pueden actualizar estas librerías con el comando ng update.
Integrando ESLint
Si queremos instalar una herramienta para mejorar la detección de posibles errores de código, así como establecer un estilo de código más homogéneo, podemos utilizar @angular/eslint.
Para instalarla ejecutaremos ng add @angular-eslint/schematics. Si estamos usando una versión de Angular que acaba de salir y la versión de @angular-eslint no fuera compatible, podemos probar con la versión de desarrollo ejecutando ng add @angular-eslint/schematics@next.