Error angular2 -in-memory-web-api 404

Question

I am trying to create a 5 minute application in angular 2 in this guide: https://angular.io/docs/ts/latest/tutorial/toh-pt6.html .

In the http part, I added a fake server, but I got a 404 error because 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 tried to answer this answer: Angular2 Tutorial (Hero Tour): Cannot find the module 'angular2 -in-memory-web-api'

But he did not use angular-cli + I have no clue where to add the dependencies that 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 .json package:

 { "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 this error disappear?

Answer 1

First you need 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 the root directory of the projects:

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

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

Answer 2

Responding to an old post, however, my decision was different, so I thought I'd post it here.

I was getting exactly the same error that was mentioned using the latest package and using angular (4 and above).

The reason was in my app.module.ts I imported InMemoryWebApiModule before HttpModule . InMemoryWebApiModule after the HttpModule (and no doubt it should be), everything HttpModule out.

Wrong

 imports: [ BrowserModule, FormsModule, InMemoryWebApiModule.forRoot(InMemoryDataService), HttpModule, JsonpModule, ] 

Correct

 imports: [ BrowserModule, FormsModule, HttpModule, JsonpModule, InMemoryWebApiModule.forRoot(InMemoryDataService) //this has to be imported after httpModule ] 

Answer 3

Adding an answer for the latest versions of angular2 -in-memory-web-api since I tried to find 404 errors.

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

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

need to change to something like:

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

2) Do not forget to change systemjs.config.js ( if in the angular page tutorial, for example, in my case ):

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

3) Changes to the latest version are imported in your module:

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

need to change to a new ad:

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

4) Then restart npm install and the application should work with the latest version without any crashes. This solved the problem because of me.

Answer 4

you missed the app.module configuration for web-api in memory, here is the tutorial section: angular -toh-simulating-the- web api