¿Qué hay de nuevo en Angular v16?

Angular, mantenido por Google, es un marco de código abierto ampliamente utilizado para desarrollar aplicaciones web. Le ofrece un sólido conjunto de herramientas y una gama de funciones que le permiten crear aplicaciones web dinámicas, receptivas y escalables.

El reciente lanzamiento de la versión 16 de Angular presenta interesantes actualizaciones y mejoras en la experiencia de desarrollo, así como un mejor rendimiento y estabilidad de la aplicación.

1. Señales angulares

Señales angulares es una biblioteca que permite la definición de valores reactivos y el establecimiento de dependencias entre ellos. Aquí hay un ejemplo simple de cómo utilizar Angular Signals dentro de una aplicación Angular:

@Componente ({
 selector: 'mi-aplicación',
 ser único: verdadero,
 plantilla: `
{{ nombre completo() }} "establecerNombre('Juan')">Haga clic</button>
`,
})
exportarclase aplicación {
 primerNombre = señal(





instagram viewer

'Jane');
 apellido = señal ('Gama');
 nombre completo = calculado (() =>`${este.nombre de pila()}${este.apellido()}`);
constructor() {
 efecto(() =>consola.registro('Nombre cambiado:', este.nombre completo()));
 }
 establecerNombre (nuevoNombre: cadena) {
este.firstName.set (nuevoNombre);
 }
}

El fragmento de código anterior crea un valor calculado denominado fullName, que se basa en las señales firstName y lastName. Además, define un efecto, una función de devolución de llamada que se ejecuta cada vez que cambia el valor de las señales que lee.

En este caso, el valor de fullName depende de firstName y lastName, por lo que cambiar cualquiera de ellos activa el efecto. Cuando el valor de firstName se establece en John, el navegador registra el siguiente mensaje en la consola:

 Nombre cambiado: John Doe.

2. Nueva colección independiente de Ng

¡A partir de Angular v16, puede crear nuevos proyectos independientes desde el principio! Para probar la vista previa para desarrolladores de los esquemas independientes, asegúrese de tener instalado Angular CLI v16 y ejecute el siguiente comando:

ng nuevo --independiente

Al hacer esto, obtendrá una estructura de proyecto más simple sin NgModules. ¡Además, todos los generadores del proyecto producirán directivas, componentes y tuberías independientes!

3. Mapeo automático de parámetros de ruta

Considere una configuración de enrutamiento de la siguiente manera:

exportarconstante rutas: Rutas = [{
 camino: 'buscar:/id',
 componente: componente de búsqueda,
 resolver: {
 detalles de búsqueda: searchResolverFn
 }
}];

Antes de Angular 16, necesitaba inyectar el servicio ActivatedRoute para recuperar parámetros de URL, parámetros de consulta o datos asociados para una URL en particular.

Aquí tienes un ejemplo de cómo lo tenías que hacer:

@Componente({
 ...
})
exportarclase Componente de búsqueda {
 readonly #activatedRoute = inyectar (ActivatedRoute);
 ID de solo lectura $ = este.#activatedRoute.paramMap (mapa(parámetros => params.get('identificación')));
 datos de solo lectura $ = este.#activatedRoute.data.map(({
 buscarDetalles
 }) => buscarDetalles);
}

Con Angular 16, ya no necesita inyectar el servicio ActivatedRoute para recuperar varios parámetros de ruta porque puede vincularlos directamente a las entradas de los componentes.

Para activar esta funcionalidad en una aplicación que utiliza el sistema de módulos, configure el valor correspondiente en las opciones de RouterModule:

RouterModule.forRoot (rutas, {
 enlazar Entradas de componente: verdadero
})

Para una aplicación independiente, debe llamar a una función en su lugar:

provideRoutes (rutas, withComponentInputBinding());

Una vez que activa esta funcionalidad, el componente se vuelve mucho más simple:

@Componente({
 ...
})
exportarclase Componente de búsqueda {
@Aporte() ¡identificación!: cadena;
@Aporte() buscarDetalles!: BuscarDetalles;
}

4. Entrada requerida

Una característica muy esperada por la comunidad Angular es la capacidad de marcar ciertas entradas según sea necesario. Hasta ahora, tenía que usar varias soluciones para lograr esto, como generar un error en NgOnInit ciclo de vida si la variable no estaba definida o modificando el selector del componente para incluir el obligatorio entradas.

Sin embargo, ambas soluciones tenían sus ventajas y desventajas. A partir de la versión 16, hacer que una entrada sea obligatoria es tan simple como proporcionar un objeto de configuración en los metadatos de la anotación de entrada:

@Aporte({
 requerido: verdadero
}) ¡nombre!: cadena;

5. Vite como servidor de desarrollo

Angular 14 introdujo un nuevo paquete de JavaScript llamado EsBuild, que mejoró significativamente los tiempos de compilación en aproximadamente un 40 %. Sin embargo, solo podría darse cuenta de esta ganancia de rendimiento durante la fase de compilación y no durante el desarrollo con el servidor de desarrollo.

En el próximo lanzamiento de Angular, la herramienta de compilación Vite también permite el uso de EsBuild durante el desarrollo.

Para activar esta característica, actualice la configuración del generador en el archivo angular.json de la siguiente manera:

"arquitecto": {
"construir": {
"constructor": "@angular-devkit/build-angular: navegador-esbuild",
"opciones": {
 ...
 }
 }

Tenga en cuenta que esta funcionalidad aún es experimental.

Mejora de la experiencia y el rendimiento del desarrollo

La versión 16 de Angular trae actualizaciones emocionantes como Angular Signals para administrar datos, proyecto independiente creación, mapeo automático de parámetros de ruta, entradas requeridas e integración de Vite para mejorar desarrollo. Estas mejoras mejoran la experiencia de desarrollo y aumentan el rendimiento de la aplicación.