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 theFooter, Toolbar, navigation, Error-Page, Dashboard, Loader, and Confirmation-Dialog
.Services
: Here we can have services that are necessary for all the project such asauth-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 theCore 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
.
Top comments (0)