Angular in memory web api null body in post

I had the same problem as yourself. After playing around with the in-memory-web-api trying to override the post method similar to the readme notes for the parseRequestUrl I didn't have much success; only getting part way there.

Instead I've opted to use the Angular HttpInterceptor which seems like the logical decision now looking back.

Create a HTTP interceptor class that checks for a null POST body. If found, clone the request as it should be considered immutable and set the body to an empty object {}. If there is a POST body then continue on with the request as normal. Then import the interceptor in the AppModule and include in the modules providers array.

Create file http-post-interceptor.ts

import { Injectable } from '@angular/core';
import {
 HttpEvent,
 HttpInterceptor,
 HttpHandler,
 HttpRequest
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class HttpPostInterceptor implements HttpInterceptor {
  constructor() {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // if request body is falsey
    if (!req.body) {
      // clone immutable request and set empty POST body
      const request = req.clone({ body: {} });
      // continue with our modified POST request
      return next.handle(request);
    }
    // else continue with the unmodified POST
    return next.handle(req);
  }
}

Import the HttpPostInterceptor and HTTP_INTERCEPTORS into app.module.ts

// ...
import { /*...*/ HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpPostInterceptor } from './http-post-interceptor';
// ...

@NgModule({
  // ...
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HttpPostInterceptor, multi: true }
  ],
  // ...
})

That's all there is to it.

This has solved the problem for me in my local environment so I'm no longer getting the errors noted in your question.

Disable in production build

Since in-memory-web-api is typically a non-production tool you may want to exclude this in your production build. Do so by importing your environment settings and performing a check if the production property is true or false. This could be done either in the interceptor or the module as per your needs. An example below is showing this via the AppModule.

Import your environment settings into app.module.ts

// ...
import { environment } from '../environments/environment'; 
// ...

@NgModule({
  // ...
  providers: [
    environment.production ? [] :
      { provide: HTTP_INTERCEPTORS, useClass: HttpPostInterceptor, multi: true }
  ]
  // ...
})

Note: some import paths may differ depending on your project structure and if you are using Angular 6, notably the Observable import from rxjs