File structure for Angular application

Deciding a file structure of any application is always a pain for new developers. In this article, we are going to discuss what should be the file structure of your Angular application. This structure is the way I and most of the other developers I know liked to keep their application and not standard practice, so feel free to experiment.

So in the screenshot below we can see the file structure of an application.

The function of each of the folder is as below:-

1] guards:- This folder should contain the guards (e.g. auth-guard) of your application.

2] interceptors:- This folder should contain all of your interceptors (e.g. HTTP-interceptors). Interceptors help you to modify requests and response.

3] services:- Write all your services in this file. This folder can include services like such as API service (which calls API’s in the backend), Auth service (which handles authentication-related data) etc.

4] test-app:- This is the main folder of your application. The name of this folder can be according to your application. This folder should contain all the modules inside your angular application. These modules then can contain components and sub-components. Divide the modules according to the functionality. e.g. Login module for handling login functionalities, Profile module for profile functionalities.