El autor del material, cuya traducción estamos publicando, sugiere hablar sobre Angular 8. Aquí discutiremos algunos temas particularmente candentes planteados en los eventos NgConf y Google I / O 2019. Por lo tanto, si está interesado en Angular, pero por alguna razón no ha visto informes de de estos eventos, creemos que tendrá curiosidad por saber qué puede esperar de Angular 8.
Puntos clave
Estoy seguro de que ahora está esperando el lanzamiento de Angular 8, está experimentando los mismos sentimientos que experimenté después de NgConf 2019. El
informe de Igor Minar se refirió a muchas innovaciones esperadas, desde herramientas hasta tecnologías como la carga diferencial y muchas otras cosas maravillosas.
Analicemos cómo todo esto puede afectar sus proyectos. Es decir, consideraremos nuevas oportunidades y hablaremos sobre si su apariencia conducirá al reconocimiento de los mecanismos existentes como obsoletos, o al hecho de que lo nuevo será incompatible con lo antiguo.
Nuevas características
▍ Carga diferencial
Al aplicar la tecnología de carga diferencial, Angular, durante el proceso de ensamblaje del proyecto, puede crear un paquete separado para polyfills. Depende del archivo de la
browserlist del
browserlist . Así es como se verá en términos generales.
Arriba hay una nueva forma de empacar proyectos ( fuente )El uso de esta función reducirá el tamaño de los paquetes.
Ahorro por carga diferencial ( fuente )¿Cómo funciona esto?
Angular recopilará archivos adicionales de polyfill y se incrustarán en el código utilizando atributos
nomodule :
<body> <pp-root></pp-root> <script type="text/javascript" src="runtime.js"></script> <script type="text/javascript" src="es2015-polyfills.js" nomodule></script> <script type="text/javascript" src="polyfills.js"></script> <script type="text/javascript" src="styles.js"></script> <script type="text/javascript" src="vendor.js"></script> <script type="text/javascript" src="main.js"></script> </body>
El atributo
nomodule , boolean, evita que el script se cargue y se ejecute en navegadores que admiten módulos ES6. Dichos navegadores ignoran dichos scripts. Los navegadores más antiguos los descargan y los ejecutan.
▍ Plantillas SVG
Ahora los archivos SVG pueden usarse como plantillas. Hasta ahora, HTML incrustado o externo podría usarse como plantillas.
@Component({ selector: "app-icon", templateUrl: "./icon.component.svg", styleUrls: ["./icon.component.css"] }) export class AppComponent {...}
I Ivy motor de renderizado experimental
El motor Ivy todavía está en una etapa experimental. Después del lanzamiento de Angular 8, puede probarlo utilizando el indicador
--enable-ivy al crear una nueva aplicación. El código correspondiente se muestra a continuación. Recuerde que Ivy aún no está listo (todavía se encuentra en el estado de "vista previa opcional") y, como dijo Igor Minar en NgConf 2019, todavía se recomienda usar View Engine al crear nuevas aplicaciones.
Para habilitar el uso de Ivy en un proyecto existente, debe establecer el parámetro de
enableIvy option angularCompilerOptions en
angularCompilerOptions en
true en el
angularCompilerOptions :
"angularCompilerOptions": {"enableIvy": true}
Puede crear una nueva aplicación en la que se utilizará Ivy:
$ ng new my-app --enable-ivy
Ivy ofrece las siguientes características útiles, las tres primeras de las cuales se esperan en Angular 9:
- Compilación más rápida.
- Comprobación de tipo mejorada para plantillas.
- Reducción del tamaño de los paquetes. Ahora , si aún no lo ha visto, una demostración de una aplicación de 4.3 Kb con Google I / O 19.
- Compatibilidad con versiones anteriores.
- Y mi característica favorita es depurar plantillas. Estoy seguro de que, como yo, muchos desarrolladores necesitan esto.
▍Soporte Bazel
Bazel es otra herramienta que Google ha trasladado al mercado de código abierto. Igor Minar dice que Bazel se ha utilizado durante mucho tiempo para las necesidades internas de la empresa, y ahora está disponible para todos. Para obtener más información sobre este creador de proyectos, consulte la
documentación y lea cómo usar Bazel con
Angular .
Quizás ahora se pregunte si Bazel está listo para su uso práctico. Responda brevemente esta pregunta: aún no está lista. Ahora está en el estado de "vista previa opcional". Permítanme citar a Alex Eagle, que dirige el equipo de desarrollo de herramientas angulares en Google: "Si ya ha entrado en las aguas de Bazel antes, no pudo evitar notar que había muchos tiburones ... Ahora ya hemos manejado a los tiburones, pero el agua aún puede ser frío ".
Bazel aún se está trabajando, se espera que se incluya en
@angular/cli en la versión 9.
Aquí hay algunas características útiles que Bazel nos puede dar:
- Acelerando el tiempo de construcción del proyecto. La primera compilación lleva algo de tiempo, pero las compilaciones paralelas son mucho más rápidas. Angular ya usa Bazel, y ahora las rutinas de CI se completan en 7.5 minutos, no una hora, como era antes de Bazel.
- Montaje incremental del proyecto. Será posible recopilar e implementar no toda la aplicación, sino solo lo que ha cambiado en ella.
- Capacidad para trabajar con archivos Bazel, que, de forma predeterminada, están ocultos.
Puede agregar soporte de Bazel a un proyecto existente de la siguiente manera:
ng add @angular/bazel
Puede crear una nueva aplicación con Bazel:
$ npm install -g @angular/bazel $ ng new my-app --collection=@angular/bazel
▍API Builders
La nueva versión de Angular le permite utilizar los API Builders, también conocidos como Architect. Angular utiliza constructores para realizar operaciones básicas:
serve ,
build ,
test ,
lint y
e2e . Aquí hay un ejemplo usando ensambladores del archivo
angular.json :
... "projects": { "app-name": { ... "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", ... }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", ... }, "test": { "builder": "@angular-devkit/build-angular:karma", ... }, "lint": { "builder": "@angular-devkit/build-angular:tslint", ... }, "e2e": { "builder": "@angular-devkit/build-angular:protractor", ... } } } }
Ahora puedes crear tus propios coleccionistas. Los veo como similares a los comandos gulp / grunt utilizados en los viejos tiempos.
En general, el recopilador es solo una función con un conjunto de comandos que se pasa al
createBuilder() desde el paquete
@angular-devkit/architect :
import { createBuilder } from '@angular-devkit/architect'; function customBuild(options, context) { return new Promise((resolve, reject) => {
Puede echar un vistazo a los constructores angulares incorporados
aquí .
Aquí hay cosas geniales sobre ellos en el blog Angular.
▍ Cambios en la carga diferida
La nueva versión de Angular también tendrá una nueva versión del sistema de carga de módulos diferidos, cuya apariencia lleva al hecho de que la sintaxis existente
loadChildren:string quedará en desuso.
Anteriormente, se veía así:
loadChildren: './lazy/lazy.module#LazyModule';
Con el lanzamiento de Angular 8, así:
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
Si tiene muchos módulos al trabajar con los que se usa el mecanismo de carga diferida y desea automatizar su traducción a un nuevo modo de operación, eche un vistazo a
este material.
▍Support API $ location AngularJS
El equipo de desarrollo de Angular está comprometido a apoyar a aquellos que usan AngularJS y ayudarlos a cambiar a Angular. Como resultado, el soporte para el servicio
$location se ha agregado al sistema, en el paquete
angular/common/upgrade . Estamos hablando de las siguientes características:
- Obteniendo el estado del servicio
$location . - Seguimiento de cambios de dirección.
- Obtener la misma información sobre los componentes de la dirección que se pueden obtener en AngularJS (
hostname , protocol , port , search ). - Probar el servicio utilizando la API MockPlatformLocation.
▍Trabajadores web
Angular 8 agrega soporte para trabajadores web. Con su ayuda, puede organizar la ejecución en segundo plano del código de uso intensivo de recursos. Para crear un nuevo trabajador web, puede usar el siguiente comando de interfaz de línea de comando angular:
ng g webWorker <name>
▍Trabajadores de servicio
Desde hace poco se ha producido un gran aumento en la popularidad de las aplicaciones web progresivas, se han realizado muchas mejoras para los trabajadores de servicios. En particular, una de estas mejoras fue la adición del parámetro
SwRegistrationOptions . Otra mejora fue el soporte de varias aplicaciones en el mismo dominio.
Lea más sobre los trabajadores de servicios en
esta sección de la documentación angular.
▍ Mejoras de formulario
Se ha
markAllAsTouched método
markAllAsTouched , que le permite marcar todos los elementos dentro de un
FormGroup como
touched . Esto es muy útil en los casos en que necesita ejecutar la validación de todos los controles dentro de un
FormGroup . Antes de eso, se hizo lo mismo así:
validateFormAndDisplayErrors(form: FormGroup) { Object.keys(form.controls).map((controlName) => { form.get(controlName).markAsTouched({onlySelf: true}); }); }
En el nuevo Angular, puede usar el método
clear para
clear FormArray , que elimina todos los elementos de él. Anteriormente, era necesario utilizar la siguiente construcción, eliminando el primer elemento en cada iteración del bucle:
while (formArray.length) { formArray.removeAt(0); }
Ya no tienes que hacer esto. Ahora es suficiente llamar a un solo método:
formArray.clear()
▍ Configurar el momento de recibir una respuesta al usar las directivas ViewChild y ContentChild
Esta nueva característica implica el uso del indicador
static , que le permite especificar cuándo se resuelve la solicitud, definida por la directiva
ViewChild o
ContentChild .
Es posible que haya encontrado los siguientes ejemplos de comportamiento inconsistente del sistema. A veces, los resultados de búsqueda están disponibles en el método de ciclo de vida
ngOnInit , y a veces no están allí antes de llamar a
ngAfterContentInit o
ngAfterViewInit . Aquí se explica cómo usar la bandera
static :
Cabe señalar que estas características no están disponibles para las directivas
ViewChildren y
ContentChildren . Las consultas de búsqueda de elementos correspondientes se ejecutan después de que se realiza la detección de cambio.
Cuando use
static: true debe tener cuidado, porque el uso de este indicador no le permitirá obtener resultados de plantillas dinámicas (es decir, * ngIf). Se ha agregado una regla de esquemas al sistema, que le permite traducir el código existente para usar la nueva sintaxis. Esta sintaxis se usará con Ivy.
→ Los detalles sobre esta función se pueden encontrar
aquí .
▍Supportescriptcript 3.4.x
Angular ahora usa TypeScript 3.4 (la séptima versión de Angular usa TypeScript 3.2.x). No hay tantos cambios importantes en la nueva versión de TS. Probablemente no conducirán a consecuencias desagradables.
→ Los detalles sobre las innovaciones de TS 3.4 se pueden encontrar
aquí .
▍ Mejora del rendimiento
En las condiciones actuales,
ServerRendererFactory2 crea una nueva instancia de
DomElementSchemaRegistry para cada solicitud, que es bastante costosa en términos de recursos. Ahora se organizará el intercambio de la instancia global de
DomElementSchemaRegistry .
▍ Implementación de aplicaciones angulares en Firebase hosting
Si usa el alojamiento Firebase para implementar aplicaciones angulares, definitivamente le gustará esta innovación. El punto es que ahora en la CLI angular hay un comando especial para realizar esta operación:
ng run [PROJECT_NAME]:deploy
→
Aquí puede encontrar más información sobre esta función.
API desactualizadas
▍Uso de cualquier tipo cuando se trabaja con TesBed.get
El método
TesBed.get tenía dos firmas. Uno está escrito, el segundo es el tipo de recepción y retorno
any . Ahora, la firma del método, que proporciona el uso del tipo
any , está en desuso. Puede usar este método solo con una indicación de un tipo específico. Esto, por ejemplo, afectará los casos de trabajo con tokens de cadena (que no son compatibles) y con algunos otros tokens.
Usados previamente tales diseños:
TestBed.configureTestingModule({ providers: [{ provide: "stringToken", useValue: new Service() }], }); let service = TestBed.get("stringToken");
Ahora se aplica el siguiente enfoque:
const SERVICE_TOKEN = new InjectionToken<Service>("SERVICE_TOKEN"); TestBed.configureTestingModule({ providers: [{provide: SERVICE_TOKEN, useValue: new Service()}], }); let service = TestBed.get(SERVICE_TOKEN);
▍Eliminar DOCUMENTO del navegador angular / de plataforma
DOCUMENT elimina del paquete
@angular/platform-browser . Si usa
DOCUMENT de este paquete, debe comenzar a importarlo desde
@angular/common .
▍ Desinstalar el paquete angular / http
El paquete
@angular/http quedó en desuso en Angular 5, pero todavía estaba disponible ya que
@angular/platform-server dependía de él. Ahora este paquete se elimina de la lista de paquetes.
Cambios críticos
▍ Corrección de código automático
Pocos saben que Angular corrige automáticamente los errores al usar los elementos HTML
tr y
col .
En el caso de
tr se hicieron correcciones si el elemento correspondiente no estaba dentro del
tbody ,
tfoot o
thead . Las correcciones consistieron en la colocación automática de un elemento en
tbody .
En el caso de
col se hicieron correcciones al código en el que este elemento no está dentro de la etiqueta
colgroup .
Angular ahora deja la corrección de estos errores a la discreción de los desarrolladores. Esto se hace para evitar conflictos y errores. Como resultado, aquellos que estén acostumbrados a esta función deberán cuidar la corrección del código ellos mismos.
→ Los detalles sobre esto se pueden encontrar
aquí .
▍ Renombrar material angular
El proyecto de material angular se ha renombrado como componentes angulares. Los nombres de los paquetes no han cambiado.
Resumen
Angular 8 se lanzará muy pronto. El equipo de desarrollo angular está haciendo un gran trabajo. Los resultados de sus esfuerzos facilitan el trabajo y la vida de quienes usan Angular. En particular, por ejemplo, con cada nueva versión del marco cada vez es más fácil cambiar de la versión anterior. Aquí, por ejemplo, es lo que parece con Air France.
Tiempo requerido para actualizar a nuevas versiones de Angular ( fuente )Como resultado, podemos esperar que la transición de Angular 7 a Angular 8 no tome mucho tiempo y no requiera esfuerzos serios.
Aquí puede encontrar tutoriales paso a paso sobre la actualización a nuevas versiones de Angular.
Hace aproximadamente un mes, Igor Minar
dijo que todo indica que Angular 8.0.0 podría salir a fines de mayo.
Angular 8.0.0-rc.5 fue lanzado el
24 de mayo.
El futuro de Angular parece bastante optimista. Todo lo demás depende de nosotros.
Estimados lectores! ¿Qué esperas de Angular 8?
