Que hay de nuevo en Angular 7.0 y como se puede actualizar

Introducción

Angular ha lanzado su última versión, Angular 7.0. En este artículo, exploraremos los siguientes puntos:

  • ¿Qué hay de nuevo en Angular 7.0?
  • Creando su primera aplicación Angular 7.0 usando Angular CLI
  • Cómo actualizar su aplicación Angular existente a Angular 7.0

¿Qué hay de nuevo en Angular 7.0?

  1. Al crear una nueva aplicación Angular, la CLI de Angular le pedirá al usuario que seleccione si desea agregar funciones como el enrutamiento angular o el formato de la hoja de estilo que desea usar en su aplicación.
  2. Las aplicaciones de Angular 7.0 utilizarán la función Bundle Budget de Angular CLI. Esto advertirá a los desarrolladores si el tamaño del paquete de la aplicación excede el límite predefinido. El valor predeterminado para la advertencia se establece en 2 MB y para los errores, en 5 MB. Este valor es configurable y se puede cambiar desde el angular.jsonarchivo. Esta característica mejora considerablemente el rendimiento de la aplicación.
  3. El Component Dev Kit (CDK) de Angular Material también recibe algunas características nuevas como parte de esta actualización. Las dos características recién agregadas del CDK son:
  • Desplazamiento virtual Si está intentando cargar una gran lista de elementos, puede afectar el rendimiento de la aplicación. Laetiqueta se puede utilizar para cargar solo la parte visible de la lista en la pantalla. Representará solo los elementos que quepan en la pantalla. Cuando un usuario se desplaza por la lista, el DOM cargará y descargará los elementos dinámicamente según el tamaño de la pantalla. Esta característica no debe confundirse con el desplazamiento infinito, que es una estrategia completamente diferente para cargar elementos. Puede leer más sobre el desplazamiento virtual aquí.
  • Arrastrar y soltar

    Podemos agregar fácilmente la función de arrastrar y soltar a un elemento. Admite funciones como arrastrar libremente un elemento, reordenar elementos de una lista, mover elementos entre la lista, animación, agregar un controlador de arrastre personalizado y arrastrar restringido a lo largo del eje X o Y. Puede leer más sobre Arrastrar y soltar aquí.

4. mat-form-fieldAhora admitirá el uso del elemento de selección nativo. Esto proporcionará mayor rendimiento y usabilidad a la aplicación. Lea más sobre esta función aquí.

5. Angular 7.0 ha actualizado sus dependencias para admitir Typecript 3.1, RxJS 6.3 y Node 10.

Ahora procederemos a crear nuestra primera aplicación Angular 7.

Prerrequisitos

  • Instale la última versión de Node.js desde aquí
  • Instale Visual Studio Code desde aquí

La instalación de Node.js también instalará npm en su máquina. Después de instalar Node.js, abra el símbolo del sistema. Ejecute el siguiente conjunto de comandos para verificar la versión de node y npm instalados en su máquina.

  • nodo -v
  • npm -v

Consulte la imagen a continuación:

Instalación de Angular CLI

Angular CLI es la interfaz de línea de comandos para Angular. Nos ayuda a inicializar, desarrollar y mantener aplicaciones Angular fácilmente.

Para instalar Angular CLI, ejecute el siguiente comando en la ventana de comandos:

npm i -g @angular/cli

Esto instalará Angular CLI 7.0 globalmente en su máquina. Consulte la imagen a continuación:

Para verificar la versión de CLI angular instalada en su máquina, ejecute el siguiente comando:

Consulte la imagen a continuación:

Crea la aplicación Angular 7

Abra Visual Studio Code y navegue hasta View >> Terminal. Esto abrirá la ventana del terminal de código VS. Alternativamente, también puede usar el teclado sho rtcut ctrl + `para abrir la ventana de terminal.

Escriba la siguiente secuencia de comandos en la ventana de terminal. Estos comandos crearán un directorio llamado "ng7Demo". Luego cree una aplicación Angular con el nombre "ng7App" dentro de ese directorio.

  • mkdir ng7Demo
  • cd ng7Demo
  • ng nuevo ng7App

A medida que ejecuta el comando ng new, la CLI de Angular le pedirá que realice selecciones en las siguientes dos opciones:

  1. ¿Le gustaría agregar enrutamiento angular? (s / N)
  2. ¿Qué formato de hoja de estilo le gustaría utilizar?

Una vez que seleccione las opciones y presione enter, se creará la aplicación Angular 7.0.

Consulte el Gif a continuación para una mejor comprensión.

Una vez que la aplicación se haya creado correctamente, ejecute el siguiente comando para abrir el proyecto:

  • codigo.

Consulte la imagen a continuación:

Esto abrirá el archivo de código de nuestra aplicación en una nueva ventana de VS Code. Puede ver la siguiente estructura de archivos en el Explorador de soluciones.

Abra el archivo package.json y podrá observar que tenemos los últimos paquetes de Angular 7.0.0 instalados en nuestro proyecto.

{ "name": "ng7-app", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~7.0.0", "@angular/common": "~7.0.0", "@angular/compiler": "~7.0.0", "@angular/core": "~7.0.0", "@angular/forms": "~7.0.0", "@angular/http": "~7.0.0", "@angular/platform-browser": "~7.0.0", "@angular/platform-browser-dynamic": "~7.0.0", "@angular/router": "~7.0.0", "core-js": "^2.5.4", "rxjs": "~6.3.3", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.10.0", "@angular/cli": "~7.0.1", "@angular/compiler-cli": "~7.0.0", "@angular/language-service": "~7.0.0", "@types/node": "~8.9.4", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.1.1" } }

Demostración de ejecución

El nombre de nuestra aplicación Angular es ng7App que está dentro del directorio ng7Demo .

Entonces, primero navegaremos a nuestra aplicación usando los siguientes comandos.

  • cd ng7Demo
  • cd ng7App

Ahora, usamos el siguiente comando para iniciar el servidor web.

  • ng servir

Consulte la imagen a continuación:

After running this command, you can see that it is asking to open //localhost:4200 in your browser. So, open any browser on your machine and navigate to this URL. Now, you can see the following page.

How to upgrade to Angular 7

The angular team has provided an Angular Update Guide to ensure the smooth upgrade of angular versions. Navigate to //update.angular.io/ to access it. It is a self-explanatory and easy to use application. It will show you the steps that you need to follow before updating, during the update and after the update. Refer to the image below:

If you want to update your application from Angular 6 to Angular 7 then run the following command in the project folder:

ng update @angular/cli @angular/core

Conclusion

We have learned about the new features of Angular 7.0. We also installed Angular CLI 7.0. To create and execute an Angular 7.0 app we have used Angular CLI and VS Code. We also explored the method to upgrade an existing application to Angular 7.0.

See Also

  • Getting Started With Angular 6.0
  • Understanding Angular 6 Animations
  • Getting Started With Angular 5 Using Visual Studio Code
  • CRUD Operations With ASP.NET Core Using Angular 5 And ADO.NET
  • ASP.NET Core — CRUD Using Angular 5 And Entity Framework Core
  • ASP.NET Core — Using Highcharts With Angular 5

Originally published at //ankitsharmablogs.com/