Searching for a better folder structure for angular projects? Check this article out, you can thank me later.

Photo by Amir samoh on unsplash

Recently, I have been working on a task, regarding AWS S3 bucket file uploading using Angular and preSigned URLs. In that project, I have used HTTP interceptor to handle my request to bind all header parameters. My problem arose while I was trying upload files and found that I wasn’t able to since there were “two Authorization headers” in that request. They were the usual request header with token and the header which auto binds by the presigned Url. To solve this issue, I found a super-easy solution that allowed me to bypass my HTTP interceptor and BOOM! Issue fixed. Let’s dive into what I did.

Wait… What is an Interceptor?

Before starting the explanation of my trick, let’s get to know what interceptors are and how we can use them.

Angular is one of the most popular front-end development frameworks in the developer community. One of the main reasons for that is that Angular provides many built-in tools that help to scale industry level JavaScript applications. Interceptors are one of the tools in the list capable of handling HTTP requests globally. They allow us to intercept incoming and outgoing HTTP requests using the HttpClient. By intercepting the request we can modify or change any parameter of the request.

Before diving any deeper I suggest that you have a basic knowledge of Angular HTTP Client and RxJS Observable.

Here is the trick

As I mentioned above, there are occasions where we need to allow for a custom header (or, in other words, to skip the interceptor action in http requests).

BONUS POINT:_ Usually in Angular best practices, it is better to keep our services separate from modules, components and models etc. Please checkout the below folder structure. It is better if you can refer to this structure for your future implementations._

src
 ┣ app
 ┃ ┣ common
 ┃ ┣ customer
 ┃ ┣ models
 ┃ ┣ public
 ┃ ┣ services
 ┃ ┃ ┣ authentication
 ┃ ┃ ┃ ┣ guards
 ┃ ┃ ┃ ┃ ┣ auth.guard.ts
 ┃ ┃ ┃ ┣ interceptors
 ┃ ┃ ┃ ┃ ┣ response.interceptor.ts
 ┃ ┃ ┃ ┗ auth.service.ts
 ┃ ┃ ┣ directives
 ┃ ┃ ┣ pipes
 ┃ ┃ ┣ resolvers
 ┃ ┃ ┣ services-api
 ┃ ┃ ┣ services-inter
 ┃ ┣ app.component.css
 ┃ ┣ app.component.html
 ┃ ┣ app.component.spec.ts
 ┃ ┣ app.component.ts
 ┃ ┣ app.module.ts
 ┃ ┣ app.routing.ts
 ┃ ┗ app.server.module.ts
 ┣ assets
 ┣ environments
 ┣ favicon.ico
 ┣ index.html

As per the file tree, I kept my interceptors inside the _src/services/interceptors _folder.

#http-interceptors #angular #http-client #programming #http-request