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

Question

I have followed the Tutorial. After changing app/maint.ts in the Http chapter I get the error when starting the app via command line:

ap

Answer 1

I got this error because I was importing InMemoryWebApiModule from angular2-in-memory-web-api I removed the 2. Actually I had two entries in my package.json file; one was angular2-in-memory-web-api and the second wasangular-in-memory-web-api. Using angular-in-memory-web-api solved the problem for me. So your import should be like this:

import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
...
@NgModule({

imports: [
InMemoryWebApiModule.forRoot(InMemoryDataService)
]
})

Using cli-angular you need not to change anything regarding system.config.js.

Answer 2

I'm currently doing the tutorial and had a similar problem. What seems to have fixed it for me is defining a main file for 'angular2-in-memory-web-api' in the packages variable in systemjs.config.js:

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

Before I added this, there was a 404 error logged for /node_modules/angular2-in-memory-web-api/ where it seemed to be trying to load a JavaScript file. Now it loads /node_modules/angular2-in-memory-web-api/index.js and the other files in this module.

Answer 3

Toni, You need to add the typings for Angular2-in-memory-web-api.

Add them in your TS file.

/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”

Answer 4

This solved the 404 problem

From Angular in-memory-web-api Documentation

Always import the InMemoryWebApiModule after the HttpModule to ensure that the XHRBackend provider of the InMemoryWebApiModule supersedes all others.

Module imports should have InMemoryWebApiModule listed after HttpModule

@NgModule({
imports:      [ BrowserModule,
              AppRoutingModule,
              FormsModule,
              HttpModule,
              InMemoryWebApiModule.forRoot(InMemoryDataService),
              ...

Answer 5

As for projects created using current CLI Tools, it worked for me by installing

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

and then performing import as

import { InMemoryWebApiModule } from 'angular-in-memory-web-api/in-memory-web-api.module';

My package.json

> "dependencies": {
>     "@angular/common": "^2.4.0",
>     "@angular/compiler": "^2.4.0",
>     "@angular/core": "^2.4.0",
>     "@angular/forms": "^2.4.0",
>     "@angular/http": "^2.4.0",
>     "@angular/platform-browser": "^2.4.0",
>     "@angular/platform-browser-dynamic": "^2.4.0",
>     "@angular/router": "^3.4.0",
>     "angular-in-memory-web-api": "^0.3.1",
>     "core-js": "^2.4.1",
>     "rxjs": "^5.1.0",
>     "zone.js": "^0.7.6"   },

>     "devDependencies": {
>     "@angular/cli": "1.0.0-rc.4",
>     "@angular/compiler-cli": "^2.4.0",
>     "@types/jasmine": "2.5.38",
>     "@types/node": "~6.0.60",
>     "codelyzer": "~2.0.0",
>     "jasmine-core": "~2.5.2",
>     "jasmine-spec-reporter": "~3.2.0",
>     "karma": "~1.4.1",
>     "karma-chrome-launcher": "~2.0.0",
>     "karma-cli": "~1.0.1",
>     "karma-jasmine": "~1.1.0",
>     "karma-jasmine-html-reporter": "^0.2.2",
>     "karma-coverage-istanbul-reporter": "^0.2.0",
>     "protractor": "~5.1.0",
>     "ts-node": "~2.0.0",
>     "tslint": "~4.5.0",
>     "typescript": "~2.0.0"   }

Answer 6

For me the only solution was to upgrade angular2-in-memory-web-api to 0.0.10.

In package.json set

'angular2-in-memory-web-api': '0.0.10'

in the dependecies block, and in systemjs.config.js set

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

in the packages object.