104

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
]);
Evan Carroll
  • 78,363
  • 46
  • 261
  • 468
toni
  • 2,270
  • 3
  • 22
  • 27

29 Answers29

102

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"   }
mohit mathur
  • 1,094
  • 1
  • 7
  • 10
  • 1
    Thanks, also I had to import InMemoryDbService as : import { InMemoryDbService } from 'angular-in-memory-web-api/in-memory-backend.service'; – Baris Atamer May 16 '17 at 15:15
  • 4
    After running the `npm install` command, I got version 0.3.2. With that version, I could just `import { InMemoryWebApiModule } from 'angular-in-memory-web-api';` as described in the tour. – comecme Jul 02 '17 at 18:45
  • As @comecme pointed out, after running `npm install`, `import { InMemoryWebApiModule } from 'angular-in-memory-web-api'` works. – ajay_whiz Aug 16 '17 at 15:26
69

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.

traneHead
  • 986
  • 10
  • 15
  • 4
    That fixed the module error. After that I got 404 errors - I needed to specify `'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }` in the systemjs.config.js file (see answer by @GrantTaylor) . – toni May 23 '16 at 12:25
  • If you use Windows command prompt, then CD to the node_modules folder, run "npm update angular2-in-memory-web-api". And then restart the light server. – ZZZ May 25 '16 at 12:03
  • 4
    Of particular note, if you are using angular-cli to develop your application, then you must add `'angular2-in-memory-web-api/**/*.+(js|js.map)'` to the `vendorNpmFiles` array in the angular-cli-build.js file. Aftewards, you must point your system-config map like so: `'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'`. And then rerun `ng serve` (or `npm start`) so that the angular2-in-memory-web-api files end up in the dist/vendor folder. – ofShard Jul 02 '16 at 21:11
  • 4
    If you're using the Angular 2 Eclipse plugin, the following line goes in package.json, in the `dependencies` section: `"angular-in-memory-web-api": "0.1.1"`. I had to run `npm install` from the project folder afterwards, though. – João Mendes Sep 29 '16 at 14:45
  • 1
    I am still facing this problem :( even after following the required steps – Hassan Tariq Oct 19 '16 at 06:50
  • 5
    I don’t even have a systemjs.config.js file anywhere in my project. I’m using Angular4, though. – bleistift2 Jul 29 '17 at 10:10
  • I configured angular CLI to use yarn, and running `yarn add angular-in-memory-web-api --save` worked out of the box. – Gabriel Belingueres Aug 01 '17 at 19:53
  • 1
    Make sure that the new version of in-memory-web-api is angular-, not angular2-... https://www.npmjs.com/package/angular-in-memory-web-api Also note the version dependencies between Angular and the in-memory-web-api, there have been recent breaking changes.. read the CHANGELOG – remkohdev Oct 03 '17 at 22:52
21

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.

Exocomp
  • 1,477
  • 2
  • 20
  • 29
18

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!

Master of Ducks
  • 559
  • 6
  • 11
  • Also you may need to update the package.json file with zone.js to 0.8.4 then run npm update and then try the install above. – Jason Oct 23 '17 at 17:49
  • 1
    Am facing a new issue here Cannot find module './in-memory-data.service'. – Kannan T Oct 26 '17 at 18:33
  • @kannan - 1. Did you install `angular-in-memory-web-api` with `npm`? 2. Is there an entry for `angular-in-memory-web-api` in your `package.json`? 3. try killing and restarting the Angular CLI: `Ctrl+C` to kill; `ng serve` to restart). Sometimes the CLI acts weird (Ditto for the Angular plugin for VSCode) – Master of Ducks Oct 29 '17 at 08:46
  • @MasterofDucks Bro solved this yesterday the problem was i haven't created the file that is why. thanks for your help :) – Kannan T Oct 29 '17 at 08:50
15

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
Tushar Ghosh
  • 942
  • 1
  • 12
  • 18
14

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.

Grant Taylor
  • 143
  • 6
10

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),
              ...
Vamsi
  • 419
  • 4
  • 7
  • 1
    It's also crucial that it comes after importing routes like AppRoutingModule in the Angular2 demo. I had AppRoutingModule after InMemoryWebApiModule.forRoot(InMemoryDataService) and it breaks everything. – Mark Mar 29 '17 at 12:36
6

From your root folder (the folder contain package.json), using:

npm install angular-in-memory-web-api –-save
Tony
  • 1,106
  • 1
  • 10
  • 17
5

The simplest solution I could think of was to install the package with npm and restart the server:

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

I almost installed the angular2-in-memory-web-api package, but the npm page says:

All versions after 0.0.21 are (or soon will be) shipped under angular-in-memory-web-api.

Note: This solution worked for a project that was created with the CLI tools, which does not list the package as a dependency, and might not solve the problem for projects that were created with the Quickstart seed, which does list the package as a dependency.

Nocturno
  • 9,579
  • 5
  • 31
  • 39
  • My issue was that `ng serve` was still running while this was getting installed. Had to shut it down and restart. – Jorn.Beyers Apr 18 '20 at 20:51
4

I am using angular 4 and below solved my problem.

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

Vishal Biradar
  • 1,219
  • 2
  • 12
  • 24
  • hi even am using angular 4 i had done as you said but am facing a new issue here Cannot find module './in-memory-data.service'. – Kannan T Oct 26 '17 at 18:34
3

This was a real stinker. Thanks to @traneHead, @toni and others, these steps worked for me.

  1. Upgrade angular2-in-memory-web-api to 0.0.10
  2. Edit the packages variable property in systemjs.config.js:

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

AnderSon
  • 71
  • 4
  • This video may also be helpful: [Angular2 Tutorial - HTTP](https://www.youtube.com/watch?v=L7xPwhwbcHE&list=PL55RiY5tL51olfU2IEqr455EYLkrhmh3n&index=14) – AnderSon May 24 '16 at 00:50
3

I create my project using angular-cli and i set in package.json "angular-in-memory-web-api": "^0.2.4" in dependences block and then i run npm install.

Work for me :D

  • Any recommendations on what count be causing this issue? Or what they can configuration they could verify or change to eliminate the issue? Perhaps the contents of your "package.json" could help. – Joshua Briefman Jan 07 '17 at 03:13
3

For users who generated an empty project with angular cli 1.4.9 (Actual on October 2017) and then started follow the instructions step-by-step, just run the following command:

npm i angular-in-memory-web-api

Just that command, without anything additional.

Hope that saves someone's time

Yurii Bratchuk
  • 920
  • 9
  • 12
2

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.

User42
  • 970
  • 1
  • 16
  • 27
Nama
  • 21
  • 3
0

Try adding the typescript definitions:

sudo typings install --save file:./node_modules/angular2-in-memory-web-api/in-memory-backend.service.d.ts

... specifying the dependency name:

angular2-in-memory-web-api

Then add the entry point for "angular2-in-memory-web-api" in /systemjs.config.js

var packages = {
  ...
  'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' }
};
  • I installed the typings like you wrote. That changed the contents of the typings folder (added "\definitions\in-memory-backend.service\index.d.ts" to browser and main subfolders, and added reference in browser.d.ts and main.d.ts files). What do you mean by "specifying the dependency name"?. I added the entry point as you specified. But my error still persists. – toni May 23 '16 at 10:51
  • When you run "sudo typings install...", typings should ask you "What is the dependency name?" and then you can enter "angular2-in-memory-web-api". – user1014932 May 23 '16 at 18:23
  • My answer applied to angular2-in-memory-web-api v0.0.7 btw. – user1014932 May 23 '16 at 18:29
0

I had the same problem, I changed in systemjs.config :

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

By this line :

'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },
GreenMonkeyBoy
  • 624
  • 4
  • 2
0

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' },
Noam Hacker
  • 4,671
  • 7
  • 34
  • 55
0

I solved it copying index.js and index.d.ts to core.js and core.d.ts, that is, inside node_modules/angular2-in-memory-web-api folder. Go figure out.

Gandhi
  • 11,875
  • 4
  • 39
  • 63
0

The main answer helped me: change

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

to

'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
Coffee-Tea
  • 1,139
  • 9
  • 10
0

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.

Davide Castronovo
  • 1,366
  • 8
  • 21
0

If using angular cli to build your angular2 app, including the angular2-in-memory-web-api involves three steps:

  1. add the api to the system-config.ts file (inside the src subdirectory) like below:

    /** Map relative paths to URLs. */
    const map: any = {
      'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'
    };
    /** User packages configuration. */
    const packages: any = {
      'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
    };
    
  2. Add

    angular2-in-memory-web-api/**/*.+(js|js.map)' 
    

to the vendorNpmFiles array in the angular-cli-build.js file like ofShard mentioned;

  1. Of course, add to the package.json as described by traneHead; for 2.0.0-rc.3 I use the version below:

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

I find this link "Adding material2 to your project" explains the process of adding third-party libraries quite clearly.

aristotll
  • 8,694
  • 6
  • 33
  • 53
Treefish Zhang
  • 1,131
  • 1
  • 15
  • 27
0

Latest fix as of this date, is to

  1. replace all instances of "angular2-in-memory-web-api" with "angular-in-memory-web-api".
  2. Change package.json dependency version from "angular-in-memory-web-api": "0.0.20" to "angular-in-memory-web-api": "0.1.0" and "zone.js": "^0.6.23" to "zone.js": "^0.6.25"
  3. In systemjs.config.js, change the path for index.js. It should look like:
    'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
Shifa Khan
  • 769
  • 6
  • 12
0

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'      
}
Paul Samsotha
  • 205,037
  • 37
  • 486
  • 720
0

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.

edkeveked
  • 17,989
  • 10
  • 55
  • 93
0

For me just doing an install from angular-tour-of-heroes directory works for me

C:\nodejs\angular-tour-of-heroes>npm install angular-in-memory-web-api --save

0

The Best way is to install it using NPM e.g

npm install git+https://github.com/itryan/in-memory-web-api/ --save

it will add required reference

Aamir
  • 695
  • 10
  • 11
0

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.

Chong Lip Phang
  • 8,755
  • 5
  • 65
  • 100
0
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { InMemoryDataService }               from './in-memory-data.service';

The InMemoryDataService class doesn't come under any API. We need to create a service class and then import that service class into app.module.ts file.

Kobi
  • 2,494
  • 15
  • 30
-1

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”
Mithun Pattankar
  • 1,372
  • 1
  • 8
  • 12