¡La nueva versión de Angular v18 ya está aquí!

Posted by


Angular v18 is the latest version of the popular frontend framework developed by Google. It comes with several new features and improvements that make it even more powerful and easy to use. In this tutorial, we will walk you through the process of installing and getting started with Angular v18.

Step 1: Install Angular CLI

The first step in getting started with Angular v18 is to install Angular CLI. This command-line tool makes it easy to create and manage Angular projects. To install Angular CLI, open your terminal and run the following command:

npm install -g @angular/cli

This will install Angular CLI globally on your system, allowing you to use it from any directory.

Step 2: Create a new Angular project

Once Angular CLI is installed, you can create a new Angular project by running the following command:

ng new my-angular-project

This will create a new directory called my-angular-project and set up a new Angular project inside it.

Step 3: Run the project

After creating a new project, navigate to the project directory and run the following command to start the development server:

cd my-angular-project
ng serve

This will start a local development server that you can access in your browser by going to http://localhost:4200.

Step 4: Explore the project structure

Angular projects have a specific structure that you should be familiar with. Here is a brief overview of the key directories and files in a new Angular project:

  • src: This directory contains all the source code for your project, including components, services, and other Angular files.
  • app: This directory contains the main application module and components.
  • angular.json: This file contains configuration settings for your project.
  • package.json: This file contains information about dependencies and scripts for your project.

Step 5: Check out the new features in Angular v18

Angular v18 comes with several new features and improvements that make it even better than previous versions. Some of the key features include:

  • Improved performance through better tree-shaking and faster rendering.
  • Enhanced support for latest ECMAScript features.
  • Improved error handling and debugging support.
  • New libraries and tools for building progressive web apps and mobile applications.

Step 6: Update existing projects to Angular v18

If you have an existing Angular project and want to upgrade it to Angular v18, you can do so by running the following command in the project directory:

ng update @angular/core@18 @angular/cli@18

This will update your project to the latest version of Angular v18 and Angular CLI.

Conclusion

In this tutorial, we have covered the basics of getting started with Angular v18. We have shown you how to install Angular CLI, create a new project, run the project, and explore the project structure. We have also highlighted some of the new features and improvements in Angular v18.

With this knowledge, you should be able to start building powerful and responsive web applications with Angular v18. Happy coding!

0 0 votes
Article Rating
32 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@javtheghost3789
2 months ago

y yo me quede en la v14 ._.

@albenvi94
2 months ago

Vue (Nuxt) > React (Next) > Angular

@flaviovargas9317
2 months ago

4 minutos hablando de su viaje a Rusia en un video de Angular (de 12 minutos)…. interesante análisis de lo nuevo de Angular Midu, no cambies nunca

@cascossi809
2 months ago

Pues a ver si remontan en popularidad, porque todas las series históricas muestran cómo lleva años perdiendo competitividad frente a React e incluso Vue.

@andresmorantes6462
2 months ago

El que dijo "Midudesky" se rifó, muy buen video Midu entretenido como siempre!

@Faradars1
2 months ago

que diferencias tiene con las anteriores versiones?
la gente no recomienda aprender angular por que dicen que de version a version es como tener que volver a aprender todo de nuevo

@pablocubillos8694
2 months ago

El video comenzó con las nuevas features de Angular y terminó con una historia imperdible entre EEUU y Rusia jajajajaja grande midu

@lericode
2 months ago

Midu! Haz un proyecto con Angular

@snithfferx
2 months ago

Capaz que sí vas a china para hacer una entrevista o similar y te detienen para preguntarte la relación china-rusia Al final terminas encerrado como muchos sólo por ese sustito que les da.

@leonardohidalgo5127
2 months ago

Lo de input con signal se refieren a las decoradores @input, @output y otros más que ahora pasan a ser funciones signal su uso. Estos sirven para comunicar datos y eventos entre componentes de forma directa o sea no pasa por servicios ni por suscripciones, pero no podías convertir inputs en variables de signals al completo salvo que los pasaras por ciertos filtros que generaba código extenso para algo que siempre fue una linea corta de código. Ahora con esta versión directamente podes generar un signal input con la función input() la cual tiene el comportamiento típico de @input con las ventajas de un signal, tambien crearon el signal model que convina el input y output ya que al usar @output estabas obligados a crear un @input en el componente que lo comunica pero ahora estan unificados con model().

@juanthomasangelmontilla5738
2 months ago

El RXJS es lo que hace a Angular más decente qué react, lo quitan y se va el encanto

@PiernadePollo681
2 months ago

larga vida a angular

@alexisontiveros3201
2 months ago

Yo fui tal vez el primero que se dio cuenta que salió angular 18 antes de que lo anunciaran jaja y eso porque estaba intentando corregir un error, estaba usando angular 17.3.0, y en ese momento estaba la version 17.3.7 y actualice la version de angular y al ver la version si ya se habia actualizado, ya era la 18 😂, eran las 5am en mexico, y a la hora hicero la noticia oficial jaja

@guillermoalexandermerinom2749
2 months ago

son grandes cambios o no ? xd

@DanielRamos-zx1kh
2 months ago

A mi el tema de que no tengan todavía soporte nativo de vitest… buf

@eberteduardo
2 months ago

Hola, a qué hora son los directos en twicht?

@samuelmamani4352
2 months ago

Trato de aprender algo y sale su actualización

@jacsamg
2 months ago

Algunas cosas que yo pienso importantes de mencionar:

1. No hay "breaking changes", todo el código de las versiones anteriores sigue siendo compatible.

2. Los que eligen desarrollar con Angular como framework principal, no tenemos una mala experiencia, al contrario.

3. Angular con rxjs como opcional es algo bueno. Sin embargo, rxjs es una herramienta (y paradigma) muy útil en proyectos complejos, eso si, requiere estudio y práctica.

4. El boilerplate si es algo que puede mejorarse, pero hoy en día con casi cualquier herramienta de IA, esto se sobrelleva muy bien (yo utilizo Supermaven).

✌🏾

@ferencpuskas5284
2 months ago

11:44 y 11:48 diablos señorito!!!

@jacsamg
2 months ago

Se puso raro el vídeo xD