この記事を書いている時点で、angular は v16 の最初のリリース候補バージョンを公開したばかりです。このバージョンには多くの機能/変更が含まれています。これまでのどのメジャー リリースよりもはるかに多くの機能を備えています (もちろん、angular から angular 2 への移行は考慮されていません)。Angular は一種のルネッサンスを迎えており、v16 はほんの始まりにすぎません。これらは、このリリースで予定されている重要な変更の一部です。

ngcはなくなった

Angular は v9 で古いビュー エンジンから ivy に移行しました。まだ古いビュー エンジンに基づいているライブラリをサポートするために、Angular Compatibility Compiler (ngcc) が導入されました。v16 では、ngcc他のすべてのビュー エンジニア関連のコードと共に削除されました。その結果、Angular バンドル側が削減され、Angular View Engine ライブラリは v16+ で使用できなくなります。このようなライブラリは公式にはサポートされていませんが、これは互換性を大きく損なうものです。

これでAngularのView Engineからivyへの移行は完了です。

routerコンポーネント入力へのバインディング情報

この機能を使用すると、次のルーター データをコンポーネントで直接入力として使用できます。したがって、 を使用してこれらの値を取得する代わりにActivatedRoute、入力を使用できます。これらは、アプリケーションから多くの定型コードを削除する可能性があります

• ルーターデータ
• 解決されたルーター データ
• パラメータ
• queryParams

// Current approach, which would still work
@Component({
  ...
})
class SomeComponent {
  route = inject(ActivatedRoute);
  data = this.route.snapshot.data['dataKey'];
  params = this.route.snapshot.params['paramKey']
}

//New approach
@Component({
  ...
})
class SomeComponent {
  @Input() dataKey: string;
  @Input() paramKey: string;
  
  //or
  @Input() set dataKey(value: string){
    //react to the value
  };
  @Input() set paramKey(value: string){
    //react to the vaue
  };
}

Angular は、コードを書くためのより機能的なアプローチを可能にする方向への動きを遅らせてきました。DestoryRefこの方向の 1 つの機能は、 rxjs演算子の導入ですtakeUntilDestoryed。これらは、ライフサイクル フックの代替品ですngOnDestroy。はクラスに関連付けられているためngOnDestroy、必要に応じて関数で使用することはできません。

@Component({})
class SomeComponent {
  destroyRef = inject(DestroyRef);
  store = inject(Store);
  user
  constructor() {
    const sub = this.store.select(getUser()).subscribe((user) => {
      this.user = user    
    });
    destoryRef.onDestroy(() => {
      sub.unsubscribe()
    })
    

    //OR

    const sub = this.store.select(getUser()).pipe(takeUntilDestroyed())
      .subscribe((user) => {
      this.user = user    
    });
  }
}

この機能は、信号効果をクリーンアップするために内部的に使用されるため、subscriptionsrxjs のように手動でクリーンアップする必要はありません。それらについては後で詳しく説明します

必須入力

反応および他のフレームワークでは、propsコンポーネントに渡すことができます。そこで、これらの小道具のいくつかを必須としてマークすることができます。それらが渡されない場合、typescript はエラーをスローします。開発者は、angular でこの機能を残念ながら見逃していました。

コンポーネントがその目的を果たすために入力を必要とするユースケースはたくさんあります。これらの入力が親から渡されないと、コンポーネントは意図したとおりに動作しない可能性があります。現在、入力がコンポーネントに渡されることを強制するハックな方法がいくつかあります。しかし、この機能は、この要望の多かった機能を angular にもたらします。

@Component({})
class SomeComponent {
  @Input({required: true}) someRequiredInput;
}

これはルーティングされたコンポーネントと動的コンポーネントでは機能しないことに注意してください。テンプレートに直接追加されたコンポーネントに対してのみ機能します

Esbuild 開発サーバー

esbuild を使用するための実験的なサポートはng build、既に利用可能です。v16 では、ng serveesbuild を使用するためのサポートも追加されました。これはまだ実験段階であり、パフォーマンス関連の改善と最適化がさらに行われる予定ですが、すでに webpack の実装よりもはるかに高速な起動時間 (少なくとも 2 倍) を実現しています。

"@angular-devkit/build-angular:browser"これを有効にするには、次のように変更する必要があります"@angular-devkit/build-angular:browser-esbuild"

シグナル

あなたが角度のある開発者で、岩の下に住んでいない場合は、これについて知っているでしょう. シグナルは、angular によって提供される新しいリアクティブ プリミティブであり、フレームワークがそのモデルへの変更を追跡するのに役立ちます。この記事では、シグナルの詳細、その API、および rxjs との比較について説明します。以下は、もたらす約束を示す利点です。

• angular をシンプルにする:このリアクティブ プリミティブは、ほとんどの場合に rxjs を置き換えることができ、アプリケーションの複雑さを軽減します。
• きめの細かい反応性: Angular は、シグナルを使用することでパフォーマンスを大幅に向上させることができます。シグナルは変更された正確なモデルを提供するため、Angular はアプリケーション全体をダーティ チェックする代わりに、テンプレートに対してきめ細かい更新を行うことができます。
• 学習する概念が少ない:シグナル コンポーネント (v17 で導入) を使用すると、開発者は、記述した最適でないコードが原因で発生する可能性のあるパフォーマンス関連の問題について心配する必要が少なくなります。changeDetectionStrategy、ライフサイクルフックなどの概念はonChanges、ある程度pipeまでは不要になります。開発者がアプリケーションのパフォーマンスを妨げる可能性のある間違いを犯すことが難しくなります。
• ゾーンのないアプリケーション:ゾーンは現在、angular が何かが変更されたかどうかを認識し、アプリケーション全体の変更検出をトリガーするのに役立ちます。zone monkey はブラウザ API にパッチを当てて、Angular に何かが変更されたことを示すシグナル (しゃれを意図したもの) を与えます。ただし、何が変更されたかをフレームワークに通知しません。また、アプリケーションのバンドル サイズと初期起動時間も増加します。シグナルにより、フレームワークは正確にどのモデルが変更されたかを知ることができます。これにより、ゾーンレスアプリケーションが可能になります

水分補給でSSR

これは、非常に長い間、Angular 開発者からの大きな機能要求でした。これがなければ、最初の起動時間と SEO が非常に重要なエンドユーザー向けアプリケーションを構築したいと考えていた多くの開発者が、angular の使用を控えていました。

Angular Universal は、アプリケーションの破壊的なハイドレーションのみをサポートする、ある程度の Server Side Rendering サポートを提供しました。これは、ユーザーにとってぎくしゃくしたユーザー エクスペリエンスにつながります。v16 では、Angular はサーバーでレンダリングされたアプリケーションの実際の (非破壊的な) ハイドレーションを有効にします。これは、http リクエスト キャッシングと合わせて、最初のレンダリング時間が大幅に短縮され、Angular アプリケーションの Web Vitals が改善されます。

結論

v16.0.0 は 5 月中にリリースされる予定です (5 月 4 日が私の推測です)。アンギュラー開発を行っている場合、または次のプロジェクトでアンギュラーを検討している場合は、これらの新機能を知ることが不可欠です。これらのいくつかは、コミュニティからの長年の機能要求です。一部の機能 (シグナルと SSR) により、Angular は他の最新のフレームワークと同等になります。v17 でこれらの機能やその他の機能が追加されると、最新の angular は現在のものとは大きく異なって見えるようになります。angular がもたらしている変更の量を考えると、最新の状態に保たないと、これらの新機能を利用できなくなり、コードベースがすぐにレガシー コードのように見え始める可能性があります。