angular: Problem loading angular2-in-memory-web-api

I’m submitting a …
bug report
feature request
support request => Please do not submit support request here, see note at the top of this template.

Current behavior I couldn’t get the tutorial chapter 7 finished. (https://angular.io/docs/ts/latest/tutorial/toh-pt6.html) Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/angular2-in-memory-web-api Expected/desired behavior

In package.json set: 'angular2-in-memory-web-api': '0.0.10' in the dependecies block, and in systemjs.config.js set 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' } in the packages object.

See: http://stackoverflow.com/questions/37377529/angular2-tutorial-tour-of-heroes-cannot-find-module-angular2-in-memory-web-a for more details.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via

Just follow the chapter 7 in the tutorial and check the http server’s log. You will see the error described above.

What is the expected behavior?
What is the motivation / use case for changing the behavior?
Please tell us about your environment:
Angular version: 2.0.0-beta.X
Browser: [all]
Language: [TypeScript X.X]

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 3
Comments: 26 (1 by maintainers)

Most upvoted comments

Here is what worked for me: In packages.json, add the dependency

“angular-in-memory-web-api”: “^0.2.0”

then, npm install and npm start. Note that I used angular-cli to build the app, so there is no systemjs… That’s all I had to do, specifically there were no changes in the tutorial code.

+20

tantz001 on Feb 22, 2017

Also with'angular2-in-memory-web-api': '0.0.9' is working well. I changed 'angular2-in-memory-web-api': { defaultExtension: 'js' } to 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }and for me is working fine.

yaroslavOshyyko on Jun 6, 2016

the fix in my end is making sure that HttpModule is added first before InMemoryWebApiModule

  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpModule, // sequence is important define HttpModule first before InMemory
    InMemoryWebApiModule.forRoot(InMemoryDataService),
  ],

getneil on Oct 18, 2016

I also stumbled upon this issue coming from angular-cli. You should fix this either in angular-cli or in the documentation.

Like @wilee53, adding "angular-in-memory-web-api": "^0.2.0" in package.json fix the problem.

s17t on Feb 24, 2017

Thanks for the answer.

I also used angular-cli to create the project in which I followed the tutorial, hence the issue.

I think I understand why this issue was closed: the official tutorial probably assumes the user has started the project manually and not from the angular-cli.

However, the previous chapter in the official Angular website is about angular-cli, so I’m sure I won’t be the last one having this issue.

I suggest the following paragraph to be added to the tutorial: “If you used angular-cli to create the project, you need to execute the following command: npm install angular-in-memory-web-api --save”

What do you think?

If it makes sense, could it be added?

notbenj on Feb 23, 2017