1) Inject Services in Angular 14 ohne Konstruktor mit inject.
Bisher war immer eine Klasse mit einem Konstruktor erforderlich, um einen Dienst einzufügen:

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

Jetzt können wir einen Dienst sowohl in Funktionen als auch in Klassen einfügen. Wir müssen nur eine Variable deklarieren und sie auf inject mit dem darin enthaltenen Dienstnamen setzen:

const myService = inject(MyService);
Dies ist beispielsweise bei Interceptoren und Guards nützlich, die heute üblicherweise mit Funktionen statt mit Klassen ausgeführt werden.

2) Selbstschließendes Tag zum Speichern von Zeilen in Angular 15.
Ab dieser Version können Sie eine Komponente mit einem einzelnen Tag verwenden:

Früher war es notwendig, ein Komponenten-Tag zu öffnen und zu schließen, um es zu verwenden:

3) Reduzieren Sie Ihre Importe in Angular, indem Sie Verknüpfungen erstellen.
Anstatt lange Importe wie diese zu haben:

import { MyComponent } from '../../components/my-component';
Sie können Importe wie folgt verkürzen:

import { MyComponent } from '@components/my-component';
Um dies zu erreichen, gehen Sie zur Datei tsconfig.json und fügen Sie Pfade unter der Eigenschaft „compilerOptions“ hinzu. Innerhalb von Pfaden können Sie Ihre eigenen Importverknüpfungen konfigurieren:

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

Die Empfehlung lautet: Wenn Sie sich innerhalb einer Komponente befinden und etwas Spezifisches für diese Komponente verwenden möchten, importieren Sie es relativ mit ./, um auf diese Ressource zuzugreifen. Wenn Sie jedoch auf einen übergeordneten Ordner zugreifen, verwenden Sie die @-Verknüpfung. Wenn es zu Problemen kommt, müssen Sie Visual Studio Code möglicherweise schließen und erneut öffnen. Diese kleinen Details tragen dazu bei, den Code so organisiert wie möglich zu halten.

4) Optimieren Sie das Laden von Bildern mit der NgOptimizedImage-Direktive in Angular 15.
Wenn wir eine Liste mit 15 Bildern haben und sie normal mit [src] durchlaufen, stehen wir vor dem Problem, dass beim Start der Anwendung alle 15 Bilder auf einmal geladen werden, was die Leistung verringert:

Um dies zu beheben, stellt Angular die NgOptimizedImage-Direktive bereit. Um es zu verwenden, importieren Sie es einfach:

import { NgOptimizedImage } from '@angular/common';
Und verwenden Sie [ngSrc] anstelle von [src]. Dadurch werden Bilder verzögert geladen, was die Leistung verbessert. Die Direktive hat jedoch viele andere Konfigurationen. Wenn Sie nur Lazy Loading wünschen, empfehle ich die Verwendung des Loading="lazy"-Attributs, das Teil des HTML-Standards ist und mit allen Browsern kompatibel ist:

Eine Empfehlung: Wenn Sie ein Hauptbild oben im Menü haben, stellen Sie es nicht auf Lazy Loading ein, da es beim Öffnen der App als erstes geladen wird. Wenden Sie dies nur auf Bilder an, die möglicherweise unterhalb der Schriftrolle erscheinen, da diese nicht sofort geladen werden müssen.

Dies ist sehr wichtig für öffentliche Anwendungen, wie z. B. SSR-Apps, die eine gute SEO benötigen, da es zur Verbesserung der Leistung beiträgt.

– Notizen basierend auf dem Angular-Kurs von EfisioDev –