Angular 2 unit testing - getting error Failed to load 'ng:///DynamicTestModule/module.ngfactory.js'

Question

I have angular 2 webpack application, all webpack,karma configuration created as per angular.io webpack guide. I am not using aot. I am writing jasmine unit test spec to te

Answer 1

This is the most deceiving error message that I've ever encountered in Angular.

In my case it had nothing to do with sending, nothing to do with XmlHttpRequest - at least not on the level you'd guess when trying to follow the message.

It was too about mocking a class, namely ngrx/store. I introduced two Observable methods in a container that had not been included in my mock-up class before and I forgot to do so when I started using those. Once added to the mock-up, the error went away.

...leaving Karma happy to be able to execute 'send' from the XmlHttpRequest whatever it means.

Answer 2

In my case, my mock service was missing some public variables accessed by the component in the ngOnInit method.

Answer 3

Adding on to Dan Field's answer

This is a problem with the Angular Cli version 1.2.2 or newer. Run your test with --sourcemaps=false and you will get the right error messages.

ng test --sourcemaps=false

shorthand for this is:

ng test -sm=false

See details here: https://github.com/angular/angular-cli/issues/7296

Answer 4

I also had this issue and it was due to malformed mocked data. In my component I had a service which made a http call.

something like: (service code)

getData() {
   return this.http.get(obj);
}

In the component I called this function and subscribed to it: (component code)

this.service.getData().subscribe((data) => {
  this.componentData = data.things; //**<=== part that broke everything**
}, (error) => {
  console.log(error);
});

Solution:

When I mocked out the service function I failed to return data that had the attribute things. This is what caused the XMLHttpRequest failure, I guess to angular it looked like the error happened as if it was the HTTP request. Making sure that I returned the correct attributes on any mocked HTTP requests fixed the issues.

Hope this clears things up. Below is the code for the implementation of the mock.

(component.specs)

function fakeSubscribe(returnValue,errorValue) {
  return {
    subscribe:function(callback,error){
      callback(returnValue);
      error(errorValue);
    }
  }
}



 class MockService {
      getData() {
        var fakeData = {
          things:[]
        }
        return fakeSubscribe(fakeData,0);
      }
   }

Answer 5

I was bitten by the same error next day - this time the problem was buried in the HTML file. Using a simple array length test for *ngIf

<ng-container *ngIf="myArray.length > 0">

had to be refactored into

<ng-container *ngIf="myArrayNotEmpty">

with a getter as in:

get myArrayNotEmpty(){
  return this.myArray && this.myArray.length > 0;
}

I am a bit irritated though that such a variety of causes is covered by one very misleading and unhelpful message.

Answer 6

To find out what's really causing the error, disable source maps:

For angular-cli >= v6.x:

ng test --source-map=false

For angular-cli v1.x:

ng test -sm=false

You will then see a better error, e.g. "Cannot read property 'x' of undefined" in the actual source file that's causing the error. For some reason, there's a bug with sourcemaps right now in testing, and you just get this cryptic error.