cannot find module ./in-memory-data.service Angular2

Question

I am following the Angular 2 Tutorial (Tour of Heroes) but I am unable to finish the 7'th Tutorial regarding http which simulates a web api using angular-in-memory-web-api. Everything is exactly how it is given in the tutorial. Still I am getting this error. I am using Visual Studio as my editor. Following Statckoverflow is similar but it does not help because it is an older version of 'in-memory-data.service Angular2'

Angular2 Tutorial (Tour of Heroes): Cannot find module 'angular2-in-memory-web-api'

cannot find module ./in-memory-data.service Angular2

Following is the relevant package.json details:

"dependencies": {
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/forms": "~2.1.0",
    "@angular/http": "~2.1.0",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",
    "@angular/router": "~3.1.0",
    "@angular/upgrade": "~2.1.0",

    "angular-in-memory-web-api": "~0.1.5",
    "bootstrap": "^3.3.7",
    "systemjs": "0.19.39",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3",
    "typings": "^1.4.0",

Following is the app.module.ts:

    import { HttpModule } from '@angular/http';
    import { AppRoutingModule } from './app-routing.module';
    import { InMemoryWebApiModule } from 'angular-in-memory-web-api/in-memory-web-api.module';
    import { InMemoryDataService} from './in-memory-data.service';

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

do you have `in-memory-data.service.ts` file in app folder??? — micronyks, Oct 21 '16 at 19:38
Ohh looks like This file gets added later in the tutorial!! Thanks for pointing out. It is so silly on my part. I am just learning angular2 — prabhats.net, Oct 21 '16 at 20:27
You can find the in-memory-data-service.ts file here:https://stackblitz.com/angular/bbykkemeqor?file=src%2Fapp%2Fhero.service.ts — user2286810, Apr 19 '20 at 23:32

score 1 · Accepted Answer · answered Oct 22 '16 at 03:44

1

cannot find module ./in-memory-data.service Angular2 error says: it is not able to find in-memory-data.service.ts file (should be in app folder). So you need to create it I guess it's missing in your case.

answered Oct 22 '16 at 03:44

micronyks

54,797
15
112
146

Can you tell me how to create one? Am struck here – Kannan T Oct 28 '17 at 15:31

score 0 · Answer 2 · edited May 23 '17 at 12:10

This other question has the answer (at least fixed my problem)

You need to change some stuff on the systemjs.config.js file: from

'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',

to

'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',

and also remove this section at the bottom:

'angular-in-memory-web-api': {
    main: './index.js',
    defaultExtension: 'js'
  }

what this does is not reference the readable js code, but the minified and uglified one. I think there is some code (or comment) breaking stuff that gets removed when minifying / uglifying.

Ah! don't forget to update your import on app.module.ts file to use

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

remove the old import as that was what caused the error.

cannot find module ./in-memory-data.service Angular2

2 Answers2