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):

Ben Richards · Accepted Answer · 2016-11-12 01:15:02Z

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.

edited Nov 12, 2016 at 1:15

answered Nov 11, 2016 at 20:36

Ben Richards

3,5861 gold badge18 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Anthony Over a year ago

github.com/GreenAnts/Angular2-tour-of-heroes-tutorial/blob/… github.com/GreenAnts/Angular2-tour-of-heroes-tutorial/blob/… Sorry, I am not really 100% confident on everything going on yet, as I am still learning, but I think that is what is set up here. Although I was wondering the same thing about the url. don't know where that url is coming from. However, when I change that url, my dashboard and heroes component break. where as that works atm. so I don't think that is the issue, although I may be wrong.

Anthony Over a year ago

It's weird, because I am able to access the "API" because I am getting data on the other pages

Anthony Over a year ago

No luck huh...?

Ben Richards Over a year ago

Edited the answer. I didn't have luck as is, but got it to work, see above. It shows the details fine now. Let me know if you want me to put it on GitHub, I can make a PR including the CLI setup.

Anthony Over a year ago

Thanks for the help, not going to mark it as answered, as would like to still find out what is broken. But either way, thanks for the help. Is Angular-cli the standard for the most part? Isn't it still in beta?

|

Collectives™ on Stack Overflow

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

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related