Confusion on 'providedIn' for a specific NgModule
See original GitHub issueI’m submitting a…
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[ ] Feature request
[ X ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:
Current behavior
This is from the doc
The @Injectable() decorator has the providedIn metadata option, where you can specify the provider of the decorated service class with the root injector, or with the injector for a specific NgModule.
Providing a service with the app's root injector is a typical case, and the CLI sets up this kind of a provider automatically for you when generating a new service. However, you might not always want to provide your service at the root level. You might, for instance, want users to explicitly opt-in to using the service.
Instead of specifying the root injector, you can set providedIn to a specific NgModule.
For example, in the following excerpt, the @Injectable() decorator configures a provider that is available in any injector that includes the HeroModule.
What I understand from the doc, when you use providedIn: 'root'
in your service, you don’t have to configure this service at the app module level. And the service is available anywhere the class is imported.
But if I use providedIn: HeroModule
, I thought I didn’t have to configure this service at the HeroModule level and I could use this service in HeroComponent (HeroComponent declared in HeroModule). This is not the case. And I still need to configure that service in HeroModule.
So What is this providedIn: SpecificModule
for?
here is the demo
Expected behavior
Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
Environment
Angular version: 6.*.*
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: XX
- Platform:
Others:
Issue Analytics
- State:
- Created 5 years ago
- Reactions:5
- Comments:41 (21 by maintainers)
Top GitHub Comments
Just don’t do that.
@maxkorz
You need an additional module
https://stackblitz.com/edit/angular-lazy-load-jxjhfw?file=app%2Fabout%2Fabout.service.ts