Cannot GET /app/heroes

[abhishekit29]

Error 404 not found. I followed the same way decribed in tutorial. I am not getting how this api would work.

I am using angular-in-memory-web-api

[NookieGrey]

You must import modules in order

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    AppRoutingModule
],

[pirey]

@NugzarGaguliya thanks it works! they didn't mention in the tutorial to put it in order

[abhishekit29]

@NugzarGaguliya Thanks . @pirey yeah true

[scottseeker]

The initial /api/heroes call works for me, but I tried using getHero to call /api/heroes/12 and that gives me 404. In fact if I leave the older implementation of getHero, it tries to call /api/heroes again, and that time it returns 404.

I notice the source for this project does not reflect the getHero implementation in the Http chapter of the tutorial as well.

[angela5277]

@scottseeker The url in the tutorial is const url = '${this.heroesurl}/${hero.id}'; and I changed to const url = this.heroesUrl + '/' + id , then it works. I am not sure whether you have the same problem.

[scottseeker]

@Angela931228 it seems in your example you have single quotes ' instead of backticks `. That may have been your issue. I'll have to check it out at home though, thanks for the reply!

[miltonvandesanden]

@scottseeker I had the same problem, using backticks instead of single quotes solved it, I personally can't make sense of the rules of when to use backticks and when to use single quotes

[banan314]

It is interesting that it works also with other order:

imports: [
    ...
    AppRoutingModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService)
  ],

and fails only if HttpModule is imported after InMemoryWebApiModule. I guess InMemoryWebApi depends on Http and if the latter is not imported, InMemoryWebApi cannot work.

[thylux]

@salami350 using backticks is a Javascript (es6)/Typescript feature to use string interpolation. It allows to use variables inside the string instead of having to use + everywhere.

[thylux]

@banan314 Yes, that's documented on in-memory-web-api's GitHub, but not on this tutorial:

Always import the InMemoryWebApiModule after the HttpModule to ensure that the XHRBackend provider of the InMemoryWebApiModule supersedes all others.

[johnpapa]

closing since this was rewritten with the CLI

[tonthatbinh135]

Thank you for your answer.

[jplew]

Can I suggest updating the documentation here: https://angular.io/tutorial/toh-pt6#simulate-the-web-api?

I just had the same ordering problem, and apparently I'm not the only one. A lot of headaches could be spared by including a line like this: "Be aware, the order of declarations matters! For it to work, the InMemoryWebApiModule must be listed after the HttpModule

[hmake98]

i also getting 404 error in compiling, i think there is a problem in systemjs.config.js , but i don't know how to solve it.

[kkarlallan]

Currently, I found the solution to this tutorial's mind-crippling problem.

The problem is the .data shown below.

You can either delete that. OR edit the JSON response to include a {data: in the beginning of it's JSON object. Goodluck guys

[dhakehurst]

Please update the tutorial !!!

[tjaurini]

Found a minor issue by accident, what I mean is, that I've been using VScode to follow along and on the note of ordering the imports array in NgModule I thought maybe my actual import declarations were out of order so I decided to copy them in verbatim from the code. What that revealed was a complaint by Visual Studio code that my file was out of date. (I'm like: "whaaaaat???")

So I compared and found that some part of the system had added InMemoryDataService to the providers array in the background. This currently isn't mentioned as a requirement in the tutorial nor shown in the tutorial's code at the bottom. This was causing my 404 issues. Still, I like the example and am grateful for the tutorial so please update this part when you guys get a chance as it killed my app and I would have had no way of figuring that out.

Also there is a missing --module=app command when creating the hero-search component. Not sure if this was intended as a 'keep you on your toes' lesson but the following line states that it will be automatically added to the app.module.ts which, of course, it wouldn't. Thanks again guys!

[choekstra]

https://github.com/angular/angular/issues/22955 resolved this issue for me. Evidently there is an updated api which the tutorial does not mention yet: npm i --save angular-in-memory-web-api@0.5.0

[joelbladt]

@choekstra thanks to you. I had the same problem and you solved it for me. 🥇

[adrianlavigne]

Thanks to @choekstra i could solve this issue. I didn't know what was wrong in the code and as a newbie i was thinking i could never find it. Thanks a lot.

[kemin711]

HeroService: getHeroes failed: undefined. I am having the same problem, but looking at a different version of the the tutorial because the app.module.ts file is different from the posting here: @NgModule({ imports: [ BrowserModule, FormsModule, HttpClientModule,

// The HttpClientInMemoryWebApiModule module intercepts HTTP requests
// and returns simulated server responses.
// Remove it when a real server is ready to receive requests.
HttpClientInMemoryWebApiModule.forRoot(
  InMemoryDataService, { dataEncapsulation: false }
)
AppRoutingModule,

], declarations: [ AppComponent, DashboardComponent, HeroesComponent, HeroDetailComponent, MessagesComponent, HeroSearchComponent ], providers: [ HeroService, MessageService ], bootstrap: [ AppComponent ] }) export class AppModule { }

[amitchoudhary151417]

Angular 2-5 404 error You can refer to this site and my solution also which solve this problem https://discuss.emberjs.com/t/apache-rewrite-rule-for-html5-browser-history-url-bookmarkability/1013/11?u=amit_choudhary

[pedrocesarsa]

I've had a 404 code with message {error: "Collection 'heroes' not found"} during Tour of Heroes tutorial. In my case I forgot to put the curly braces on the return statement of "in-memory-data.service.ts". It was: "return heroes"; and I had to change to "return {heroes};". The tutorial had the correct syntax, but I accidentally skipped those curly braces. Hope it helps someone else.

[wanghaa]

@pedrocesarsa thanks to you. I had the same problem and you solved it for me. 😆