angular-in-memory-web-api

0.21.0 verified Sat Apr 25 auth: no javascript

An in-memory web API for Angular demos and tests, version 0.21.0. This package simulates a REST API backend for prototyping and testing Angular applications without a real server. It intercepts HttpClient requests and responds with mock data. Supported by the Angular team, it follows Angular's release cadence. Different from full mock libraries (e.g., json-server), it integrates directly with Angular's HTTP interceptors and dependency injection, making it seamless for development and testing. Note: It requires Angular 21+ and rxjs 6.5.3+ or 7.4.0+. Types included.

Common errors

error Error: Cannot find module 'angular-in-memory-web-api' ↓

cause Package not installed or import path incorrect.

fix

Run 'npm install angular-in-memory-web-api --save-dev'.

error NullInjectorError: No provider for InMemoryDbService! ↓

cause Missing InMemoryDataService class or forgot to pass it to .forRoot().

fix

Implement InMemoryDbService and pass the class to HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService).

error Error: Unexpected value 'HttpClientInMemoryWebApiModule' imported by the module 'AppModule'. Please add a @NgModule annotation. ↓

cause Incorrect import: using deprecated InMemoryWebApiModule or wrong module.

fix

Import HttpClientInMemoryWebApiModule from 'angular-in-memory-web-api'.

error TypeError: Cannot read properties of undefined (reading 'heroes') ↓

cause createDb() returns an object with property name not matching the URL path.

fix

Ensure the property name in createDb() matches the resource name in your service (e.g., 'heroes' for /api/heroes).

Warnings

deprecated InMemoryWebApiModule has been deprecated since v0.15. Use HttpClientInMemoryWebApiModule instead. ↓

fix Replace InMemoryWebApiModule with HttpClientInMemoryWebApiModule.

breaking In v0.21, peer dependencies require Angular 21+. Installation will fail with older Angular versions. ↓

fix Upgrade to Angular 21 or use an older version of angular-in-memory-web-api (e.g., 0.20.x).

gotcha Do not use InMemoryWebApiModule in production. It is intended for development and testing only. ↓

fix Remove the import in production builds or use environment flags.

gotcha The library suppresses actual HTTP requests; your app will not make real API calls. Ensure you only enable it in non-production environments. ↓

fix Use Angular environment configuration to conditionally import the module.

gotcha If dataEncapsulation is true (default), the response is wrapped in a 'data' property. Many examples set it to false for simpler responses. ↓

fix Set dataEncapsulation: false in options if you want raw array responses.

Install

npm install angular-in-memory-web-api

yarn add angular-in-memory-web-api

pnpm add angular-in-memory-web-api

Imports

HttpClientInMemoryWebApiModule

wrong

const HttpClientInMemoryWebApiModule = require('angular-in-memory-web-api').HttpClientInMemoryWebApiModule;

correct

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

ESM-only. Cannot use require().

InMemoryDbService

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

Interface to implement for mock data.

RequestInfo

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

For custom request handling.

InMemoryWebApiModule

wrong

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

correct

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

InMemoryWebApiModule is deprecated; use HttpClientInMemoryWebApiModule.

Quickstart

Shows how to create an in-memory database service and register it with the module.

import { Injectable } from '@angular/core';
import { InMemoryDbService } from 'angular-in-memory-web-api';

@Injectable({ providedIn: 'root' })
export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const heroes = [
      { id: 12, name: 'Dr. Nice' },
      { id: 13, name: 'Bombasto' },
      { id: 14, name: 'Celeritas' }
    ];
    return { heroes };
  }
}

// In AppModule:
import { HttpClientModule } from '@angular/common/http';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';

@NgModule({
  imports: [
    HttpClientModule,
    HttpClientInMemoryWebApiModule.forRoot(
      InMemoryDataService, { delay: 500, dataEncapsulation: false }
    )
  ]
})
export class AppModule { }