2

I have project that makes use of material2 ("@angular/material": "^2.0.0-beta.6")

Which according to the docs here states that the MaterialModule is being removed and the forRoot() has already been squashed. I know the thought process behind breaking the module apart to ensure proper tree shaking, but why remove forRoot in the subModules too?

Consider this use case

Two modules depend on same material sub module like OverlayModule. NOTE: This material module has its own providers.

  • Module one is lazy loaded.
  • Module two is eagerly loaded.

How should I structure my new AppSpecificMaterialModule so that I can also provide all of material's providers and prevent duplication of provider Singletons? Do I have to take note of the material specific providers my app would ultimately consume and provide then myself at the appModule level? Kind of like what is described here?

DynaWeb
  • 605
  • 1
  • 7
  • 15

1 Answers1

2

The forRoot() methods have been removed because the Angular Material team found a new solution to ensure that a given provider is a singleton.

Before a provider in Material is created, there is a provider factory that checks if there is already an instance of the given provider.

If the factory found an ancestor provider it uses the existing one. And if there is no similar provider instantiated already it will just create a new instance.

An official proposal has been submitted on the Angular repository: https://github.com/angular/angular/issues/13854

Here is a link to one example provider factory of Angular Material: https://github.com/angular/material2/blame/master/src/lib/core/a11y/live-announcer.ts#L86-L94

Basically the following line tries to inject any other existing LiveAnnouncer provider instance (skipping self) to the factory

[new Optional(), new SkipSelf(), LiveAnnouncer]

The factory function then gets any existing LiveAnnouncer instance as a DI parameter in the factory and just returns the existing instance if one is present.

Otherwise it will just create a new LiveAnnouncer(XXX) instance.

export function xxxFactory(parentAnnouncer: LiveAnnouncer) {
  return parentAnnouner || new LiveAnnouncer(XXX); 
}

How to structure your project

To give an answer to your question. Basically you should just be able to use the different component modules again (without caring about root & child)

DevVersion
  • 1,923
  • 14
  • 15