How To Create A Scalable Angular Project Folder Structure?
By: Sai Mohith
Tags: Technology, Technology News, Angular, Development, Scalability

How To Create A Scalable Angular Project Folder Structure?

There can be a lot of information when people talk about how to organize folder structure in Angular applications, some people believe just following the basic structure in angular CLI is enough but sometimes this basic structure is painful when your project starts to manage a lot of modules. Today we are going to explain good practices and advice to organize your folder and define a highly scalable folder structure for your angular projects.

The point of this article is to help other developers to organize and maintain their project very easily, so we have to start from the beginning:

The image above is the basic Angular CLI folder structure which will be useful for creating a small or medium project with some modules and components, but what if I need to create an application with more than 15 modules, 50 components, and multiple shared widgets or components, also our app could increase the main features and we need to keep it for a long period of time.

In Angular, everything is organized into modules and every application has at least one of them, the root module of the application. The application module is the entry point of the application and it is the module that Angular uses to start the application, so we must create our Angular application based on 3 modules (core, shared and feature modules)

Core Module

Core Module takes on the role of the root AppModule , but is not the module which gets bootstrapped by Angular at run-time. The CoreModule should contain singleton services (which is usually the case), universal components and other features where there’s only one instance per application.

Guards: these are special services that help to grant or revoke access to routes

Interceptors: They help to intercept or modify requests and responses.

Models: We should put general models across modules.

Services: Core services across modules

Utilities: Common functions or helpers.

Components: It will contain the components which are common throughout the application like Header, Navbar, and Footer.

Shared Module

SharedModule is where any shared components, pipes/filters, and services should go. The SharedModule can be imported in any other module when those items will be re-used. The shared module shouldn’t have any dependency on the rest of the application and should therefore not rely on any other module.

How to know if some components should go in a shared module or shared folder? The answer is easy, just keep in mind shared modules should have components across modules, but if your component is used in one module, just create a shared folder and put it in a single module.

Features Modules

As the application grows, you’ll need to consider subdividing it into multiple feature modules, some of which can be lazy-loaded. These modules should only depend on the SharedModule, and their functionality should be scoped to the module.

Defining function modules is probably not easy, but it might help if you knew a lot about your business. Before creating function modules, you should speak with the product owner or customers to learn more about their application.

Lastly, it is recommended to define a highly scalable folder structure when you want to create a scalable Angular application. You need to understand some patterns and concepts like Smart or Dumb components or state management to organize your whole project in a good way, be patient, and stay calm, creating a scalable structure is not an easy task but I will try to talk more about that in future posts.