current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 3 down vote favorite

I'm trying to build the 5 min app in angular 2 by this guide: https://angular.io/docs/ts/latest/tutorial/toh-pt6.html.

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

http://localhost:4200/vendor/angular2-in-memory-web-api/in-memory-backend.service.js
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) {
  enableProdMode();
}

bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS,
  HTTP_PROVIDERS,
  { 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?

share|improve this question
up vote 2 down vote accepted

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.
  '@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 */
];



    // Apply the CLI SystemJS configuration.
    System.config({
      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:

   'angular2-in-memory-web-api/**/**/*.js'`

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

share|improve this answer
    
still getting the same error. – Stav Alfi Jul 8 at 22:06
    
Yes sorry, there was the error, I updated, and tested, no error for me now. – JS_astronauts Jul 8 at 22:22
    
Just to make sure: I added to : dist/system-config.js and to src/system-config.ts. But I do get the same error: "localhost:4200/vendor/angular2-in-memory-web-api/… Failed to load resource: the server responded with a status of 404 (Not Found)" – Stav Alfi Jul 8 at 22:30
1  
ok, try restart the server and run ng build before ng serve – JS_astronauts Jul 8 at 22:40
    
Works! Please add your last comment to the solution for rest of the people that will get this error. Thank you very much, I really appreciate your help! – Stav Alfi Jul 8 at 22:45
up vote 1 down vote

Adding answer for latest versions of angular2-in-memory-web-api since I've been hours trying to find 404 errors as well.

1)First of all angular2-in-memory-web-api is now deprecated for new angular-in-memory-web-api, this means you need to make sure to change your package.json to have latest version:

"angular2-in-memory-web-api": "0.0.6",

would need to change to something like:

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

2)Remember to modify systemjs.config.js (if in angular page tutorial for example as my case):

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

3)In your module imports change to the latest version:

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

needs to change to the new declaration:

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

4)Then rerun npm install and tha app should run with the latest version without any glitches. This solved the problem form me.

share|improve this answer
1  
I like this. What threw me was the "angular2-in-memory-web-api" is not the latest. Following these instructions exactly fixed me up. Thanks! – newslacker Nov 2 at 16:48

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.