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

Answer 1

I ran into this issue myself yesterday. The problem was that I had an Input() property on my component class that I wasn't setting in the test. So for example, in my-component.ts:

@Component({
  selector: 'my-component'
})
export class MyComponent {
  @Input() title: string;
}

and my-component.spec.ts:

beforeEach(() => {
  fixture = TestBed.createComponent(MyComponent);
  component = fixture.componentInstance;
  component.title = 'Hello there!' // <-- this is required!
  fixture.detectChanges();
});

Or you could provide a default value in the component somewhere. Either way, the test will crash if any inputs are not set and you'll get that unintuitive error.

Note: Running ng test -sm=false will give the actual error message causing the problem. Credit: https://stackoverflow.com/a/45802115/61311

Answer 2

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.

Answer 3

running tests with --sourcemaps=false will not fail Karma silently but give you some detail about the error instead.

Answer 4

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