Confusing Information on SharedModule and CoreModule

[iamjoyce]

Documentation for Angular

Questions

1. Is it recommended to import CommonModule and FormsModule in SharedModule or CoreModule?

In the documentation, both are OK.

Style 04-10 (Shared feature module) Do import all modules required by the assets in the SharedModule; for example, CommonModule and FormsModule.

Style 04-11 (Core feature module) Do import all modules required by the assets in the CoreModule (e.g. CommonModule and FormsModule).

--

2. Are you suggesting to import CoreModule into root AppModule, so that when a lazy loaded module imports the CodeModule, it will get the intended app-wide singleton and not a new instance?

In the documentation, it suggests to import CoreModule into the root AppModule, but yet the subsequent lines mentioned that lazy importing CoreModule will return a new instance.

Style 04-11 (Core feature module) Why? CoreModule will contain singleton services. When a lazy loaded module imports these, it will get a new instance and not the intended app-wide singleton.

--

3. Are services supposed to be in CoreModule? If not, what's the recommendation?

Based on the documentation, I thought services are supposed to be in CoreModule, but the last sentence of style 04-11 says otherwise.

Style 04-11 (Core feature module) Why? You want the entire app to use the one, singleton instance. You don't want each module to have its own separate instance of singleton services. Yet there is a real danger of that happening accidentally if the CoreModule provides a service.

References

This stackoverflow question/answer explains it pretty well, but it seemed to contradict (?) the styleguide.

[dwiyatci]

I'm also confused about the last sentence in Style 04-11.

Why? You want the entire app to use the one, singleton instance. You don't want each module to have its own separate instance of singleton services. Yet there is a real danger of that happening accidentally if the CoreModule provides a service.

So, should CoreModule have providers or not? I'm currently guessing this is a C&P mistake made from Style 04-10.

Why? You don't want each module to have its own separate instance of singleton services. Yet there is a real danger of that happening if the SharedModule provides a service.

@johnpapa Could you please give a quick remark on this?

[daniel-seitz]

1. The text states it. If you require CommonModule and/or FormsModule in your SharedModule, then import it there. If you require it in the CoreModule, import it there. If you need them in both, then import them in both.

The reasons to create those module are different. Core is a place for things which you need only 1 time. I.e. put singleton services, guards there. I also put my navigation and footer because I want my app-folder nice and clean. Import that CoreModule only one time and only in the AppModule. This will keep your AppModule clean. BUT! if you put components like NavigationComponent or FooterComponent into the CoreModule, then you can just use them in the AppComponent's template. Not other FeatureModules. If you require this then you need to put the component in the SharedModule and import that one where you need it. This happens here where we have one navigation but depending on the route these look different and I define what is different inside the FeatureModule's template.

Use the the SharedModule for things that you could use multiple times on one page AND they should/could behave differently. This includes pipes, individual components that should be shared (CardComponent, ListComponent). Also if there are any services that should NOT be singletons but be used individually but shared nevertheless (I cant think of an example here). Import the SharedModule in the FeatureModules where you need the functionality.

Usually FormsModule and CommonModule are at least inside the SharedModule (import and export) and I import the SharedModule into all Feature Modules.

2. I think the text could be improved. Import CoreModule into AppModule once. Lazy loaded Modules automatically then make use of CoreModule and you have singleton services. Please correct me if I'm wrong.

3. Global Services (auth, config, api, toast, ...) should be singletons and hence reside inside CoreModule. If you have feature specific services that you will never use in other modules, then put them in the FeatureModule. Services that should not be singletons could be in SharedModule or the FeatureModule.

[GO3LIN]

Hello, I also found these part very confusing in the angular style guide, here I created an article to explain the two modules concepts by bringing you real use cases of what to do with them: CoreModule vs SharedModule Angular style guide

Basically, the FormsModule and the CommonModule should be imported and exported back in the SharedModule because they are not needed to be singletons :)