Angular project structure: Core Module

This post provides an overview of the core module in Angular and guides you on its integration into your project structure.
It serves as the central hub for registering essential services, components, and configurations that are used throughout the entire application.
The module might contain:

• Components: Here we can have the components for the Footer, Toolbar, navigation, Error-Page, Dashboard, Loader, and Confirmation-Dialog.

• Services: Here we can have services that are necessary for all the project such as auth-service, authorization-service, cookie-service, load-service, local-storage-service, and rest-api-service.

• Models: here we have the models that are for the components inside the Core Module.

• Guards: Here we have guards for to protect routes from being accessed under certain conditions.

• Interceptors: They can be used to intercept HTTP requests and responses. They are useful for tasks such as adding headers, handling errors globally, or transforming data before it's sent or received.

• Pipes: they can be used as customized ones for their reusability into entire project or the places that are needed to be placed.

Core.module.ts

We have also the core module file into the core directory that is cery important to the project. Here it is how it can look:

import...

@NgModule({
  declarations: [...fromComponents.components, MenuItemComponent, AgeFromDobPipe],
  imports: [CommonModule, HttpClientModule, RouterModule, MaterialModules, NgxPermissionsModule.forRoot()],
  exports: [...fromComponents.components],
  providers: [
    {provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true},
    {provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true},
    {provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptorService, multi: true}
  ]
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule?: CoreModule) {
    if (parentModule) {
      throw new Error('Core Module is already loaded. Import it in the AppModule only');
    }
  }
}

And the core module we can import it into app module.
The file structure of the core module we can have it like:

...
|  |--core/
|  |  |--components/
|  |  |  |--error-page/
|  |  |  |  |--error-page.component.ts/sepc.ts/html/scss/
|  |  |  |--dashboard/
|  |  |  |--toolbar/
|  |  |  |--navigation/
|  |  |  |--confirmation-dialog/
|  |  |  |--loader/
|  |  |--guards/
|  |  |--interceptors/
|  |  |--models/
|  |  |--services/
|  |  |--core.module.ts
...

This is a short intro for the core module for the project. For the next step we will talk about shared module.