From 8ee23ba67bb96da911bbe27cb677616bf4e61760 Mon Sep 17 00:00:00 2001 From: Santosh Yadav Date: Wed, 8 Jul 2020 23:41:20 +0530 Subject: [PATCH] docs: add explanation for providedIn any (#35283) Angular 9 introduces a new value for providedIn called `any` which lets us use unique instance for servicec in each lazy loaded module, this PR is to document the same fixes #35179 PR Close #35283 --- .pullapprove.yml | 1 + aio/content/examples/providers/src/app/user.service.2.ts | 7 +++++++ aio/content/guide/providers.md | 8 ++++++++ aio/content/images/guide/providers/any-provider.svg | 3 +++ 4 files changed, 19 insertions(+) create mode 100644 aio/content/examples/providers/src/app/user.service.2.ts create mode 100644 aio/content/images/guide/providers/any-provider.svg diff --git a/.pullapprove.yml b/.pullapprove.yml index 8b5a3ba10c5..a5bfc20ecdf 100644 --- a/.pullapprove.yml +++ b/.pullapprove.yml @@ -362,6 +362,7 @@ groups: 'aio/content/images/guide/pipes/**', 'aio/content/guide/providers.md', 'aio/content/examples/providers/**', + 'aio/content/images/guide/providers/**', 'aio/content/guide/singleton-services.md', 'aio/content/guide/set-document-title.md', 'aio/content/examples/set-document-title/**', diff --git a/aio/content/examples/providers/src/app/user.service.2.ts b/aio/content/examples/providers/src/app/user.service.2.ts new file mode 100644 index 00000000000..de97ce6a45e --- /dev/null +++ b/aio/content/examples/providers/src/app/user.service.2.ts @@ -0,0 +1,7 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'any', +}) +export class UserService { +} diff --git a/aio/content/guide/providers.md b/aio/content/guide/providers.md index 46087eedc9f..e9154c85067 100644 --- a/aio/content/guide/providers.md +++ b/aio/content/guide/providers.md @@ -52,6 +52,14 @@ Any component created within a lazy loaded module’s context, such as by router Though you can provide services by lazy loading modules, not all services can be lazy loaded. For instance, some modules only work in the root module, such as the Router. The Router works with the global location object in the browser. +As of Angular version 9, you can provide a new instance of a service with each lazy loaded module. The following code adds this functionality to `UserService`. + + + +With `providedIn: 'any'`, all eagerly loaded modules share a singleton instance; however, lazy loaded modules each get their own unique instance, as shown in the following diagram. + +any-provider-scope + ## Limiting provider scope with components diff --git a/aio/content/images/guide/providers/any-provider.svg b/aio/content/images/guide/providers/any-provider.svg new file mode 100644 index 00000000000..cdc3ee18dce --- /dev/null +++ b/aio/content/images/guide/providers/any-provider.svg @@ -0,0 +1,3 @@ + + +
Eagerly Loaded Modules
Eagerly Loaded Modules
UserService
UserService
EmployeeModule
EmployeeModule
UserService
UserService
AppModule
AppModule
ProductModule
ProductModule
DepartmentModule
DepartmentModule
UserService
UserService
Lazy Loaded Modules
Lazy Loaded ModulesViewer does not support full SVG 1.1 \ No newline at end of file