1) inject.
を使用してコンストラクターなしで Angular 14 にサービスを注入する 以前は、サービスを注入するにはコンストラクターを持つクラスが常に必要でした:

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

これで、関数とクラスの両方にサービスを注入できるようになりました。変数を宣言し、それを内部のサービス名で注入するように設定するだけです:

const myService = inject(MyService);
これは、たとえば、現在ではクラスではなく関数を使用して実行されるのが一般的なインターセプターやガードで役立ちます。

2) Angular 15 で行を保存するための自己終了タグ。
このバージョン以降、単一のタグ

以前は、コンポーネント タグを開いたり閉じたりして使用する必要がありました:

私のコンポーネント>

3) ショートカットを作成して、Angular でのインポートを減らします。
次のような長いインポートを行う代わりに:

インポート { MyComponent } から '../../components/my-component';
次のようにインポートを短縮できます:

インポート { MyComponent } から '@components/my-component';
これを実現するには、tsconfig.json ファイルに移動し、compilerOptions プロパティの下にパスを追加します。パス内で、独自のインポート ショートカットを設定できます:

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

コンポーネント内でそのコンポーネントに固有のものを使用したい場合は、./ を使用して相対的にインポートし、そのリソースにアクセスすることをお勧めします。ただし、親フォルダーにアクセスする場合は、@ ショートカットを使用します。問題が発生した場合は、Visual Studio Code を閉じて再度開く必要がある場合があります。これらの小さな詳細は、コードを可能な限り整理した状態に保つのに違いをもたらします。

4) Angular 15 の NgOptimizedImage ディレクティブを使用して画像の読み込みを最適化します。
15 個の画像を含むリストがあり、通常 [src] を使用してそれらを反復処理する場合、アプリケーションの起動時に 15 個の画像すべてを一度にロードするという問題に直面し、パフォーマンスが低下します。

これを修正するために、Angular は NgOptimizedImage ディレクティブを提供します。使用するには、インポートするだけです:

import { NgOptimizedImage } から '@angular/common';
[src] の代わりに [ngSrc] を使用してください。これにより、画像が遅延して読み込まれ、パフォーマンスが向上します。ただし、ディレクティブには他にも多くの構成があります。遅延読み込みのみが必要な場合は、loading="lazy" 属性を使用することをお勧めします。これは HTML 標準の一部であり、すべてのブラウザーと互換性があります:

推奨事項: メニューの上部にメイン画像がある場合は、アプリを開いたときに最初に読み込まれるため、それを遅延読み込みに設定しないでください。すぐに読み込む必要がないため、スクロールの下に表示される可能性のある画像にのみこれを適用します。

これは、パフォーマンスの向上に役立つため、優れた SEO を必要とする SSR アプリなどの公開アプリケーションにとって非常に重要です。

— EfisioDev による Angular コースに基づくメモ —