CODEWITHSUNDEEP
angular
prabhats.net
prabhats.net

Reputation: 444

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

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';

Upvotes: 0

Views: 4267

Answers (2)

Alejandro B.
Alejandro B.

Reputation: 5092

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.

Upvotes: 0

micronyks
micronyks

Reputation: 55443

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.

Upvotes: 1

Related Questions