Angular 2 HTTP (Tour of Heroes Tutorial - angular website)

Question

Following tutorial here: https://angular.io/docs/ts/latest/tutorial/toh-pt6.html

Current Code: https://github.com/GreenAnts/Angular2-tour-of-heroes-tutorial

(Note: http must be working, as I am able to view heroes, and dashboard, which are viewing the heroes. . . it is only when I view hero details, which doesn't make sense to me, as I never changed the hero detail methods that I can think of.)

Errors when trying to view hero-details:

I don't know what it is, I am assuming it must be something simple I am overlooking, but I really can't figure it out, any help would be much appreciated as I am stuck.

I am at the point in the tutorial where it says this:

Update hero details

We can edit a hero's name already in the hero detail view. Go ahead
and try it. As we type, the hero name is updated in the view heading.
But when we hit the Back button, the changes are lost!

Updates weren't lost before, what's happening? When the app used a
list of mock heroes, changes were made directly to the hero objects in
the single, app-wide shared list. Now that we are fetching data from a
server, if we want changes to persist, we'll need to write them back
to the server.

At first I thought maybe it was something due to this, but it says that we should be able to access the detail view, so I am assuming it is something else.

Showing I get access to data, for other components (WITH NO ERRORS):

Answer 1

It turned out to be much simpler, I should have looked there first. Doh!

Your baseHref was empty. It was:

<base href="" />

And should have been:

<base href="/" />

Some other things that you might want to fix:

The "moduleId: module.id" in every component will give you problems when packing your application for production.
The signature of the getHero method was returning multiple heroes: Promise of Hero array. I changed it to Promise of single Hero (no brackets.)

Currently:

getHero(id: number): Promise<Hero[]> {
    return this.getHeroes()
    .then(heroes => heroes.find(hero => hero.id === id))
}

Should be:

getHero(id: number): Promise<Hero> {
    return this.getHeroes()
    .then(heroes => heroes.find(hero => hero.id === id))
}

The HTML and Style URLs won't always work as defined:

templateUrl: './templates/app.component.html',

styleUrls: ['./styles/app.component.css']

Pre-pend 'app' in front like this:

templateUrl: 'app/templates/app.component.html',
styleUrls: ['app/styles/app.component.css']

Your node_modules are stored in Git, they are excluded in your .gitignore, but I'm guessing you committed that before the ignore file. You can safely delete those locally commit so they are not stored in Git, then run "npm install" to get them back just locally.

Angular 2 HTTP (Tour of Heroes Tutorial - angular website)

Sign up