Angular Tutorial: Tour of Heroes

Angular Tutorial: Tour of Heroes

Angular has provided an excellent tutorial application to help you get up and running quickly: the Tour Of Heroes application. Divided into several parts, it covers some of the core functionality of the Angular framework. Spending some time following it is highly recommend.

Find the tutorial at https://angular.io/tutorial - It is divided up into 8 parts, which you will see on the left-hand side of the page.

There were a few typographical errors and unclear items that I found while running through the tutorial, and to help you along, these are now documented below. Make sure you look at the sections below for the corresponding part you are working on, so as to not run into anything that will trip you up!

3. The Hero Editor

Add a hero property

This subsection asks you to: Add a hero property to the HeroesComponent for a hero named "Windstorm."

There are several places in the tutorial that ask you to add a property to a component. These properties should appear inside the class, that you find in the component.ts file in question, near the top. In this example, it should look like this

export class HeroesComponent implements OnInit {

    hero = 'Windstorm';

6. Services

Provide the HeroService

In this subsection, you are asked to: Open the AppModule class, import the HeroService, and add it to the @NgModule.providers array.

src/app/app.module.ts (providers)

providers: [ HeroService, MessageService ],

Note, that MessageService is here in the providers list. If you try and run the application at this point, it will crash with an error. This is because you have not yet created the MessageService. Instead, the providers list should simply look like this:

src/app/app.module.ts (providers)

providers: [ HeroService ],

Once you create the MessageService later in the tutorial, come back here and add it to the providers list.