¿Qué hay de nuevo en Angular 4?

Feb 3, 2026
Cómo
[dieciséis]

En marzo, el equipo angular publicó la versión 4, y con él algunas características nuevas emocionantes para explorar. En este tutorial te mostraremos. Cómo hacer una aplicación Usando algunas de estas nuevas características, así como demostrando algunos de los poderosos cambios de mejora de rendimiento, debajo de la capucha.

¿Qué hay de nuevo?

El equipo angular le está llamando un "cambio de imagen invisible", porque la mayoría de los cambios están en el fondo en lugar de con la funcionalidad de codificación central. Un cambio importante es el movimiento hasta la compilación antes del tiempo como estándar, que tiene el potencial de mejorar drásticamente el rendimiento cuando se usa correctamente. Typescript 2.1+ también se admite ahora, lo que nos da acceso a todas las nuevas características de ES2015.

Eso no quiere decir que tampoco hay cambios notables en los conceptos básicos, por ejemplo, hay una nueva sintaxis de vinculación de plantilla útil que nos permite simplificar nuestro código agregando un demás opción para ngif y la capacidad de asignar variables locales dentro de un ngfor .

¿Extraño 3.0?

Angular 4 es la primera versión importante de la versión del marco adoptado de versiones semánticas. Así que no te preocupes, no te perdiste 3.0: había dos actualizaciones importantes, y ambas se enrollaban en la versión 4.0.

Tenga en cuenta también que Angular 1.x ahora se conoce como angularjs, y Angular 2+ se menciona simplemente como angular. Tenga cuidado, ya que algunos tutoriales y bibliotecas de terceros pueden no haber actualizado su uso de estos términos.

Obtener los archivos tutoriales

En este tutorial, trabajaremos con una aplicación de flores. Para descargar la aplicación de ejemplo, vaya a Filesilo , seleccione cosas gratis y contenido gratis junto al tutorial. Nota: Los usuarios por primera vez deberán registrarse para usar Filesilo. Una vez que haya iniciado sesión, puede descargar la aplicación de ejemplo aquí .

¡Empecemos!

01. Comience con nodo

Download and install Node.js by following the instructions in the wizard

[dieciséis] Descargue e instale NOde.js siguiendo las instrucciones del asistente

Vamos a partir de cero, y usemos el CLI angular para construir una aplicación World Hola. Si desea actualizar una aplicación existente, salte al paso 4. Si aún no lo ha hecho Descargar el nodo , que viene pre-empaquetado con NPM. Si ya tiene nodo, compruebe que es al menos nodo 6.9.x y npm 3.x.x de la línea de comandos. 

 $ Nodo -v
v6.10.2
$ npm -v
3.10.10

02. Configurar un nuevo proyecto.

Create a simple Hello World app in the Angular CLI

[dieciséis] Crea una aplicación World Hello simple en la CLI angular.

Ahora tenemos un administrador de paquetes, podemos usarlo para instalar la CLI angular y angular. Entre otras cosas, el CLI le permite generar fácilmente nuevos proyectos y componentes. 

 $ NPM install -g @ angular / cli
$ ng Nuevo My-First-Angular4-Aplicación # CLI Angular CLI Comandos Use 'ng'
$ ng servir -open # Este comando arrancará su aplicación y lo iniciará en el navegador

03. Revise el versionamiento

Si no ha visto un proyecto angular antes, tome tiempo para familiarizarse con la estructura de archivos generada por la CLI. Para nuestro nuevo proyecto, nuestro Package.json Debe enumerar la versión 4.0.0 Paquetes angulares. 

 "Dependencias": {
"@ angular / común": "^ 4.0.0",
"@ angular / compilador": "^ 4.0.0",
"@ angular / núcleo": "^ 4.0.0",
"@ angular / formas": "^ 4.0.0",
"@ angular / http": "^ 4.0.0",
"@ Angular / Plataforma-Browser": "^ 4.0.0",
"@ Angular / Plataforma-Browser-Dynamic": "^ 4.0.0",
"@ angular / enrutador": "^ 4.0.0" [...]}

04. Actualizar a angular 4

Si tiene una aplicación angular existente con versiones 2.x enumeradas, es realmente fácil actualizar a la versión 4 en la mayoría de los casos. Solo necesitamos instalar y actualizar los paquetes relevantes de la línea de comandos. Mac: 

 $ NPM Instalar @ angular / {común, compilador, compilador-cli, núcleo, formularios, http, plataforma-navegador, navegador de plataforma-dinámico, plataforma-servidor, enrutador, animaciones} @latest TypScript @ últimos - Últimas

Windows: 

& gt; NPM Instalar @ angular / común @ ultimo @ angular / compilador @ últimamente @ angular / compiler-cli @ ultion @ angular / core @ ultegry @ angular / forms @ ultge @ angular / http @ ultge @ angular / http @ ultge @ angular / plataforma-browser @ ultater @angular @angular / plataforma-navegador-dinámico @ últimamente @ ulgular / plataforma-server @ ultegry ul angular / router @ ultegry @ angular / animaciones @ últimas typecript @ último --lave

05. Descarga la aplicación Tutorial.

A partir de ahora, estaremos trabajando con una aplicación angular de 2 ejemplos que puede descargar desde Filesilo (Para notas completas sobre cómo hacer esto, vea la intro anterior). Tenga en cuenta que esta aplicación ha sido creada puramente con fines ilustrativos. Una vez que haya descargado la aplicación TheFlower Shop en su directorio raíz, instale dependencias y lanzamiento en el navegador. 

 $ NPM Install
$ ng servir --OPEN

06. Actualizar flor de flores a 4.0

Our custom modal module needs renaming [click the icon to enlarge)

[dieciséis] Nuestro módulo modal personalizado necesita cambiar el nombre de [Haga clic en el icono para ampliar)

Dentro de tienda de flores Directorio, actualización a 4.0. Tenemos algo Dependencia de pares no satisfechas Errores después de la actualización.

07. Fijar dependencias de pares

Las dependencias de pares son para administrar proyectos que tienen paquetes que confían en diferentes versiones de las mismas dependencias. Tienes que agregarlos manualmente a tu Package.json expediente. Las dependencias de pares que necesitamos para florecer incluyen versiones anteriores de @ angular / {core, http} De rxjs y zone.js .

Revisar los errores en la salida del terminal y agregar cada dependencia faltante a Package.json . 

 "Peerdependences": {
  "@ angular / núcleo": "& gt; = 2.0.0",
  "@ angular / http": "& gt; = 2.0.0",
  "Rxjs": "^ 5.0.0",
  "zona.js": "0.7.8"
  },

08. Cuidado con los cambios de nombre

Nuestra aplicación de flores hace uso de un componente personalizado de código abierto llamado ng2-modal . Sin embargo, el autor ha actualizado su convención de nombramiento a ngx-modal . Necesitamos modificar nuestro nombre de dependencia y módulo ng importa en consecuencia. 

 PAQUETE.JSON:
"Dependencias": {
  [...]
  "NGX-MODAL": "0.0.25",
     [...]
  },
App / App.module.ts:
Importar {modalmodule} de 'ngx-modal';

09. Revise las versiones

Nuestro componente modal personalizado también necesita actualizar a una versión más reciente, así que asegúrese de actualizarlo con NPM. 

 $ NPM Instale NGX-MODAL @ ÚLTIMO --AVE

10. Revisa tu trabajo

Ahora hemos parchado nuestras dependencias, es una buena idea aclarar nodo_modules y construíalo de nuevo de nuestra Package.json . Si todo va bien, deberías tener una construcción limpia! Si no lo hace, se puede perder algo en sus versiones de dependencia. Toma otra mirada. 

 $ RM -RF NODE_MODULES /
$ npm cache limpio
$ npm install
$ ng servir --OPEN

Página siguiente: PASOS 11-20

  • 1
  • 2

Página actual: Pasos 1-10

Cómo - Artículos más populares

Cómo clasificar en Google

Cómo Feb 3, 2026

(Crédito de la imagen: Buzzfeed) Por lo tanto, quieres saber cómo clasificar en Google. La buena noticia es que no ..

Cómo agregar fuentes en Photoshop

Cómo Feb 3, 2026

(Crédito de imagen: Adobe) Fuentes en Photoshop: Enlaces rápidos - Añadir fuent..

Cómo simplificar la creación de la forma de mezcla en maya

Cómo Feb 3, 2026

[dieciséis] (Crédito de la imagen: Antony Ward) En mayas, las formas de mezcla, o los objetivos de morph, ya que también se..

La guía esencial para el preesportamiento en el arte

Cómo Feb 3, 2026

[dieciséis] (Crédito de la imagen: Rob Lunn) Si se pregunta qué es el escorzo en el arte, estamos seguros de que no está s..

Cómo dibujar un gato

Cómo Feb 3, 2026

[dieciséis] ¿Quieres saber cómo dibujar un gato? Has venido al lugar correcto. Dibujar animales puede ser complicado, pero también ..

Control de versión maestra para equipos remotos

Cómo Feb 3, 2026

[dieciséis] Trabajar de forma remota se ha vuelto mucho más común en el desarrollo web en los últimos años. Antes del control de l..

Cómo crear colores brillantes con pinturas al óleo

Cómo Feb 3, 2026

[dieciséis] Siendo pidido que describiera mi técnica de pintura Es extraño para mí, y francamente es difícil de hacer. ..

Afila tu modelo de superficie dura en 3DS MAX

Cómo Feb 3, 2026

[dieciséis] En este tutorial, voy a compartir las técnicas y los métodos que uso para crear modelos de superficie dura en 3ds ..

Categorías