1) Inyectar servicios en Angular 14 sin un constructor usando inject.
Anteriormente, siempre se requería una clase con un constructor para inyectar cualquier servicio:

class MyClass {
  constructor(private myService: MyService) {}
}

Ahora, podemos inyectar un servicio tanto en funciones como en clases. Sólo necesitamos declarar una variable y establecerla igual para inyectar con el nombre del servicio dentro:

const miServicio = inyectar(MiServicio);
Esto es útil, por ejemplo, en interceptores y guardias, que ahora comúnmente se hacen con funciones en lugar de clases.

2) Etiqueta de cierre automático para guardar líneas en Angular 15.
A partir de esta versión, puedes usar un componente con una sola etiqueta:

Antes, era necesario abrir y cerrar una etiqueta de componente para usarlo:

3) Reduzca sus importaciones en Angular creando accesos directos.
En lugar de tener importaciones largas como estas:

importar {MiComponente} desde '../../components/mi-componente';
Puedes acortar las importaciones de esta manera:

importar {MiComponente} desde '@components/mi-componente';
Para lograr esto, vaya al archivo tsconfig.json y agregue rutas en la propiedad compilerOptions. Dentro de las rutas, puedes configurar tus propios atajos de importación:

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/app/components/*"]
    }
  }
}

La recomendación es que si estás dentro de un componente y quieres usar algo específico para ese componente, impórtalo relativamente usando ./ para acceder a ese recurso. Pero cuando acceda a una carpeta principal, utilice el acceso directo @. Si le genera problemas, es posible que deba cerrar y volver a abrir Visual Studio Code. Estos pequeños detalles marcan la diferencia a la hora de mantener el código lo más organizado posible.

4) Optimice la carga de imágenes con la directiva NgOptimizedImage en Angular 15.
Si tenemos una lista con 15 imágenes y las iteramos normalmente usando [src], enfrentaremos el problema de cargar las 15 imágenes a la vez cuando se inicia la aplicación, lo que reduce el rendimiento:

Para solucionar este problema, Angular proporciona la directiva NgOptimizedImage. Para usarlo, simplemente importalo:

importar { NgOptimizedImage } desde '@angular/common';
Y use [ngSrc] en lugar de [src]. Esto cargará imágenes de forma perezosa, mejorando el rendimiento. Sin embargo, la directiva tiene muchas otras configuraciones. Si solo deseas una carga diferida, te recomiendo usar el atributo loading="lazy", que forma parte del estándar HTML y es compatible con todos los navegadores:

Una recomendación: si tienes una imagen principal en la parte superior del menú, no la configures para carga diferida, ya que será la primera en cargar cuando se abra la aplicación. Aplique esto solo a las imágenes que puedan aparecer debajo del desplazamiento, ya que no necesitamos que se carguen de inmediato.

Esto es muy importante para aplicaciones públicas, como aplicaciones SSR que necesitan un buen SEO, ya que ayuda a mejorar el rendimiento.

— Notas basadas en el curso Angular de EfisioDev —