𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀 𝗔𝗿𝗲 𝗡𝗼𝘁 𝗔 𝗚𝗼𝗼𝗱 𝗙𝗶𝘁 𝗙𝗼𝗿 𝗚𝘂𝗮𝗿𝗱𝘀

Angular Resources Guards-এর জন্য সঠিক পছন্দ নয়

Angular 22 একটি স্থিতিশীল Resource API প্রবর্তন করেছে। এই টুলটি আপনাকে API কুয়েরি করতে এবং লোডিং বা এরর (error) স্টেট ট্র্যাক করতে সাহায্য করে। এটি অনেক কাজের জন্য বেশ কার্যকর।

তবে, এটি Guards বা Resolvers-এ ব্যবহার করবেন না।

Guards এবং Resolvers নেভিগেশন ব্লক করে। একটি Guard পরীক্ষা করে যে একজন ব্যবহারকারী কোনো রুটে (route) অ্যাক্সেস করতে পারবেন কি না। একটি Resolver একটি কম্পোনেন্ট লোড হওয়ার আগে ডেটা ফেচ (fetch) করে। তাদের লজিক সম্পন্ন করার জন্য উভয়েরই একটি boolean, একটি Promise, অথবা একটি Observable প্রয়োজন।

Resources হলো Signals API-এর অন্তর্ভুক্ত। Signals হলো রিঅ্যাক্টিভ (reactive)। এগুলো সিনক্রোনাসলি (synchronously) ভ্যালু রিটার্ন করে না। আপনি যখন একটি Resource তৈরি করেন, তখন ভ্যালুটি undefined হিসেবে শুরু হয়। এরপর এটি একটি লোডিং স্টেটে চলে যায়।

এই ভুলটি দেখুন:

export const authGuard: CanActivateFn = () => {
  const authResource = httpResource<boolean>(() => ({
    url: '/api/auth/status',
  }));

  return authResource.value() ?? false;
};

.value() মেথডটি তাৎক্ষণিকভাবে বর্তমান signal ভ্যালু রিটার্ন করে। যেহেতু API কল করতে সময় লাগে, তাই শুরুতে ভ্যালুটি undefined থাকে। Guard তখন undefined দেখে এটিকে false হিসেবে গণ্য করে এবং নেভিগেশন বাতিল করে দেয়। অ্যাপটি API-এর জন্য কখনোই অপেক্ষা করে না।

এটি ঠিক করতে হলে, আপনাকে Resource-টিকে একটি Observable-এ রূপান্তর করতে হবে। এটি অপ্রয়োজনীয় জটিলতা তৈরি করে।

Guards-এর একটি একক অ্যাসিনক্রোনাস (asynchronous) ইভেন্ট প্রকাশ করা প্রয়োজন। এর জন্য, Observables-এর সাথে HttpClient অথবা Promises-এর সাথে নেটিভ fetch API ব্যবহার করুন।

সঠিক পদ্ধতি:

export const authGuard: CanActivateFn = () => {
  const http = inject(HttpClient);

  return http.get<boolean>('/api/auth/status');
};

Observable রাউটারকে (Router) রিকোয়েস্ট সম্পন্ন না হওয়া পর্যন্ত অপেক্ষা করতে বলে।

কম্পোনেন্ট এবং সার্ভিসের জন্য Resource API ব্যবহার করুন। এটি আপনার টেমপ্লেটে async ডেটা বাইন্ড করার জন্য চমৎকার। আপনার Router লজিকের জন্য Promise এবং Observable ব্যবহার করুন।

Source: https://dev.to/geromegrignon/angular-resources-are-not-a-good-fit-for-guards-58j