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 encountered a similar problem. I just downloaded the entire example near the end of part 7 (last part) of the tutorial and ran it. It worked.

Of course, you need to install and compile everything first.

> npm install
> npm start

I also changed 'app-root' to 'my-app' in app.component.ts.

Answer 2

As of latest (currently 0.1.14), this is what's stated in the CHANGELOG

In systemjs.config.js you should change the mapping to:

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

then delete from packages:

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

Answer 3

in app\main.ts simply modify:

import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';

to:

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

then add the index.js parameter in

var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main:'index.js', defaultExtension: 'js' }
};

in systemjs.config.js

it's work for me.

Answer 4

It works for me:

In package.json dependencies block set ( use "angular" instead of "angular2")

"angular-in-memory-web-api": "^0.3.2",

Then run

 npm install

OR

simply just run (my preferable)

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

Answer 5

If you are using angular cli, you would get this error.

Please add 'angular2-in-memory-web-api' in the const barrels in the system-config.ts file as below:

 const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/forms',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',
  'angular2-in-memory-web-api',

  // App specific barrels.
  'app',
  'app/shared',
  /** @cli-barrel */
];

And add 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api' as below.

System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js',
    'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'
  },
  packages: cliSystemConfigPackages,

});

Rebuild using npm start. This resolved the issue for me.

Answer 6

Changing this line, as suggested above, worked for me in the Angular 2 Heroes Tutorial:

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