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:

Cannot find module 'angular2-in-memory-web-api'

But fixed that using the information from this question.

However, at this same step I'm also getting the following error:

app/app.module.ts(10,38): error TS2307: Cannot find module './in-memory-data-service'.

I've triple checked and I believe both my in-memory-data-service.ts file and my app.module.ts file are exactly the same as listed in the tutorial (at this particular point in time).

Right now my in-memory-data-service.ts file looks like this:

CODE:

import { InMemoryDbService } from 'angular2-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
createDb() {
let heroes = [
  {id: 11, name: 'Mr. Nice'},
  {id: 12, name: 'Narco'},
  {id: 13, name: 'Bombasto'},
  {id: 14, name: 'Celeritas'},
  {id: 15, name: 'Magneta'},
  {id: 16, name: 'RubberMan'},
  {id: 17, name: 'Dynama'},
  {id: 18, name: 'Dr IQ'},
  {id: 19, name: 'Magma'},
  {id: 20, name: 'Tornado'}
];
return {heroes};
  }
}

My app.module.ts file looks like this:

CODE:

import './rxjs-extensions';

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { FormsModule }          from '@angular/forms';
import { HttpModule }           from '@angular/http';

//Imports for loading & configuring the in-memory web API
import { InMemoryWebApiModule } from 'angular2-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data-service';

import { AppComponent }         from './app.component';
import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroService }          from './hero.service';
import { routing }              from './app.routing';

@NgModule({
  imports:        [
                    BrowserModule,
                    FormsModule,
                    HttpModule,
                    InMemoryWebApiModule.forRoot(InMemoryDataService),
                    routing
                  ],
  declarations:   [
                    AppComponent,
                    DashboardComponent,
                    HeroDetailComponent,
                    HeroesComponent
                  ],
  providers:      [
                    HeroService
                  ],
bootstrap:        [ AppComponent ]
})

export class AppModule {
}

I'm not sure if this is due to some sort of dependency in package.json or systemjs.config that's not set appropriately, or if there's a simple mistake I'm helping.

EDIT

My systemjs.config.js file looks like this:

CODE:

(function (global) {
System.config({
paths: {
  // paths serve as alias
  'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
  // our app is within the app folder
  app: 'app',
  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  // other libraries
  'rxjs':                       'npm:rxjs',
  'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    main: './main.js',
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  },
  'angular2-in-memory-web-api': {
    main: 'index.js',
    defaultExtension: 'js'
  }
}
});
})(this);

My file structure currently looks like this:

File Structure:

app/app.module.ts
app/in-memory-data-service.ts

index.html
systemjs.config.js

Thank you.

I don't think it would have anything to do with the package.json but could you also show your systemjs.config file too? Also it looks like it has something to do with your file structure, so you may want to elaborate a bit on that as well — Logan H, Oct 05 '16 at 15:03
@Sasquatch3o3 - Thanks for the feedback. I went ahead and made the updates you requested. Please let me know if you have other questions. — Jonathan Bechtel, Oct 05 '16 at 15:11
Sure, I am taking a look right now to see if I can find anything, Thanks for the updates! — Logan H, Oct 05 '16 at 15:11
I had same issue, until I figure it out solution...in next step of Angular tour of heroes app :-) — Camille, Jan 29 '19 at 13:48
It's 2020 and they have fixed that typo, I still got this error though... I had to stop the entire anglar server and restart, and it worked... — O-9, Mar 23 '20 at 13:22

score 50 · Answer 1 · edited Jun 20 '20 at 09:12

50

ng generate service InMemoryData --module=app

Will create the src/app/in-memory-data.service.ts file. Then add the code listed in the tutorial and it will work. AFAIK they don't even imply that in the tutorial so don't feel bad. In fact what they say is

The forRoot() configuration method takes an InMemoryDataService class that primes the in-memory database.

The Tour of Heroes sample creates such a class src/app/in-memory-data.service.ts

Which is gibberish and wrong.

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 15 '17 at 16:31

user875234

2,399
7
31
49

1

thank you. I was beginning to think I missed a whole big section or completely was lost :) – Scott Holtzman Jan 15 '18 at 19:32
1

Thanks! This is very confusing, to wait for the file to be created and nothing happens. This is what I was missing! – EranKT Mar 23 '18 at 09:38
3

Thank you so much. They TOTALLY skipped that step. – Jonca33 Apr 12 '18 at 20:27
3

Thanks! This should be marked as the correct answer. You wold think that the tutorial would have been updated by now. – Lean van Heerden May 13 '18 at 03:05
This is definitely the more correct answer, thanks a bunch. – Daniel Bailey Aug 16 '18 at 07:50
seems like Angular took into account the feedback from this page and added missing lines to their tutorial :) – Omar Khazamov Oct 02 '21 at 14:07
For this section of the tutorial, they kind of went out of order. No biggy, what user875234 says is absolutely correct here. – Harlin Dec 01 '22 at 19:22

score 22 · Answer 2 · answered Jul 28 '17 at 11:22

22

My projects created using current CLI Tools, and I installed this:

npm install angular-in-memory-web-api --save

It works for me.

answered Jul 28 '17 at 11:22

ht13

633
7
19

Many thanks! After much grief, this solved the problem for me. – 681234 Aug 27 '17 at 13:07

Logan H · Accepted Answer · 2016-10-05T15:36:22.200

17

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.

edited Oct 05 '16 at 15:36

answered Oct 05 '16 at 15:01

Logan H

3,383
2
33
50

Well it looks like you solved the issue, congrats! It must have been a typo or path issue then? – Logan H Oct 05 '16 at 16:39
Hey just a head's up.....this answer did the trick. I'm always embarrassed when the answer is so simple, but my file name was wrong :(. – Jonathan Bechtel Oct 06 '16 at 11:19
Oh don't worry man we all do it! They are hard to track down too! Good Job, glad to help out! – Logan H Oct 06 '16 at 14:03
2

Angular's naming/verbiage there in the TOH tutorial creates problems – Andrew Koper Oct 04 '18 at 22:27
use keys of data must be collection name like `api/heroes` so collection array must be of `heroes` – silentsudo Mar 11 '19 at 11:36

Pavlo Lyakhov · Answer 4 · 2018-02-03T21:49:08.913

For Angular5 tutorial and angular-in-memory-web-api@0.5.3:

Add new file "in-memory-data.service.ts" to your root directory with this contents:

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService  implements InMemoryDbService {
createDb() {
    let heroes = [
        { id: 1, name: 'Windstorm' },
        { id: 2, name: 'Bombasto' },
        { id: 3, name: 'Magneta' },
        { id: 4, name: 'Tornado' }
    ];
    return { heroes };
}
}

score 9 · Answer 5 · answered Nov 24 '18 at 14:48

9

In the tour of heroes (Angular tutorial sample) after

import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data-service';

you must run the command:

ng generate service InMemoryData

answered Nov 24 '18 at 14:48

Mohammad Aghazadeh

336
1
4
11

score 4 · Answer 6 · answered May 06 '18 at 10:54

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.

score 2 · Answer 7 · answered Aug 01 '20 at 21:40

2

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)

answered Aug 01 '20 at 21:40

Scott Jodoin

175
2
8

score 1 · Answer 8 · answered Nov 20 '20 at 18:05

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

score 0 · Answer 9 · answered Oct 15 '17 at 20:07

0

Do it global install , use sudo if u have permissions problems

npm install -g angular-in-memory-web-api

answered Oct 15 '17 at 20:07

JuricaJaman

11
1

Levijatanu · Answer 10 · 2018-06-08T07:36:35.213

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.

score 0 · Answer 11 · answered Oct 05 '18 at 04:16

to solve it, try this step

run ng generate service InMemoryData --module=app with your angular cli, then replace the code listed in the tutorial, and save it.
go to app.module.ts, and add some code in it, so the code like this.

app.module.ts

import { HttpClientModule }    from '@angular/common/http';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';

@NgModule({
declarations: [
   ...
],
imports: [
   ...
   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 }
   )
],
providers: [],
   ...

Don't forget to add private heroesUrl = 'api/heroes'; // URL to web api in hero.service.ts

hero.service.ts

   ...
export class HeroService {

   constructor(
      private http: HttpClient,
      private messageService: MessageService,
   ) { }

   private heroesUrl = 'api/heroes';  // URL to web api

   /** GET heroes from the server */
   getHeroes (): Observable<Hero[]> {
      return this.http.get<Hero[]>(this.heroesUrl)
   }


   getHero(id: number): Observable<Hero> {
   ...

   /** Log a HeroService message with the MessageService */
   private log(message: string) {
   ...

Refresh your app by running ng sever, and Enjoy!.

score 0 · Answer 12 · answered Aug 27 '20 at 13:05

0

I solved this issue by running the following cmd:

$ yarn add angular-in-memory-web-api

Run this if you are using npm:

$ npm i angular-in-memory-web-api

answered Aug 27 '20 at 13:05

Ousama

2,176
3
21
26

score 0 · Answer 13 · answered Sep 12 '20 at 20:23

0

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

answered Sep 12 '20 at 20:23

user6266369

183
1
15

score 0 · Answer 14 · answered Feb 07 '23 at 10:20

0

For those who are implementing Tour of Heroes. We should just read the instructions clearly. In the AppModule, import the HttpClientInMemoryWebApiModule and the InMemoryDataService class, which you create next.

answered Feb 07 '23 at 10:20

Monika Agarwal

1

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

14 Answers14

Linked