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 test my components. First I tried without async block, in that case , unit test just get execute only till fixture.detectChanges() call, code after that doesn't get executed. Seems like fixture.detectChanges call getting blocked infinitely.

I tried by including code in async block. Then I get following error. Error:Failed to execute 'send' on 'XMLHttpRequest' : Failed to load 'ng:///DynamicTestModule/module.ngfactory.js'

Code without async

beforeeach(()=> {
TestBed.configureTestingModule({
imports:[],
declaration :[Mycomp],
providers:[{ provide:MyService, useclass:MyMockService}]
});
 fixture=TestBed.createComponent(Mycomp);
 console.log(' before detect changes'):
 fixture.detectChanges():
 console.log('after detect changes');// this is not getting   
    logged .. karma shows 0 of 1 executed successfully

 });

With async

  beforeeach(async(()=> {
 TestBed.configureTestingModule({
  imports:[],
  declaration :[Mycomp],
  providers:[{ provide:MyService,       useclass:MyMockService}]
  });
   fixture=TestBed.createComponent(Mycomp);
    fixture.detectChanges():
  }));

getting error Failed to load dynamictestmodule/module.ngfactory.js

user_6240026 · Answer

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

user_3005925 · Answer

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

user_1053498 · Answer

I just had this issue as well. It turned out to be a simple null reference error in my component in one of my *ngIf checks.

I would suggest running ng serve and checking the component is working in the browser without any errors, or simply run ng test --source-map=false to get a more useful error message.

user_639035 · Answer

I had the same error when I accessed a variable of an undefined object.

Example:

Component:

soemthing = {}

Template:

...

So something was defined, anotherthing was undefined and data could therefor not be accessed.

Very annoying error and as far as I could tell not in the list yet :)

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

10 Answers