Angularチームは先日、Angular 18のリリースを発表した。このリリースでは、ゾーンレス変更検出、新しい開発者ハブ、いくつかの機能の安定版、サーバーサイドレンダリングの改善などが導入されている。このリリースは、新しいAPIを安定させ、開発者からの一般的な要求に対応し、全体的な開発者体験を向上させる。
Angular 18では、zone.jsの必要性をなくす、ゾーンレス変更検出の実験的なサポートが導入された。このアプローチは、変更検出サイクルの数を減らし、より読みやすいスタックトレースを提供することで、パフォーマンスの向上を目的としている。開発者は、アプリケーションのブートストラップにプロバイダを追加することで、実験的なゾーンレスサポートを試せる。
bootstrapApplication(App, { providers:[ provideExperimentalZonelessChangeDetection() ]}); Googleのシニア・ソフトウェア・エンジニアであるAlex Rickabaugh氏は、Angular 18でゾーンレスがサポートされることの意義について、X（旧Twitter）でツイートした。
私はこのリリースを特に誇りに思っています。私たちの最大の課題は、Angularの安定性と信頼性を維持しながら、現代のウェブに合わせて進化させることです。v18で、我々はzone.jsのない未来への第一歩を踏み出しました。
Angular.devはAngularドキュメントの公式サイトだ。Angular.devはAngularドキュメントの公式サイトであり、ハンズオンで始める旅、インタラクティブなプレイグラウンド、刷新されたガイド、簡素化されたナビゲーションが含まれている。angular.ioへのリクエストはすべてangular.devにリダイレクトされる。
Angular 18でいくつかの機能が安定した。以前は実験的にサポートされていたMaterial 3コンポーネントが安定し、新しいテーマとドキュメントが含まれた。Core Web Vitalsを改善するために設計されたDeferrable viewsが安定し、開発者が特定のビューのロードを延期可能になった。新しい組み込みのコントロールフロー構文と機能も安定に達し、パフォーマンスの向上と人間工学的な利点を提供する。
Angular 18では、サーバーサイドレンダリング（SSR）が強化され、i18nハイドレーションのサポート、より良いデバッグ、Googleのイベントディスパッチライブラリによるイベント再生が可能になった。これらの改良は、より堅牢でインタラクティブなSSR体験の保証を目的としている。
Angular 18では、ng-contentでデフォルトのコンテンツを指定可能になった。これにより、開発者はコンポーネントでフォールバックコンテンツを提供できる。例えば以下の通りだ。
@Component({ selector: 'app-profile', template: ` Hello Unknown user `,})export class Profile {} コンポーネントを使う場合は以下の通りである。
<app-profile> <span class="greeting">Good morning </span></app-profile> 出力はこうなる。
<span class="greeting">Good morning</span>Unknown user Angularフォームはeventsというプロパティを公開した。例えば以下の通りである。
const nameControl = new FormControl('name', Validators.required);nameControl.events.subscribe(event => { // Process individual events}); さらに、Angular 18では、関数を使用して動的なリダイレクトルートを返せるため、ルートリダイレクトの柔軟性が向上している。例えば以下の通りである。
const routes: Routes = [ { path: "first-component", component: FirstComponent }, { path: "old-user-page", redirectTo: ({ queryParams }) => { { { queryParams const errorHandler = inject(ErrorHandler); const userIdParam = queryParams['userId']; if (userIdParam !== undefined) { return `/user/${userIdParam}`; } else { errorHandler.handleError(new Error('Attempted navigation to user page without user ID.')); return `/not-found`; } }, }, { path: "user/:userId", component: OtherComponent },]; 最後に、Angular 18では依存関係がTypeScript 5.4に更新され、開発者は最新のTypeScriptの機能と改善点を利用可能になった。