Angular 10 + API service call key notes

 

Things to Angular Service calls:

1. Do we need state management or not . if we need then the API calls goes with effects concept.

2. Consider HTTP interceptors. Are we using any JWT to pass Bearer <Token> on every request.

3. Advanced is to create the model(interface or class) for each response and parse them and send to component. Simple is to parse the HTTPresponse and get data from body. 

4. Normal way is to make the api call in service ->  fetch the data(Observable)  -> 

pass it to pipe -> do the map() and parse the data -> return to component. 

5.Depends on the data to show: ex: menu1 api=> /api/menu1 

say if it has only htmlText then below is the one. BY default  HTTP error interceptor will parse each response to see the response status is 200 (success) , 401(unauthorized)  , 403(forbidden) , 500(internal server ) and handle them accordingly..

{

'id':1,

'name': 'Yuv'

}

6. if data is array then consider :  

[ {

'id':1,

'name': 'Yuv'

}, {

'id':2,

'name': 'Raj'

}]

Angular Routing Mistake . Angular URL loop : Throttling navigation to prevent the browser from hanging. Command line switch –disable-ipc-flooding-protection can be used to bypass the protection

"Throttling navigation to prevent the browser from hanging. Command line switch –disable-ipc-flooding-protection can be used to bypass the protection"

Hi , if you are facing above issue then the Angular navigation stuck in a loop.

Possible root cause is Angular not able to detect the route name or wrong route name is given routing module. 

Consider an example:

 1. You are in login page[/login] and on success you will  redirect to home page[/home]

 2. Consider if no route is found for home then we will redirect to login page [/login] . 

 3. Now if we keep the wrong name or  with slash to the home routing url [path: '/home' or  path: 'home1'] in the routing module then Angular cannot find the path and hence it redirect user to login page. 

 4. But at this point you already authenticated user with login button click and have current user in ur local storage. This will push the router navigation again to home page . 

 5. So, Login to Home --> not able to find Home path because we gave it '/home' or home1  --->   Redirect to Login component --> Login component sees authentication succesful and token is available and hence ---> redirect again to Home  --> not able to find home , so go back to login 

   ABOVE scenario formed a CIRCULAR loop by which we ll receive above message from Angular. 

Kindly rectify your routes and see there is no circular dependencies. 

Angular Providers , providedIn , Injectable Key points

 "Using the @Injectable() providedIn property is preferable to the @NgModule() providers array because with @Injectable() providedIn, optimization tools can perform tree-shaking, which removes services that your application isn't using and results in smaller bundle sizes.Tree-shaking is especially useful for a library because the application which uses the library may not"

"If a module defines both providers and declarations (components, directives, pipes), then loading the module in multiple feature modules would duplicate the registration of the service. This could result in multiple service instances and the service would no longer behave as a singleton."

"If you have a module which has both providers and declarations, you can use this technique to separate them out and you may see this pattern in legacy applications. However, since Angular 6.0, the best practice for providing services is with the @Injectable() providedIn property."