When developing my Angular application, I have adopted a specific architecture approach and included a shared.module.ts
file in the shared folder. While leveraging lazy-loading in my app, I find myself puzzled about the necessary imports, declarations, and exports for each module. Referring to the folder structure on the same page where I added the shared.module.ts
file, how should my modules handle this while considering lazy-loading?
App Module: In this module, we must import the modules/packages that will be used throughout the entire system, such as CommonModule, FormsModule, HttpClientModule, etc. These modules do not need to be exported.
Core Module: Components created in this module are designed to be utilized across multiple pages of the system, like HeaderComponent, FooterComponent, AuthGuards, etc. These components should be exported to make them accessible in other modules.
Shared Module: This module should contain Services, Components, Pipes, and Directives that will be used in more than one component, such as AlertDialogBox, HTTPService, etc.
User Module (considered a feature module): Specific to User functionality, this module includes components tailored for User operations. Importing the Shared Module here allows access to functionalities like AlertDialogBox.
Additionally, it may be beneficial to include an xxx-routing.module.ts
file for each navigated module. Is it necessary to create a routing module for the shared module as well?