Tour of Heroes tutorial, chapter 6 (services) - inclusion of HeroesService includes MessageService, which doesn't come until further down

[williamBurgeson]

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

Having added the heroes service via the CLI, the copy/paste code invites us to add the providers, but includes the MessageService, which we don't see until later. This will confuse learners and is probably just an error.

providers: [ HeroService, MessageService ],

It would probably also be worth mentioning that there is already an empty providers there, which should be overwritten.

A simple error which should be relatively easy to fix but would make life a lot easier for newbies trying to follow.

[gkalpak]

Good catch!

[JB711]

running into the same issue...

[4E71-NOP]

That helped fixing it. Thx @jhenderson2099

On the other hand this tutorial could benefit from a global description of "what we need" and "how it works" as an introduction. A diagram could help too (a 1000 words vs 1 image).

Or split it in 2 or more parts. At the end of each part the application should still work.

This document is rather long.

I mean by that :
-7 files are listed in the final code review. Not to mention the syntax errors we all do (or our IDE auto completion sneaky attack)... It's not a light change for this "hero" application.
-I was tired and i didn't know what i was doing (the goal) and how to achieve it (the means) approximatively at half of this document. I was wondering when does it ends?

I don't think opening another issue is relevant for this (no category that fit). But in the end it may help the authors to make this tutorial evolve.

(Frenchie' over here, sorry for my English)

[jhenderson2099]

No problem @4E71-NOP

I agree. The application should work each time the instructions indicate to "try it".

Although, I can hardly take credit. I'm just the person who submitted a fix in the documentation and submitted the pull request. Hopefully it will be incorporated into the online documentation soon :-D

[ScottMcCormack]

I believe the error in the documentation comes from the code referenced at this location:

angular/aio/content/examples/toh-pt4/src/app/app.module.ts

Line 24 in 049c896

providers: [ HeroService, MessageService ],

The md file that references this module is located here:
https://github.com/angular/angular/blob/456f57dde804733f1c41bd3fba477e7f58fd8399/aio/content/tutorial/toh-pt4.md

[jhenderson2099]

This has been fixed with a documentation patch that I submitted (above). Awaiting approval for pull request.

[maxpown3r]

Hi, This error has not been fixed. Newbie here that spend an hour depbugging before commenting out "MessageService"

[jhenderson2099]

Like I said...waiting on the pull request.

[cgcerro]

I'm following the tutorial and inclusion of the services in providers array is not needed!!!

But, i don't know whay, but in the MessageService you must change the name of the method "add" with otherone name like "insert". With "add" not compile.

MessageService:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MessageService {

  messages: string[] = [];

  insert(message: string) {
    this.messages.push(message);
  }

  clear() {
    this.messages = [];
  }

  constructor() { }
}

HeroService:

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Observable, of } from 'rxjs';
import { MessageService } from './message.service';

@Injectable({
  providedIn: 'root'
})
export class HeroService {

  getHeroes(): Observable<Hero[]> {
    this.addMessage();
    return of(HEROES);
  }

  constructor(private messageService: MessageService) {
    
   }

  private addMessage() {
    this.messageService.insert('fetched heroes');
  }
}

[williamBurgeson]

Re the last comment, this is something which changed in ng 6 - the @Injectable decorator now has a providedIn property which, as you can see in the example, automatically has the effect of including it in the providers array of the app module.
That arg can also be the child module if appropriate, in such a case you need to refer to the module directly, rather than as a string

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