Organizing Modules by Type

Angular modules are used to group similar functionalities and provide them to other modules. They can be further organized by the type of functionality and how an Angular application loads them. We can separate modules according to the feature that they represent:

• Core module: This usually contains application-wide artifacts that do not fit in a specific module. Such artifacts are components that are loaded once in an application, such as a top bar that contains the main menu of the application, a footer component with copyright information, or a loading spinner. It also contains services that can be shared among modules, such as a local cache service or a custom logger. This module is usually called core, and the accompanying TypeScript file is named core.module.ts. The core module should be loaded only once in the main application module.

• Shared module: This contains Angular artifacts such as components, directives, and pipes that can be used in multiple feature modules. It may also provide a container for other exported modules that contain reusable artifacts. This module is usually called shared, and the accompanying TypeScript file is named shared.module.ts. The shared module is imported into each feature module that wants to use its exported artifacts.