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:

app/main.ts(5,51): error TS2307: Cannot find module 'angular2-in-memory-web-api'.

(Visual Studio Code gives me the same error within main.ts - red wavy underlining.)

Here is my systemjs.config.js:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

Here is my app/main.ts:

// Imports for loading & configuring the in-memory web api
import { provide }    from '@angular/core';
import { XHRBackend } from '@angular/http';

import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { InMemoryDataService }               from './in-memory-data.service';

// The usual bootstrapping imports
import { bootstrap }      from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';

import { AppComponent }   from './app.component';

bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
    provide(SEED_DATA,  { useClass: InMemoryDataService })     // in-mem server data
]);

Answer 1

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 2

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.

Answer 3

Here is what worked for me:

I noticed that the package.json had the following version:

"angular2-in-memory-web-api": "0.0.20"

Note the "2" in the name.

However when referencing InMemoryWebApiModule it was using 'angular-in-memory-web-api' without the 2 in the name. So I added it and it resolved the issue:

import { InMemoryWebApiModule } from 'angular2-in-memory-web-api';

Note: I found this in notice section of https://github.com/angular/in-memory-web-api

As of v.0.1.0, the npm package was renamed from angular2-in-memory-web-api to its current name, angular-in-memory-web-api. All versions after 0.0.21 are shipped under this name. Be sure to update your package.json and import statements.

Answer 4

Angular 4 Changes

As of October 17, 2017, the tutorial fails to mention that angular-in-memory-web-api is not included in a standard CLI build, and must be installed separately. This can be easily done with npm:

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

This automatically handles the necessary changes to package.json, so you don't need to make edits yourself.

Points of confusion

This thread is quite confusing as the Angular CLI has changed significantly since this thread was started; a problem with many rapidly-evolving APIs.

• angular-in-memory-web-api has been renamed; it drops the 2 from angular2 to simply angular
• The Angular CLI no longer uses SystemJS (replaced by Webpack), so systemjs.config.js no longer exists.
• npm's package.json should not be edited directly; use the CLI.

Solution

As of October 2017, the best fix is to simply install it yourself using npm, as I mentioned above:

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

Good luck out there!