¡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

Leave a Reply

32 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@javtheghost3789
17 days ago

y yo me quede en la v14 ._.

@albenvi94
17 days ago

Vue (Nuxt) > React (Next) > Angular

@flaviovargas9317
17 days 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
17 days 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
17 days ago

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

@Faradars1
17 days 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
17 days ago

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

@lericode
17 days ago

Midu! Haz un proyecto con Angular

@snithfferx
17 days 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
17 days 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
17 days ago

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

@PiernadePollo681
17 days ago

larga vida a angular

@alexisontiveros3201
17 days 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
17 days ago

son grandes cambios o no ? xd

@DanielRamos-zx1kh
17 days ago

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

@eberteduardo
17 days ago

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

@samuelmamani4352
17 days ago

Trato de aprender algo y sale su actualización

@jacsamg
17 days 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
17 days ago

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

@jacsamg
17 days ago

Se puso raro el vídeo xD

32
0
Would love your thoughts, please comment.x
()
x