How to make same ng-template using directive+component+service to work in 2 ngModules?

Question

I'm trying to implement a component that has single instance that can be used in multiple routes. This can be done in single module using a template that has directive that stores the component in service. See accepted answer of this question.

I have stackblitz that is copied from here. This works nicely when everything is in same module. However if I place the components in their own module this does not work anymore. See not working example. I tried to create own module for the service+component+directive, but it did not help. How this can be done?

Answer 1

You can add a ReusableModule which exports the reusable directive and the reusable component. Basically that is like an SharedModule which you can then import in your different feature modules.

I edited your example at stackblitz and I hope that solves the problem :)

Edit:

If you need different instances of the ReusableService too you can scope it by setting providers: [ReusableService] in the ReusableModule. If you only need one instance of that service application wide, then leave the provider for this service in the app.module.