5

I have an Angular5 application with the following structure: enter image description here

The Header, Footer and Sidebar components are placed under Shared --> Components. The Header and SideBar component import a service SideBarService (under Shared folder). When a user clicks on the sidebar icon in Header component, a SidebarService is used to toggle the classes applied to the Sidebar component.

My question is: According to Angular 5 application architecture, should the Header, Footer and Sidebar be placed in Shared or in Core Module. As my application has lazy loaded modules, will it cause a problem in future like if one lazy module, example Admin makes change in sidebar using the sidebar service, will this change be visible to other lazy loaded modules?

Quest
  • 444
  • 1
  • 6
  • 18

2 Answers2

3

SharedModule and CoreModule should be non-lazy loaded modules because they can be utilized by any of the components.

Coming to header and footer component, if the content of those components is going to change by some @Input property (which should not be the case for header & footer) or those component tags are utilized at multiple places in your application, then they might come under SharedModule. If they are all static, then those components should definitely belong to CoreModule. Because you use these component tags at only one place.

As my application has lazy loaded modules, will it cause a problem in future like if one lazy module, example Admin makes change in sidebar using the sidebar service, will this change be visible to other lazy loaded modules?

-- No, it wont be visible because lazy loaded modules create their own instance of services..

Amit Chigadani
  • 28,482
  • 13
  • 80
  • 98
  • 1
    The header/footer/sidebar are not static, they involve functionality also. Like show this header link to SuperAdmin but not to Customer. On click of some links on header/footer some popup should be shown. I was of opinion, they should not be under Core. – Quest Oct 09 '18 at 12:13
  • Yes, I believe the same. Since these components data is updated from different places, they have to be under `SharedModule`. Also if you see this post https://stackoverflow.com/questions/42695931/angular2-coremodule-vs-sharedmodule you will strongly support your decision to not put them under `CoreModule` – Amit Chigadani Oct 09 '18 at 12:23
  • 1
    What's the problem for footer/header to involve functionality? Because they are global component, they can call those services by injecting them. – rosshjb Mar 09 '19 at 17:18
1

I think you better to put those within the core module since we are going to load it only one time. All other modules will load within router outlet. You can put any shared component like ConfirmBox, AlertBox like widgets in there. Anyway, we are accessing those components from a service.

Anyway, the core module should not depend on others and other modules can depend on the core module.

Damith
  • 1,982
  • 3
  • 28
  • 42
  • The header/footer/sidebar of the application are not static. There are multiple links shown in the header, footer and sidebar. Depending on the type of the user logging into the application, some links are hidden/shown to the user and on some link clicks some services are called/ some popup is shown. Should they still be in the core/shared module? – Quest Oct 08 '18 at 18:31