Angular 19 – ویژگی‌های جدید

Angular 19 چندین ویژگی جدید و بهبود در عملکرد معرفی کرده است. در ادامه به توضیح برخی از ویژگی‌های جدید و تغییرات این نسخه می‌پردازیم:

1. سیگنال جدید (Experimental) : linkedSignal

linkedSignal یک ویژگی جدید و آزمایشی در Angular 19 است که به مدیریت واکنش‌گرایی کمک می‌کند. این ویژگی به طور خاص برای مدیریت بهتر سیگنال‌ها در کامپوننت‌ها طراحی شده است.

مثال:

export declare function linkedSignal<S, D>(options: {
    source: () => S;
    computation: (source: NoInfer<S>, previous?: {
        source: NoInfer<S>;
        value: NoInfer<D>;
    }) => D;
    equal?: ValueEqualityFn<NoInfer<D>>;
}): WritableSignal<D>;

2. API جدید (Experimental) : resource

resource یک API جدید آزمایشی است که مدیریت منابع خارجی مانند بارگذاری داده‌ها یا منابع را ساده‌تر می‌کند.

 fruitId = signal<string>('apple-id-1');

  fruitDetails = resource({
    request: this.fruitId,
    loader: async (params) => {
      const fruitId = params.request;
      const response = await fetch(`https://api.example.com/fruit/${fruitId}`, {signal: params.abortSignal});
      return await response.json() as Fruit;
    }
  });

  protected isFruitLoading = this.fruitDetails.isLoading;
  protected fruit = this.fruitDetails.value;
  protected error = this.fruitDetails.error;


  protected updateFruit(name: string): void {
    this.fruitDetails.update((fruit) => (fruit ? {
      ...fruit,
      name,
    } : undefined))
  }

  protected reloadFruit(): void {
    this.fruitDetails.reload();
  }

  protected onFruitIdChange(fruitId: string): void {
    this.fruitId.set(fruitId);
  }

3. به‌روزرسانی‌ها در تابع effect()

Angular 19 به روزرسانی‌هایی در تابع effect() ایجاد کرده است که اجازه می‌دهد اثرات جانبی (side effects) به طور مؤثرتر و بهینه‌تر به سیستم واکنش‌گرای Angular متصل شوند.

effect(
   () => {
       console.log(this.users());
   },
   //This flag is removed in the new version
   { allowSignalWrites: true }
);

4. تابع برابری جدید در rxjs-interop

یک تابع جدید برابری در rxjs-interop معرفی شده است که ادغام بهتری بین سیستم واکنش‌گرای Angular و Observable های RxJS فراهم می‌کند. این تابع به مقایسه مقادیر در جریان‌ها کمک می‌کند.

// Create a Subject to emit array values
const arraySubject$ = new Subject<number[]>();


// Define a custom equality function to compare arrays based on their content
const arraysAreEqual = (a: number[], b: number[]): boolean => {
   return a.length === b.length && a.every((value, index) => value === b[index]);
};


// Convert the Subject to a signal with a custom equality function
const arraySignal = toSignal(arraySubject$, {
   initialValue: [1, 2, 3],
   equals: arraysAreEqual, // Custom equality function for arrays
});

5. تابع جدید afterRenderEffect

afterRenderEffect یک تابع جدید است که به شما امکان می‌دهد اثرات جانبی را پس از رندر شدن نما (view) اجرا کنید، که کنترل بهتری بر رفتارهای پس از رندر فراهم می‌آورد.

counter = signal(0);

  constructor() {
    afterRenderEffect(() => {
      console.log('after render effect', this.counter());
    })

    afterRender(() => {
      console.log('after render', this.counter())
    })
  }

6. نحو متغیر قالب جدید @let

• Angular 19 یک نحو جدید به نام @let برای مدیریت متغیرها در قالب‌ها معرفی کرده است که باعث افزایش انعطاف‌پذیری و خوانایی می‌شود.

مثال:

@let userName = 'Jane Doe';
<h1>Welcome, {{ userName }}</h1>


<input #userInput type="text">
@let greeting = 'Hello, ' + userInput.value;
<p>{{ greeting }}</p>


@let userData = userObservable$ | async;
<div>User details: {{ userData.name }}</div>

7. Hydration افزایشی آزمایشی

Hydration افزایشی یک ویژگی آزمایشی است که به بهبود رندر سمت سرور (SSR) کمک می‌کند. این ویژگی به Angular این امکان را می‌دهد که بخش‌هایی از صفحه را به تدریج هیدراته کند و بدین ترتیب زمان بارگذاری اولیه را کاهش دهد.

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(
      withIncrementalHydration()
    )
    ...
  ]
};

@defer (hydrate on hover) {
 <app-hydrated-cmp />
}

8. ورودی جدید routerOutletData برای RouterOutlet

یک ورودی جدید به نام routerOutletData برای RouterOutlet معرفی شده است که مدیریت و انتقال داده‌ها به کامپوننت‌های روت شده را آسان‌تر می‌کند.

<router-outlet [routerOutletData]="routerOutletData()" />

export class ChildComponent {
  readonly routerOutletData: Signal<MyType> = inject(ROUTER_OUTLET_DATA);
}

9. پذیرش UrlTree توسط RouterLink

حالا RouterLink از UrlTree پشتیبانی می‌کند که این امکان را می‌دهد که مسیرهای پیچیده و تعریف شده به صورت برنامه‌نویسی را مدیریت کنیم.

<a [routerLink]="homeUrlTree">Home</a>

10. استراتژی پیش‌فرض برای مدیریت پارامترهای کوئری

Angular 19 یک استراتژی پیش‌فرض برای مدیریت پارامترهای کوئری معرفی کرده است که کار با پارامترهای کوئری در برنامه‌ها را ساده‌تر می‌کند.

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withRouterConfig({defaultQueryParamsHandling: 'preserve'}))
  ]
};

11. کامپوننت‌های مستقل به‌طور پیش‌فرض

• کامپوننت‌های مستقل حالا به‌طور پیش‌فرض در Angular استفاده می‌شوند. این به این معناست که برای تعریف کامپوننت‌ها نیازی به NgModule نیست و ساختار برنامه ساده‌تر می‌شود.

12. مهاجرت‌های جدید برای API مستقل و Injections

• Angular 19 مهاجرت‌های جدیدی برای API مستقل و تزریق‌ها فراهم کرده است که انتقال به استفاده از این ویژگی‌ها را راحت‌تر می‌کند.

13. توابع اولیه برای تنظیم Providers

توابع اولیه برای تنظیم Providers به شما این امکان را می‌دهد که کنترل بیشتری بر نحوه راه‌اندازی سرویس‌ها، کامپوننت‌ها یا ماژول‌ها در طول راه‌اندازی برنامه داشته باشید.

export const appConfig: ApplicationConfig = {
  providers: [
    provideAppInitializer(() => {
      console.log('app initialized');
    })
  ]
};

14. خروجی خودکار flush() در fakeAsync

Angular 19 خروجی flush() خودکار را در fakeAsync معرفی کرده است که فرآیند شبیه‌سازی عملیات‌های ناهمزمان در تست‌ها را ساده‌تر می‌کند.

it('async test description', fakeAsync(() => {
  // ...
  flush(); // not needed in Angular 19!
}));

15. تشخیص‌های جدید Angular

Angular 19 شامل ویژگی‌های جدیدی برای تشخیص خطاها است که به شما کمک می‌کند مسائل موجود در کد را سریع‌تر شناسایی کنید. این شامل پیام‌های خطا و اطلاعات اشکال‌زدایی بهبود یافته است.

16. Flag strictStandalone

ویژگی strictStandalone یک flag جدید است که استفاده از کامپوننت‌های مستقل را دقیق‌تر می‌کند و اطمینان حاصل می‌کند که کامپوننت‌ها به‌درستی در ساختار برنامه استفاده شده‌اند.

17. پشتیبانی از Playwright در Angular CLI

Playwright، یک فریم‌ورک تست محبوب، اکنون به‌طور بومی در Angular CLI پشتیبانی می‌شود. این امکان را می‌دهد تا تست‌های انتها به انتها (end-to-end) را در پروژه‌های Angular با Playwright تنظیم کنید.

18. پشتیبانی از TypeScript

Angular 19 همچنان به بهبود پشتیبانی از TypeScript ادامه می‌دهد و امکان استفاده از جدیدترین ویژگی‌های TypeScript را به‌راحتی در برنامه‌های Angular فراهم می‌کند.

19. پشتیبانی از ماژول‌های ایزوله شده TypeScript

Angular 19 از ماژول‌های ایزوله شده TypeScript پشتیبانی می‌کند که به توسعه‌دهندگان اجازه می‌دهد تا توسعه‌ای بیشتر ماژولار و ایزوله‌شده داشته باشند.

const availableProducts = productIds
  .map(id => productCatalog.get(id))
  .filter(product => product !== undefined);

/*  TypeScript now knows availableProducts are no longer considered as possibly undefined */
availableProducts.forEach(product => product.displayDetails());

20. بهبودهای Angular Language Service

Angular Language Service در Angular 19 بهبود یافته است که ابزارهای دقیق‌تری برای تکمیل خودکار و بررسی نوع (type checking) در ویرایشگرها فراهم می‌کند.

21. پیکربندی Route سرور (آزمایشی)

پیکربندی مسیر سرور یک ویژگی آزمایشی است که به توسعه‌دهندگان امکان پیکربندی مسیرها در سمت سرور را می‌دهد. این می‌تواند به بهینه‌سازی رندر و مسیریابی برای برنامه‌های SSR کمک کند.

import {RenderMode, ServerRoute} from '@angular/ssr';

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', renderMode: RenderMode.Server },
  { path: '/fruits', renderMode: RenderMode.Prerender },
  { path: '/**', renderMode: RenderMode.Client }
];

این ویژگی‌ها باعث می‌شوند که Angular 19 یک فریم‌ورک قدرتمند و انعطاف‌پذیر برای ساخت برنامه‌های وب مدرن باشد. در حالی که برخی از ویژگی‌ها مانند linkedSignal و پیکربندی مسیر سرور هنوز آزمایشی هستند، این ویژگی‌ها پتانسیل زیادی برای آینده توسعه Angular دارند.