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
– micronyks, Commented Oct 21, 2016 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
– prabhats.net, Commented Oct 21, 2016 at 20:27
You can find the in-memory-data-service.ts file here:stackblitz.com/angular/… — user2286810
– user2286810, Commented Apr 19, 2020 at 23:32

micronyks · Accepted Answer · 2016-10-22 03:44:20Z

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, 2016 at 3:44

micronyks

55.7k17 gold badges122 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kannan T Over a year ago

Can you tell me how to create one? Am struck here

Community · Accepted Answer · 2017-05-23 12:10:39Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related