Cannot find module './in-memory-data-service' in tour of heroes for Angular2

Question

I am trying to work through the Angular2 tour of heroes app, and am running into bugs on the Http section of the tutorial.

At first I was getting the error:

Answer 1

Angular 6 - Windows I got

Failed to compile.

./src/app/in-memory-data.service
Module build failed: Error: ENOENT: no such file or directory, open 'e:\visualStudioWorkspace\angular-tour-of-heroes\src\app\in-memory-data.service'

When I change

import { InMemoryDataService }  from './in-memory-data.service';

to (notice data.service changes to data-service)

import { InMemoryDataService }  from './in-memory-data-service';

and rename file to in-memory-data-service.ts it works.

Answer 2

Same problem. I fix it with stopping the ng serve, run a ng build and than ng serve again.

Answer 3

I got this error in 2020. I was running the server and running ng commands in another terminal.

Restarting the server did the trick. (CTRL+C, ng serve)

Answer 4

For those of you looking at the older articles, try this solution by re-running the application with ng serve.

ng generate service InMemoryData --module=app was a previous solution; however, you get this error:

Unknown option: '--module'

By default, Angular sets the providedIn property inside of the @Injectable decorator. This takes care of registering the service and hence the --module isn't really a practical solution anymore.

In order to restart the angular application, you can run in the CLI... taskkill /IM "node.exe" /F

then, ng serve

Answer 5

To resolve this issue I did

ng generate service InMemoryData --module=app  

as suggested by user user875234

But also a lot of answers here have copied and pasted from the question

import { InMemoryDataService } from './in-memory-data-service';  

Which is wrong. It should be as it appears in the Heroes tutorial

import { InMemoryDataService } from './in-memory-data.service';  

Notice the "dataDOTservice", not a hyphen. It looks to us newbies like a mistake in the tutorial, and it doesn't match OP's question or some answers here. The dot is correct, the hyphen is wrong.

Answer 6

Just make sure all your bases are covered

In your package.json, should match the one on this page.

"angular-in-memory-web-api": "~0.1.1",

Also, your systemjs.config file looks good too!

In your app.module.ts, make sure that your in-memory-data-service import matches your file because in their example they have in-memory-data.service

// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data-service'; // <-- Make sure this matches the file name

So your file should be named in-memory-data-service.ts. It looks like to me that there is a naming typo or some sort of file structure issue.

It looks like you solved the package.json issue, and the error that you are getting is saying that it can't find that module, now that could be because you have a typo in the name of the file or the path to the file is wrong in the import line.