Heroes tutorial: adding service as described results in JS error

[conraddamon]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] 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

Current behavior

While following the Heroes tutorial in chapter 6 (Services), an unexpected JS error is thrown: HeroService is not defined. That happens after "See it run" just before the tutorial moves on to "Observable data".

Expected behavior

No JS error.

Minimal reproduction of the problem with instructions

Follow the tutorial.

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z


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:

I'm just learning Angular 5, so sorry if I missed something. I believe the fix is to add instructions to import HeroService in app.module.ts, and to omit Message service from the providers list (until later in the tutorial).

[olbpetersson]

Did you include the HeroService in your providers-array of the app.module.ts?

[mattpenner]

Clarification:
The issue occurs in the Provide the HeroService section of the tutorial.

It states subtly to import the service:

Open the AppModule class, import the HeroService, and add it to the @NgModule.providers array.
[emphasis mine]

but never gives the example code on how to do so, which is confusing for beginners and inconsistent whereas most of the tutorial gives explicit example code for any necessary changes.

As also mentioned by the OP (separate issue?), the example code given for adding the HeroService to the providers array incorrectly adds MessageService, which isn't written until shortly later in the Create the MessageService section. This breaks the application throwing: error TS2304: Cannot find name 'MessageService'.

[gilessmart]

Duplicate of #20398

[jenniferfell]

Thank you. It looks like this issue was resolved. Issue #20398 shows the related commits. If this is still an issue, please let us know. Thanks again.

[angular-automatic-lock-bot]

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.}