-1

How do I make a service available to all components in a module within my app?

For example, given an app with a structure like:

  • app
    • Login.Component
    • UserStory1.module
    • View1.component
    • View2.component
    • ExportableView.Module
      • ExportableView.component
    • UserStory2.module
    • View3.component
    • ExportableView.Module/ExportableView.component
    • CommonModule
    • CommonLanding.component

I want a service UserStory1/LocalService that View 1 and View2 can use to be the source of state for that user story. I don't want that state to be available in UserStory2 -- it should have its own local service.

At first, just to have it available, I had UserStory1/LocalService as a provider in app.module -- and this works. But then when I move it to UserStory1.module it no longer works, each new component that is loaded has its own instance of localservice.

roberto tomás
  • 4,435
  • 5
  • 42
  • 71
  • In this scenario, I think it would be better to adopt the Redux/Flux pattern.. – wentjun Apr 24 '19 at 19:02
  • 3
    Directly related: [How to share service between two modules - @NgModule in angular not between to components?](https://stackoverflow.com/a/40576714/1260204), [Shared feature module](https://angular.io/guide/styleguide#shared-feature-module), [Services are singletons](https://angular.io/guide/styleguide#services-are-singletons), [Singleton Services](https://angular.io/guide/singleton-services) – Igor Apr 24 '19 at 19:08

2 Answers2

1

According to the documentation, you can register your service as a provider in each module separately, and that would result in a separate instance for each module.

For example

@NgModule({
  providers: [
    MyService,
    ...
  ],
  ...
})
UserStory1Module

and

@NgModule({
  providers: [
    MyService,
    ...
  ],
  ...
})
UserStory2Module

Make sure that you do not register a provider inside any of your components.

If you generated the service with Angular CLI, it might be annotated with

@Injectable({
 providedIn: 'root',
})
MyService

You might have to change this to

@Injectable()
MyService
Asotos
  • 995
  • 11
  • 14
1

This is happening because you are registering UserStory1/LocalService in multiple modules. As services are of singleton type, so there should be only one instance throughout the application.

If you you are registering UserStory1/LocalService in app.module then this will be available to all components in the app.You don't need to import in another module again. 

    @NgModule({
  providers: [
    LocalService
  ],
  ...
})

In this case the scope of LocalService will be available in the module in which it is registered.

Brijesh
  • 71
  • 1
  • 8
  • I dont think that you understand .. I should have explicitly put localservice in there -- it is in /src/app -- it is a peer of userstory1 and userstory2 -- where it s registered in each of those only because userstory2 components are unaware of userstory1 – roberto tomás Apr 26 '19 at 00:39