Using Shared and Core modules besides Feature modules in Angular?

534 Views Asked by At

In my Angular app, I follow this approach to build my architecture and added shared.module.ts file to the shared folder. I also use lazy-loading in my app, but at this step I am very confused regarding to the imports, declarations and exports that should be added to each modules. So, by looking the folder structure on this page (I also add shared.module.ts file to the shared folder) and keeping consideration lazy-loading, what should my modules's imports, declarations and exports, etc.? I also follow this approach as sjown below:

App Module: In this module, we have to import the modules/packages which we will use throughout our system. Like: CommonModule, FormsModule, HttpClientModule etc. And we don't need to export these modules as it will be

Core Module: In this module, we have to make components which will be used in almost every page of the system. Like: HeaderComponent, FooterCompoennt, AuthGaurds etc. And these components should be exported so that it will be available in other modules.

Shared Module: In this module, we have to make the Services, Components, Pipes, and Directives which will be used in more than one component. Like: AlertDialogBox, HTTPService, etc.

User Module (assume feature module): This is a featured module. It will have the components specific to a User Module. Here we can import Shared Module so that we can use AlertDialogBox and all.

On the other hand, I think I should add a xxx-routing.module.ts file for each module that is navigated. Is that true? Do I also have to add for shared module?

1

There are 1 best solutions below

1
On

I would say the Shared Module and Core Module might not need the routing.module.ts. But it all depeneds on your requirement.

This github repo has a implemented bes practices which you might want to take a look to understand. https://github.com/DanWahlin/angular-architecture/tree/master/demos/src/app[enter link description here]1