Angular Architecture - Core Module

🎯 Introduction

CoreModule is a module that is used to encapsulate the core functionality of an application. The purpose of the CoreModule is to provide a central place for defining services, single instance components, configuration settings, util and helper classes and functions and any other code that is used across the entire application.

The CoreModule is typically imported only once, in the AppModule. This ensures that its services and components are available throughout the application.

This is where the core application logic is implemented, including all data manipulation and communication with external systems. If we are using a state management solution like Ngrx or Ngxs this is the place to define our state, actions, and reducers.

🎯 Core folder example

Core folder will contain things like:
helpers
Various helper classes, functions, and modules that are specific to your application's domain like auth-helper.ts, form-helper.ts, manual-subs.ts

interceptors
Interceptors are classes that can intercept HTTP requests and responses from the client to the server and vice versa.

models
Interface and Types definitions for API returned models, dtos. I prefer to prefix my interfaces with I and types with T. For example IMovie, TTime.

services
Singleton services with @Injectable({providedIn: "root"}) decorator for handling API calls, error handling, logging etc.

shell
Shell components are standalone components used only inside of app.component.ts like layout components (header, footer, menu) or some of the placeholder components like toasters or modals (if decided to be implemented that way).

store
State, actions and reducer definitions for state management solution implementation

utils
Various helper functions, classes, and modules that can be reused across different parts of the application like date-utils.ts, string-utils.ts.

Note: Some developers prefer to keep utility functions and helper classes in the SharedModule since they are typically shared across different parts of the app and don't have any dependencies on Angular, nor they are singletons. However, it's just a preference

In the beginning, I tend to keep data-related code in the core folder to ensure easy accessibility and organization to avoid getting lost in thought process of what could be used somewhere in the future too early.

As I continue working on the application, I evaluate which services, models, types, and state definitions are only relevant to a specific module and will only be used within that module. In those cases, I move them to the appropriate module to keep the code organized and maintainable.