angular2-in-memory-web-api 404 error

Deadly 提交于 2019-12-05 10:51:20

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.

user1151647

Answering to an old post, however my solution was different so i thought i will post it here.

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

The reason was in my app.module.ts i had imported the InMemoryWebApiModule prior to HttpModule. putting the InMemoryWebApiModule after HttpModule (and it should be like that undoubtedly) did the trick.

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
]

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.

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!