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

AngularKarma RunnerAngular Routing

Angular Problem Overview


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)

Angular Solutions


Solution 1 - Angular

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()}]

Solution 2 - Angular

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).

Solution 3 - Angular

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.

Solution 4 - Angular

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

Solution 5 - Angular

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAniruddha DasView Question on Stackoverflow
Solution 1 - AngularabahetView Answer on Stackoverflow
Solution 2 - Angularmaxime1992View Answer on Stackoverflow
Solution 3 - Angularenf0rcerView Answer on Stackoverflow
Solution 4 - AngularMichael LaffargueView Answer on Stackoverflow
Solution 5 - Angular6by3View Answer on Stackoverflow