ng run test return error - TypeError: _this.handler.handle is not a function

Question

I created the c3 bar-chart with angular 5.2.0. All are working fine. But I just want to run the test using karma and jasmine with npm run test. But I got the following issues. I hope it's related to rxjs function. But I can't understand the error core. Please help anyone to solve this.

TypeError: _this.handler.handle is not a function
    at MergeMapSubscriber.project (http://localhost:9876/_karma_webpack_/webpack:/C:/Workspace/datawens-master/node_modules/@angular/common/esm5/http.js:1466:80)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._tryNext (http://localhost:9876/_karma_webpack_/webpack:/C:/Workspace/datawens-master/node_modules/rxjs/_esm5/operators/mergeMap.js:128:1)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._next (http://localhost:9876/_karma_webpack_/webpack:/C:/Workspace/datawens-master/node_modules/rxjs/_esm5/operators/mergeMap.js:118:1)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber.next (http://localhost:9876/_karma_webpack_/webpack:/C:/Workspace/datawens-master/node_modules/rxjs/_esm5/Subscriber.js:92:1)
    at ScalarObservable.webpackJsonp.../../../../rxjs/_esm5/observable/ScalarObservable.js.ScalarObservable._subscribe (http://localhost:9876/_karma_webpack_/webpack:/C:/Workspace/datawens-master/node_modules/rxjs/_esm5/observable/ScalarObservable.js:51:1)
    at ScalarObservable.webpackJsonp.../../../../rxjs/_esm5/Observable.js.Observable._trySubscribe (http://localhost:9876/_karma_webpack_/webpack:/C:/Workspace/datawens-master/node_modules/rxjs/_esm5/Observable.js:172:1)
    at ScalarObservable.webpackJsonp.../../../../rxjs/_esm5/Observable.js.Observable.subscribe (http://localhost:9876/_karma_webpack_/webpack:/C:/Workspace/datawens-master/node_modules/rxjs/_esm5/Observable.js:160:1)
    at MergeMapOperator.webpackJsonp.../../../../rxjs/_esm5/operators/mergeMap.js.MergeMapOperator.call (http://localhost:9876/_karma_webpack_/webpack:/C:/Workspace/datawens-master/node_modules/rxjs/_esm5/operators/mergeMap.js:92:1)
    at Observable.webpackJsonp.../../../../rxjs/_esm5/Observable.js.Observable.subscribe (http://localhost:9876/_karma_webpack_/webpack:/C:/Workspace/datawens-master/node_modules/rxjs/_esm5/Observable.js:157:1)
    at FilterOperator.webpackJsonp.../../../../rxjs/_esm5/operators/filter.js.FilterOperator.call (http://localhost:9876/_karma_webpack_/webpack:/C:/Workspace/datawens-master/node_modules/rxjs/_esm5/operators/filter.js:61:1)

Answer 1

I was able to solve this issue by making the following changes in my app.module.ts. Hope this helps.

import { HttpClient } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
...
...

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    CameraPage,
  ],
  imports: [
    BrowserModule,
//  HttpClient,
   HttpClientModule,

Answer 2

I ran across this problem while attempting to convert my tests to use HttpTestingController. This answer simply suppresses the problem and prints it to the console. There is a lot that I still do not understand for my solution below, but hopefully it can help someone.

The problem in my application was that I was providing HttpHandler in my providers list. This was causing _this.handler to be an HttpHandler at the offending line in http.js, in the stack trace.

var /** @type {?} */ events$ = concatMap.call(of(req), function (req) { return _this.handler.handle(req); });

I removed HttpHandler from the providers in my TestBed.configureTestModule and then _this.handler was an HttpInterceptorHandler which had the appropriate handle function.

Answer 3

Seems like a subscribe without error handling can cause this, as stated here. The answer in that link provides the following example:

user_login() {
this.userService.login(credentials).subscribe((res) => {
console.log(res);
}, (error) => {
console.log(error);
});