Lazy loading and providers strategy

Question

Right now, using Angular v5, while using lazy loading, I load all my providers in app.module.ts which I guess isn't maybe the best strategy because this won't speed up my app boot time, specially because I've got something like 50 custom providers (don't judge me ;) ).

Therefore I'm asking my self if I should really load all of them for my all app or if I should load them only where I only use them?

I'm guessing it would be better to load providers only where I really use them.

But in such a case, it's for me then not clear at all how to solve following construct:

Let say I've got three pages (A,B and C) with their own modules and three providers (1,2 and 3).

A use 1
B use 1, 2, 3
C use 1, 2

• I guess, since 1 is use across all the app, I would have to declare it in app.module.ts

• Since 3 is only use in page B, I guess I would have to only declare it in B.module.ts

• But what about 2? How could I declare it in both B.module.ts and C.module.ts with the goal to share the same provider "memory" (if the provider contains a value, both B and C should see the same object), respectively how I would code that? Simply by injecting the provider "as usual" and angular do the rest?

Thx in advance for any help, would really be appreciated

UPDATE

Not sure if I understand correctly the angular documentation but that's the goal, the providers should be loaded for the all app wide right?

See

https://angular.io/guide/ngmodule-faq#q-component-scoped-providers

UPDATE 2018

The injection strategy has evolved with the introduction of Angular v6. According the documentation it's possible with providedIn to specify in which module a service should be use. See https://angular.io/guide/dependency-injection

Answer 1

you should create a shared module that intenciate your provider 2 and that the B and C module inculdes in their dependencies.

edit: you do not need to export providers.