Uncaught (in promise): TypeError: Cannot call a class as a function error

[rakshit]

I tried to implement daterange picker component with Angular 9 project.

I followed all the steps mentioned in document to use date range picker control. After successful build I got below runtime error.

ERROR Error: Uncaught (in promise): TypeError: Cannot call a class as a function

TypeError: Cannot call a class as a function

    at _classCallCheck (classCallCheck.js:3)

    at new DateRangePicker (ej2-calendars.es2015.js:4830)

    at DateRangePickerComponent.<anonymous> (createSuper.js:12)

    at new DateRangePickerComponent (daterangepicker.component.ts:48)

    at NodeInjectorFactory.DateRangePickerComponent_Factory [as factory] (daterangepicker.component.ts:86)

    at getNodeInjectable (core.js:3913)

    at instantiateAllDirectives (core.js:7973)

    at createDirectivesInstances (core.js:7356)

Can you please help me to identify what is the issue or am I missing anything.

Thanks.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Rakshit,

 

Greetings from Syncfusion support.

 

We have checked your query and also we tried to replicate the issue in Angular version 9 as you mentioned. Unfortunately, we could not replicate the issue reported. We suggest you to follow the below kb to integrate Daterangepicker with Angular 9. Here we attached the ensured sample. Also we suggest you to clear the caches and duplicate dependencies by referring the below link.

Nuget cache clear UG: https://www.syncfusion.com/kb/6987/how-to-clear-nuget-cache

Dependency update UG: https://ej2.syncfusion.com/documentation/common/how-to/update-npm-package/

KB Link : https://www.syncfusion.com/kb/11147/how-to-get-started-easily-with-syncfusion-angular-9-datepicker

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Daterangepicker-2039868786 

Screenshot:

 

 

If we misunderstood your query, kindly get back to us with some elaboration about the issue or share the exact angular version or if possible reproduce the reported issue in the attached sample.

Regards, 

Jeyanth.

[Eric Solari]

I'm getting this same error in Angular 10.

core.js:4197 ERROR Error: Uncaught (in promise): TypeError: Cannot call a class as a function

TypeError: Cannot call a class as a function

    at _classCallCheck (classCallCheck.js:3)

    at new DateTimePicker (ej2-calendars.es2015.js:11481)

    at DateTimePickerComponent.<anonymous> (createSuper.js:12)

    at new DateTimePickerComponent (datetimepicker.component.ts:34)

    at NodeInjectorFactory.DateTimePickerComponent_Factory [as factory] (datetimepicker.component.ts:79)

    at getNodeInjectable (core.js:4029)

    at instantiateAllDirectives (core.js:7965)

    at createDirectivesInstances (core.js:7330)

    at Module.ɵɵelementStart (core.js:13903)

    at EditEventModalComponent_Template (edit-event-modal.component.html:32)

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Eric, 

Greetings from Syncfusion support. 

We have validated your query. We suspect that you have migrated from any of the older angular versions to the latest Angular 10. We suggest you to upgrade the angular version to 10 by upgrading the current version to the next major version. Please refer the below blogs for further reference. 

- https://update.angular.io/#7.0:10.0   

- https://www.angularjswiki.com/angular/update-angular-cli-version-ng-update-to-latest-6-7-versions/ 

   

    

Also we request you to check the configuration files in your angular project as Angular have changed some migrations with respect to compiler options. We also suspect that the issue might occur due to typescript compiler is targeting the es5 or esnext. So as recommended in the Angular 10 update guidance, we suggest you to change the target of the compiler to es2015 or es 2020 to resolve the issue.


 

{ 

  "compileOnSave": false, 

  "compilerOptions": { 

    "baseUrl": "./", 

    "outDir": "./dist/out-tsc", 

    "sourceMap": true, 

    "declaration": false, 

    "module": "esnext", 

    "moduleResolution": "node", 

    "emitDecoratorMetadata": true, 

    "experimentalDecorators": true, 

    "target": "es2020", 

    "typeRoots": [ 

      "node_modules/@types" 

    ], 

    "lib": [ 

      "es2018", 

      "dom" 

    ] 

  } 

} 

  

Please refer the below UG link for further references.

Angular UG: https://angular.io/guide/migration-update-module-and-target-compiler-options#update-module-and-target-compiler-options-migration 

Regards, 

Jeyanth. 

[Rebecchi]

Hi,

thanks for your response, I have the same issue on my app. By changing the target to es2020 (instead of es5) it's working fine, but with this target my app is not working on internet explorer 11.

Can you fix it ?

Thanks

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Rebecchi, 

Thanks for your update.

Since IE does not support es2015 and later features, there is a special mechanism to make working our app in IE. To achieve this requuirement, Angular has provided Differential Loading that allows our application to support multiple browsers. Please refer the below angular guide to make the application compatible with IE.

Angular UG :      https://angular.io/guide/deployment#differential-loading 

Once configured above steps, run the application using the below command.


 

"ng serve --configuration es5" 

While running the above command, if you are facing the issue with es5 configuration. Please refer the below StackOverflow link to resolve the issue.

 StackOverflow link        : https://stackoverflow.com/questions/57722619/an-unhandled-exception-occurred-configuration-es5-is-not-set-in-the-workspace 

Also you can refer polyfills to run the angular application in IE. Please refer the below blog for further reference. 

https://medium.com/better-programming/how-to-fix-your-angular-app-when-its-not-working-in-ie11-eb24cb6d9920 

Regards, 

Jeyanth. 

[Søren Hylle]

Hi there 

I have had a few days with this "Cannot call a class as a function"-error.

I tried everything I could think of, but every time i ran "ng build" and ran the project from the dist folder, I got that  "Cannot call a class as a function"-error in the browser.

Finally I found out that running "ng build --watch" did something different (I don't know what) and I could load the pages with that error.

Maybe this clue can help others in the same predicament. Have a good one.

[Berly Christopher]

Hi Søren, 

  

Thanks for the update. Please get back to us if you need any further assistance on this.  

  

Regards, 

Berly B.C 

[Bentus]

Hello Syncfusion Support.

We encounter the same error message here with Angular 11 and "es5" target (for IE11 support).

The project works fine in Chrome and Firefox with "ng serve" unless we include syncfusion components in it. Then the browsers throw "TypeError: Cannot call a class as a function".

I've attached a simple Angular 11 project (created with the Angular 11 cli) for reproducing the error. 

Attachment: ng11ejs18_fba5163a.zip

[Dennes]

Hi! 

same happening here with angular 10

[Gayathri KarunaiAnandam]

Hi All, 

 

Please follow the following steps in your application to resolve the reported issue. 

 

1) Add the CSS file in styles.css. 

2) Add the below code in tsconfig.json 

    "target": "es2020" 

3) Create the file tsconfig-es5-app.json. We have added the file in the sample we have attached below. 

4) Add the below code in the angular.json file in the location architect->build->configuration. 

    "es5": { 

       "tsConfig": "./tsconfig-es5.app.json" 

     } 

5) Add the below code in the angular.json file in the location architect->serve->configuration. 

    "es5": { 

       "browserTarget": "demo:build:es5" 

     } 

6) In the app.component.ts file add name "demo" in the selector. 

7) To run the application in the IE browser, use the following command. 

     ng serve --configuration es5 

8) To run the application in other browsers, use the following command. 

     ng serve 

  

We have also prepared a sample demonstrating the solution. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Gayathri K 

[Sam]

So you have a serve command for ie and a serve command for other browsers, the same for production builds. In other words, you need one version of your website for ie and another for other browsers? 

[YuvanShankar Arunagiri]

Hi Sam,

Sorry for the delay. We don’t provide a specific version to support IE11 and another for other browsers in our Syncfusion Angular packages.

Regards,

YuvanShankar A