Angular 5 全局组件及其服务

Question

Looking through Angular's docs, specifically the style guide, they lay out both a shared module and a core module. According to the docs, services should be placed in the core module and components in the shared module. My question is if I have a component, say a custom file upload component, and it also has a corresponding service, where should that component and service reside? It seems to make sense to keep the two together since the service is used with the component, however, this doesn't seem to follow Angular standards. Anyone come across this issue?

Answer 1

According to Angular Style Guide, Angular doesn't really recommend providing a service in the SharedModule . The reason for that is, whichever module imports the SharedModule , will get a separate instance of that shared service. This isn't really acceptable in case of a Stateful Service. But in your case, I'm not really sure if the Service will contain any state data. So I think, it should be safe for you to add this Component and this Service to the SharedModule itself.

Again, considering that this service is not going to have any state data.

Also, Angular recommends providing services inside the CoreModule because it also recommends making the CoreModule only importable by just a single module(generally the AppModule ). That's why it also recommends creating a Guard to prevent re-importing of the CoreModule.

Answer 2

Look up to Providers and singleton-services . In usual way that:

• if you want singleton service you must provide it in root module, eg: router

• if you need service instance per component instance, then you provide that service in component definition, and you can pass that service instance to all child components:

  @Component({ /* . . . */ providers: [UserService] })

  In case of yours example: if every upload component needs new instance of service, service is defined as @Injectable class, imported to upload component source and registered as a provider in component decorator providers section.

Answer 3

This is a good question and I've got it constantly asked by colleagues in my company. As you said the best practice in official docs is to have CoreModule and SharedModule that each in charge of different concerns. Most of the time it makes sense to put your services into "Core" and components/directives/pipes etc. into "Shared".

But sometimes we do have exceptions and want to do the following:

1. A service in SharedModule to manage the states/configurations/behaviors for the counterpart components/directives/pipes
2. A component in CoreModule that only exists in the root level or dynamically created during runtime.

For scenario 1 you can have the legacy forRoot() method for your module to make sure your service only gets initialized once. Also it's worth mentioning that with Angular 6 you can use the new provideIn: 'root' syntax which simplifies this purpose. You can find many resources online.

For scenario 2 you usually put it into entryComponents .