Stav Alfi Stav Alfi - 1 year ago 1216
Javascript Question

angular2-in-memory-web-api 404 error

I'm trying to build the 5 min app in angular 2 by this guide:

In the http part, I added a fake server but I get 404 error because the angular2-in-memory-web-api.

Failed to load resource: the server responded with a status of 404 (Not Found)

I was trying to follow this answer: Angular2 Tutorial (Tour of Heroes): Cannot find module 'angular2-in-memory-web-api'

But he didn't use angular-cli + I don't have a clue where to add those dependencies they talked about there.

My main.ts:

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

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

// The usual bootstrapping imports
import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppComponent, environment } from './app/';
import { APP_ROUTER_PROVIDERS } from './app/app.routes';
import { HTTP_PROVIDERS } from '@angular/http';
if (environment.production) {

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

This is my package.json:

"name": "angular2-projects",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"postinstall": "typings install",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
"private": true,
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angupackage.lar/router": "3.0.0-beta.1",
"@angular/router-deprecated": "2.0.0-rc.2",
"es6-shim": "0.35.1",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"zone.js": "0.6.12"
"devDependencies": {
"angular-cli": "1.0.0-beta.9",
"codelyzer": "0.0.20",
"ember-cli-inject-live-reload": "1.4.0",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "0.13.22",
"karma-chrome-launcher": "0.2.3",
"karma-jasmine": "0.3.8",
"protractor": "3.3.0",
"ts-node": "0.5.5",
"tslint": "3.11.0",
"typescript": "1.8.10",
"typings": "0.8.1"

What do I need to do to make that error go away?

Answer Source

First, you need to npm i angular2-in-memory-web-api --save

Then in main.ts:

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

in src/system-config.js:

const barrels: string[] = [
  // Angular specific barrels.

  // Thirdparty barrels.

  // App specific barrels.
  /** @cli-barrel */

    // Apply the CLI SystemJS configuration.
      map: {
        '@angular': 'vendor/@angular',
        'rxjs': 'vendor/rxjs',
        'main': 'main.js',
        'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'

and add this to angular-cli-build.js in your projects root directory:


Finally restart the server and run ng build before ng serve.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download