From 209a3655118d489ab83f2ab8ce8c91c7a569a07c 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 43774920b4..62b0b2d7f2 100644 --- a/.pullapprove.yml +++ b/.pullapprove.yml @@ -366,6 +366,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 0000000000..de97ce6a45 --- /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 46087eedc9..e9154c8506 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 0000000000..cdc3ee18dc --- /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