angular 4 unit testing error `TypeError: ctor is not a constructor`

96
votes

I am trying to test my route resolver and while testing I got TypeError: ctor is not a constructor and no idea why it happen while typescript compile time no error.

TypeError: ctor is not a constructor
TypeError: ctor is not a constructor
    at _createClass (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42355:26)
    at _createProviderInstance$1 (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42330:26)
    at resolveNgModuleDep (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42315:17)
    at _createClass (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42362:26)
    at _createProviderInstance$1 (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42330:26)
    at resolveNgModuleDep (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42315:17)
    at NgModuleRef_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.NgModuleRef_.get (http://localhost:9877/_karma_webpack_/vendor.bundle.js:43401:16)
    at TestBed.webpackJsonp../node_modules/@angular/core/@angular/core/testing.es5.js.TestBed.get (http://localhost:9877/_karma_webpack_/vendor.bundle.js:48412:47)
    at http://localhost:9877/_karma_webpack_/vendor.bundle.js:48418:61
    at Array.map (native)
5
angularkarma-runnerangular-routing
are you using ng2 bootstrap – Sibiraj
yes. but I am testing route resolver. is that effecting my route resolver even there is not html or css – Aniruddha Das

5 Answers

291
votes

This can be an error in the providers declarations.

When you try to mock a provider and use useClass instead of useValue the error "TypeError: ctor is not a constructor" is fired.

Here is an example that fires the error :

providers: [{provide: OrderService, useClass: new OrderServiceMock()}]

The correct declaration is :

providers: [{provide: OrderService, useValue: new OrderServiceMock()}]
2
votes

I had the exact same message when building my app with AOT.

My problem was not related to providers as @abahet suggested.

It was because I setup a new library which was not AOT compliant (and didn't have any provider either). The library in question had to export (I'm talking about Typescript export, not the one from Angular module) what was imported in the module (in this case, a component and a pipe).

2
votes

I had this problem with Angular Universal in combination with Firebase in a Firebase Universal Starter project. I had almost lost hope as all the potential fixes on stack overflow didnt help. So I did the following:

  1. Update all npm packages with https://www.npmjs.com/package/npm-check-updates
  2. Remove node_modules and .package-lock.json and reinstalled them
  3. Fixed all errors due to changed api's
  4. Now it was working :-)

I never found out what package caused error, but one approach to find out is to create a MockAppModule where you remove modules one by one. Eventually you will find the one with the problem. But in my case I got lucky I guess due to one of the bugged packages got updated or something.

1
votes

Third possibility for you, I had a module containing other modules and didn't export (Typescript speaking) the other modules.

1
votes

I too had this problem with AOT enabled.I added a new service file. I restarted the compiler and the issue is resolved.