DOCS Update tutorial to recommend tree-shakeable providers #22934

jbogarthyde · 2018-03-22T17:50:26Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[x] Documentation content changes
[ ] angular.io application / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: #21085, #20398

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

Change example and surrounding text to show best practice of specifying provider in the service itself, to make it tree-shakeable.
Adds new version of code sample to show a second state.
Associated with PR 22803
Also fixes code samples to show import, addressing issues #21085, #20398

mary-poppins · 2018-03-22T18:04:01Z

You can preview 589955d at https://pr22934-589955d.ngbuilds.io/.

mary-poppins · 2018-03-22T19:01:03Z

You can preview 2cf3585 at https://pr22934-2cf3585.ngbuilds.io/.

mary-poppins · 2018-03-22T19:04:26Z

You can preview ff82b4a at https://pr22934-ff82b4a.ngbuilds.io/.

vicb · 2018-03-22T19:05:45Z

aio/content/tutorial/toh-pt4.md

@@ -78,28 +78,35 @@ Add a `getHeroes` method to return the _mock heroes_.

 You must _provide_ the `HeroService` in the _dependency injection system_
 before Angular can _inject_ it into the `HeroesComponent`, 
-as you will do [below](#inject).
+as you will do [below](#inject). A provider is something that can create or deliver a service; in this case, it instaniates the `HeroService` class to provide the service.  


typo instantiates

mary-poppins · 2018-03-22T20:27:15Z

You can preview ae03b63 at https://pr22934-ae03b63.ngbuilds.io/.

mary-poppins · 2018-03-31T00:05:50Z

You can preview 6ee2e3b at https://pr22934-6ee2e3b.ngbuilds.io/.

mary-poppins · 2018-03-31T00:10:59Z

You can preview a2e7817 at https://pr22934-a2e7817.ngbuilds.io/.

sreevani-ship-it · 2018-04-02T15:15:10Z

aio/content/tutorial/toh-pt4.md


-That's such a popular choice that you could have told the CLI to provide it there automatically
-by appending `--module=app`.
+You can register the `HeroService` as the provider of this service at different levels: 


By default, the Angular CLI command ng generate service registers a provider with the root injector for your service. When you provide it at the root level, Angular creates a single, shared instance of HeroService and injects into any class that asks for it. You can modify this and register your service at different levels (HeroesComponent, AppModule) based on your use case.

sreevani-ship-it · 2018-04-02T15:19:20Z

aio/content/tutorial/toh-pt4.md


 <code-example language="sh" class="code-shell">
  ng generate service hero --module=app
 </code-example>

-Since you did not, you'll have to provide it yourself.
+Since you did not, you'll have to provide it yourself.  A good practice is to provide it in the metadata for the service itself, which makes it available at a given level, but also allows for it to be removed from the app if it turns out not be used after all. 


Remove: Since you did not, you'll have to provide it yourself. A good practice is to provide it in the metadata for the service itself, which makes it available at a given level, but also allows for it to be removed from the app if it turns out not be used after all.

sreevani-ship-it · 2018-04-02T15:20:16Z

aio/content/tutorial/toh-pt4.md


-Open the `AppModule` class, import the `HeroService`, and add it to the `@NgModule.providers` array.
+To do this, look for the `@Injectable()` statement right before the `HeroService` class definition, and add the `providedIn` metadata value.You typically provide a service at the root level, so that it can be used anywhere in the app:    


sreevani-ship-it · 2018-04-02T15:20:28Z

aio/content/tutorial/toh-pt4.md

 </code-example>

-The `providers` array tells Angular to create a single, shared instance of `HeroService`
-and inject into any class that asks for it.
+ When you provide it at the root level, Angular creates a single, shared instance of `HeroService`


mary-poppins · 2018-04-02T17:21:44Z

You can preview c460a55 at https://pr22934-c460a55.ngbuilds.io/.

mary-poppins · 2018-04-02T19:53:27Z

You can preview 5c614bc at https://pr22934-5c614bc.ngbuilds.io/.

mary-poppins · 2018-04-02T20:04:40Z

You can preview 6efd5b0 at https://pr22934-6efd5b0.ngbuilds.io/.

mary-poppins · 2018-04-03T17:12:26Z

You can preview 10b7f85 at https://pr22934-10b7f85.ngbuilds.io/.

trotyl · 2018-04-03T17:18:23Z

aio/content/examples/toh-pt4/src/app/hero.service.2.ts

+import { HEROES } from './mock-heroes';
+
+// #docregion provider
+@Injectable({providedIn : root})


Missing quote for root?

mary-poppins · 2018-04-03T17:29:13Z

You can preview e73e1d9 at https://pr22934-e73e1d9.ngbuilds.io/.

mary-poppins · 2018-04-03T17:35:58Z

You can preview 80ffdbf at https://pr22934-80ffdbf.ngbuilds.io/.

sreevani-ship-it · 2018-04-03T17:26:51Z

aio/content/tutorial/toh-pt4.md

-</code-example>
+```
+@Injectable({providedIn: root})
+```

 When you provide a service at the root level, Angular creates a single, shared instance of `HeroService` and injects into any class that asks for it.


You can remove line 105. We are already mentioning this in the paragraph above.

alxhub · 2018-04-03T17:54:11Z

aio/content/tutorial/toh-pt4.md

@@ -442,7 +439,7 @@ Here are the code files discussed on this page and your app should look like thi
 ## Summary

 * You refactored data access to the `HeroService` class.
-* You _provided_ the `HeroService` in the root `AppModule` so that it can be injected anywhere.
+* You registered the `HeroService` as the _provider_ of its service as the root level, so that it can be injected anywhere in the app.


at the root level

rewrote this section, typo gone

alxhub · 2018-04-03T17:54:36Z

aio/content/tutorial/toh-pt4.md


-The `providers` array tells Angular to create a single, shared instance of `HeroService`
-and inject into any class that asks for it.
+When you provide a service at the root level, Angular creates a single, shared instance of `HeroService` and injects into any class that asks for it.


...creates a single, shared instance of HeroService and injects it into any class that asks for it.

This is also a duplicate of line 98 above.

ngbot · 2018-04-03T18:08:26Z

Hi @jbogarthyde! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

comment now n/a

StephenFluin · 2018-04-04T22:11:27Z

aio/content/navigation.json

@@ -462,11 +462,6 @@
            }
          ]
        },


Still needs to be removed

StephenFluin · 2018-04-04T22:14:38Z

aio/content/tutorial/toh-pt4.md

@@ -40,19 +40,12 @@ The `HeroService` class should look like the below.
 ### _@Injectable()_ services

 Notice that the new service imports the Angular `Injectable` symbol and annotates
-the class with the `@Injectable()` decorator.
+the class with the `@Injectable()` decorator. This marks the class as one that participates in the _dependency injection system_, either by providing an injectable service or consuming one. 


Remove 'or consuming one'. This may have been old guidance to put @injectable on anything that may consume a service, but it's not relevant anymore.

mary-poppins · 2018-04-04T23:38:51Z

You can preview 81b4006 at https://pr22934-81b4006.ngbuilds.io/.

mary-poppins · 2018-04-04T23:39:59Z

You can preview 580c13e at https://pr22934-580c13e.ngbuilds.io/.

mary-poppins · 2018-04-05T00:32:30Z

You can preview f571703 at https://pr22934-f571703.ngbuilds.io/.

mary-poppins · 2018-04-05T00:42:13Z

You can preview b96ee22 at https://pr22934-b96ee22.ngbuilds.io/.

StephenFluin

I think we may need to squash the commits, but other than that, looks good!

devoto13 · 2018-04-05T05:35:33Z

aio/content/tutorial/toh-pt4.md

@@ -442,7 +434,7 @@ Here are the code files discussed on this page and your app should look like thi
 ## Summary

 * You refactored data access to the `HeroService` class.
-* You _provided_ the `HeroService` in the root `AppModule` so that it can be injected anywhere.
+* You registered the `HeroService` as the _provider_ of its service as the root level so that it can be injected anywhere in the app.


as the root level -> at the root level

mary-poppins · 2018-04-05T14:54:19Z

You can preview 6545420 at https://pr22934-6545420.ngbuilds.io/.

mary-poppins · 2018-04-05T14:56:04Z

You can preview 3636c0a at https://pr22934-3636c0a.ngbuilds.io/.

mary-poppins · 2018-04-05T19:15:06Z

You can preview 0869d98 at https://pr22934-0869d98.ngbuilds.io/.

mary-poppins · 2018-04-05T20:01:44Z

You can preview 9789249 at https://pr22934-9789249.ngbuilds.io/.

mary-poppins · 2018-04-06T15:16:12Z

You can preview deef42f at https://pr22934-deef42f.ngbuilds.io/.

mary-poppins · 2018-04-06T15:19:50Z

You can preview aefddc9 at https://pr22934-aefddc9.ngbuilds.io/.

angular-automatic-lock-bot · 2019-09-13T14:20:58Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

googlebot added the cla: yes label Mar 22, 2018

vicb reviewed Mar 22, 2018

View reviewed changes

jbogarthyde force-pushed the jb-tutorial-providers branch from ae03b63 to 1c1f1ca Compare March 30, 2018 23:45

jbogarthyde requested review from alxhub, jenniferfell and sreevani-ship-it March 30, 2018 23:49

jbogarthyde added the target: major This PR is targeted for the next major release label Mar 30, 2018

sreevani-ship-it reviewed Apr 2, 2018

View reviewed changes

jbogarthyde force-pushed the jb-tutorial-providers branch from a2e7817 to c460a55 Compare April 2, 2018 17:10

jbogarthyde mentioned this pull request Apr 2, 2018

docs: change examples within services to be tree-shakeable #23070

Closed

jbogarthyde force-pushed the jb-tutorial-providers branch from 6efd5b0 to 10b7f85 Compare April 3, 2018 17:01

trotyl reviewed Apr 3, 2018

View reviewed changes

jenniferfell requested a review from StephenFluin April 3, 2018 17:36

sreevani-ship-it reviewed Apr 3, 2018

View reviewed changes

alxhub previously requested changes Apr 3, 2018

View reviewed changes

jbogarthyde force-pushed the jb-tutorial-providers branch from 8c6549f to a64bccb Compare April 3, 2018 18:54

brandonroberts approved these changes Apr 4, 2018

View reviewed changes

StephenFluin suggested changes Apr 4, 2018

View reviewed changes

alxhub added the comp: docs label Apr 4, 2018

jbogarthyde force-pushed the jb-tutorial-providers branch from 81b4006 to 580c13e Compare April 4, 2018 23:32

jbogarthyde force-pushed the jb-tutorial-providers branch from 580c13e to f571703 Compare April 5, 2018 00:24

StephenFluin approved these changes Apr 5, 2018

View reviewed changes

devoto13 reviewed Apr 5, 2018

View reviewed changes

jbogarthyde force-pushed the jb-tutorial-providers branch from 6545420 to 3636c0a Compare April 5, 2018 14:44

jbogarthyde force-pushed the jb-tutorial-providers branch from 3636c0a to 0869d98 Compare April 5, 2018 19:02

jenniferfell approved these changes Apr 5, 2018

View reviewed changes

jbogarthyde force-pushed the jb-tutorial-providers branch from 9789249 to deef42f Compare April 6, 2018 15:07

docs: recommend best practice for providers

aefddc9

jbogarthyde force-pushed the jb-tutorial-providers branch from deef42f to aefddc9 Compare April 6, 2018 15:08

jbogarthyde added the merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note label Apr 6, 2018

IgorMinar approved these changes Apr 7, 2018

View reviewed changes

IgorMinar closed this in 1fac5f4 Apr 7, 2018

jbogarthyde deleted the jb-tutorial-providers branch April 27, 2018 17:10

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 13, 2019


		Open the `AppModule` class, import the `HeroService`, and add it to the `@NgModule.providers` array.
		To do this, look for the `@Injectable()` statement right before the `HeroService` class definition, and add the `providedIn` metadata value.You typically provide a service at the root level, so that it can be used anywhere in the app:

@@ @@ -462,11 +462,6 @@ @@
                           }
                         ]
                       },

DOCS Update tutorial to recommend tree-shakeable providers #22934

DOCS Update tutorial to recommend tree-shakeable providers #22934

Conversation

jbogarthyde commented Mar 22, 2018 • edited

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

mary-poppins commented Mar 22, 2018

mary-poppins commented Mar 22, 2018

mary-poppins commented Mar 22, 2018

Choose a reason for hiding this comment

mary-poppins commented Mar 22, 2018

mary-poppins commented Mar 31, 2018

mary-poppins commented Mar 31, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mary-poppins commented Apr 2, 2018

mary-poppins commented Apr 2, 2018

mary-poppins commented Apr 2, 2018

mary-poppins commented Apr 3, 2018

Choose a reason for hiding this comment

mary-poppins commented Apr 3, 2018

mary-poppins commented Apr 3, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ngbot bot commented Apr 3, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mary-poppins commented Apr 4, 2018

mary-poppins commented Apr 4, 2018

mary-poppins commented Apr 5, 2018

mary-poppins commented Apr 5, 2018

StephenFluin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mary-poppins commented Apr 5, 2018

mary-poppins commented Apr 5, 2018

mary-poppins commented Apr 5, 2018

mary-poppins commented Apr 5, 2018

mary-poppins commented Apr 6, 2018

mary-poppins commented Apr 6, 2018

angular-automatic-lock-bot bot commented Sep 13, 2019

jbogarthyde commented Mar 22, 2018 •

edited