𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀 𝗚𝘂𝗮𝗿𝗱𝘀 ਲਈ ਢੁਕਵੇਂ ਨਹੀਂ ਹਨ
Angular 22 ਨੇ ਸਥਿਰ Resource API ਪੇਸ਼ ਕੀਤੀ ਹੈ। ਇਹ ਟੂਲ ਤੁਹਾਨੂੰ APIs ਨੂੰ ਕੁਐਰੀ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਅਤੇ ਲੋਡਿੰਗ ਜਾਂ ਐਰਰ ਸਟੇਟਸ (error states) ਨੂੰ ਟ੍ਰੈਕ ਕਰਦਾ ਹੈ। ਇਹ ਕਈ ਕੰਮਾਂ ਲਈ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ।
ਹਾਲਾਂਕਿ, ਇਸਨੂੰ Guards ਜਾਂ Resolvers ਵਿੱਚ ਵਰਤੋਂ ਨਾ ਕਰੋ।
Guards ਅਤੇ Resolvers ਨੈਵੀਗੇਸ਼ਨ (navigation) ਨੂੰ ਰੋਕਦੇ ਹਨ। ਇੱਕ Guard ਇਹ ਚੈੱਕ ਕਰਦਾ ਹੈ ਕਿ ਕੀ ਕੋਈ ਯੂਜ਼ਰ ਕਿਸੇ ਰੂਟ (route) ਤੱਕ ਪਹੁੰਚ ਸਕਦਾ ਹੈ। ਇੱਕ Resolver ਕੰਪੋਨੈਂਟ ਲੋਡ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਡੇਟਾ ਫੈਚ (fetch) ਕਰਦਾ ਹੈ। ਦੋਵਾਂ ਨੂੰ ਆਪਣੀ ਲੌਜਿਕ (logic) ਪੂਰੀ ਕਰਨ ਲਈ ਇੱਕ boolean, ਇੱਕ Promise, ਜਾਂ ਇੱਕ Observable ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
Resources, Signals API ਨਾਲ ਸਬੰਧਤ ਹਨ। Signals ਰੀਐਕਟਿਵ (reactive) ਹੁੰਦੇ ਹਨ। ਉਹ ਮੁੱਲ (values) ਨੂੰ synchronously ਵਾਪਸ ਨਹੀਂ ਕਰਦੇ। ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ Resource ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਮੁੱਲ undefined ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ। ਫਿਰ ਇਹ ਲੋਡਿੰਗ ਸਟੇਟ (loading state) ਵਿੱਚ ਚਲਾ ਜਾਂਦਾ ਹੈ।
ਇਸ ਗਲਤੀ ਨੂੰ ਦੇਖੋ:
export const authGuard: CanActivateFn = () => {
const authResource = httpResource
return authResource.value() ?? false; };
.value() ਮੈਥਡ ਤੁਰੰਤ ਮੌਜੂਦਾ signal ਮੁੱਲ ਵਾਪਸ ਕਰਦਾ ਹੈ। ਕਿਉਂਕਿ API ਕਾਲ ਵਿੱਚ ਸਮਾਂ ਲੱਗਦਾ ਹੈ, ਇਸ ਲਈ ਸ਼ੁਰੂ ਵਿੱਚ ਮੁੱਲ undefined ਹੁੰਦਾ ਹੈ। Guard undefined ਨੂੰ ਦੇਖਦਾ ਹੈ, ਇਸਨੂੰ false ਮੰਨ ਲੈਂਦਾ ਹੈ, ਅਤੇ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਰੱਦ ਕਰ ਦਿੰਦਾ ਹੈ। ਐਪ ਕਦੇ ਵੀ API ਦੀ ਉਡੀਕ ਨਹੀਂ ਕਰਦੀ।
ਇਸ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ Resource ਨੂੰ Observable ਵਿੱਚ ਬਦਲਣਾ ਪਵੇਗਾ। ਇਹ ਬੇਲੋੜੀ ਜਟਿਲਤਾ (complexity) ਵਧਾਉਂਦਾ ਹੈ।
Guards ਨੂੰ ਇੱਕ ਸਿੰਗਲ asynchronous ਈਵੈਂਟ (event) ਨੂੰ ਦਰਸਾਉਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਸ ਲਈ, Observables ਦੇ ਨਾਲ HttpClient ਜਾਂ Promises ਦੇ ਨਾਲ native fetch API ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਸਹੀ ਤਰੀਕਾ:
export const authGuard: CanActivateFn = () => { const http = inject(HttpClient);
return http.get
Observable Router ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਰਿਕਵੈਸਟ ਪੂਰੀ ਹੋਣ ਤੱਕ ਉਡੀਕ ਕੀਤੀ ਜਾਵੇ।
Components ਅਤੇ services ਲਈ Resource API ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਤੁਹਾਡੇ templates ਨਾਲ async ਡੇਟਾ ਨੂੰ ਬਾਈਂਡ (bind) ਕਰਨ ਲਈ ਵਧੀਆ ਹੈ। Promises ਅਤੇ Observables ਨੂੰ ਆਪਣੀ Router ਲੌਜਿਕ ਲਈ ਬਚਾ ਕੇ ਰੱਖੋ।
Source: https://dev.to/geromegrignon/angular-resources-are-not-a-good-fit-for-guards-58j